├── .babelrc ├── .gitignore ├── README.md ├── dist └── react-onepage-scroll.js ├── example ├── back-phone.png ├── build │ └── index.html ├── main.js ├── phones.png ├── server.js ├── tilted-phone.png └── webpack.config.js ├── package.json ├── src ├── ScrollContainer.css ├── ScrollContainer.js ├── ScrollSection.js └── index.js └── webpack.production.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-0", "react"] 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | node_modules 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | react-onepage-scroll 2 | === 3 | 一个用react实现的onepage-scroll组件 4 | 5 | 支持鼠标滚轮 6 | 7 | ![Alt Text](http://g.recordit.co/23rW3mUKv1.gif) 8 | 9 | 支持手机滑动 10 | 11 | ![Alt Text](http://g.recordit.co/BOmwWNKTOw.gif) 12 | 13 | # DEMO 14 | 15 | 在线demo: [http://103.253.146.179:3008/](http://103.253.146.179:3008/) 16 | 17 | 本地demo: 18 | 19 | ```js 20 | git clone https://github.com/DawnyWu/react-onepage-scroll.git 21 | npm install 22 | cd example 23 | npm start 24 | ``` 25 | 在浏览器中打开 http://localhost:3001 即可查看例子 26 | 27 | 28 | # 使用 29 | `npm install react-onepage-scroll --save` 30 | 31 | 32 | ```js 33 | import {ScrollSection, ScrollContainer} from 'react-onepage-scroll' 34 | 35 | 36 | 39 | Fork me on GitHub 40 | 41 | 42 | 43 | 46 | 47 | 48 | 51 | 52 | 53 | ``` 54 | 55 | ## Inspired by 56 | [onepage-scroll](https://github.com/peachananr/onepage-scroll) 57 | 58 | # License 59 | 60 | MIT 61 | 62 | 63 | -------------------------------------------------------------------------------- /dist/react-onepage-scroll.js: -------------------------------------------------------------------------------- 1 | !function(t,n){"object"==typeof exports&&"object"==typeof module?module.exports=n(require("react")):"function"==typeof define&&define.amd?define(["react"],n):"object"==typeof exports?exports.ReactOnePageScroll=n(require("react")):t.ReactOnePageScroll=n(t.React)}(this,function(t){return function(t){function n(r){if(e[r])return e[r].exports;var u=e[r]={exports:{},id:r,loaded:!1};return t[r].call(u.exports,u,u.exports,n),u.loaded=!0,u.exports}var e={};return n.m=t,n.c=e,n.p="",n(0)}([function(t,n,e){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(n,"__esModule",{value:!0}),n.ScrollSection=n.ScrollContainer=void 0;var u=e(9),i=r(u),o=e(10),a=r(o);n.ScrollContainer=i["default"],n.ScrollSection=a["default"]},function(n,e){n.exports=t},function(t,n,e){(function(n){(function(){var e,r,u;"undefined"!=typeof performance&&null!==performance&&performance.now?t.exports=function(){return performance.now()}:"undefined"!=typeof n&&null!==n&&n.hrtime?(t.exports=function(){return(e()-u)/1e6},r=n.hrtime,e=function(){var t;return t=r(),1e9*t[0]+t[1]},u=e()):Date.now?(t.exports=function(){return Date.now()-u},u=Date.now()):(t.exports=function(){return(new Date).getTime()-u},u=(new Date).getTime())}).call(this)}).call(n,e(14))},function(t,n,e){(function(n){for(var r=e(2),u="undefined"==typeof window?n:window,i=["moz","webkit"],o="AnimationFrame",a=u["request"+o],f=u["cancel"+o]||u["cancelRequest"+o],c=0;!a&&c0&&this.state.allow===!1&&this.state.active!==this.props.children.length-1&&this.moveDown(),t.deltaY<0&&this.state.allow===!1&&0!==this.state.active&&this.moveUp()},handleTouchStart:function(t){this.state.touchControl!==!0&&(console.log("touch start"),this.setState({touchStart:t.touches[0].screenY}))},handleTouchMove:function(t){if(this.state.touchControl!==!0){console.log("touch move");var n=t.touches[0].screenY-1}function d(t,n,e){for(var r=-1,u=t.length;++r-1;);return e}function D(t,n){for(var e=t.length;e--&&I(n,t[e],0)>-1;);return e}function L(t){return t&&t.Object===Object?t:null}function U(t,n){if(t!==n){var e=null===t,r=t===nt,u=t===t,i=null===n,o=n===nt,a=n===n;if(t>n&&!i||!u||e&&!o&&a||r&&a)return 1;if(n>t&&!e||!a||i&&!r&&u||o&&u)return-1}return 0}function W(t,n,e){for(var r=-1,u=t.criteria,i=n.criteria,o=u.length,a=e.length;++r=a)return f;var c=e[r];return f*("desc"==c?-1:1)}}return t.index-n.index}function N(t,n){for(var e=t.length,r=0;e--;)t[e]===n&&r++;return r}function V(t){return function(n,e){var r;return n===nt&&e===nt?0:(n!==nt&&(r=n),e!==nt&&(r=r===nt?e:t(r,e)),r)}}function B(t){return Me[t]}function q(t){return Ce[t]}function z(t){return"\\"+Le[t]}function $(t,n,e){for(var r=t.length,u=n+(e?0:-1);e?u--:++u-1&&t%1==0&&n>t}function Q(t){for(var n,e=[];!(n=t.next()).done;)e.push(n.value);return e}function Z(t){var n=-1,e=Array(t.size);return t.forEach(function(t,r){e[++n]=[r,t]}),e}function Y(t,n){for(var e=-1,r=t.length,u=0,i=[];++en,u=e?t.length:0,i=Pu(0,u,this.__views__),o=i.start,a=i.end,f=a-o,c=r?a:o-1,l=this.__iteratees__,s=l.length,p=0,h=Nc(f,this.__takeCount__);if(!e||rt>u||u==f&&h==f)return Rr(t,this.__actions__);var v=[];t:for(;f--&&h>p;){c+=n;for(var d=-1,y=t[c];++de)return!1;var r=t.length-1;return e==r?t.pop():Rc.call(t,e,1),!0}function ae(t,n){var e=ce(t,n);return 0>e?nt:t[e][1]}function fe(t,n){return ce(t,n)>-1}function ce(t,n){for(var e=t.length;e--;)if(Bo(t[e][0],n))return e;return-1}function le(t,n,e){var r=ce(t,n);0>r?t.push([n,e]):t[r][1]=e}function se(t,n,e,r){return t===nt||Bo(t,sc[e])&&!vc.call(r,e)?n:t}function pe(t,n,e){(e===nt||Bo(t[n],e))&&("number"!=typeof n||e!==nt||n in t)||(t[n]=e)}function he(t,n,e){var r=t[n];vc.call(t,n)&&Bo(r,e)&&(e!==nt||n in t)||(t[n]=e)}function ve(t,n,e,r){return fl(t,function(t,u,i){n(r,t,e(t),i)}),r}function de(t,n){return t&&Yr(n,Ka(n),t)}function ye(t,n){for(var e=-1,r=null==t,u=n.length,i=Array(u);++e=t?t:e),n!==nt&&(t=t>=n?t:n)),t}function _e(t,n,e,r,u,i,o){var a;if(r&&(a=i?r(t,u,i,o):r(t)),a!==nt)return a;if(!ia(t))return t;var f=Hl(t);if(f){if(a=Ru(t),!n)return Zr(t,a)}else{var c=Au(t),s=c==Wt||c==Nt;if(Jl(t))return Wr(t,n);if(c==qt||c==Ct||s&&!i){if(F(t))return i?t:{};if(a=Mu(s?{}:t),!n)return Xr(t,de(a,t))}else{if(!Re[c])return i?t:{};a=Cu(t,c,_e,n)}}o||(o=new te);var p=o.get(t);if(p)return p;if(o.set(t,a),!f)var h=e?mu(t):Ka(t);return l(h||t,function(u,i){h&&(i=u,u=t[i]),he(a,i,_e(u,n,e,r,i,t,o))}),a}function me(t){var n=Ka(t),e=n.length;return function(r){if(null==r)return!e;for(var u=e;u--;){var i=n[u],o=t[i],a=r[i];if(a===nt&&!(i in Object(r))||!o(a))return!1}return!0}}function be(t){return ia(t)?Ac(t):{}}function we(t,n,e){if("function"!=typeof t)throw new cc(ut);return kc(function(){t.apply(nt,e)},n)}function Ie(t,n,e,r){var u=-1,i=v,o=!0,a=t.length,f=[],c=n.length;if(!a)return f;e&&(n=y(n,M(e))),r?(i=d,o=!1):n.length>=rt&&(i=Hn,o=!1,n=new Gn(n));t:for(;++ue&&(e=-e>u?0:u+e),r=r===nt||r>u?u:Aa(r),0>r&&(r+=u),r=e>r?0:Pa(r);r>e;)t[e++]=n;return t}function Ee(t,n){var e=[];return fl(t,function(t,r,u){n(t,r,u)&&e.push(t)}),e}function De(t,n,e,r,u){var i=-1,o=t.length;for(e||(e=Du),u||(u=[]);++i0&&e(a)?n>1?De(a,n-1,e,r,u):g(u,a):r||(u[u.length]=a)}return u}function Le(t,n){return t&&ll(t,n,Ka)}function Ne(t,n){return t&&sl(t,n,Ka)}function Ve(t,n){return h(n,function(n){return ea(t[n])})}function qe(t,n){n=Wu(n,t)?[n]:Lr(n);for(var e=0,r=n.length;null!=t&&r>e;)t=t[n[e++]];return e&&e==r?t:nt}function ze(t,n,e){var r=n(t);return Hl(t)?r:g(r,e(t))}function $e(t,n){return vc.call(t,n)||"object"==typeof t&&n in t&&null===ju(t)}function Fe(t,n){return n in Object(t)}function Ze(t,n,e){return t>=Nc(n,e)&&t=120&&l.length>=120)?new Gn(o&&l):nt}l=t[0];var s=-1,p=a[0];t:for(;++sn?e:0,K(n,e)?t[n]:nt}function lr(t,n,e){var r=-1;n=y(n.length?n:[Wf],M(xu()));var u=ur(t,function(t,e,u){var i=y(n,function(n){return n(t)});return{criteria:i,index:++r,value:t}});return A(u,function(t,n){return W(t,n,e)})}function sr(t,n){return t=Object(t),_(n,function(n,e){return e in t&&(n[e]=t[e]),n},{})}function pr(t,n){for(var e=-1,r=bu(t),u=r.length,i={};++e-1;)a!==t&&Rc.call(a,f,1),Rc.call(t,f,1);return t}function yr(t,n){for(var e=t?n.length:0,r=e-1;e--;){var u=n[e];if(r==e||u!=i){var i=u;if(K(u))Rc.call(t,u,1);else if(Wu(u,t))delete t[u];else{var o=Lr(u),a=Ku(t,o);null!=a&&delete a[di(o)]}}}return t}function gr(t,n){return t+Cc(Bc()*(n-t+1))}function _r(t,n,e,r){for(var u=-1,i=Wc(Mc((n-t)/(e||1)),0),o=Array(i);i--;)o[r?i:++u]=t,t+=e;return o}function mr(t,n){var e="";if(!t||1>n||n>Ot)return e;do n%2&&(e+=t),n=Cc(n/2),n&&(t+=t);while(n);return e}function br(t,n,e,r){n=Wu(n,t)?[n]:Lr(n);for(var u=-1,i=n.length,o=i-1,a=t;null!=a&&++un&&(n=-n>u?0:u+n),e=e>u?u:e,0>e&&(e+=u),u=n>e?0:e-n>>>0,n>>>=0;for(var i=Array(u);++r=u){for(;u>r;){var i=r+u>>>1,o=t[i];(e?n>=o:n>o)&&null!==o?r=i+1:u=i}return u}return Ir(t,n,Wf,e)}function Ir(t,n,e,r){n=e(n);for(var u=0,i=t?t.length:0,o=n!==n,a=null===n,f=n===nt;i>u;){var c=Cc((u+i)/2),l=e(t[c]),s=l!==nt,p=l===l;if(o)var h=p||r;else h=a?p&&s&&(r||null!=l):f?p&&(r||s):null==l?!1:r?n>=l:n>l;h?u=c+1:i=c}return Nc(i,Rt)}function Tr(t){return jr(t)}function jr(t,n){for(var e=0,r=t.length,u=t[0],i=n?n(u):u,o=i,a=1,f=[u];++e=rt){var c=n?null:hl(t);if(c)return X(c);o=!1,u=Hn,f=new Gn}else f=n?[]:a;t:for(;++rr?n[r]:nt;e(o,t[r],a)}return o}function Er(t){return Qo(t)?t:[]}function Dr(t){return"function"==typeof t?t:Wf}function Lr(t){return Hl(t)?t:_l(t)}function Ur(t,n,e){var r=t.length;return e=e===nt?r:e,!n&&e>=r?t:wr(t,n,e)}function Wr(t,n){if(n)return t.slice();var e=new t.constructor(t.length);return t.copy(e),e}function Nr(t){var n=new t.constructor(t.byteLength);return new Sc(n).set(new Sc(t)),n}function Vr(t,n){var e=n?Nr(t.buffer):t.buffer;return new t.constructor(e,t.byteOffset,t.byteLength)}function Br(t,n,e){var r=n?e(Z(t),!0):Z(t);return _(r,i,new t.constructor)}function qr(t){var n=new t.constructor(t.source,Pn.exec(t));return n.lastIndex=t.lastIndex,n}function zr(t,n,e){var r=n?e(X(t),!0):X(t);return _(r,o,new t.constructor)}function $r(t){return ol?Object(ol.call(t)):{}}function Fr(t,n){var e=n?Nr(t.buffer):t.buffer;return new t.constructor(e,t.byteOffset,t.length)}function Kr(t,n,e,r){for(var u=-1,i=t.length,o=e.length,a=-1,f=n.length,c=Wc(i-o,0),l=Array(f+c),s=!r;++au)&&(l[e[u]]=t[u]);for(;c--;)l[a++]=t[u++];return l}function Qr(t,n,e,r){for(var u=-1,i=t.length,o=-1,a=e.length,f=-1,c=n.length,l=Wc(i-a,0),s=Array(l+c),p=!r;++uu)&&(s[h+e[o]]=t[u++]);return s}function Zr(t,n){var e=-1,r=t.length;for(n||(n=Array(r));++e1?e[u-1]:nt,o=u>2?e[2]:nt;for(i="function"==typeof i?(u--,i):nt,o&&Uu(e[0],e[1],o)&&(i=3>u?nt:i,u=1),n=Object(n);++ri&&o[0]!==c&&o[i-1]!==c?[]:Y(o,c);if(i-=l.length,e>i)return hu(t,n,au,r.placeholder,nt,o,l,nt,nt,e-i);var s=this&&this!==Ke&&this instanceof r?u:t;return a(s,this,o)}var u=uu(t);return r}function ou(t){return Ro(function(n){n=De(n,1);var e=n.length,u=e,i=r.prototype.thru;for(t&&n.reverse();u--;){var o=n[u];if("function"!=typeof o)throw new cc(ut);if(i&&!a&&"wrapper"==wu(o))var a=new r([],!0)}for(u=a?u:e;++u=rt)return a.plant(r).value();for(var u=0,i=e?n[u].apply(this,t):r;++ug){var x=Y(m,b);return hu(t,n,au,l.placeholder,e,m,x,a,f,c-g)}var S=p?e:this,I=h?S[t]:t;return g=m.length,a?m=Qu(m,a):d&&g>1&&m.reverse(),s&&g>f&&(m.length=f),this&&this!==Ke&&this instanceof l&&(I=y||uu(I)),I.apply(S,m)}var s=n&vt,p=n&at,h=n&ft,v=n&(lt|st),d=n&yt,y=h?nt:uu(t);return l}function fu(t,n){return function(e,r){return Xe(e,t,n(r),{})}}function cu(t){return Ro(function(n){return n=1==n.length&&Hl(n[0])?y(n[0],M(xu())):y(De(n,1,Lu),M(xu())),Ro(function(e){var r=this;return t(n,function(t){return a(t,r,e)})})})}function lu(t,n){n=n===nt?" ":n+"";var e=n.length;if(2>e)return e?mr(n,t):n;var r=mr(n,Mc(t/G(n)));return je.test(n)?Ur(H(r),0,t).join(""):r.slice(0,t)}function su(t,n,e,r){function u(){for(var n=-1,f=arguments.length,c=-1,l=r.length,s=Array(l+f),p=this&&this!==Ke&&this instanceof u?o:t;++cn?1:-1:ka(r)||0,_r(n,e,r,t)}}function hu(t,n,e,r,u,i,o,a,f,c){var l=n<,s=l?o:nt,p=l?nt:o,h=l?i:nt,v=l?nt:i;n|=l?pt:ht,n&=~(l?ht:pt),n&ct||(n&=~(at|ft));var d=[t,n,u,h,s,v,p,a,f,c],y=e.apply(nt,d);return Vu(t)&&gl(y,d),y.placeholder=r,y}function vu(t){var n=ac[t];return function(t,e){if(t=ka(t),e=Aa(e)){var r=(Ca(t)+"e").split("e"),u=n(r[0]+"e"+(+r[1]+e));return r=(Ca(u)+"e").split("e"),+(r[0]+"e"+(+r[1]-e))}return n(t)}}function du(t,n,e,r,u,i,o,a){var f=n&ft;if(!f&&"function"!=typeof t)throw new cc(ut);var c=r?r.length:0;if(c||(n&=~(pt|ht),r=u=nt),o=o===nt?o:Wc(Aa(o),0),a=a===nt?a:Aa(a),c-=u?u.length:0,n&ht){var l=r,s=u;r=u=nt}var p=f?nt:vl(t),h=[t,n,e,r,u,l,s,i,o,a];if(p&&$u(h,p),t=h[0],n=h[1],e=h[2],r=h[3],u=h[4],a=h[9]=null==h[9]?f?0:t.length:Wc(h[9]-c,0),!a&&n&(lt|st)&&(n&=~(lt|st)),n&&n!=at)v=n==lt||n==st?iu(t,n,a):n!=pt&&n!=(at|pt)||u.length?au.apply(nt,h):su(t,n,e,r);else var v=nu(t,n,e);var d=p?pl:gl;return d(v,h)}function yu(t,n,e,r,u,i){var o=-1,a=u&_t,f=u>,c=t.length,l=n.length;if(c!=l&&!(a&&l>c))return!1;var s=i.get(t);if(s)return s==n;var p=!0;for(i.set(t,n);++ou,o=r==vt&&e==lt||r==vt&&e==dt&&t[7].length<=n[8]||r==(vt|dt)&&n[7].length<=n[8]&&e==lt;if(!i&&!o)return t;r&at&&(t[2]=n[2],u|=e&at?0:ct);var a=n[3];if(a){var f=t[3];t[3]=f?Kr(f,a,n[4]):a,t[4]=f?Y(t[3],ot):n[4]}return a=n[5],a&&(f=t[5],t[5]=f?Qr(f,a,n[6]):a,t[6]=f?Y(t[5],ot):n[6]),a=n[7],a&&(t[7]=a),r&vt&&(t[8]=null==t[8]?n[8]:Nc(t[8],n[8])),null==t[9]&&(t[9]=n[9]),t[0]=n[0],t[1]=u,t}function Fu(t,n,e,r,u,i){return ia(t)&&ia(n)&&ar(t,n,nt,Fu,i.set(n,t)),t}function Ku(t,n){return 1==n.length?t:qe(t,wr(n,0,-1))}function Qu(t,n){for(var e=t.length,r=Nc(n.length,e),u=Zr(t);r--;){var i=n[r];t[r]=K(i,e)?u[i]:nt}return t}function Zu(t){return"string"==typeof t||ba(t)?t:t+""}function Yu(t){if(null!=t){try{return hc.call(t)}catch(n){}try{return t+""}catch(n){}}return""}function Xu(t){if(t instanceof u)return t.clone();var n=new r(t.__wrapped__,t.__chain__);return n.__actions__=Zr(t.__actions__),n.__index__=t.__index__,n.__values__=t.__values__,n}function Gu(t,n,e){n=(e?Uu(t,n,e):n===nt)?1:Wc(Aa(n),0);var r=t?t.length:0;if(!r||1>n)return[];for(var u=0,i=0,o=Array(Mc(r/n));r>u;)o[i++]=wr(t,u,u+=n);return o}function Hu(t){for(var n=-1,e=t?t.length:0,r=0,u=[];++nt)return t?Zr(n):[];for(var e=Array(t-1);t--;)e[t-1]=arguments[t];return c(n,De(e,1))}function ti(t,n,e){var r=t?t.length:0;return r?(n=e||n===nt?1:Aa(n),wr(t,0>n?0:n,r)):[]}function ni(t,n,e){var r=t?t.length:0;return r?(n=e||n===nt?1:Aa(n),n=r-n,wr(t,0,0>n?0:n)):[]}function ei(t,n){return t&&t.length?kr(t,xu(n,3),!0,!0):[]}function ri(t,n){return t&&t.length?kr(t,xu(n,3),!0):[]}function ui(t,n,e,r){var u=t?t.length:0;return u?(e&&"number"!=typeof e&&Uu(t,n,e)&&(e=0,r=u),Ce(t,n,e,r)):[]}function ii(t,n){return t&&t.length?S(t,xu(n,3)):-1}function oi(t,n){return t&&t.length?S(t,xu(n,3),!0):-1}function ai(t){var n=t?t.length:0;return n?De(t,1):[]}function fi(t){var n=t?t.length:0;return n?De(t,jt):[]}function ci(t,n){var e=t?t.length:0;return e?(n=n===nt?1:Aa(n),De(t,n)):[]}function li(t){for(var n=-1,e=t?t.length:0,r={};++ne&&(e=Wc(r+e,0)),I(t,n,e)):-1}function hi(t){return ni(t,1)}function vi(t,n){return t?Lc.call(t,n):""}function di(t){var n=t?t.length:0;return n?t[n-1]:nt}function yi(t,n,e){var r=t?t.length:0;if(!r)return-1;var u=r;if(e!==nt&&(u=Aa(e),u=(0>u?Wc(r+u,0):Nc(u,r-1))+1),n!==n)return $(t,u,!0);for(;u--;)if(t[u]===n)return u;return-1}function gi(t,n){return t&&t.length?cr(t,Aa(n)):nt}function _i(t,n){return t&&t.length&&n&&n.length?dr(t,n):t}function mi(t,n,e){return t&&t.length&&n&&n.length?dr(t,n,xu(e)):t}function bi(t,n,e){return t&&t.length&&n&&n.length?dr(t,n,nt,e):t}function wi(t,n){var e=[];if(!t||!t.length)return e;var r=-1,u=[],i=t.length;for(n=xu(n,3);++rr&&Bo(t[r],n))return r}return-1}function Oi(t,n){return Sr(t,n,!0)}function Ai(t,n,e){return Ir(t,n,xu(e),!0)}function Pi(t,n){var e=t?t.length:0;if(e){var r=Sr(t,n,!0)-1;if(Bo(t[r],n))return r}return-1}function ki(t){return t&&t.length?Tr(t):[]}function Ri(t,n){return t&&t.length?jr(t,xu(n)):[]}function Mi(t){return ti(t,1)}function Ci(t,n,e){return t&&t.length?(n=e||n===nt?1:Aa(n),wr(t,0,0>n?0:n)):[]}function Ei(t,n,e){var r=t?t.length:0;return r?(n=e||n===nt?1:Aa(n),n=r-n,wr(t,0>n?0:n,r)):[]}function Di(t,n){return t&&t.length?kr(t,xu(n,3),!1,!0):[]}function Li(t,n){return t&&t.length?kr(t,xu(n,3)):[]}function Ui(t){return t&&t.length?Or(t):[]}function Wi(t,n){return t&&t.length?Or(t,xu(n)):[]}function Ni(t,n){return t&&t.length?Or(t,nt,n):[]}function Vi(t){if(!t||!t.length)return[];var n=0;return t=h(t,function(t){return Qo(t)?(n=Wc(t.length,n),!0):void 0}),k(n,function(n){return y(t,hr(n))})}function Bi(t,n){if(!t||!t.length)return[];var e=Vi(t);return null==n?e:y(e,function(t){return a(n,nt,t)})}function qi(t,n){return Cr(t||[],n||[],he)}function zi(t,n){return Cr(t||[],n||[],br)}function $i(t){var e=n(t);return e.__chain__=!0,e}function Fi(t,n){return n(t),t}function Ki(t,n){return n(t)}function Qi(){return $i(this)}function Zi(){return new r(this.value(),this.__chain__)}function Yi(){this.__values__===nt&&(this.__values__=Oa(this.value()));var t=this.__index__>=this.__values__.length,n=t?nt:this.__values__[this.__index__++];return{done:t,value:n}}function Xi(){return this}function Gi(t){for(var n,r=this;r instanceof e;){var u=Xu(r);u.__index__=0,u.__values__=nt,n?i.__wrapped__=u:n=u;var i=u;r=r.__wrapped__}return i.__wrapped__=t,n}function Hi(){var t=this.__wrapped__;if(t instanceof u){var n=t;return this.__actions__.length&&(n=new u(this)),n=n.reverse(),n.__actions__.push({func:Ki,args:[xi],thisArg:nt}),new r(n,this.__chain__)}return this.thru(xi)}function Ji(){return Rr(this.__wrapped__,this.__actions__)}function to(t,n,e){var r=Hl(t)?p:Me;return e&&Uu(t,n,e)&&(n=nt),r(t,xu(n,3))}function no(t,n){var e=Hl(t)?h:Ee;return e(t,xu(n,3))}function eo(t,n){if(n=xu(n,3),Hl(t)){var e=S(t,n);return e>-1?t[e]:nt}return x(t,n,fl)}function ro(t,n){if(n=xu(n,3),Hl(t)){var e=S(t,n,!0);return e>-1?t[e]:nt}return x(t,n,cl)}function uo(t,n){return De(lo(t,n),1)}function io(t,n){return De(lo(t,n),jt)}function oo(t,n,e){return e=e===nt?1:Aa(e),De(lo(t,n),e)}function ao(t,n){return"function"==typeof n&&Hl(t)?l(t,n):fl(t,xu(n))}function fo(t,n){return"function"==typeof n&&Hl(t)?s(t,n):cl(t,xu(n))}function co(t,n,e,r){t=Ko(t)?t:ff(t),e=e&&!r?Aa(e):0;var u=t.length;return 0>e&&(e=Wc(u+e,0)),ma(t)?u>=e&&t.indexOf(n,e)>-1:!!u&&I(t,n,e)>-1}function lo(t,n){var e=Hl(t)?y:ur;return e(t,xu(n,3))}function so(t,n,e,r){return null==t?[]:(Hl(n)||(n=null==n?[]:[n]),e=r?nt:e,Hl(e)||(e=null==e?[]:[e]),lr(t,n,e))}function po(t,n,e){var r=Hl(t)?_:O,u=arguments.length<3;return r(t,xu(n,4),e,u,fl)}function ho(t,n,e){var r=Hl(t)?m:O,u=arguments.length<3;return r(t,xu(n,4),e,u,cl)}function vo(t,n){var e=Hl(t)?h:Ee;return n=xu(n,3),e(t,function(t,e,r){return!n(t,e,r)})}function yo(t){var n=Ko(t)?t:ff(t),e=n.length;return e>0?n[gr(0,e-1)]:nt}function go(t,n,e){var r=-1,u=Oa(t),i=u.length,o=i-1;for(n=(e?Uu(t,n,e):n===nt)?1:ge(Aa(n),0,i);++r0&&(e=n.apply(this,arguments)),1>=t&&(n=nt),e}}function Io(t,n,e){n=e?nt:n;var r=du(t,lt,nt,nt,nt,nt,nt,n);return r.placeholder=Io.placeholder,r}function To(t,n,e){n=e?nt:n;var r=du(t,st,nt,nt,nt,nt,nt,n);return r.placeholder=To.placeholder,r}function jo(t,n,e){function r(n){var e=p,r=h;return p=h=nt,_=n,d=t.apply(r,e)}function u(t){return _=t,y=kc(a,n),m?r(t):d}function i(t){var e=t-g,r=t-_,u=n-e;return b?Nc(u,v-r):u}function o(t){var e=t-g,r=t-_;return!g||e>=n||0>e||b&&r>=v}function a(){var t=zl();return o(t)?f(t):void(y=kc(a,i(t)))}function f(t){return Ic(y),y=nt,w&&p?r(t):(p=h=nt,d)}function c(){y!==nt&&Ic(y),g=_=0,p=h=y=nt}function l(){return y===nt?d:f(zl())}function s(){var t=zl(),e=o(t);if(p=arguments,h=this,g=t,e){if(y===nt)return u(g);if(b)return Ic(y),y=kc(a,n),r(g)}return y===nt&&(y=kc(a,n)),d}var p,h,v,d,y,g=0,_=0,m=!1,b=!1,w=!0;if("function"!=typeof t)throw new cc(ut);return n=ka(n)||0,ia(e)&&(m=!!e.leading,b="maxWait"in e,v=b?Wc(ka(e.maxWait)||0,n):v,w="trailing"in e?!!e.trailing:w),s.cancel=c,s.flush=l,s}function Oo(t){return du(t,yt)}function Ao(t,n){if("function"!=typeof t||n&&"function"!=typeof n)throw new cc(ut);var e=function(){var r=arguments,u=n?n.apply(this,r):r[0],i=e.cache;if(i.has(u))return i.get(u);var o=t.apply(this,r);return e.cache=i.set(u,o),o};return e.cache=new(Ao.Cache||Fn),e}function Po(t){if("function"!=typeof t)throw new cc(ut);return function(){return!t.apply(this,arguments)}}function ko(t){return So(2,t)}function Ro(t,n){if("function"!=typeof t)throw new cc(ut);return n=Wc(n===nt?t.length-1:Aa(n),0),function(){for(var e=arguments,r=-1,u=Wc(e.length-n,0),i=Array(u);++rn}function zo(t,n){return t>=n}function $o(t){return Qo(t)&&vc.call(t,"callee")&&(!Pc.call(t,"callee")||gc.call(t)==Ct)}function Fo(t){return oa(t)&&gc.call(t)==Xt}function Ko(t){return null!=t&&ua(dl(t))&&!ea(t)}function Qo(t){return oa(t)&&Ko(t)}function Zo(t){return t===!0||t===!1||oa(t)&&gc.call(t)==Dt}function Yo(t){return oa(t)&&gc.call(t)==Lt}function Xo(t){return!!t&&1===t.nodeType&&oa(t)&&!da(t)}function Go(t){if(Ko(t)&&(Hl(t)||ma(t)||ea(t.splice)||$o(t)||Jl(t)))return!t.length;if(oa(t)){var n=Au(t);if(n==Vt||n==Ft)return!t.size}for(var e in t)if(vc.call(t,e))return!1;return!(Hc&&Ka(t).length)}function Ho(t,n){return He(t,n)}function Jo(t,n,e){e="function"==typeof e?e:nt;var r=e?e(t,n):nt;return r===nt?He(t,n,e):!!r}function ta(t){return oa(t)?gc.call(t)==Ut||"string"==typeof t.message&&"string"==typeof t.name:!1}function na(t){return"number"==typeof t&&Dc(t)}function ea(t){var n=ia(t)?gc.call(t):"";return n==Wt||n==Nt}function ra(t){return"number"==typeof t&&t==Aa(t)}function ua(t){return"number"==typeof t&&t>-1&&t%1==0&&Ot>=t}function ia(t){var n=typeof t;return!!t&&("object"==n||"function"==n)}function oa(t){return!!t&&"object"==typeof t}function aa(t){return oa(t)&&Au(t)==Vt}function fa(t,n){return t===n||tr(t,n,Su(n))}function ca(t,n,e){return e="function"==typeof e?e:nt,tr(t,n,Su(n),e)}function la(t){return va(t)&&t!=+t}function sa(t){if(!ia(t))return!1;var n=ea(t)||F(t)?mc:Cn;return n.test(Yu(t))}function pa(t){return null===t}function ha(t){return null==t}function va(t){return"number"==typeof t||oa(t)&&gc.call(t)==Bt}function da(t){if(!oa(t)||gc.call(t)!=qt||F(t))return!1;var n=ju(t);if(null===n)return!0;var e=vc.call(n,"constructor")&&n.constructor;return"function"==typeof e&&e instanceof e&&hc.call(e)==yc}function ya(t){return ia(t)&&gc.call(t)==$t}function ga(t){return ra(t)&&t>=-Ot&&Ot>=t}function _a(t){return oa(t)&&Au(t)==Ft}function ma(t){return"string"==typeof t||!Hl(t)&&oa(t)&&gc.call(t)==Kt}function ba(t){return"symbol"==typeof t||oa(t)&&gc.call(t)==Qt}function wa(t){return oa(t)&&ua(t.length)&&!!ke[gc.call(t)]}function xa(t){return t===nt}function Sa(t){return oa(t)&&Au(t)==Zt}function Ia(t){return oa(t)&&gc.call(t)==Yt}function Ta(t,n){return n>t}function ja(t,n){return n>=t}function Oa(t){if(!t)return[];if(Ko(t))return ma(t)?H(t):Zr(t);if(Oc&&t[Oc])return Q(t[Oc]());var n=Au(t),e=n==Vt?Z:n==Ft?X:ff;return e(t)}function Aa(t){if(!t)return 0===t?t:0;if(t=ka(t),t===jt||t===-jt){var n=0>t?-1:1;return n*At}var e=t%1;return t===t?e?t-e:t:0}function Pa(t){return t?ge(Aa(t),0,kt):0}function ka(t){if("number"==typeof t)return t;if(ba(t))return Pt;if(ia(t)){var n=ea(t.valueOf)?t.valueOf():t;t=ia(n)?n+"":n}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(Sn,"");var e=Mn.test(t);return e||En.test(t)?We(t.slice(2),e?2:8):Rn.test(t)?Pt:+t}function Ra(t){return Yr(t,Qa(t))}function Ma(t){return ge(Aa(t),-Ot,Ot)}function Ca(t){if("string"==typeof t)return t;if(null==t)return"";if(ba(t))return al?al.call(t):"";var n=t+"";return"0"==n&&1/t==-jt?"-0":n}function Ea(t,n){var e=be(t);return n?de(e,n):e}function Da(t,n){return x(t,xu(n,3),Le,!0)}function La(t,n){return x(t,xu(n,3),Ne,!0)}function Ua(t,n){return null==t?t:ll(t,xu(n),Qa)}function Wa(t,n){return null==t?t:sl(t,xu(n),Qa)}function Na(t,n){return t&&Le(t,xu(n))}function Va(t,n){return t&&Ne(t,xu(n))}function Ba(t){return null==t?[]:Ve(t,Ka(t))}function qa(t){return null==t?[]:Ve(t,Qa(t))}function za(t,n,e){var r=null==t?nt:qe(t,n);return r===nt?e:r}function $a(t,n){return null!=t&&ku(t,n,$e)}function Fa(t,n){return null!=t&&ku(t,n,Fe)}function Ka(t){var n=Bu(t);if(!n&&!Ko(t))return er(t);var e=Eu(t),r=!!e,u=e||[],i=u.length;for(var o in t)!$e(t,o)||r&&("length"==o||K(o,i))||n&&"constructor"==o||u.push(o);return u}function Qa(t){for(var n=-1,e=Bu(t),r=rr(t),u=r.length,i=Eu(t),o=!!i,a=i||[],f=a.length;++nn){var r=t;t=n,n=r}if(e||t%1||n%1){var u=Bc();return Nc(t+u*(n-t+Ue("1e-"+((u+"").length-1))),n)}return gr(t,n)}function hf(t){return ws(Ca(t).toLowerCase())}function vf(t){return t=Ca(t),t&&t.replace(Ln,B).replace(Se,"")}function df(t,n,e){t=Ca(t),n="string"==typeof n?n:n+"";var r=t.length;return e=e===nt?r:ge(Aa(e),0,r),e-=n.length,e>=0&&t.indexOf(n,e)==e}function yf(t){return t=Ca(t),t&&vn.test(t)?t.replace(pn,q):t}function gf(t){return t=Ca(t),t&&xn.test(t)?t.replace(wn,"\\$&"):t}function _f(t,n,e){t=Ca(t),n=Aa(n);var r=n?G(t):0;if(!n||r>=n)return t;var u=(n-r)/2;return lu(Cc(u),e)+t+lu(Mc(u),e)}function mf(t,n,e){t=Ca(t),n=Aa(n);var r=n?G(t):0;return n&&n>r?t+lu(n-r,e):t}function bf(t,n,e){t=Ca(t),n=Aa(n);var r=n?G(t):0;return n&&n>r?lu(n-r,e)+t:t}function wf(t,n,e){return e||null==n?n=0:n&&(n=+n),t=Ca(t).replace(Sn,""),Vc(t,n||(kn.test(t)?16:10))}function xf(t,n,e){return n=(e?Uu(t,n,e):n===nt)?1:Aa(n),mr(Ca(t),n)}function Sf(){var t=arguments,n=Ca(t[0]);return t.length<3?n:qc.call(n,t[1],t[2])}function If(t,n,e){return e&&"number"!=typeof e&&Uu(t,n,e)&&(n=e=nt),(e=e===nt?kt:e>>>0)?(t=Ca(t),t&&("string"==typeof n||null!=n&&!ya(n))&&(n+="",""==n&&je.test(t))?Ur(H(t),0,e):$c.call(t,n,e)):[]}function Tf(t,n,e){return t=Ca(t),e=ge(Aa(e),0,t.length),t.lastIndexOf(n,e)==e}function jf(t,e,r){var u=n.templateSettings;r&&Uu(t,e,r)&&(e=nt),t=Ca(t),e=es({},e,u,se);var i,o,a=es({},e.imports,u.imports,se),f=Ka(a),c=C(a,f),l=0,s=e.interpolate||Un,p="__p += '",h=fc((e.escape||Un).source+"|"+s.source+"|"+(s===gn?An:Un).source+"|"+(e.evaluate||Un).source+"|$","g"),v="//# sourceURL="+("sourceURL"in e?e.sourceURL:"lodash.templateSources["+ ++Pe+"]")+"\n";t.replace(h,function(n,e,r,u,a,f){return r||(r=u),p+=t.slice(l,f).replace(Wn,z),e&&(i=!0,p+="' +\n__e("+e+") +\n'"),a&&(o=!0,p+="';\n"+a+";\n__p += '"),r&&(p+="' +\n((__t = ("+r+")) == null ? '' : __t) +\n'"),l=f+n.length,n}),p+="';\n";var d=e.variable;d||(p="with (obj) {\n"+p+"\n}\n"),p=(o?p.replace(fn,""):p).replace(cn,"$1").replace(ln,"$1;"),p="function("+(d||"obj")+") {\n"+(d?"":"obj || (obj = {});\n")+"var __t, __p = ''"+(i?", __e = _.escape":"")+(o?", __j = Array.prototype.join;\nfunction print() { __p += __j.call(arguments, '') }\n":";\n")+p+"return __p\n}";var y=xs(function(){return Function(f,v+"return "+p).apply(nt,c)});if(y.source=p,ta(y))throw y;return y}function Of(t){return Ca(t).toLowerCase()}function Af(t){return Ca(t).toUpperCase()}function Pf(t,n,e){if(t=Ca(t),!t)return t;if(e||n===nt)return t.replace(Sn,"");if(!(n+=""))return t;var r=H(t),u=H(n),i=E(r,u),o=D(r,u)+1;return Ur(r,i,o).join("")}function kf(t,n,e){if(t=Ca(t),!t)return t;if(e||n===nt)return t.replace(Tn,"");if(!(n+=""))return t;var r=H(t),u=D(r,H(n))+1;return Ur(r,0,u).join("")}function Rf(t,n,e){if(t=Ca(t),!t)return t;if(e||n===nt)return t.replace(In,"");if(!(n+=""))return t;var r=H(t),u=E(r,H(n));return Ur(r,u).join("")}function Mf(t,n){var e=mt,r=bt;if(ia(n)){var u="separator"in n?n.separator:u;e="length"in n?Aa(n.length):e,r="omission"in n?Ca(n.omission):r}t=Ca(t);var i=t.length;if(je.test(t)){var o=H(t);i=o.length}if(e>=i)return t;var a=e-G(r);if(1>a)return r;var f=o?Ur(o,0,a).join(""):t.slice(0,a);if(u===nt)return f+r;if(o&&(a+=f.length-a),ya(u)){if(t.slice(a).search(u)){var c,l=f;for(u.global||(u=fc(u.source,Ca(Pn.exec(u))+"g")),u.lastIndex=0;c=u.exec(l);)var s=c.index;f=f.slice(0,s===nt?a:s)}}else if(t.indexOf(u,a)!=a){var p=f.lastIndexOf(u);p>-1&&(f=f.slice(0,p))}return f+r}function Cf(t){return t=Ca(t),t&&hn.test(t)?t.replace(sn,J):t}function Ef(t,n,e){return t=Ca(t),n=e?nt:n,n===nt&&(n=Oe.test(t)?Te:jn),t.match(n)||[]}function Df(t){var n=t?t.length:0,e=xu();return t=n?y(t,function(t){if("function"!=typeof t[1])throw new cc(ut);return[e(t[0]),t[1]]}):[],Ro(function(e){for(var r=-1;++rt||t>Ot)return[];var e=kt,r=Nc(t,kt);n=xu(n),t-=kt;for(var u=k(r,n);++e0){if(++t>=wt)return e}else t=0;return pl(e,r)}}(),_l=Ao(function(t){var n=[];return Ca(t).replace(bn,function(t,e,r,u){n.push(r?u.replace(On,"$1"):e||t)}),n}),ml=Ro(function(t,n){return Qo(t)?Ie(t,De(n,1,Qo,!0)):[]}),bl=Ro(function(t,n){var e=di(n);return Qo(e)&&(e=nt),Qo(t)?Ie(t,De(n,1,Qo,!0),xu(e)):[]}),wl=Ro(function(t,n){var e=di(n);return Qo(e)&&(e=nt),Qo(t)?Ie(t,De(n,1,Qo,!0),nt,e):[]}),xl=Ro(function(t){var n=y(t,Er);return n.length&&n[0]===t[0]?Ye(n):[]}),Sl=Ro(function(t){var n=di(t),e=y(t,Er);return n===di(e)?n=nt:e.pop(),e.length&&e[0]===t[0]?Ye(e,xu(n)):[]}),Il=Ro(function(t){var n=di(t),e=y(t,Er);return n===di(e)?n=nt:e.pop(),e.length&&e[0]===t[0]?Ye(e,nt,n):[]}),Tl=Ro(_i),jl=Ro(function(t,n){n=y(De(n,1),String);var e=ye(t,n);return yr(t,n.sort(U)),e}),Ol=Ro(function(t){return Or(De(t,1,Qo,!0))}),Al=Ro(function(t){var n=di(t);return Qo(n)&&(n=nt),Or(De(t,1,Qo,!0),xu(n))}),Pl=Ro(function(t){var n=di(t);return Qo(n)&&(n=nt),Or(De(t,1,Qo,!0),nt,n)}),kl=Ro(function(t,n){return Qo(t)?Ie(t,n):[]}),Rl=Ro(function(t){return Mr(h(t,Qo))}),Ml=Ro(function(t){var n=di(t);return Qo(n)&&(n=nt),Mr(h(t,Qo),xu(n))}),Cl=Ro(function(t){var n=di(t);return Qo(n)&&(n=nt),Mr(h(t,Qo),nt,n)}),El=Ro(Vi),Dl=Ro(function(t){var n=t.length,e=n>1?t[n-1]:nt;return e="function"==typeof e?(t.pop(),e):nt,Bi(t,e)}),Ll=Ro(function(t){t=De(t,1);var n=t.length,e=n?t[0]:0,i=this.__wrapped__,o=function(n){return ye(n,t)};return!(n>1||this.__actions__.length)&&i instanceof u&&K(e)?(i=i.slice(e,+e+(n?1:0)),i.__actions__.push({func:Ki,args:[o],thisArg:nt}),new r(i,this.__chain__).thru(function(t){return n&&!t.length&&t.push(nt),t})):this.thru(o)}),Ul=Gr(function(t,n,e){vc.call(t,e)?++t[e]:t[e]=1}),Wl=Gr(function(t,n,e){vc.call(t,e)?t[e].push(n):t[e]=[n]}),Nl=Ro(function(t,n,e){var r=-1,u="function"==typeof n,i=Wu(n),o=Ko(t)?Array(t.length):[];return fl(t,function(t){var f=u?n:i&&null!=t?t[n]:nt;o[++r]=f?a(f,t,e):Ge(t,n,e)}),o}),Vl=Gr(function(t,n,e){t[e]=n}),Bl=Gr(function(t,n,e){t[e?0:1].push(n)},function(){return[[],[]]}),ql=Ro(function(t,n){if(null==t)return[];var e=n.length;return e>1&&Uu(t,n[0],n[1])?n=[]:e>2&&Uu(n[0],n[1],n[2])&&(n=[n[0]]),n=1==n.length&&Hl(n[0])?n[0]:De(n,1,Lu),lr(t,n,[])}),zl=ic.now,$l=Ro(function(t,n,e){var r=at;if(e.length){var u=Y(e,Tu($l));r|=pt}return du(t,r,n,e,u)}),Fl=Ro(function(t,n,e){var r=at|ft;if(e.length){var u=Y(e,Tu(Fl));r|=pt}return du(n,r,t,e,u)}),Kl=Ro(function(t,n){return we(t,1,n)}),Ql=Ro(function(t,n,e){return we(t,ka(n)||0,e)});Ao.Cache=Fn;var Zl=Ro(function(t,n){n=1==n.length&&Hl(n[0])?y(n[0],M(xu())):y(De(n,1,Lu),M(xu()));var e=n.length;return Ro(function(r){for(var u=-1,i=Nc(r.length,e);++u0||0>n)?new u(e):(0>t?e=e.takeRight(-t):t&&(e=e.drop(t)),n!==nt&&(n=Aa(n),e=0>n?e.dropRight(-n):e.take(n-t)),e)},u.prototype.takeRightWhile=function(t){return this.reverse().takeWhile(t).reverse()},u.prototype.toArray=function(){return this.take(kt)},Le(u.prototype,function(t,e){var i=/^(?:filter|find|map|reject)|While$/.test(e),o=/^(?:head|last)$/.test(e),a=n[o?"take"+("last"==e?"Right":""):e],f=o||/^find/.test(e);a&&(n.prototype[e]=function(){var e=this.__wrapped__,c=o?[1]:arguments,l=e instanceof u,s=c[0],p=l||Hl(e),h=function(t){var e=a.apply(n,g([t],c));return o&&v?e[0]:e};p&&i&&"function"==typeof s&&1!=s.length&&(l=p=!1);var v=this.__chain__,d=!!this.__actions__.length,y=f&&!v,_=l&&!d;if(!f&&p){e=_?e:new u(this);var m=t.apply(e,c);return m.__actions__.push({func:Ki,args:[h],thisArg:nt}),new r(m,v)}return y&&_?t.apply(this,c):(m=this.thru(h),y?o?m.value()[0]:m.value():m)})}),l(["pop","push","shift","sort","splice","unshift"],function(t){var e=lc[t],r=/^(?:push|sort|unshift)$/.test(t)?"tap":"thru",u=/^(?:pop|shift)$/.test(t);n.prototype[t]=function(){var t=arguments;if(u&&!this.__chain__){var n=this.value();return e.apply(Hl(n)?n:[],t)}return this[r](function(n){return e.apply(Hl(n)?n:[],t)})}}),Le(u.prototype,function(t,e){var r=n[e];if(r){var u=r.name+"",i=Jc[u]||(Jc[u]=[]);i.push({name:e,func:r})}}),Jc[au(nt,ft).name]=[{name:"wrapper",func:nt}],u.prototype.clone=L,u.prototype.reverse=Dn,u.prototype.value=Nn,n.prototype.at=Ll,n.prototype.chain=Qi,n.prototype.commit=Zi,n.prototype.next=Yi,n.prototype.plant=Gi,n.prototype.reverse=Hi,n.prototype.toJSON=n.prototype.valueOf=n.prototype.value=Ji,Oc&&(n.prototype[Oc]=Xi),n}var nt,et="4.11.1",rt=200,ut="Expected a function",it="__lodash_hash_undefined__",ot="__lodash_placeholder__",at=1,ft=2,ct=4,lt=8,st=16,pt=32,ht=64,vt=128,dt=256,yt=512,gt=1,_t=2,mt=30,bt="...",wt=150,xt=16,St=1,It=2,Tt=3,jt=1/0,Ot=9007199254740991,At=1.7976931348623157e308,Pt=NaN,kt=4294967295,Rt=kt-1,Mt=kt>>>1,Ct="[object Arguments]",Et="[object Array]",Dt="[object Boolean]",Lt="[object Date]",Ut="[object Error]",Wt="[object Function]",Nt="[object GeneratorFunction]",Vt="[object Map]",Bt="[object Number]",qt="[object Object]",zt="[object Promise]",$t="[object RegExp]",Ft="[object Set]",Kt="[object String]",Qt="[object Symbol]",Zt="[object WeakMap]",Yt="[object WeakSet]",Xt="[object ArrayBuffer]",Gt="[object DataView]",Ht="[object Float32Array]",Jt="[object Float64Array]",tn="[object Int8Array]",nn="[object Int16Array]",en="[object Int32Array]",rn="[object Uint8Array]",un="[object Uint8ClampedArray]",on="[object Uint16Array]",an="[object Uint32Array]",fn=/\b__p \+= '';/g,cn=/\b(__p \+=) '' \+/g,ln=/(__e\(.*?\)|\b__t\)) \+\n'';/g,sn=/&(?:amp|lt|gt|quot|#39|#96);/g,pn=/[&<>"'`]/g,hn=RegExp(sn.source),vn=RegExp(pn.source),dn=/<%-([\s\S]+?)%>/g,yn=/<%([\s\S]+?)%>/g,gn=/<%=([\s\S]+?)%>/g,_n=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,mn=/^\w*$/,bn=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]/g,wn=/[\\^$.*+?()[\]{}|]/g,xn=RegExp(wn.source),Sn=/^\s+|\s+$/g,In=/^\s+/,Tn=/\s+$/,jn=/[a-zA-Z0-9]+/g,On=/\\(\\)?/g,An=/\$\{([^\\}]*(?:\\.[^\\}]*)*)\}/g,Pn=/\w*$/,kn=/^0x/i,Rn=/^[-+]0x[0-9a-f]+$/i,Mn=/^0b[01]+$/i,Cn=/^\[object .+?Constructor\]$/,En=/^0o[0-7]+$/i,Dn=/^(?:0|[1-9]\d*)$/,Ln=/[\xc0-\xd6\xd8-\xde\xdf-\xf6\xf8-\xff]/g,Un=/($^)/,Wn=/['\n\r\u2028\u2029\\]/g,Nn="\\ud800-\\udfff",Vn="\\u0300-\\u036f\\ufe20-\\ufe23",Bn="\\u20d0-\\u20f0",qn="\\u2700-\\u27bf",zn="a-z\\xdf-\\xf6\\xf8-\\xff",$n="\\xac\\xb1\\xd7\\xf7",Fn="\\x00-\\x2f\\x3a-\\x40\\x5b-\\x60\\x7b-\\xbf",Kn="\\u2018\\u2019\\u201c\\u201d",Qn=" \\t\\x0b\\f\\xa0\\ufeff\\n\\r\\u2028\\u2029\\u1680\\u180e\\u2000\\u2001\\u2002\\u2003\\u2004\\u2005\\u2006\\u2007\\u2008\\u2009\\u200a\\u202f\\u205f\\u3000",Zn="A-Z\\xc0-\\xd6\\xd8-\\xde",Yn="\\ufe0e\\ufe0f",Xn=$n+Fn+Kn+Qn,Gn="['’]",Hn="["+Nn+"]",Jn="["+Xn+"]",te="["+Vn+Bn+"]",ne="\\d+",ee="["+qn+"]",re="["+zn+"]",ue="[^"+Nn+Xn+ne+qn+zn+Zn+"]",ie="\\ud83c[\\udffb-\\udfff]",oe="(?:"+te+"|"+ie+")",ae="[^"+Nn+"]",fe="(?:\\ud83c[\\udde6-\\uddff]){2}",ce="[\\ud800-\\udbff][\\udc00-\\udfff]",le="["+Zn+"]",se="\\u200d",pe="(?:"+re+"|"+ue+")",he="(?:"+le+"|"+ue+")",ve="(?:"+Gn+"(?:d|ll|m|re|s|t|ve))?",de="(?:"+Gn+"(?:D|LL|M|RE|S|T|VE))?",ye=oe+"?",ge="["+Yn+"]?",_e="(?:"+se+"(?:"+[ae,fe,ce].join("|")+")"+ge+ye+")*",me=ge+ye+_e,be="(?:"+[ee,fe,ce].join("|")+")"+me,we="(?:"+[ae+te+"?",te,fe,ce,Hn].join("|")+")",xe=RegExp(Gn,"g"),Se=RegExp(te,"g"),Ie=RegExp(ie+"(?="+ie+")|"+we+me,"g"),Te=RegExp([le+"?"+re+"+"+ve+"(?="+[Jn,le,"$"].join("|")+")",he+"+"+de+"(?="+[Jn,le+pe,"$"].join("|")+")",le+"?"+pe+"+"+ve,le+"+"+de,ne,be].join("|"),"g"),je=RegExp("["+se+Nn+Vn+Bn+Yn+"]"),Oe=/[a-z][A-Z]|[A-Z]{2,}[a-z]|[0-9][a-zA-Z]|[a-zA-Z][0-9]|[^a-zA-Z0-9 ]/,Ae=["Array","Buffer","DataView","Date","Error","Float32Array","Float64Array","Function","Int8Array","Int16Array","Int32Array","Map","Math","Object","Promise","Reflect","RegExp","Set","String","Symbol","TypeError","Uint8Array","Uint8ClampedArray","Uint16Array","Uint32Array","WeakMap","_","clearTimeout","isFinite","parseInt","setTimeout"],Pe=-1,ke={};ke[Ht]=ke[Jt]=ke[tn]=ke[nn]=ke[en]=ke[rn]=ke[un]=ke[on]=ke[an]=!0,ke[Ct]=ke[Et]=ke[Xt]=ke[Dt]=ke[Gt]=ke[Lt]=ke[Ut]=ke[Wt]=ke[Vt]=ke[Bt]=ke[qt]=ke[$t]=ke[Ft]=ke[Kt]=ke[Zt]=!1;var Re={};Re[Ct]=Re[Et]=Re[Xt]=Re[Gt]=Re[Dt]=Re[Lt]=Re[Ht]=Re[Jt]=Re[tn]=Re[nn]=Re[en]=Re[Vt]=Re[Bt]=Re[qt]=Re[$t]=Re[Ft]=Re[Kt]=Re[Qt]=Re[rn]=Re[un]=Re[on]=Re[an]=!0,Re[Ut]=Re[Wt]=Re[Zt]=!1;var Me={"À":"A","Á":"A","Â":"A","Ã":"A","Ä":"A","Å":"A","à":"a","á":"a","â":"a","ã":"a","ä":"a","å":"a","Ç":"C","ç":"c","Ð":"D","ð":"d","È":"E","É":"E","Ê":"E","Ë":"E","è":"e","é":"e","ê":"e","ë":"e","Ì":"I","Í":"I","Î":"I","Ï":"I","ì":"i","í":"i","î":"i","ï":"i","Ñ":"N","ñ":"n","Ò":"O","Ó":"O","Ô":"O","Õ":"O","Ö":"O","Ø":"O","ò":"o","ó":"o","ô":"o","õ":"o","ö":"o","ø":"o","Ù":"U","Ú":"U","Û":"U","Ü":"U","ù":"u","ú":"u","û":"u","ü":"u","Ý":"Y","ý":"y","ÿ":"y","Æ":"Ae","æ":"ae","Þ":"Th","þ":"th","ß":"ss"},Ce={"&":"&","<":"<",">":">",'"':""","'":"'","`":"`"},Ee={"&":"&","<":"<",">":">",""":'"',"'":"'","`":"`"},De={"function":!0,object:!0},Le={"\\":"\\","'":"'","\n":"n","\r":"r","\u2028":"u2028","\u2029":"u2029"},Ue=parseFloat,We=parseInt,Ne=De[typeof n]&&n&&!n.nodeType?n:nt,Ve=De[typeof t]&&t&&!t.nodeType?t:nt,Be=Ve&&Ve.exports===Ne?Ne:nt,qe=L(Ne&&Ve&&"object"==typeof u&&u),ze=L(De[typeof self]&&self),$e=L(De[typeof window]&&window),Fe=L(De[typeof this]&&this),Ke=qe||$e!==(Fe&&Fe.window)&&$e||ze||Fe||Function("return this")(),Qe=tt();($e||ze||{})._=Qe,r=function(){return Qe}.call(n,e,n,t),!(r!==nt&&(t.exports=r))}).call(this)}).call(n,e(24)(t),function(){return this}())},function(t,n){function e(){c=!1,o.length?f=o.concat(f):l=-1,f.length&&r()}function r(){if(!c){var t=setTimeout(e);c=!0;for(var n=f.length;n;){for(o=f,f=[];++l1)for(var e=1;e10*m&&(t.accumulatedTime=0),0===t.accumulatedTime)return t.animationID=null,void t.startAnimationIfNecessary();var u=(t.accumulatedTime-Math.floor(t.accumulatedTime/m)*m)/m,i=Math.floor(t.accumulatedTime/m),o={},a={},f={},c={};for(var s in n)if(n.hasOwnProperty(s)){var h=n[s];if("number"==typeof h)f[s]=h,c[s]=0,o[s]=h,a[s]=0;else{for(var v=t.state.lastIdealStyle[s],d=t.state.lastIdealVelocity[s],g=0;i>g;g++){var _=l["default"](m/1e3,v,d,h.val,h.stiffness,h.damping,h.precision);v=_[0],d=_[1]}var b=l["default"](m/1e3,v,d,h.val,h.stiffness,h.damping,h.precision),w=b[0],x=b[1];f[s]=v+(w-v)*u,c[s]=d+(x-d)*u,o[s]=v,a[s]=d}}t.animationID=null,t.accumulatedTime-=i*m,t.setState({currentStyle:f,currentVelocity:c,lastIdealStyle:o,lastIdealVelocity:a}),t.unreadPropStyle=null,t.startAnimationIfNecessary()})},componentDidMount:function(){this.prevTime=p["default"](),this.startAnimationIfNecessary()},componentWillReceiveProps:function(t){null!=this.unreadPropStyle&&this.clearUnreadPropStyle(this.unreadPropStyle),this.unreadPropStyle=t.style,null==this.animationID&&(this.prevTime=p["default"](),this.startAnimationIfNecessary())},componentWillUnmount:function(){null!=this.animationID&&(v["default"].cancel(this.animationID),this.animationID=null)},render:function(){var t=this.props.children(this.state.currentStyle);return t&&_["default"].Children.only(t)}});n["default"]=b,t.exports=n["default"]},function(t,n,e){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}function u(t,n,e){for(var r=0;r10*b&&(t.accumulatedTime=0),0===t.accumulatedTime)return t.animationID=null,void t.startAnimationIfNecessary();for(var i=(t.accumulatedTime-Math.floor(t.accumulatedTime/b)*b)/b,o=Math.floor(t.accumulatedTime/b),a=[],f=[],c=[],l=[],p=0;pI;I++){var T=s["default"](b/1e3,x,S,w.val,w.stiffness,w.damping,w.precision);x=T[0],S=T[1]}var j=s["default"](b/1e3,x,S,w.val,w.stiffness,w.damping,w.precision),O=j[0],A=j[1];d[m]=x+(O-x)*i,y[m]=S+(A-S)*i,g[m]=x,_[m]=S}}c[p]=d,l[p]=y,a[p]=g,f[p]=_}t.animationID=null,t.accumulatedTime-=o*b,t.setState({currentStyles:c,currentVelocities:l,lastIdealStyles:a,lastIdealVelocities:f}),t.unreadPropStyles=null,t.startAnimationIfNecessary()})},componentDidMount:function(){this.prevTime=h["default"](),this.startAnimationIfNecessary()},componentWillReceiveProps:function(t){null!=this.unreadPropStyles&&this.clearUnreadPropStyle(this.unreadPropStyles),this.unreadPropStyles=t.styles(this.state.lastIdealStyles),null==this.animationID&&(this.prevTime=h["default"](),this.startAnimationIfNecessary())},componentWillUnmount:function(){null!=this.animationID&&(d["default"].cancel(this.animationID),this.animationID=null)},render:function(){var t=this.props.children(this.state.currentStyles);return t&&m["default"].Children.only(t)}});n["default"]=w,t.exports=n["default"]},function(t,n,e){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}function u(t,n,e){return null==n?t.map(function(t,n){return{key:t.key,data:t.data,style:e[n]}}):t.map(function(t,r){for(var u=0;u10*I&&(t.accumulatedTime=0),0===t.accumulatedTime)return t.animationID=null,void t.startAnimationIfNecessary();for(var f=(t.accumulatedTime-Math.floor(t.accumulatedTime/I)*I)/I,c=Math.floor(t.accumulatedTime/I),l=o(t.props.willEnter,t.props.willLeave,t.state.mergedPropsStyles,e,t.state.currentStyles,t.state.currentVelocities,t.state.lastIdealStyles,t.state.lastIdealVelocities),s=l[0],p=l[1],v=l[2],d=l[3],y=l[4],_=0;_P;P++){var k=h["default"](I/1e3,O,A,j.val,j.stiffness,j.damping,j.precision);O=k[0],A=k[1]}var R=h["default"](I/1e3,O,A,j.val,j.stiffness,j.damping,j.precision),M=R[0],C=R[1];b[T]=O+(M-O)*f,w[T]=A+(C-A)*f,x[T]=O,S[T]=A}}d[_]=x,y[_]=S,p[_]=b,v[_]=w}t.animationID=null,t.accumulatedTime-=c*I,t.setState({currentStyles:p,currentVelocities:v,lastIdealStyles:d,lastIdealVelocities:y,mergedPropsStyles:s}),t.unreadPropStyles=null,t.startAnimationIfNecessary()})},componentDidMount:function(){this.prevTime=g["default"](),this.startAnimationIfNecessary()},componentWillReceiveProps:function(t){this.unreadPropStyles&&this.clearUnreadPropStyle(this.unreadPropStyles),"function"==typeof t.styles?this.unreadPropStyles=t.styles(u(this.state.mergedPropsStyles,this.unreadPropStyles,this.state.lastIdealStyles)):this.unreadPropStyles=t.styles,null==this.animationID&&(this.prevTime=g["default"](),this.startAnimationIfNecessary())},componentWillUnmount:function(){null!=this.animationID&&(m["default"].cancel(this.animationID),this.animationID=null)},render:function(){var t=u(this.state.mergedPropsStyles,this.unreadPropStyles,this.state.currentStyles),n=this.props.children(t);return n&&S["default"].Children.only(n)}});n["default"]=T,t.exports=n["default"]},function(t,n){"use strict";function e(t,n,e){for(var r={},u=0;ur[l])return-1;if(u>i[l]&&fr[l])return 1;if(o>i[l]&&a=0&&m.splice(n,1)}function a(t){var n=document.createElement("style");return n.type="text/css",i(t,n),n}function f(t){var n=document.createElement("link");return n.rel="stylesheet",i(t,n),n}function c(t,n){var e,r,u;if(n.singleton){var i=_++;e=g||(g=a(n)),r=l.bind(null,e,i,!1),u=l.bind(null,e,i,!0)}else t.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(e=f(n),r=p.bind(null,e),u=function(){o(e),e.href&&URL.revokeObjectURL(e.href)}):(e=a(n),r=s.bind(null,e),u=function(){o(e)});return r(t),function(n){if(n){if(n.css===t.css&&n.media===t.media&&n.sourceMap===t.sourceMap)return;r(t=n)}else u()}}function l(t,n,e,r){var u=e?"":r.css;if(t.styleSheet)t.styleSheet.cssText=b(n,u);else{var i=document.createTextNode(u),o=t.childNodes;o[n]&&t.removeChild(o[n]),o.length?t.insertBefore(i,o[n]):t.appendChild(i)}}function s(t,n){var e=n.css,r=n.media;if(r&&t.setAttribute("media",r),t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}function p(t,n){var e=n.css,r=n.sourceMap;r&&(e+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */");var u=new Blob([e],{type:"text/css"}),i=t.href;t.href=URL.createObjectURL(u),i&&URL.revokeObjectURL(i)}var h={},v=function(t){var n;return function(){return"undefined"==typeof n&&(n=t.apply(this,arguments)),n}},d=v(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),y=v(function(){return document.head||document.getElementsByTagName("head")[0]}),g=null,_=0,m=[];t.exports=function(t,n){n=n||{},"undefined"==typeof n.singleton&&(n.singleton=d()),"undefined"==typeof n.insertAt&&(n.insertAt="bottom");var e=u(t);return r(e,n),function(t){for(var i=[],o=0;o 2 | 3 | 4 | 5 | Example for react-onepage-scroll 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /example/main.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import {ScrollSection, ScrollContainer} from '../src'; 4 | 5 | class App extends React.Component { 6 | render() { 7 | return ( 8 | 9 | 12 | 13 | Fork me on GitHub 14 | 15 | 16 | 17 | 20 | 21 | 22 | 25 | 26 | 27 | 28 | ); 29 | } 30 | } 31 | 32 | ReactDOM.render(, document.getElementById('app')); -------------------------------------------------------------------------------- /example/phones.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DawnyWu/react-onepage-scroll/7cccabc2ad56a750fbf8c5a29ca2997d508ac424/example/phones.png -------------------------------------------------------------------------------- /example/server.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); 2 | const WebpackDevServer = require('webpack-dev-server'); 3 | const config = require('./webpack.config'); 4 | const path = require('path'); 5 | 6 | new WebpackDevServer(webpack(config), { 7 | contentBase: path.join(__dirname, 'build'), 8 | publicPath: `${config.output.publicPath}`, 9 | hot: true, 10 | historyApiFallback: true, 11 | stats: { 12 | colors: true, 13 | cached: false, 14 | cachedAssets: false, 15 | }, 16 | }).listen(config.port, '0.0.0.0', (err) => { 17 | if (err) { 18 | console.log(err); 19 | } 20 | 21 | console.log(`Listening at 0.0.0.0: ${config.port}`); 22 | }); 23 | -------------------------------------------------------------------------------- /example/tilted-phone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DawnyWu/react-onepage-scroll/7cccabc2ad56a750fbf8c5a29ca2997d508ac424/example/tilted-phone.png -------------------------------------------------------------------------------- /example/webpack.config.js: -------------------------------------------------------------------------------- 1 | import webpack from 'webpack'; 2 | const port = process.env.PORT || 3001; 3 | 4 | /** 5 | * This is the Webpack configuration file for local development. It contains 6 | * local-specific configuration such as the React Hot Loader, as well as: 7 | * 8 | * - The entry point of the application 9 | * - Where the output file should be 10 | * - Which loaders to use on what files to properly transpile the source 11 | * 12 | * For more information, see: http://webpack.github.io/docs/configuration.html 13 | */ 14 | module.exports = { 15 | 16 | // Efficiently evaluate modules with source maps 17 | devtool: 'eval', 18 | 19 | // Set entry point to ./example/main and include necessary files for hot load 20 | entry: [ 21 | `webpack-dev-server/client?http://localhost:${port}`, 22 | 'webpack/hot/only-dev-server', 23 | './example/main', 24 | ], 25 | 26 | // This will not actually create a bundle.js file in ./build. It is used 27 | // by the dev server for dynamic hot loading. 28 | output: { 29 | path: `${__dirname}/build/`, 30 | filename: 'app.js', 31 | publicPath: `http://localhost:${port}/build/`, 32 | }, 33 | 34 | // Necessary plugins for hot load 35 | plugins: [ 36 | new webpack.HotModuleReplacementPlugin(), 37 | new webpack.NoErrorsPlugin(), 38 | ], 39 | 40 | // Transform source code using Babel and React Hot Loader 41 | module: { 42 | loaders: [ 43 | { 44 | test: /\.jsx?$/, 45 | exclude: /node_modules/, 46 | loader: 'babel', 47 | }, 48 | // { test: /\.css$/, exclude: /\.useable\.css$/, loader: "style!css" }, 49 | { test: /\.useable\.css$/, loader: "style/useable!css" }, 50 | { 51 | test: /\.css$/, 52 | loaders: ['style', 'css?modules&importLoaders=1', 'postcss'], 53 | // include: path.join(__dirname, 'demos/demo0-simple-transition') 54 | }, 55 | { 56 | test: /\.scss$/, 57 | loaders: ["style", "css", "sass"] 58 | }, 59 | { 60 | test: /\.json$/, 61 | loader: 'json' 62 | }, 63 | { test : /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, 64 | loader : 'file-loader' 65 | } 66 | ], 67 | }, 68 | 69 | // Automatically transform files with these extensions 70 | resolve: { 71 | extensions: ['', '.js', '.jsx'], 72 | }, 73 | 74 | port, 75 | }; 76 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-onepage-scroll", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "dist/react-onepage-scroll.js", 6 | "scripts": { 7 | "start": "./node_modules/.bin/babel-node example/server.js", 8 | "compile": "webpack -p --config webpack.production.config.js", 9 | "test": "echo \"Error: no test specified\" && exit 1" 10 | }, 11 | "author": "DawnyWu", 12 | "license": "MIT", 13 | "dependencies": { 14 | "babel-core": "^6.3.26", 15 | "babel-loader": "^6.2.0", 16 | "babel-preset-es2015": "^6.3.13", 17 | "babel-preset-react": "^6.3.13", 18 | "css-loader": "^0.23.1", 19 | "file-loader": "^0.8.5", 20 | "json-loader": "^0.5.4", 21 | "lodash": "^4.5.1", 22 | "postcss-loader": "^0.8.2", 23 | "react": "^0.14.3", 24 | "react-dom": "^0.14.3", 25 | "react-motion": "^0.4.3", 26 | "style-loader": "^0.13.0", 27 | "webpack": "^1.12.9" 28 | }, 29 | "devDependencies": { 30 | "babel-cli": "^6.6.5", 31 | "babel-core": "^6.6.5", 32 | "babel-loader": "^6.2.4", 33 | "babel-plugin-add-module-exports": "^0.1.2", 34 | "babel-plugin-react-transform": "^2.0.2", 35 | "babel-preset-es2015": "^6.3.13", 36 | "babel-preset-stage-0": "^6.5.0", 37 | "json-loader": "^0.5.4", 38 | "node-sass": "^3.4.2", 39 | "react-transform-catch-errors": "^1.0.2", 40 | "react-transform-hmr": "^1.0.2", 41 | "redbox-react": "^1.2.2", 42 | "sass-loader": "^3.1.2", 43 | "uglify-loader": "^1.3.0", 44 | "webpack-dev-server": "^1.14.1" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/ScrollContainer.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0px; 3 | overflow: hidden; 4 | position: relative; 5 | /*background-color: black;*/ 6 | } 7 | 8 | .demo0 { 9 | border-radius: 4px; 10 | /*background-color: rgb(240, 240, 232);*/ 11 | position: relative; 12 | width: 100vw; 13 | height: 100vh; 14 | } 15 | 16 | 17 | .onepagePagination { 18 | position: absolute; 19 | right: 10px; 20 | top: 50%; 21 | z-index: 5; 22 | list-style: none; 23 | margin: 0; 24 | padding: 0; 25 | } 26 | .onepagePagination li { 27 | padding: 0; 28 | text-align: center; 29 | } 30 | .onepagePagination li a{ 31 | padding: 10px; 32 | width: 4px; 33 | height: 4px; 34 | display: block; 35 | } 36 | 37 | .onepagePagination li a:before{ 38 | content: ''; 39 | position: absolute; 40 | width: 4px; 41 | height: 4px; 42 | background: rgba(0,0,0,0.85); 43 | border-radius: 10px; 44 | -webkit-border-radius: 10px; 45 | -moz-border-radius: 10px; 46 | } 47 | 48 | 49 | .onepagePagination li a.active:before{ 50 | width: 10px; 51 | height: 10px; 52 | background: none; 53 | border: 1px solid black; 54 | margin-top: -4px; 55 | left: 8px; 56 | } -------------------------------------------------------------------------------- /src/ScrollContainer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Motion, spring} from 'react-motion'; 3 | import _ from 'lodash' 4 | import styles from './ScrollContainer.css' 5 | 6 | const ScrollContainer = React.createClass({ 7 | getInitialState() { 8 | return { 9 | touchStart: 0, 10 | direction: 0, 11 | touchControl: false, 12 | active: 0, 13 | allow: false // 为false的时候不会update component 14 | }; 15 | }, 16 | 17 | handleMouseDown() { 18 | this.setState({active: this.props.children.length-1 }); 19 | }, 20 | 21 | moveDown(){ 22 | // console.log('this.state.active:', this.state.active) 23 | // console.log(' this.props.children.length-1', this.props.children.length-1) 24 | this.setState({ allow: true, 25 | active: this.state.active === this.props.children.length-1 ? this.props.children.length-1 : (this.state.active + 1) }) 26 | }, 27 | 28 | moveUp(){ 29 | this.setState({ allow: true, 30 | active: this.state.active === 0 ? 0 : (this.state.active - 1) }) 31 | }, 32 | 33 | moveTo(number){ 34 | this.setState({allow: true, active: number}) 35 | }, 36 | 37 | shouldComponentUpdate(nextProps, nextState){ 38 | // console.log('this state:', this.state.allow === false) 39 | // console.log('nextState', nextState) 40 | // console.log('next state:', nextState.allow === true) 41 | if(this.state.allow === false && nextState.allow === true){ 42 | return true 43 | }else{ 44 | return false 45 | } 46 | }, 47 | 48 | handleOnWheel(e){ 49 | if(e.deltaY > 0 && this.state.allow === false && this.state.active !== this.props.children.length-1) 50 | { this.moveDown() } 51 | if(e.deltaY < 0 && this.state.allow === false && this.state.active !== 0) 52 | { this.moveUp() } 53 | }, 54 | 55 | handleTouchStart(e){ 56 | if(this.state.touchControl === true){return} 57 | console.log('touch start') 58 | this.setState({ touchStart: e.touches[0].screenY, 59 | }) 60 | }, 61 | 62 | handleTouchMove(e){ 63 | if(this.state.touchControl === true){return} 64 | console.log('touch move') 65 | let direction = e.touches[0].screenY < this.state.touchStart ? 'down' : 'up' 66 | 67 | // console.log('111111', this.atHead() && direction == 'up') 68 | // console.log('222222', this.atEnd() && direction == 'down') 69 | 70 | if(this.atHead() && direction == 'up'){ console.log('lala');return} 71 | if(this.atEnd() && direction == 'down'){ console.log('haha');return} 72 | 73 | if( direction == 'down' ){ 74 | this.setState({ direction: 1}) // 1 down 75 | } else { 76 | this.setState({ direction: -1}) // 0 up 77 | } 78 | }, 79 | 80 | handleTouchEnd(e){ 81 | if(this.state.touchControl === true){return} 82 | console.log('touch end') 83 | if(this.state.direction === 1 && !this.atEnd() ){ 84 | // console.log('moveDown') 85 | this.moveDown() 86 | this.setState({touchControl: true}) 87 | } 88 | if(this.state.direction === -1 && !this.atHead() ){ 89 | this.moveUp() 90 | this.setState({touchControl: true}) 91 | } 92 | }, 93 | 94 | atHead(){ 95 | return this.state.active === 0 96 | }, 97 | 98 | atEnd(){ 99 | return this.state.active === this.props.children.length-1 100 | }, 101 | 102 | handleLinkClick(number){ 103 | this.moveTo(number) 104 | }, 105 | 106 | handleReset(){ 107 | this.setState({ 108 | allow: false, 109 | direction: 0, 110 | touchControl: false 111 | }) 112 | }, 113 | 114 | render() { 115 | return ( 116 |
117 |
    118 | {_.map( _.times(this.props.children.length, Number), (i) => { 119 | return( 120 |
  • 121 | 123 | 124 |
  • 125 | ) 126 | })} 127 |
128 | 129 | 131 | {({x}) => 132 |
149 | {this.props.children} 150 |
151 | } 152 |
153 |
154 | ); 155 | }, 156 | }); 157 | 158 | export default ScrollContainer; 159 | -------------------------------------------------------------------------------- /src/ScrollSection.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const ScrollSection = React.createClass({ 4 | render() { 5 | let pageId = this.props.pageId; 6 | 7 | let onepageStyle = { 8 | position: 'absolute', 9 | top: `${pageId * 100}%`, 10 | width: '100%', 11 | height: '100%', 12 | borderRadius: '4px', 13 | }; 14 | 15 | let style = Object.assign({}, onepageStyle, this.props.style) 16 | return ( 17 |
{this.props.children}
18 | ); 19 | }, 20 | }); 21 | 22 | export default ScrollSection; 23 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import ScrollContainer from './ScrollContainer' 2 | import ScrollSection from './ScrollSection' 3 | 4 | export {ScrollContainer, ScrollSection} -------------------------------------------------------------------------------- /webpack.production.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | var path = require('path'); 3 | /** 4 | * This is the Webpack configuration file for production. 5 | */ 6 | module.exports = { 7 | entry: './src/index', 8 | 9 | output: { 10 | library: 'ReactOnePageScroll', 11 | libraryTarget: 'umd', 12 | path: __dirname + '/dist/', 13 | filename: 'react-onepage-scroll.js' 14 | }, 15 | 16 | externals: [{ 17 | 'react': { 18 | root: 'React', 19 | commonjs2: 'react', 20 | commonjs: 'react', 21 | amd: 'react' 22 | } 23 | }], 24 | 25 | plugins: [ 26 | new webpack.DefinePlugin({ 27 | 'process.env': { 28 | 'NODE_ENV': JSON.stringify('production') 29 | } 30 | }) 31 | ], 32 | 33 | module: { 34 | loaders: [ 35 | { 36 | test: /\.js$/, 37 | exclude: /node_modules/, 38 | loader: 'babel', 39 | query: { 40 | presets: ['es2015', 'react'] 41 | } 42 | }, 43 | { 44 | test: /\.jsx?$/, 45 | exclude: /node_modules/, 46 | loader: 'babel', 47 | }, 48 | // { test: /\.css$/, exclude: /\.useable\.css$/, loader: "style!css" }, 49 | { test: /\.useable\.css$/, loader: "style/useable!css" }, 50 | // { 51 | // test: /\.css$/, 52 | // loader: "style-loader!css-loader" 53 | // }, 54 | // { 55 | // test: /\.css$/, 56 | // loaders: ['style', 'css?modules&importLoaders=1', 'postcss'], 57 | // // include: path.join(__dirname, 'demos/demo0-simple-transition') 58 | // }, 59 | { 60 | test: /\.css$/, 61 | loaders: ['style', 'css?modules&importLoaders=1', 'postcss'], 62 | include: path.join(__dirname, 'src') 63 | }, 64 | { 65 | test: /\.scss$/, 66 | loaders: ["style", "css", "sass"] 67 | }, 68 | { 69 | test: /\.json$/, 70 | loader: 'json' 71 | }, 72 | { test : /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, 73 | loader : 'file-loader' 74 | }, 75 | { 76 | // I want to uglify with mangling only app files, not thirdparty libs 77 | test: /.*\/app\/.*\.js$/, 78 | // exclude: /.spec.js/, // excluding .spec files 79 | exclude: /node_modules/, // excluding .spec files 80 | loader: "uglify" 81 | } 82 | ], 83 | }, 84 | 85 | resolve: { 86 | extensions: ['', '.js', '.jsx'] 87 | } 88 | }; 89 | --------------------------------------------------------------------------------