Last active
April 19, 2019 22:15
-
-
Save stanleykerr/b765c6fa57cb2097681725cdb1ca0f83 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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