Skip to content

Instantly share code, notes, and snippets.

@stanleykerr

stanleykerr/raw.html

Last active April 19, 2019 22:15
Show Gist options
  • Save stanleykerr/b765c6fa57cb2097681725cdb1ca0f83 to your computer and use it in GitHub Desktop.
Save stanleykerr/b765c6fa57cb2097681725cdb1ca0f83 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
raw.html
<html>
<body>
<div id="container01"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.production.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.production.min.js"></script>
<script>
/*!
* MonthSelector v1.0.0
* MIT Licensed
*/
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.MonthSelector=t(require("react")):e.MonthSelector=t(e.React)}(window,function(e){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([function(t,n){t.exports=e},function(e,t,n){e.exports=n(2)},function(e,t,n){"use strict";n.r(t),n.d(t,"default",function(){return l});var o,r,i=n(0),s=n.n(i),a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e};var l=(o=function(e){function t(n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var o=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,e.call(this,n));r.call(o),o.state={sliderChecked:n.defaultChecked||!1,selected:n.defaultSelected||0},o.updateOptions=o.updateOptions.bind(o),o.clickEffect=new Audio(n.options.options&&n.options.options.soundUrl);var i=n.options&&n.options.style||{},s=n.options&&n.options.options||{};return o.style={container:a({width:"100%",marginRight:"auto",marginLeft:"auto",background:"#ecf0f1",padding:10,fontFamily:"Helvetica",fontWeight:300},i&&i.container),row:{display:"flex",flexWrap:"wrap"},col:{flexBasis:0,flexGrow:1,maxWidth:"100%",alignSelf:"center"},slider:function(){return a({position:"absolute",cursor:"pointer",top:0,left:0,right:0,bottom:0,background:"#bdc3c7",WebkitTransition:".4s",transition:".4s"},i&&i.unselected&&i.unselected.slider,s.rounded&&{borderRadius:34},o.state.sliderChecked&&a({background:"#3498db"},i&&i.selected&&i.selected.slider))},slider_before:function(){return a({position:"absolute",height:26,width:26,left:4,bottom:4,backgroundColor:"white",WebkitTransition:".4s",transition:".4s"},s.rounded&&{borderRadius:"50%"},o.state.sliderChecked&&{WebkitTransform:"translateX(26px)",transform:"translateX(26px)"})},weeklyRow:function(e){var t=o.state.selected,n=o.state.sliderChecked?e%2==t%2:e==t||e==(t+1)%4,r=n?"selected":"unselected";return a({cursor:"pointer",padding:10,transition:".2s all ease-in-out",background:n?"#3498db":"white",color:n?"white":"black",userSelect:"none"},i&&i[r]&&i[r].week[+o.state.sliderChecked])}},o}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),t.prototype.render=function(){for(var e=this,t=this.props,n=t.options&&t.options.style||{},o=t.options&&t.options.text||{},r=this.style,i=r.container,l=r.row,c=r.col,d=r.slider,u=r.slider_before,p=r.weeklyRow,f=[],h=function(t){f.push(s.a.createElement("div",{key:"weekly-row-"+t,style:a({},l,p(t)),onClick:function(){return e.onDecide(t)}},o&&o.weeks&&o.weeks[t]||"Week "+(t+1)))},y=0;y<4;y++)h(y);return s.a.createElement("div",{style:a({},i,this.props.style)},s.a.createElement("div",{style:l},s.a.createElement("div",{style:a({},c,{textAlign:"center"},n[this.state.sliderChecked?"unselected":"selected"].label)},o&&o.twoWeeksOn||"Two weeks on"),s.a.createElement("div",{style:a({},c,{textAlign:"center"})},s.a.createElement("label",{style:{position:"relative",display:"inline-block",width:60,height:34}},s.a.createElement("input",{type:"checkbox",style:{opacity:0,width:0,height:0},onChange:this.onChange.bind(this),defaultChecked:!1}),s.a.createElement("span",{style:d(),className:"round"},s.a.createElement("span",{style:u()})))),s.a.createElement("div",{style:a({},c,{textAlign:"center"},n[this.state.sliderChecked?"selected":"unselected"].label)},o&&o.everyOtherWeek||"Every other week")),s.a.createElement("div",{style:l},s.a.createElement("div",{style:a({},c,{marginTop:10,overflow:"hidden"},n&&n.weekContainer)},f)))},t}(i.Component),r=function(){var e=this;this.updateOptions=function(t,n){e.setState({sliderChecked:t,selected:n})},this.onChange=function(t){e.clickEffect.play();var n=e.state.selected+0,o=!!e.state.sliderChecked;e.setState({selected:0,sliderChecked:t.target.checked},function(){return e.sendOutput(n,o)})},this.onDecide=function(t){var n=e.props;if((n.options&&n.options.options||{}).binaryOutput)e.onChange({target:{checked:!e.state.sliderChecked}});else{var o=e.state.selected+0;e.setState({selected:t},function(){return e.sendOutput(o,e.state.sliderChecked)})}},this.sendOutput=function(t,n){if(e.props.onChange){for(var o=[],r=[],i=e.state.selected,s=0;s<4;s++)o.push(+(n?s%2==t%2:s==t||s==(t+1)%4)),r.push(+(e.state.sliderChecked?s%2==i%2:s==i||s==(i+1)%4));e.props.onChange(o,r)}}},o)}]).default});
//# sourceMappingURL=MonthSelector.min.js.map
</script>
<script>
var options = {
style: {
container: {
background: 'rgb(236, 240, 241)',
padding: 10,
borderRadius: 10
},
weekContainer: {
marginTop: 10,
borderRadius: 10
},
unselected: {
label: {
fontWeight: 300,
fontSize: 13,
transition: 'font-size .25s ease-in-out'
},
slider: {
background: 'rgb(46, 204, 113)'
},
week: [
{
background: 'white',
color: 'gray',
justifyContent: 'center',
padding: 7,
fontSize: 14
},
{
background: 'white',
color: 'gray',
justifyContent: 'center',
padding: 7,
fontSize: 14
}
]
},
selected: {
label: {
fontWeight: 400,
fontSize: 15,
transition: 'all .25s ease-in-out'
},
slider: {
background: 'rgb(52, 152, 219)'
},
week: [
{
background: 'rgb(46, 204, 113)',
color: 'white',
fontWeight: 500,
justifyContent: 'center',
padding: 10,
fontSize: 15
},
{
background: 'rgb(52, 152, 219)',
color: 'white',
fontWeight: 500,
justifyContent: 'center',
padding: 10,
fontSize: 15
}
]
}
},
text: {
twoWeeksOn: 'Two weeks On',
everyOtherWeek: 'Every other Week',
weeks: [
'1st Week',
'2nd Week',
'3rd Week',
'4th Week'
]
},
options: {
rounded: true,
binaryOutput: false,
soundUrl: 'https://storage.googleapis.com/mrble-assets/click.wav'
}
};
var monthSelector = ReactDOM.render(React.createElement(MonthSelector, { defaultChecked: true, defaultSelected: 3, options, onChange: function(a, b) { console.log(a); console.log(b); console.log() } }, null), document.getElementById('container01'));
setTimeout(() => {
monthSelector.updateOptions(false, 2);
}, 3000);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment