https://www.smashingmagazine.com/js/MembershipSlider.45c9cc37c2c1c38350c7.js

1(self.webpackChunk=self.webpackChunk||[]).push([["MembershipSlider"],{

1"./js/containers/MembershipSlider.js":(e,t,s)=>{"use strict";s.r(t),s.d(t,{default:()=>c});var a=s("../node_modules/react/index.js"),n=s("./js/constants/data/plans-combined.json"),i=s.n(n),r=s("../node_modules/react-uid/dist/es2015/uid.js");class l extends a.Component{constructor(e){super(),this.slider=null,this.state={value:e.value,filled:e.value/e.max}}onChange(e){const{onChange:t}=this.props;t&&t(e.target.value)}onDrag(e){const{max:t,onDrag:s}=this.props;this.setState({filled:e.target.value/t,value:e.target.value}),s&&s(e.target.value)}renderOptions(){const{min:e,max:t,step:s,unit:n,className:i}=this.props,r=[];for(let i=e;i<=t;i+=s){let e=i;e="$"===n?n+i:i+n,r.push(a.createElement("option",{value:i,key:i},e))}return a.createElement("datalist",{id:`${i}__options`},r)}render(){const{min:e,max:t,step:s,className:n}=this.props,{value:i,filled:r}=this.state,l={width:100*r+"%"};return this.slider&&(l.width=this.slider.querySelector(`option[value="${i}"]`).getBoundingClientRect().left+12-this.slider.getBoundingClientRect().left,l.width>0?l.width=l.width/this.slider.offsetWidth*100+"%":(l.width=i/t*this.slider.offsetWidth,l["border-radius"]=i===t?"5em":null)),a.createElement("div",{className:`slider ${n}`,ref:e=>{this.slider=e}},a.createElement("div",{className:"slider--track"},a.createElement("div",{className:"slider--filling",style:l})),a.createElement("input",{onInput:this.onDrag.bind(this),onChange:this.onChange.bind(this),type:"range",min:e,max:t,value:i,step:s,list:`${n}__options`}),this.renderOptions())}}class o extends a.Component{constructor(e){super(),this.state={selected:e.selected}}onChange(e){const{onChange:t}=this.props;this.setState({selected:e}),t&&t(e)}render(){const{selected:e}=this.state,{className:t,title:s,min:n,max:i,step:o,unit:c,plans:d}=this.props;return a.createElement("div",{className:`membership-slider ${t}`},a.createElement("div",{className:"output--wrapper"},a.createElement("output",{htmlFor:`${t}__input`},e),a.createElement("span",{className:"output__desc"},s)),a.createElement(l,{min:n,max:i,step:o,value:e,unit:c,onDrag:this.onChange.bind(this),onChange:this.onChange.bind(this),className:`${t}--slider`}),a.createElement("div",{className:"col col-10 membership-desc"},d.filter((t=>t.price.includes(+e))).map((e=>a.createElement("section",{key:(0,r.h)(e)},a.createElement("img",{src:e.image,alt:e.h}),a.createElement("div",{className:"explanation"},a.createElement("h2",null,e.h),a.createElement("p",{dangerouslySetInnerHTML:{__html:e.desc}}),a.createElement("ul",null,e.bullets.map((e=>a.createElement("li",{dangerouslySetInnerHTML:{__html:e}}))))))))))}}function c(){return a.createElement(o,{min:0,max:9,step:1,selected:3,title:"Your Price",unit:"$",className:"membership-calculator",plans:i()})}},

1"./js/constants/data/plans-combined.json":e=>{e.exports=[{price:[0,1,2],image:"/images/smashing-cat/cat-with-dog-outfit.svg",h:"Reward authors sharing what they learned.",desc:"We use an ad-blocker as well, you know. We gotta keep the servers running though. With a <em>Membership</em>, you help keep the site going and <strong>pay more to authors</strong>. Here's <a href='#how-we-spent-the-money'>how we spend the money</a>. <div class='btn--lined'><a href='#what-you-missed' class='btn btn--white btn--white--bordered'>Here's what you missed last month&nbsp;&rarr;</a></div>",bullets:[]},{price:[3,4],image:"/images/smashing-cat/cat-with-milk.svg",h:"Enough for milk!",desc:"Even minor support is already a big help for us. At this price, you'll get <strong>1 monthly webinar</strong>, invite to SmashingConf parties, access to Smashing TV and <span class='small-caps'>$10</span> discount on books. <div class='btn--lined'><a href='#compare-the-options' class='btn btn--white btn--white--bordered'>See all features&nbsp;&rarr;</a></div>",bullets:[]},{price:[5,6,7,8],image:"/images/smashing-cat/cat-with-pizza.svg",h:"Enough for pizza, too!",desc:"With <span class='small-caps'>1000</span> subscribers, we'll be able to increase honorarium for our authors, editors and proofreaders. Additionally you'll get <em>all</em> webinars and recordings, new <strong>Smashing eBooks</strong> and <span class='small-caps'>$10</span> discounts on conferences and books. <div class='btn--lined'><a href='#compare-the-options' class='btn btn--white btn--white--bordered'>See all features&nbsp;&rarr;</a></div>",bullets:[]},{price:[9],image:"/images/smashing-cat/cat-the-cook.svg",h:"Let's get cookin'!",desc:"Now we can support neglected open source projects, set up <strong>scholarships</strong> and coach new speakers. You'll get all eBooks, all webinars, <span class='small-caps'>2</span> <strong>printed magazine issues</strong> and <span class='small-caps'>$375</span> discount on training. We can pay more to the team, too. <div class='btn--lined'><a href='#compare-the-options' class='btn btn--white btn--white--bordered'>See all features&nbsp;&rarr;</a></div>",bullets:[]}]},

1"../node_modules/react-uid/dist/es2015/uid.js":(e,t,s)=>{"use strict";s.d(t,{h:()=>a});var a=function(){var e=1,t=new WeakMap,s=function(a,n){return"number"==typeof a||"string"==typeof a?n?"idx-"+n:"val-"+a:t.has(a)?"uid"+t.get(a):(t.set(a,e++),s(a))};return s}()}

1}]);
2//# sourceMappingURL=MembershipSlider.45c9cc37c2c1c38350c7.js.map