react-view-pager - npm Package Compare versions

Comparing version 0.5.0-prerelease.3 to 0.5.0-prerelease.4

CHANGELOG.md

 ## CHANGELOG
+### 0.5.0-prerelease.4
+Use [resize-observer-polyfill](https://github.com/que-etc/resize-observer-polyfill) to make sure the pager is always calculated with proper view dimensions
+
+Hide view visually until it has been added to the pager
+
+General cleanup
+
 ### 0.5.0-prerelease.3
@@ -3,0 +10,0 @@ emit `viewChange` when `viewsToShow` options have changed

dist/react-view-pager.min.js

 /*!
- * React View Pager 0.5.0-prerelease.3
+ * React View Pager 0.5.0-prerelease.4
  * https://github.com/souporserious/react-view-pager
  * Copyright (c) 2016 React View Pager Authors
  */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom"),require("react-motion"),require("get-prefix")):"function"==typeof define&&define.amd?define(["react","react-dom","react-motion","get-prefix"],t):"object"==typeof exports?exports.ReactViewPager=t(require("react"),require("react-dom"),require("react-motion"),require("get-prefix")):e.ReactViewPager=t(e.React,e.ReactDOM,e.ReactMotion,e.getPrefix)}(this,function(e,t,n,i){return function(e){function t(i){if(n[i])return n[i].exports;var r=n[i]={exports:{},id:i,loaded:!1};return e[i].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var n={};return t.m=e,t.c=n,t.p="dist/",t(0)}([function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.utils=t.AnimatedView=t.View=t.Track=t.Frame=t.ViewPager=void 0;var r=n(1),o=i(r),a=n(10),s=i(a),u=n(16),c=i(u),p=n(17),f=i(p),l=n(20),h=i(l),y=n(9),d=i(y);t.ViewPager=o.default,t.Frame=s.default,t.Track=c.default,t.View=f.default,t.AnimatedView=h.default,t.utils=d.default},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}function r(e,t){var n={};for(var i in e)t.indexOf(i)>=0||Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i]);return n}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(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}function s(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)}Object.defineProperty(t,"__esModule",{value:!0});var u=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),c=n(2),p=(i(c),n(3)),f=i(p),l=function(e){function t(e){o(this,t);var n=a(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e)),i=new f.default,r=function(){return n.forceUpdate()};return i.on("viewChange",r),i.on("hydrated",r),n._pager=i,n}return s(t,e),u(t,[{key:"getChildContext",value:function(){return{pager:this._pager}}},{key:"componentDidMount",value:function(){var e=this;requestAnimationFrame(function(){e._pager.hydrate()})}},{key:"componentWillUnmount",value:function(){this._pager.destroy()}},{key:"getInstance",value:function(){return this._pager}},{key:"render",value:function(){var e=this.props,t=e.tag,n=r(e,["tag"]);return(0,c.createElement)(t,n)}}]),t}(c.Component);l.childContextTypes={pager:c.PropTypes.instanceOf(f.default)},l.propTypes={tag:c.PropTypes.string},l.defaultProps={tag:"div"},t.default=l,e.exports=t.default},function(t,n){t.exports=e},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}function r(e,t){var n={};for(var i in e)t.indexOf(i)>=0||Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i]);return n}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(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}function s(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)}Object.defineProperty(t,"__esModule",{value:!0});var u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},c=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),p=n(4),f=i(p),l=n(5),h=i(l),y=n(8),d=i(y),v=n(9),g=function(e){function t(e){var n=e.index,i=r(e,["index"]);o(this,t);var s=a(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,i));return s.index=n,s.isCurrent=!1,s.setTarget(),s.setOrigin(),s}return s(t,e),c(t,[{key:"setTarget",value:function(){var e=this.pager.getStartCoords(this.index);this.pager.options.align&&(e+=this.pager.getAlignOffset(this)),this.target=e}},{key:"setOrigin",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.pager.trackPosition;this.origin=this.target-e}}]),t}(d.default),w=function(e){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};o(this,t);var n=a(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));return n.resize=function(){n.hydrate(),n.emit("resize")},n.hydrate=function(){n.frame&&n.frame.setSize(),n.track&&n.track.setSize(),n.views.forEach(function(e){e.setSize(),e.setTarget()}),n.setPositionValue(),n.setViewStyles(),n.emit("hydrated")},n.options=u({viewsToShow:"auto",viewsToMove:1,align:0,contain:!1,axis:"x",autoSize:!1,animations:[],infinite:!1,instant:!1,swipe:!0,swipeThreshold:.5,flickTimeout:300,accessibility:!0},e),n.views=[],n.currentIndex=0,n.currentView=null,n.currentTween=0,n.trackPosition=0,n.isSwiping=!1,n.animationBus=new h.default({animations:n.options.animations,origin:function(e){return e.origin}}),"undefined"==typeof window?a(n):(window.addEventListener("resize",n.resize),n)}return s(t,e),c(t,[{key:"setOptions",value:function(e){var t=this.options;this.options=u({},this.options,e),this.animationBus.animations=this.options.animations,t.viewsToShow!==this.options.viewsToShow&&this.emit("viewChange",this.getCurrentViewIndicies())}},{key:"destroy",value:function(){window.removeEventListener("resize",this.resize)}},{key:"addFrame",value:function(e){this.frame=new d.default({node:e,pager:this}),this.hydrate()}},{key:"addTrack",value:function(e){this.track=new d.default({node:e,pager:this}),this.hydrate()}},{key:"addView",value:function(e){var t=this.views.length,n=new g({node:e,index:t,pager:this});this.views.push(n),this.currentView||this.setCurrentView(0,t,!0),this.emit("viewAdded");var i=e.querySelectorAll("img"),r=i.length;if(r)for(var o=0;o<r;o++)i[o].onload=this.hydrate;return e instanceof HTMLImageElement?e.onload=this.hydrate:this.hydrate(),n}},{key:"removeView",value:function(e){this.views=this.views.filter(function(t){return e!==t}),this.emit("viewRemoved"),this.hydrate()}},{key:"prev",value:function(){this.setCurrentView(-1)}},{key:"next",value:function(){this.setCurrentView(1)}},{key:"setCurrentView",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:this.currentIndex,n=arguments[2],i=this.options,r=i.viewsToMove,o=i.infinite,a=t+e*r,s=this.currentIndex,u=o?a:(0,v.clamp)(a,0,this.views.length-1),c=this.getView(s),p=this.getView(u);this.currentIndex=u,this.currentView=p,c.isCurrent=!1,p.isCurrent=!0,this.setPositionValue(),n||this.emit("viewChange",this.getCurrentViewIndicies())}},{key:"setPositionValue",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.currentView?this.currentView.target:0;if(!this.isSwiping){var t=this.options,n=t.viewsToShow,i=t.autoSize,r=t.infinite,o=t.contain,a=this.getTrackSize();if(r&&(e-=(Math.floor(this.currentIndex/this.views.length)||0)*a),o){var s="auto"===n&&i||n<=1?0:this.getFrameSize({autoSize:!1});e=(0,v.clamp)(e,s-a,0)}}this.trackPosition=e}},{key:"setViewStyles",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,t=this.options,n=t.infinite,i=t.align,r=(this.getFrameSize(),this.getTrackSize()),o=(0,v.modulo)(e,-r);this.views.reduce(function(t,a,s){var u=a.getSize(),c=t+u,p=t;return c+u*i<Math.abs(o)?(n&&(p+=r-t),a.inBounds=!1):a.inBounds=!0,a.setPosition(p),a.setOrigin(e),c},0)}},{key:"getNumericViewsToShow",value:function(){return isNaN(this.options.viewsToShow)?1:this.options.viewsToShow}},{key:"getMaxDimensions",value:function(e){var t=this,n=this.options.axis,i=[],r=[];return e.forEach(function(e){var n=isNaN(e)?e:t.getView(e);i.push(n.getSize("width")),r.push(n.getSize("height"))}),{width:"x"===n?(0,v.sum)(i):(0,v.max)(i),height:"y"===n?(0,v.sum)(r):(0,v.max)(r)}}},{key:"getCurrentViewIndicies",value:function(){var e=this.options,t=e.infinite,n=e.contain,i=[],r=isNaN(this.options.viewsToShow)?1:this.options.viewsToShow,o=this.currentIndex,a=this.currentIndex+(r-1);if(n){o=(0,v.clamp)(o,0,this.views.length-r),a=(0,v.clamp)(a,0,this.views.length-1);for(var s=o;s<=a;s++)i.push(s)}else for(var u=o;u<=a;u++)i.push(t?(0,v.modulo)(u,this.views.length):(0,v.clamp)(u,0,this.views.length-1));return i}},{key:"getFrameSize",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.autoSize,n=void 0===t?this.options.autoSize:t,i=e.fullSize,r=void 0!==i&&i,o={width:0,height:0};if(this.views.length)if(n){var a=this.getCurrentViewIndicies();o=this.getMaxDimensions(a)}else this.frame&&(o={width:this.frame.getSize("width"),height:this.frame.getSize("height")});return r?o:o["x"===this.options.axis?"width":"height"]}},{key:"getTrackSize",value:function(){var e=!(arguments.length>0&&void 0!==arguments[0])||arguments[0],t=e?this.views.length:this.views.length-1,n=0;return this.views.slice(0,t).forEach(function(e){n+=e.getSize()}),n}},{key:"getView",value:function(e){return this.views[(0,v.modulo)(e,this.views.length)]}},{key:"getStartCoords",value:function(e){var t=0;return this.views.slice(0,e).forEach(function(e){t-=e.getSize()}),t}},{key:"getAlignOffset",value:function(e){var t=this.getFrameSize({autoSize:!1}),n=e.getSize();return(t-n)*this.options.align}},{key:"getPositionValue",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.trackPosition,t=this.options,n=t.infinite,i=(t.contain,{x:0,y:0});if(this.currentTween=e,n){var r=this.getTrackSize();e=(0,v.modulo)(e,-r)||0}return this.emit("scroll",{progress:e/this.getTrackSize(!1),position:e}),i[this.options.axis]=e,i}},{key:"resetViews",value:function(){this.setCurrentView(0,(0,v.modulo)(this.currentIndex,this.views.length),!0)}}]),t}(f.default);t.default=w,e.exports=t.default},function(e,t){"use strict";e.exports=function(e){var t={},n=[];e=e||this,e.on=function(e,n,i){(t[e]=t[e]||[]).push([n,i])},e.off=function(e,i){e||(t={});for(var r=t[e]||n,o=r.length=i?r.length:0;o--;)i==r[o][0]&&r.splice(o,1)},e.emit=function(e){for(var i,r=t[e]||n,o=r.length>0?r.slice(0,r.length):r,a=0;i=o[a++];)i[0].apply(i[1],n.slice.call(arguments,1))}}},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),a=n(6),s=i(a),u={perspective:"px",rotate:"deg",rotateX:"deg",rotateY:"deg",rotateZ:"deg",scale:"",scaleX:"",scaleY:"",scaleZ:"",skew:"deg",skewX:"deg",skewY:"deg",translateX:"px",translateY:"px",translateZ:"px"},c=Object.keys(u),p=function(){function e(t){var n=t.animations,i=t.element,o=t.origin;r(this,e),this.animations=n,this.element=i,this.origin=o}return o(e,[{key:"getStyles",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.element,t=this.origin(e),n=[],i={};return this.animations.forEach(function(e){var r=e.prop,o=e.unit||u[r]||"",a=(0,s.default)(e.stops)(t);c.indexOf(r)>-1?n.push(r+"("+a+o+")"):i[r]=""+a+o}),n.length&&(i.transform=n.join(" ")),i}},{key:"applyStyles",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.element,t=this.getStyles(e);Object.keys(t).forEach(function(n){return e.style[n]=t[n]})}}]),e}();t.default=p,e.exports=t.default},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}function r(e){var t=[],n=[],i=[],r=[];e.forEach(function(e){var o=s(e,2),a=o[0],u=o[1];t.push(a),isNaN(u)?(n.push(parseInt(u.substr(1,2),16)),i.push(parseInt(u.substr(3,2),16)),r.push(parseInt(u.substr(5,2),16))):n.push(u)});var o=(0,c.default)(t,n);if(!i.length||!r.length)return function(e){return o(e)};var u=function(){var e=(0,c.default)(t,i),n=(0,c.default)(t,r);return{v:function(t){return"rgb("+Math.round(o(t))+", "+Math.round(e(t))+", "+Math.round(n(t))+")"}}}();return"object"===("undefined"==typeof u?"undefined":a(u))?u.v:void 0}var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};Object.defineProperty(t,"__esModule",{value:!0});var a="function"==typeof Symbol&&"symbol"===o(Symbol.iterator)?function(e){return"undefined"==typeof e?"undefined":o(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":"undefined"==typeof e?"undefined":o(e)},s=function(){function e(e,t){var n=[],i=!0,r=!1,o=void 0;try{for(var a,s=e[Symbol.iterator]();!(i=(a=s.next()).done)&&(n.push(a.value),!t||n.length!==t);i=!0);}catch(e){r=!0,o=e}finally{try{!i&&s.return&&s.return()}finally{if(r)throw o}}return n}return function(t,n){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return e(t,n);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}();t.default=r;var u=n(7),c=i(u);e.exports=t.default},function(e,t){"use strict";function n(e,t){return function(n){if(n<=e[0])return t[0];if(n>=e[e.length-1])return t[e.length-1];for(var i=0,r=e.length-1;r-i>1;){var o=i+r>>1;n<e[o]?r=o:i=o}return t[i]+(t[r]-t[i])/(e[r]-e[i])*(n-e[i])}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=n,e.exports=t.default},function(e,t){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),r=function(){function e(t){var i=t.node,r=t.pager,o=t.width,a=t.height;n(this,e),this.node=i,this.pager=r,this.x=this.y=0,this.setSize(o,a)}return i(e,[{key:"setSize",value:function(e,t){this.width=e||this.node.offsetWidth,this.height=t||this.node.offsetHeight}},{key:"setPosition",value:function(e){this[this.pager.options.axis]=e}},{key:"getSize",value:function(e){if("width"===e||"height"===e)return this[e];var t=this.pager.options.axis;return this["x"===t?"width":"height"]}},{key:"getPosition",value:function(){return this[this.pager.options.axis]}}]),e}();t.default=r,e.exports=t.default},function(e,t){"use strict";function n(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)}function i(e,t){return(e%t+t)%t}function r(e,t,n){return Math.min(Math.max(t,e),n)}function o(e){return e.reduce(function(e,t){return e+t},0)}function a(e){return Math.max.apply(null,e)}function s(e,t,r){return[].concat(n(Array(t-e))).map(function(t,n){return i(e+n,r)})}Object.defineProperty(t,"__esModule",{value:!0}),t.modulo=i,t.clamp=r,t.sum=o,t.max=a,t.range=s},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(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}function a(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)}Object.defineProperty(t,"__esModule",{value:!0});var s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},u=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),c=n(2),p=i(c),f=n(11),l=(i(f),n(12)),h=n(3),y=i(h),d=n(13),v=i(d),g=n(14),w=i(g),m=n(15),b=i(m),_={tag:c.PropTypes.any,autoSize:c.PropTypes.oneOf([!0,!1,"width","height"]),accessibility:c.PropTypes.bool,springConfig:c.PropTypes.objectOf(c.PropTypes.number)},S=function(e){function t(e){r(this,t);var n=o(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n._setFrameSize=function(){var e=n.context.pager.getFrameSize({fullSize:!0});e.width&&e.height&&n.setState(e,function(){n.state.instant&&n.setState({instant:!1})})},n.state={width:0,height:0,instant:!0},n._hydrate=!1,n}return a(t,e),u(t,[{key:"componentWillMount",value:function(){var e=this.context.pager;e.setOptions(this.props),this._swipe=new v.default(e),this._keyboard=new w.default(e)}},{key:"componentDidMount",value:function(){var e=this.context.pager;e.addFrame((0,f.findDOMNode)(this)),this._setFrameSize(),e.on("viewAdded",this._setFrameSize),e.on("viewChange",this._setFrameSize)}},{key:"componentWillReceiveProps",value:function(e){this.props.autoSize===e.autoSize&&this.props.accessibility===e.accessibility||(this.context.pager.setOptions(e),this._hydrate=!0)}},{key:"componentDidUpdate",value:function(e){this._hydrate&&(this.context.pager.hydrate(),this._hydrate=!1)}},{key:"_getFrameStyle",value:function(){var e=this.state,t=e.width,n=e.height,i=e.instant;return{maxWidth:i?t:(0,l.spring)(t),height:i?n:(0,l.spring)(n)}}},{key:"_renderFrame",value:function(e){var t=(this.context.pager,this.props),n=t.tag,i=t.accessibility,r=(0,b.default)(s({},this._swipe.getEvents(),this._keyboard.getEvents(),{tabIndex:i?0:null}),this.props,_);return(0,c.createElement)(n,s({},r,{style:s({},e,r.style)}))}},{key:"render",value:function(){var e=this,t=this.props.autoSize,n=(this.state.height,{position:"relative",overflow:"hidden"});return t?p.default.createElement(l.Motion,{style:this._getFrameStyle()},function(i){return t!==!0&&"width"!==t||!i.maxWidth||(n.maxWidth=i.maxWidth),t!==!0&&"height"!==t||!i.height||(n.height=i.height),e._renderFrame(n)}):this._renderFrame(n)}}]),t}(c.Component);S.contextTypes={pager:c.PropTypes.instanceOf(y.default)},S.propTypes=_,S.defaultProps={tag:"div",autoSize:!1,accessibility:!0,springConfig:l.presets.noWobble},t.default=S,e.exports=t.default},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e){return e.touches&&e.touches[0]||e}Object.defineProperty(t,"__esModule",{value:!0});var r=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),o=function(){function e(t){var r=this;n(this,e),this._onSwipeStart=function(e){var t=i(e),n=t.pageX,o=t.pageY;r.pager.isSwiping=!0,r._swipeStart={x:n,y:o},r._swipeDiff={x:0,y:0},r._isFlick=!0,setTimeout(function(){r._isFlick=!1},r.pager.options.flickTimeout),r.pager.emit("swipeStart")},this._onSwipeMove=function(e){if(r.pager.isSwiping){var t=r.pager.options,n=t.swipeThreshold,o=t.axis,a=i(e),s=a.pageX,u=a.pageY;if(r._trackStart||(r._trackStart=r.pager.currentTween),r._swipeDiff={x:r._swipeStart.x-s,y:r._swipeStart.y-u},r._isSwipe(n)){e.preventDefault(),e.stopPropagation();var c=r._swipeDiff[o],p=r._trackStart-c;r.pager.setPositionValue(p),r.pager.emit("swipeMove")}}},this._onSwipeEnd=function(){var e=r.pager.options,t=e.swipeThreshold,n=e.viewsToMove,i=e.axis,o=(e.infinite,r._isFlick?t:r.pager.currentView.getSize()*n*t);r.pager.isSwiping=!1,r._trackStart=!1,(r._swipeDiff.x||r._swipeDiff.y)&&(r._isSwipe(o)?r._swipeDiff[i]<0?r.pager.prev():r.pager.next():r.pager.setPositionValue()),r.pager.emit("swipeEnd")},this._onSwipePast=function(){r.pager.isSwiping&&r._onSwipeEnd()},this.pager=t,this._trackStart=!1,this._swipeStart=this._swipeDiff={x:0,y:0}}return r(e,[{key:"_isSwipe",value:function(e){var t=this._swipeDiff,n=t.x,i=t.y;return"x"===this.pager.options.axis?Math.abs(n)>Math.max(e,Math.abs(i)):Math.abs(n)<Math.max(e,Math.abs(i))}},{key:"getEvents",value:function(){var e=this.pager.options.swipe,t={};return e!==!0&&"mouse"!==e||(t.onMouseDown=this._onSwipeStart,t.onMouseMove=this._onSwipeMove,t.onMouseUp=this._onSwipeEnd,t.onMouseLeave=this._onSwipePast),e!==!0&&"touch"!==e||(t.onTouchStart=this._onSwipeStart,t.onTouchMove=this._onSwipeMove,t.onTouchEnd=this._onSwipeEnd),t}}]),e}();t.default=o,e.exports=t.default},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var r=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),o=n(9),a=function(){function e(t){var n=this;i(this,e),this._handleKeyDown=function(e){switch(e.key){case"ArrowUp":case"ArrowLeft":return void n.pager.prev();case"ArrowDown":case"ArrowRight":case" ":return void n.pager.next();case"Home":return void n.pager.setCurrentView(0,0);case"End":return void n.pager.setCurrentView(0,n.pager.views.length-1)}for(var t=(0,o.clamp)(n.pager.views.length,0,9),i=1;i<=t;i++)+e.key===i&&n.pager.setCurrentView(0,i-1)},this.pager=t}return r(e,[{key:"getEvents",value:function(){var e={};return this.pager.options.accessibility&&(e.onKeyDown=this._handleKeyDown),e}}]),e}();t.default=a,e.exports=t.default},function(e,t){"use strict";function n(e,t,n){for(var i in t)t.hasOwnProperty(i)&&!n[i]&&(e[i]=t[i]);return e}Object.defineProperty(t,"__esModule",{value:!0}),t.default=n,e.exports=t.default},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n={};for(var i in e)t.indexOf(i)>=0||Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i]);return n}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(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}function u(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)}Object.defineProperty(t,"__esModule",{value:!0});var c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},p=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},f=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),l=n(2),h=i(l),y=n(11),d=(i(y),n(12)),v=n(3),g=i(v),w=n(17),m=(i(w),n(18)),b=i(m),_=n(15),S=i(_),x=n(19)("transform"),P=function(e){function t(){var e,n,i,r;a(this,t);for(var o=arguments.length,u=Array(o),c=0;c<o;c++)u[c]=arguments[c];return n=i=s(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(u))),i.state={x:0,y:0},r=n,s(i,r)}return u(t,e),f(t,[{key:"componentWillReceiveProps",value:function(e){var t=this,n=e.trackPosition,i=this.context.pager;i.setViewStyles(n),this.setState(i.getPositionValue(n)),this.props.trackPosition!==n&&requestAnimationFrame(function(){return t.props.onScroll(n/i.getTrackSize(!1)*-1,n)})}},{key:"_renderViews",value:function(e){return l.Children.map(this.props.children,function(t){return(0,l.cloneElement)(t,{trackSize:e})})}},{key:"render",value:function(){var e=this.context.pager,t=this.props,n=t.tag,i=(t.trackPosition,t.children),a=o(t,["tag","trackPosition","children"]),s=this.state,u=s.x,c=s.y,f=e.getTrackSize(),h=p({},a.style,r({},x,"translate3d("+u+"px, "+c+"px, 0)"));if(f){var y=e.options,d=y.axis,v=y.viewsToShow,g="x"===d?"width":"height";h[g]="auto"===v?f:l.Children.count(i)/v*100+"%"}return(0,l.createElement)(n,p({},a,{style:h}),this._renderViews(f))}}]),t}(l.Component);P.propTypes=T,P.contextTypes={pager:l.PropTypes.instanceOf(g.default)};var O=function(){return null},T={tag:l.PropTypes.any,currentView:l.PropTypes.any,viewsToShow:l.PropTypes.oneOfType([l.PropTypes.number,l.PropTypes.oneOf(["auto"])]),viewsToMove:l.PropTypes.number,align:l.PropTypes.number,contain:l.PropTypes.bool,axis:l.PropTypes.oneOf(["x","y"]),animations:l.PropTypes.array,infinite:l.PropTypes.bool,instant:l.PropTypes.bool,swipe:l.PropTypes.oneOf([!0,!1,"mouse","touch"]),swipeThreshold:l.PropTypes.number,flickTimeout:l.PropTypes.number,springConfig:l.PropTypes.objectOf(l.PropTypes.number),onSwipeStart:l.PropTypes.func,onSwipeMove:l.PropTypes.func,onSwipeEnd:l.PropTypes.func,onScroll:l.PropTypes.func,onViewChange:l.PropTypes.func,onRest:l.PropTypes.func},k=function(e,t){return e.viewsToShow!==t.viewsToShow||e.viewsToMove!==t.viewsToMove||e.align!==t.align||e.axis!==t.axis||e.animations!==t.animations||e.infinite!==t.infinite||e.swipe!==t.swipe||e.swipeThreshold!==t.swipeThreshold||e.flickTimeout!==t.flickTimeout},j=function(e){function t(){var e,n,i,r;a(this,t);for(var o=arguments.length,u=Array(o),c=0;c<o;c++)u[c]=arguments[c];return n=i=s(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(u))),i.state={instant:!1},i._currentTween=0,i._hydrate=!1,i._handleOnRest=function(){i.props.infinite&&!i.state.instant&&(i.context.pager.resetViews(),i._setValueInstantly(!0,!0)),i.props.onRest()},r=n,s(i,r)}return u(t,e),f(t,[{key:"componentWillMount",value:function(){this.context.pager.setOptions(this.props)}},{key:"componentDidMount",value:function(){var e=this,t=this.context.pager;t.addTrack((0,y.findDOMNode)(this)),this.scrollTo((0,b.default)(this.props.currentView,this.props.children)),t.on("hydrated",function(){return e._setValueInstantly(!0,!0)}),t.on("swipeMove",function(){return e._setValueInstantly(!0)}),t.on("swipeEnd",function(){return e._setValueInstantly(!1)}),t.on("swipeStart",this.props.onSwipeStart),t.on("swipeMove",this.props.onSwipeMove),t.on("swipeEnd",this.props.onSwipeEnd),t.on("viewChange",this.props.onViewChange)}},{key:"componentWillReceiveProps",value:function(e){var t=e.currentView,n=e.instant,i=e.children;this.props.instant!==n&&this._setValueInstantly(n),void 0!==("undefined"==typeof t?"undefined":c(t))&&this.props.currentView!==t&&this.scrollTo((0,b.default)(t,i)),k(this.props,e)&&(this.context.pager.setOptions(e),this._hydrate=!0)}},{key:"componentDidUpdate",value:function(e){this._hydrate&&(this.context.pager.hydrate(),this._hydrate=!1)}},{key:"prev",value:function(){this.context.pager.prev()}},{key:"next",value:function(){this.context.pager.next()}},{key:"scrollTo",value:function(e){this.context.pager.setCurrentView(0,e)}},{key:"_setValueInstantly",value:function(e,t){var n=this;this.setState({instant:e},function(){t&&n.setState({instant:!1})})}},{key:"_getTrackStyle",value:function(){var e=this.context.pager.trackPosition;return this.state.instant||(e=(0,d.spring)(e,this.props.springConfig)),{trackPosition:e}}},{key:"render",value:function(){var e=this.props,t=e.tag,n=e.onScroll,i=o(e,["tag","onScroll"]);return h.default.createElement(d.Motion,{style:this._getTrackStyle(),onRest:this._handleOnRest},function(e){var r=e.trackPosition;return(0,l.createElement)(P,(0,S.default)({trackPosition:r,tag:t,onScroll:n},i,T))})}}]),t}(l.Component);j.propTypes=T,j.defaultProps={tag:"div",currentView:0,viewsToShow:1,viewsToMove:1,align:0,contain:!1,axis:"x",infinite:!1,instant:!1,swipe:!0,swipeThreshold:.5,flickTimeout:300,springConfig:d.presets.noWobble,onSwipeStart:O,onSwipeMove:O,onSwipeEnd:O,onScroll:O,onViewChange:O,onRest:O},j.contextTypes={pager:l.PropTypes.instanceOf(g.default)},t.default=j,e.exports=t.default},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}function r(e,t){var n={};for(var i in e)t.indexOf(i)>=0||Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i]);return n}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(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}function s(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)}Object.defineProperty(t,"__esModule",{value:!0});var u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},c=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),p=n(2),f=(i(p),n(11)),l=(i(f),n(3)),h=i(l),y=function(e){function t(){var e,n,i,r;o(this,t);for(var s=arguments.length,u=Array(s),c=0;c<s;c++)u[c]=arguments[c];return n=i=a(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(u))),i._viewInstance=null,r=n,a(i,r)}return s(t,e),c(t,[{key:"getChildContext",value:function(){return{view:this._viewInstance}}},{key:"componentDidMount",value:function(){this._viewInstance=this.context.pager.addView((0,f.findDOMNode)(this)),this.forceUpdate()}},{key:"componentWillUnmount",value:function(){this.context.pager.removeView(this._viewInstance)}},{key:"render",value:function(){var e=this.context.pager,t=e.options,n=t.viewsToShow,i=t.axis,o=this.props,a=o.tag,s=(o.trackSize,r(o,["tag","trackSize"])),c=u({},this.props.style);return"x"===i&&(c.display="inline-block",c.verticalAlign="top"),"auto"!==n&&e.views.length&&(c["x"===i?"width":"height"]=100/e.views.length+"%"),this._viewInstance&&(e.options.infinite&&!this._viewInstance.inBounds&&(c.position="relative",c["y"===i?"top":"left"]=this._viewInstance.getPosition()),c=u({},c,e.animationBus.getStyles(this._viewInstance))),(0,p.createElement)(a,u({},s,{style:c}))}}]),t}(p.Component);y.contextTypes={pager:p.PropTypes.instanceOf(h.default)},y.childContextTypes={view:p.PropTypes.any},y.propTypes={tag:p.PropTypes.any},y.defaultProps={tag:"div"},t.default=y,e.exports=t.default},function(e,t,n){"use strict";function i(e,t){var n=null;return r.Children.forEach(t,function(t,i){if(t.key===e||i===e)return void(n=i)}),n}Object.defineProperty(t,"__esModule",{value:!0}),t.default=i;var r=n(2);
-e.exports=t.default},function(e,t){e.exports=i},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}function r(e,t){var n={};for(var i in e)t.indexOf(i)>=0||Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i]);return n}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(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}function s(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)}Object.defineProperty(t,"__esModule",{value:!0});var u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},c=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),p=n(2),f=(i(p),n(5)),l=i(f),h=n(3),y=i(h),d=n(15),v=i(d),g={tag:p.PropTypes.string,index:p.PropTypes.number,animations:p.PropTypes.array},w=function(e){function t(){return o(this,t),a(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return s(t,e),c(t,[{key:"componentWillMount",value:function(){var e=this.props.animations;e.length&&(this._animationBus=new l.default({animations:e,origin:function(e){return e.origin}}))}},{key:"render",value:function(){var e=this.props,t=e.tag,n=e.index,i=r(e,["tag","index"]),o=u({},i.style);if(this._animationBus){var a=this.context.view||this.context.pager.getView(n);a&&(o=u({},i.style,this._animationBus.getStyles(a)))}return(0,p.createElement)(t,(0,v.default)({style:o},this.props,g))}}]),t}(p.Component);w.contextTypes={pager:p.PropTypes.instanceOf(y.default),view:p.PropTypes.any},w.propTypes=g,w.defaultProps={tag:"div",animations:[]},t.default=w,e.exports=t.default}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("get-prefix"),require("react-dom"),require("react-motion")):"function"==typeof define&&define.amd?define(["react","get-prefix","react-dom","react-motion"],t):"object"==typeof exports?exports.ReactViewPager=t(require("react"),require("get-prefix"),require("react-dom"),require("react-motion")):e.ReactViewPager=t(e.React,e.getPrefix,e.ReactDOM,e.ReactMotion)}(this,function(e,t,n,i){return function(e){function t(i){if(n[i])return n[i].exports;var r=n[i]={exports:{},id:i,loaded:!1};return e[i].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var n={};return t.m=e,t.c=n,t.p="dist/",t(0)}([function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.utils=t.AnimatedView=t.View=t.Track=t.Frame=t.ViewPager=void 0;var r=n(1),o=i(r),s=n(12),a=i(s),u=n(18),c=i(u),p=n(19),f=i(p),l=n(21),h=i(l),d=n(10),y=i(d);t.ViewPager=o.default,t.Frame=a.default,t.Track=c.default,t.View=f.default,t.AnimatedView=h.default,t.utils=y.default},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}function r(e,t){var n={};for(var i in e)t.indexOf(i)>=0||Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i]);return n}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(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}function a(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)}Object.defineProperty(t,"__esModule",{value:!0});var u=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),c=n(2),p=(i(c),n(3)),f=i(p),l=function(e){function t(e){o(this,t);var n=s(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e)),i=new f.default,r=function(){return n.forceUpdate()};return i.on("viewChange",r),i.on("hydrated",r),n._pager=i,n}return a(t,e),u(t,[{key:"getChildContext",value:function(){return{pager:this._pager}}},{key:"componentDidMount",value:function(){var e=this;requestAnimationFrame(function(){e._pager.hydrate()})}},{key:"componentWillUnmount",value:function(){this._pager.destroy()}},{key:"getInstance",value:function(){return this._pager}},{key:"render",value:function(){var e=this.props,t=e.tag,n=r(e,["tag"]);return(0,c.createElement)(t,n)}}]),t}(c.Component);l.childContextTypes={pager:c.PropTypes.instanceOf(f.default)},l.propTypes={tag:c.PropTypes.string},l.defaultProps={tag:"div"},t.default=l,e.exports=t.default},function(t,n){t.exports=e},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}function r(e,t){var n={};for(var i in e)t.indexOf(i)>=0||Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i]);return n}function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function s(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(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}function u(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)}Object.defineProperty(t,"__esModule",{value:!0});var c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},p=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),f=n(4),l=i(f),h=n(5),d=i(h),y=n(6),v=i(y),g=n(9),w=i(g),b=n(10),_=n(11)("transform"),m=function(e){function t(){return s(this,t),a(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return u(t,e),p(t,[{key:"getStyles",value:function(e){var t=this.pager.getPositionValue(e),n=t.x,i=t.y,r=this.pager.getTrackSize(),s=o({},_,"translate3d("+n+"px, "+i+"px, 0)");if(r){var a=this.pager.options,u=a.axis,c=a.viewsToShow,p="x"===u?"width":"height";s[p]="auto"===c?r:this.pager.views.length/c*100+"%"}return s}}]),t}(w.default),x=function(e){function t(e){var n=e.index,i=r(e,["index"]);s(this,t);var o=a(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,i));return o.index=n,o.isCurrent=!1,o.inBounds=!0,o.setTarget(),o.setOrigin(),o}return u(t,e),p(t,[{key:"setTarget",value:function(){var e=this.pager.options,t=e.align,n=(e.viewsToShow,this.pager.getStartCoords(this.index));t&&(n+=this.pager.getAlignOffset(this)),this.target=n}},{key:"setOrigin",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.pager.trackPosition;this.origin=this.target-e}},{key:"getStyles",value:function(){var e=this.pager.options,t=e.axis,n=e.viewsToShow,i=e.infinite,r={};return"x"===t&&(r.display="inline-block",r.verticalAlign="top"),"auto"!==n&&(r["x"===t?"width":"height"]=100/this.pager.views.length+"%"),i&&!this.inBounds&&(r.position="relative",r["y"===t?"top":"left"]=this.getPosition()),c({},r,this.pager.animationBus.getStyles(this))}}]),t}(w.default),S=function(e){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};s(this,t);var n=a(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));return n.hydrate=function(){n.frame.setSize(),n.track.setSize(),n.views.forEach(function(e){e.setSize(),e.setTarget()}),n.setPositionValue(),n.setViewStyles(),n.emit("hydrated")},n.options=c({viewsToShow:1,viewsToMove:1,align:0,contain:!1,axis:"x",autoSize:!1,animations:[],infinite:!1,instant:!1,swipe:!0,swipeThreshold:.5,flickTimeout:300,accessibility:!0},e),n.views=[],n.currentIndex=0,n.currentView=null,n.currentTween=0,n.trackPosition=0,n.isSwiping=!1,n.resizeObserver=new d.default(function(){n.hydrate()}),n.animationBus=new v.default({animations:n.options.animations,origin:function(e){return e.origin}}),n}return u(t,e),p(t,[{key:"setOptions",value:function(e){var t=this.options;this.options=c({},this.options,e),this.animationBus.animations=this.options.animations,t.viewsToShow!==this.options.viewsToShow&&this.emit("viewChange",this.getCurrentIndicies())}},{key:"addFrame",value:function(e){this.frame=new w.default({node:e,pager:this})}},{key:"addTrack",value:function(e){this.track=new m({node:e,pager:this})}},{key:"addView",value:function(e){var t=this.views.length,n=new x({node:e,index:t,pager:this});return this.views.push(n),this.currentView||this.setCurrentView({index:t,suppressEvent:!0}),this.resizeObserver.observe(e),this.emit("viewAdded"),n}},{key:"removeView",value:function(e){this.views=this.views.filter(function(t){return e!==t}),this.emit("viewRemoved")}},{key:"prev",value:function(){this.setCurrentView({direction:-1})}},{key:"next",value:function(){this.setCurrentView({direction:1})}},{key:"setCurrentView",value:function(e){var t=e.direction,n=void 0===t?0:t,i=e.index,r=void 0===i?this.currentIndex:i,o=e.suppressEvent,s=void 0!==o&&o,a=this.options,u=a.viewsToMove,c=a.infinite,p=r+n*u,f=this.currentIndex,l=c?p:(0,b.clamp)(p,0,this.views.length-1),h=this.getView(f),d=this.getView(l);this.currentIndex=l,this.currentView=d,h.isCurrent=!1,d.isCurrent=!0,this.setPositionValue(),s||this.emit("viewChange",this.getCurrentIndicies())}},{key:"setPositionValue",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.currentView?this.currentView.target:0;if(!this.isSwiping){var t=this.options,n=t.viewsToShow,i=t.autoSize,r=t.infinite,o=t.contain,s=this.getTrackSize();if(r&&(e-=(Math.floor(this.currentIndex/this.views.length)||0)*s),o){var a="auto"===n&&i||n<=1?0:this.getFrameSize({autoSize:!1});e=(0,b.clamp)(e,a-s,0)}}this.trackPosition=e}},{key:"setViewStyles",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,t=this.options,n=t.infinite,i=t.align,r=(this.getFrameSize(),this.getTrackSize()),o=(0,b.modulo)(e,-r);this.views.reduce(function(t,s,a){var u=s.getSize(),c=t+u,p=t;return c+u*i<Math.abs(o)?(n&&(p+=r-t),s.inBounds=!1):s.inBounds=!0,s.setPosition(p),s.setOrigin(e),c},0)}},{key:"getNumericViewsToShow",value:function(){return isNaN(this.options.viewsToShow)?1:this.options.viewsToShow}},{key:"getMaxDimensions",value:function(e){var t=this,n=this.options.axis,i=[],r=[];return e.forEach(function(e){var n=isNaN(e)?e:t.getView(e);i.push(n.getSize("width")),r.push(n.getSize("height"))}),{width:"x"===n?(0,b.sum)(i):(0,b.max)(i),height:"y"===n?(0,b.sum)(r):(0,b.max)(r)}}},{key:"getCurrentIndicies",value:function(){var e=this.options,t=e.infinite,n=e.contain,i=[],r=isNaN(this.options.viewsToShow)?1:this.options.viewsToShow,o=this.currentIndex,s=this.currentIndex+(r-1);if(n){o=(0,b.clamp)(o,0,this.views.length-r),s=(0,b.clamp)(s,0,this.views.length-1);for(var a=o;a<=s;a++)i.push(a)}else for(var u=o;u<=s;u++)i.push(t?(0,b.modulo)(u,this.views.length):(0,b.clamp)(u,0,this.views.length-1));return i}},{key:"getFrameSize",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.autoSize,n=void 0===t?this.options.autoSize:t,i=e.fullSize,r=void 0!==i&&i,o={width:0,height:0};if(this.views.length)if(n){var s=this.getCurrentIndicies();o=this.getMaxDimensions(s)}else this.frame&&(o={width:this.frame.getSize("width"),height:this.frame.getSize("height")});return r?o:o["x"===this.options.axis?"width":"height"]}},{key:"getTrackSize",value:function(){var e=!(arguments.length>0&&void 0!==arguments[0])||arguments[0],t=e?this.views.length:this.views.length-1,n=0;return this.views.slice(0,t).forEach(function(e){n+=e.getSize()}),n}},{key:"getView",value:function(e){return this.views[(0,b.modulo)(e,this.views.length)]}},{key:"getStartCoords",value:function(e){var t=0;return this.views.slice(0,e).forEach(function(e){t-=e.getSize()}),t}},{key:"getAlignOffset",value:function(e){var t=this.getFrameSize({autoSize:!1}),n=e.getSize();return(t-n)*this.options.align}},{key:"getPositionValue",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.trackPosition,t=this.options,n=t.infinite,i=(t.contain,{x:0,y:0});if(this.currentTween=e,n){var r=this.getTrackSize();e=(0,b.modulo)(e,-r)||0}return this.emit("scroll",{progress:e/this.getTrackSize(!1),position:e}),i[this.options.axis]=e,i}},{key:"resetViewIndex",value:function(){this.setCurrentView({index:(0,b.modulo)(this.currentIndex,this.views.length),suppressEvent:!0})}}]),t}(l.default);t.default=S,e.exports=t.default},function(e,t){"use strict";e.exports=function(e){var t={},n=[];e=e||this,e.on=function(e,n,i){(t[e]=t[e]||[]).push([n,i])},e.off=function(e,i){e||(t={});for(var r=t[e]||n,o=r.length=i?r.length:0;o--;)i==r[o][0]&&r.splice(o,1)},e.emit=function(e){for(var i,r=t[e]||n,o=r.length>0?r.slice(0,r.length):r,s=0;i=o[s++];)i[0].apply(i[1],n.slice.call(arguments,1))}}},function(e,t,n){var i,r,o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};!function(s,a){"object"===o(t)&&"undefined"!=typeof e?e.exports=a():(i=a,r="function"==typeof i?i.call(t,n,t,e):i,!(void 0!==r&&(e.exports=r)))}(void 0,function(){"use strict";function e(e){return window.getComputedStyle(e)}function t(e){return parseFloat(e)||0}function n(e){for(var n=arguments.length,i=Array(n>1?n-1:0),r=1;r<n;r++)i[r-1]=arguments[r];return i.reduce(function(n,i){var r=e["border-"+i+"-width"];return n+t(r)},0)}function i(e){for(var n=["top","right","bottom","left"],i={},r=n,o=Array.isArray(r),s=0,r=o?r:r[Symbol.iterator]();;){var a;if(o){if(s>=r.length)break;a=r[s++]}else{if(s=r.next(),s.done)break;a=s.value}var u=a,c=e["padding-"+u];i[u]=t(c)}return i}function r(e,t,n,i){return{width:e,height:t,top:n,right:e+i,bottom:t+n,left:i}}function s(e){var t=e.getBBox();return r(t.width,t.height,0,0)}function a(){var n=e(document.documentElement),i=t(n.width),o=t(n.height);return r(i,o,0,0)}function u(o){var s=o.clientWidth,a=o.clientHeight;if(!s&&!a)return O;var u=e(o),c=i(u),p=c.left+c.right,f=c.top+c.bottom,l=t(u.width),h=t(u.height);"border-box"===u.boxSizing&&(Math.round(l+p)!==s&&(l-=n(u,"left","right")+p),Math.round(h+f)!==a&&(h-=n(u,"top","bottom")+f));var d=Math.round(l+p)-s,y=Math.round(h+f)-a;return 1!==Math.abs(d)&&(l-=d),1!==Math.abs(y)&&(h-=y),r(l,h,c.top,c.left)}function c(e){return e instanceof window.SVGElement}function p(e){return e===document.documentElement}function f(e){return c(e)?s(e):p(e)?a():u(e)}function l(e,t){for(var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i={configurable:n.configurable||!1,writable:n.writable||!1,enumerable:n.enumerable||!1},r=Object.keys(t),o=Array.isArray(r),s=0,r=o?r:r[Symbol.iterator]();;){var a;if(o){if(s>=r.length)break;a=r[s++]}else{if(s=r.next(),s.done)break;a=s.value}var u=a;i.value=t[u],Object.defineProperty(e,u,i)}return e}var h=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},d=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),y=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+("undefined"==typeof t?"undefined":o(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)},v=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!==("undefined"==typeof t?"undefined":o(t))&&"function"!=typeof t?e:t},g="function"==typeof window.WeakMap&&"function"==typeof window.Map,w=function(){function e(e,t){var n=-1;return e.some(function(e,i){var r=e[0]===t;return r&&(n=i),r}),n}return g?window.WeakMap:function(){function t(){h(this,t),this.__entries__=[]}return t.prototype.get=function(t){var n=e(this.__entries__,t);return this.__entries__[n][1]},t.prototype.set=function(t,n){var i=e(this.__entries__,t);~i?this.__entries__[i][1]=n:this.__entries__.push([t,n])},t.prototype.delete=function(t){var n=this.__entries__,i=e(n,t);~i&&n.splice(i,1)},t.prototype.has=function(t){return!!~e(this.__entries__,t)},t}()}(),b=function(){return g?window.Map:function(e){function t(){return h(this,t),v(this,e.apply(this,arguments))}return y(t,e),t.prototype.clear=function(){this.__entries__.splice(0,this.__entries__.length)},t.prototype.entries=function(){return this.__entries__.slice()},t.prototype.keys=function(){return this.__entries__.map(function(e){return e[0]})},t.prototype.values=function(){return this.__entries__.map(function(e){return e[1]})},t.prototype.forEach=function(e){for(var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=this.__entries__,i=Array.isArray(n),r=0,n=i?n:n[Symbol.iterator]();;){var o;if(i){if(r>=n.length)break;o=n[r++]}else{if(r=n.next(),r.done)break;o=r.value}var s=o;e.call(t,s[1],s[0])}},d(t,[{key:"size",get:function(){return this.__entries__.length}}]),t}(w)}(),_=function(){return"function"==typeof window.requestAnimationFrame?window.requestAnimationFrame:function(e){return setTimeout(function(){return e(Date.now())},1e3/60)}}(),m=function(e){function t(){e.apply.apply(e,s),s=null,a&&(i.apply.apply(i,a),a=null)}function n(){o?_(t):t()}function i(){for(var e=arguments.length,t=Array(e),i=0;i<e;i++)t[i]=arguments[i];var o=[this,t];s?a=o:(s=o,setTimeout(n,r))}var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,o=arguments.length>2&&void 0!==arguments[2]&&arguments[2],s=null,a=null;return i},x="function"==typeof window.MutationObserver,S=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];h(this,e),this._isCycleContinuous=!x||t,this._listenersEnabled=!1,this._mutationsObserver=null,this._observers=[],this.refresh=m(this.refresh.bind(this),30,!0),this._continuousUpdateHandler=m(this.refresh,70)}return e.prototype.connect=function(e){this.isConnected(e)||this._observers.push(e),this._listenersEnabled||this._addListeners()},e.prototype.disconnect=function(e){var t=this._observers,n=t.indexOf(e);~n&&t.splice(n,1),!t.length&&this._listenersEnabled&&this._removeListeners()},e.prototype.isConnected=function(e){return!!~this._observers.indexOf(e)},e.prototype.refresh=function(){var e=this._updateObservers();e?this.refresh():this._isCycleContinuous&&this._listenersEnabled&&this._continuousUpdateHandler()},e.prototype._updateObservers=function(){for(var e=!1,t=this._observers,n=Array.isArray(t),i=0,t=n?t:t[Symbol.iterator]();;){var r;if(n){if(i>=t.length)break;r=t[i++]}else{if(i=t.next(),i.done)break;r=i.value}var o=r;o.gatherActive(),o.hasActive()&&(e=!0,o.broadcastActive())}return e},e.prototype._addListeners=function(){this._listenersEnabled||(window.addEventListener("resize",this.refresh),x&&(this._mutationsObserver=new MutationObserver(this.refresh),this._mutationsObserver.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0})),this._listenersEnabled=!0,this._isCycleContinuous&&this.refresh())},e.prototype._removeListeners=function(){this._listenersEnabled&&(window.removeEventListener("resize",this.refresh),this._mutationsObserver&&this._mutationsObserver.disconnect(),this._mutationsObserver=null,this._listenersEnabled=!1)},d(e,[{key:"continuousUpdates",get:function(){return this._isCycleContinuous},set:function(e){x&&(this._isCycleContinuous=e,this._listenersEnabled&&e&&this.refresh())}}]),e}(),O=r(0,0,0,0),T=function(){function e(t){h(this,e),this.target=t,this._contentRect=O,this.broadcastWidth=0,this.broadcastHeight=0}return e.prototype.broadcastRect=function(){var e=this._contentRect;return this.broadcastWidth=e.width,this.broadcastHeight=e.height,e},e.prototype.isActive=function(){var e=f(this.target);return this._contentRect=e,e.width!==this.broadcastWidth||e.height!==this.broadcastHeight},e}(),k=function e(t,n){h(this,e);var i=window.ClientRect||Object,r=Object.create(i.prototype);l(r,n,{configurable:!0}),l(this,{target:t,contentRect:r},{configurable:!0})},P=function(){function e(t,n,i){if(h(this,e),"function"!=typeof t)throw new TypeError("The callback provided as parameter 1 is not a function.");this._callback=t,this._targets=new b,this._activeTargets=[],this._controller=n,this._publicObserver=i}return e.prototype.observe=function(e){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if(!(e instanceof Element))throw new TypeError('parameter 1 is not of type "Element".');var t=this._targets;t.has(e)||(t.set(e,new T(e)),this._controller.isConnected(this)||this._controller.connect(this),this._controller.refresh())},e.prototype.unobserve=function(e){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if(!(e instanceof Element))throw new TypeError('parameter 1 is not of type "Element".');var t=this._targets;t.has(e)&&(t.delete(e),t.size||this.disconnect())},e.prototype.disconnect=function(){this.clearActive(),this._targets.clear(),this._controller.disconnect(this)},e.prototype.gatherActive=function(){this.clearActive();var e=this._activeTargets;this._targets.forEach(function(t){t.isActive()&&e.push(t)})},e.prototype.broadcastActive=function(){if(this.hasActive()){var e=this._publicObserver,t=this._activeTargets.map(function(e){return new k(e.target,e.broadcastRect())});this.clearActive(),this._callback.call(e,t,e)}},e.prototype.clearActive=function(){this._activeTargets.splice(0)},e.prototype.hasActive=function(){return!!this._activeTargets.length},e}(),j=new S,E=new w,M=function(){function e(t){if(h(this,e),!arguments.length)throw new TypeError("1 argument required, but only 0 present.");var n=new P(t,j,this);E.set(this,n)}return d(e,null,[{key:"continuousUpdates",get:function(){return j.continuousUpdates},set:function(e){if("boolean"!=typeof e)throw new TypeError('type of "continuousUpdates" value must be boolean.');j.continuousUpdates=e}}]),e}();["observe","unobserve","disconnect"].forEach(function(e){M.prototype[e]=function(){var t;return(t=E.get(this))[e].apply(t,arguments)}});var C=M;"function"==typeof window.ResizeObserver&&(C=window.ResizeObserver);var V=C;return V})},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),s=n(7),a=i(s),u={perspective:"px",rotate:"deg",rotateX:"deg",rotateY:"deg",rotateZ:"deg",scale:"",scaleX:"",scaleY:"",scaleZ:"",skew:"deg",skewX:"deg",skewY:"deg",translateX:"px",translateY:"px",translateZ:"px"},c=Object.keys(u),p=function(){function e(t){var n=t.animations,i=t.element,o=t.origin;r(this,e),this.animations=n,this.element=i,this.origin=o}return o(e,[{key:"getStyles",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.element,t=this.origin(e),n=[],i={};return this.animations.forEach(function(e){var r=e.prop,o=e.unit||u[r]||"",s=(0,a.default)(e.stops)(t);c.indexOf(r)>-1?n.push(r+"("+s+o+")"):i[r]=""+s+o}),n.length&&(i.transform=n.join(" ")),i}},{key:"applyStyles",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.element,t=this.getStyles(e);Object.keys(t).forEach(function(n){return e.style[n]=t[n]})}}]),e}();t.default=p,e.exports=t.default},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}function r(e){var t=[],n=[],i=[],r=[];e.forEach(function(e){var o=a(e,2),s=o[0],u=o[1];t.push(s),isNaN(u)?(n.push(parseInt(u.substr(1,2),16)),i.push(parseInt(u.substr(3,2),16)),r.push(parseInt(u.substr(5,2),16))):n.push(u)});var o=(0,c.default)(t,n);if(!i.length||!r.length)return function(e){return o(e)};var u=function(){var e=(0,c.default)(t,i),n=(0,c.default)(t,r);return{v:function(t){return"rgb("+Math.round(o(t))+", "+Math.round(e(t))+", "+Math.round(n(t))+")"}}}();return"object"===("undefined"==typeof u?"undefined":s(u))?u.v:void 0}var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};Object.defineProperty(t,"__esModule",{value:!0});var s="function"==typeof Symbol&&"symbol"===o(Symbol.iterator)?function(e){return"undefined"==typeof e?"undefined":o(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":"undefined"==typeof e?"undefined":o(e)},a=function(){function e(e,t){var n=[],i=!0,r=!1,o=void 0;try{for(var s,a=e[Symbol.iterator]();!(i=(s=a.next()).done)&&(n.push(s.value),!t||n.length!==t);i=!0);}catch(e){r=!0,o=e}finally{try{!i&&a.return&&a.return()}finally{if(r)throw o}}return n}return function(t,n){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return e(t,n);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}();t.default=r;var u=n(8),c=i(u);e.exports=t.default},function(e,t){"use strict";function n(e,t){return function(n){if(n<=e[0])return t[0];if(n>=e[e.length-1])return t[e.length-1];for(var i=0,r=e.length-1;r-i>1;){var o=i+r>>1;n<e[o]?r=o:i=o}return t[i]+(t[r]-t[i])/(e[r]-e[i])*(n-e[i])}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=n,e.exports=t.default},function(e,t){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),r=function(){function e(t){var i=t.node,r=t.pager,o=t.width,s=t.height;n(this,e),this.node=i,this.pager=r,this.x=this.y=0,this.setSize(o,s)}return i(e,[{key:"setSize",value:function(e,t){this.width=e||this.node.offsetWidth,this.height=t||this.node.offsetHeight}},{key:"setPosition",value:function(e){this[this.pager.options.axis]=e}},{key:"getSize",value:function(e){if("width"===e||"height"===e)return this[e];var t=this.pager.options.axis;return this["x"===t?"width":"height"]}},{key:"getPosition",value:function(){return this[this.pager.options.axis]}}]),e}();t.default=r,e.exports=t.default},function(e,t){"use strict";function n(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)}function i(e,t){return(e%t+t)%t}function r(e,t,n){return Math.min(Math.max(t,e),n)}function o(e){return e.reduce(function(e,t){return e+t},0)}function s(e){return Math.max.apply(null,e)}function a(e,t,r){return[].concat(n(Array(t-e))).map(function(t,n){return i(e+n,r)})}Object.defineProperty(t,"__esModule",{value:!0}),t.modulo=i,t.clamp=r,t.sum=o,t.max=s,t.range=a},function(e,n){e.exports=t},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(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}function s(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)}Object.defineProperty(t,"__esModule",{value:!0});var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},u=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),c=n(2),p=i(c),f=n(13),l=(i(f),n(14)),h=n(3),d=i(h),y=n(15),v=i(y),g=n(16),w=i(g),b=n(17),_=i(b),m={tag:c.PropTypes.any,autoSize:c.PropTypes.oneOf([!0,!1,"width","height"]),accessibility:c.PropTypes.bool,springConfig:c.PropTypes.objectOf(c.PropTypes.number)},x=function(e){function t(e){r(this,t);var n=o(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n._setFrameSize=function(){var e=n.context.pager.getFrameSize({fullSize:!0});e.width&&e.height&&n.setState(e,function(){n.state.instant&&n.setState({instant:!1})})},n.state={width:0,height:0,instant:!0},n._hydrate=!1,n}return s(t,e),u(t,[{key:"componentWillMount",value:function(){var e=this.context.pager;e.setOptions(this.props),this._swipe=new v.default(e),this._keyboard=new w.default(e)}},{key:"componentDidMount",value:function(){var e=this.context.pager;e.addFrame((0,f.findDOMNode)(this)),this._setFrameSize(),e.on("viewAdded",this._setFrameSize),e.on("viewChange",this._setFrameSize)}},{key:"componentWillReceiveProps",value:function(e){this.props.autoSize===e.autoSize&&this.props.accessibility===e.accessibility||(this.context.pager.setOptions(e),this._hydrate=!0)}},{key:"componentDidUpdate",value:function(e){this._hydrate&&(this.context.pager.hydrate(),this._hydrate=!1)}},{key:"_getFrameStyle",value:function(){var e=this.state,t=e.width,n=e.height,i=e.instant;return{maxWidth:i?t:(0,l.spring)(t),height:i?n:(0,l.spring)(n)}}},{key:"_renderFrame",value:function(e){var t=(this.context.pager,this.props),n=t.tag,i=t.accessibility,r=(0,_.default)(a({},this._swipe.getEvents(),this._keyboard.getEvents(),{tabIndex:i?0:null}),this.props,m);return(0,c.createElement)(n,a({},r,{style:a({},e,r.style)}))}},{key:"render",value:function(){var e=this,t=this.props.autoSize,n=(this.state.height,{position:"relative",overflow:"hidden"});return t?p.default.createElement(l.Motion,{style:this._getFrameStyle()},function(i){return t!==!0&&"width"!==t||!i.maxWidth||(n.maxWidth=i.maxWidth),t!==!0&&"height"!==t||!i.height||(n.height=i.height),e._renderFrame(n)}):this._renderFrame(n)}}]),t}(c.Component);x.contextTypes={pager:c.PropTypes.instanceOf(d.default)},x.propTypes=m,x.defaultProps={tag:"div",autoSize:!1,accessibility:!0,springConfig:l.presets.noWobble},t.default=x,e.exports=t.default},function(e,t){e.exports=n},function(e,t){e.exports=i},function(e,t){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e){return e.touches&&e.touches[0]||e}Object.defineProperty(t,"__esModule",{value:!0});var r=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),o=function(){function e(t){var r=this;n(this,e),this._onSwipeStart=function(e){var t=i(e),n=t.pageX,o=t.pageY;r.pager.isSwiping=!0,r._swipeStart={x:n,y:o},r._swipeDiff={x:0,y:0},r._isFlick=!0,setTimeout(function(){r._isFlick=!1},r.pager.options.flickTimeout),r.pager.emit("swipeStart")},this._onSwipeMove=function(e){if(r.pager.isSwiping){var t=r.pager.options,n=t.swipeThreshold,o=t.axis,s=i(e),a=s.pageX,u=s.pageY;if(r._trackStart||(r._trackStart=r.pager.currentTween),r._swipeDiff={x:r._swipeStart.x-a,y:r._swipeStart.y-u},r._isSwipe(n)){e.preventDefault(),e.stopPropagation();var c=r._swipeDiff[o],p=r._trackStart-c;r.pager.setPositionValue(p),r.pager.emit("swipeMove")}}},this._onSwipeEnd=function(){var e=r.pager.options,t=e.swipeThreshold,n=e.viewsToMove,i=e.axis,o=(e.infinite,r._isFlick?t:r.pager.currentView.getSize()*n*t);r.pager.isSwiping=!1,r._trackStart=!1,(r._swipeDiff.x||r._swipeDiff.y)&&(r._isSwipe(o)?r._swipeDiff[i]<0?r.pager.prev():r.pager.next():r.pager.setPositionValue()),r.pager.emit("swipeEnd")},this._onSwipePast=function(){r.pager.isSwiping&&r._onSwipeEnd()},this.pager=t,this._trackStart=!1,this._swipeStart=this._swipeDiff={x:0,y:0}}return r(e,[{key:"_isSwipe",value:function(e){var t=this._swipeDiff,n=t.x,i=t.y;return"x"===this.pager.options.axis?Math.abs(n)>Math.max(e,Math.abs(i)):Math.abs(n)<Math.max(e,Math.abs(i))}},{key:"getEvents",value:function(){var e=this.pager.options.swipe,t={};return e!==!0&&"mouse"!==e||(t.onMouseDown=this._onSwipeStart,t.onMouseMove=this._onSwipeMove,t.onMouseUp=this._onSwipeEnd,t.onMouseLeave=this._onSwipePast),e!==!0&&"touch"!==e||(t.onTouchStart=this._onSwipeStart,t.onTouchMove=this._onSwipeMove,t.onTouchEnd=this._onSwipeEnd),t}}]),e}();t.default=o,e.exports=t.default},function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var r=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),
+i&&e(t,i),t}}(),o=n(10),s=function(){function e(t){var n=this;i(this,e),this._handleKeyDown=function(e){switch(e.key){case"ArrowUp":case"ArrowLeft":return void n.pager.prev();case"ArrowDown":case"ArrowRight":case" ":return void n.pager.next();case"Home":return void n.pager.setCurrentView({index:0});case"End":return void n.pager.setCurrentView({index:n.pager.views.length-1})}for(var t=(0,o.clamp)(n.pager.views.length,0,9),i=1;i<=t;i++)+e.key===i&&n.pager.setCurrentView({index:i-1})},this.pager=t}return r(e,[{key:"getEvents",value:function(){var e={};return this.pager.options.accessibility&&(e.onKeyDown=this._handleKeyDown),e}}]),e}();t.default=s,e.exports=t.default},function(e,t){"use strict";function n(e,t,n){for(var i in t)t.hasOwnProperty(i)&&!n[i]&&(e[i]=t[i]);return e}Object.defineProperty(t,"__esModule",{value:!0}),t.default=n,e.exports=t.default},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}function r(e,t){var n={};for(var i in e)t.indexOf(i)>=0||Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i]);return n}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(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}function a(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)}Object.defineProperty(t,"__esModule",{value:!0});var u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},p=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),f=n(2),l=i(f),h=n(13),d=(i(h),n(14)),y=n(3),v=i(y),g=n(19),w=(i(g),n(20)),b=i(w),_=n(17),m=i(_),x=function(e){function t(){var e,n,i,r;o(this,t);for(var a=arguments.length,u=Array(a),c=0;c<a;c++)u[c]=arguments[c];return n=i=s(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(u))),i.state={x:0,y:0},r=n,s(i,r)}return a(t,e),p(t,[{key:"componentWillReceiveProps",value:function(e){var t=this,n=e.trackPosition,i=this.context.pager;i.setViewStyles(n),this.props.trackPosition!==n&&requestAnimationFrame(function(){return t.props.onScroll(n/i.getTrackSize(!1)*-1,n)})}},{key:"_renderViews",value:function(){return f.Children.map(this.props.children,function(e){return e})}},{key:"render",value:function(){var e=this.context.pager,t=this.props,n=t.tag,i=t.trackPosition,o=(t.children,r(t,["tag","trackPosition","children"])),s=c({},o.style);return e.track&&(s=c({},s,e.track.getStyles(i))),(0,f.createElement)(n,c({},o,{style:s}),this._renderViews())}}]),t}(f.Component);x.propTypes=O,x.contextTypes={pager:f.PropTypes.instanceOf(v.default)};var S=function(){return null},O={tag:f.PropTypes.any,currentView:f.PropTypes.any,viewsToShow:f.PropTypes.oneOfType([f.PropTypes.number,f.PropTypes.oneOf(["auto"])]),viewsToMove:f.PropTypes.number,align:f.PropTypes.number,contain:f.PropTypes.bool,axis:f.PropTypes.oneOf(["x","y"]),animations:f.PropTypes.array,infinite:f.PropTypes.bool,instant:f.PropTypes.bool,swipe:f.PropTypes.oneOf([!0,!1,"mouse","touch"]),swipeThreshold:f.PropTypes.number,flickTimeout:f.PropTypes.number,springConfig:f.PropTypes.objectOf(f.PropTypes.number),onSwipeStart:f.PropTypes.func,onSwipeMove:f.PropTypes.func,onSwipeEnd:f.PropTypes.func,onScroll:f.PropTypes.func,onViewChange:f.PropTypes.func,onRest:f.PropTypes.func},T=function(e,t){return e.viewsToShow!==t.viewsToShow||e.viewsToMove!==t.viewsToMove||e.align!==t.align||e.axis!==t.axis||e.animations!==t.animations||e.infinite!==t.infinite||e.swipe!==t.swipe||e.swipeThreshold!==t.swipeThreshold||e.flickTimeout!==t.flickTimeout},k=function(e){function t(){var e,n,i,r;o(this,t);for(var a=arguments.length,u=Array(a),c=0;c<a;c++)u[c]=arguments[c];return n=i=s(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(u))),i.state={instant:!1},i._currentTween=0,i._hydrate=!1,i._handleOnRest=function(){i.props.infinite&&!i.state.instant&&(i.context.pager.resetViewIndex(),i._setValueInstantly(!0,!0)),i.props.onRest()},r=n,s(i,r)}return a(t,e),p(t,[{key:"componentWillMount",value:function(){this.context.pager.setOptions(this.props)}},{key:"componentDidMount",value:function(){var e=this,t=this.context.pager;t.addTrack((0,h.findDOMNode)(this)),this.scrollTo((0,b.default)(this.props.currentView,this.props.children)),t.on("hydrated",function(){return e._setValueInstantly(!0,!0)}),t.on("swipeMove",function(){return e._setValueInstantly(!0)}),t.on("swipeEnd",function(){return e._setValueInstantly(!1)}),t.on("swipeStart",this.props.onSwipeStart),t.on("swipeMove",this.props.onSwipeMove),t.on("swipeEnd",this.props.onSwipeEnd),t.on("viewChange",this.props.onViewChange)}},{key:"componentWillReceiveProps",value:function(e){var t=e.currentView,n=e.instant,i=e.children;this.props.instant!==n&&this._setValueInstantly(n),void 0!==("undefined"==typeof t?"undefined":u(t))&&this.props.currentView!==t&&this.scrollTo((0,b.default)(t,i)),T(this.props,e)&&(this.context.pager.setOptions(e),this._hydrate=!0)}},{key:"componentDidUpdate",value:function(e){this._hydrate&&(this.context.pager.hydrate(),this._hydrate=!1)}},{key:"prev",value:function(){this.context.pager.prev()}},{key:"next",value:function(){this.context.pager.next()}},{key:"scrollTo",value:function(e){this.context.pager.setCurrentView({index:e})}},{key:"_setValueInstantly",value:function(e,t){var n=this;this.setState({instant:e},function(){t&&n.setState({instant:!1})})}},{key:"_getTrackStyle",value:function(){var e=this.context.pager.trackPosition;return this.state.instant||(e=(0,d.spring)(e,this.props.springConfig)),{trackPosition:e}}},{key:"render",value:function(){var e=this.props,t=e.tag,n=e.onScroll,i=r(e,["tag","onScroll"]);return l.default.createElement(d.Motion,{style:this._getTrackStyle(),onRest:this._handleOnRest},function(e){var r=e.trackPosition;return(0,f.createElement)(x,(0,m.default)({trackPosition:r,tag:t,onScroll:n},i,O))})}}]),t}(f.Component);k.propTypes=O,k.defaultProps={tag:"div",currentView:0,viewsToShow:1,viewsToMove:1,align:0,contain:!1,axis:"x",infinite:!1,instant:!1,swipe:!0,swipeThreshold:.5,flickTimeout:300,springConfig:d.presets.noWobble,onSwipeStart:S,onSwipeMove:S,onSwipeEnd:S,onScroll:S,onViewChange:S,onRest:S},k.contextTypes={pager:f.PropTypes.instanceOf(v.default)},t.default=k,e.exports=t.default},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}function r(e,t){var n={};for(var i in e)t.indexOf(i)>=0||Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i]);return n}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(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}function a(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)}Object.defineProperty(t,"__esModule",{value:!0});var u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},c=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),p=n(2),f=(i(p),n(13)),l=(i(f),n(3)),h=i(l),d=function(e){function t(){var e,n,i,r;o(this,t);for(var a=arguments.length,u=Array(a),c=0;c<a;c++)u[c]=arguments[c];return n=i=s(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(u))),i._viewAdded=!1,i._viewInstance=null,r=n,s(i,r)}return a(t,e),c(t,[{key:"getChildContext",value:function(){return{view:this._viewInstance}}},{key:"componentDidMount",value:function(){this._viewInstance=this.context.pager.addView((0,f.findDOMNode)(this)),this._viewAdded=!0,this.forceUpdate()}},{key:"componentWillUnmount",value:function(){this.context.pager.removeView(this._viewInstance)}},{key:"render",value:function(){var e=this.context.pager,t=e.options,n=(t.viewsToShow,t.axis,this.props),i=n.tag,o=(n.trackSize,r(n,["tag","trackSize"])),s=u({},o.style);return this._viewAdded||(s.visibility="hidden",s.pointerEvents="none"),this._viewInstance&&(s=u({},s,this._viewInstance.getStyles())),(0,p.createElement)(i,u({},o,{style:s}))}}]),t}(p.Component);d.contextTypes={pager:p.PropTypes.instanceOf(h.default)},d.childContextTypes={view:p.PropTypes.any},d.propTypes={tag:p.PropTypes.any},d.defaultProps={tag:"div"},t.default=d,e.exports=t.default},function(e,t,n){"use strict";function i(e,t){var n=null;return r.Children.forEach(t,function(t,i){if(t.key===e||i===e)return void(n=i)}),n}Object.defineProperty(t,"__esModule",{value:!0}),t.default=i;var r=n(2);e.exports=t.default},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}function r(e,t){var n={};for(var i in e)t.indexOf(i)>=0||Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i]);return n}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(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}function a(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)}Object.defineProperty(t,"__esModule",{value:!0});var u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},c=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),p=n(2),f=(i(p),n(6)),l=i(f),h=n(3),d=i(h),y=n(17),v=i(y),g={tag:p.PropTypes.string,index:p.PropTypes.number,animations:p.PropTypes.array},w=function(e){function t(){return o(this,t),s(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return a(t,e),c(t,[{key:"componentWillMount",value:function(){var e=this.props.animations;e.length&&(this._animationBus=new l.default({animations:e,origin:function(e){return e.origin}}))}},{key:"render",value:function(){var e=this.props,t=e.tag,n=e.index,i=r(e,["tag","index"]),o=u({},i.style);if(this._animationBus){var s=this.context.view||this.context.pager.getView(n);s&&(o=u({},i.style,this._animationBus.getStyles(s)))}return(0,p.createElement)(t,(0,v.default)({style:o},this.props,g))}}]),t}(p.Component);w.contextTypes={pager:p.PropTypes.instanceOf(d.default),view:p.PropTypes.any},w.propTypes=g,w.defaultProps={tag:"div",animations:[]},t.default=w,e.exports=t.default}])});

lib/Keyboard.js

@@ -37,3 +37,3 @@ 'use strict';
         case 'Home':
-          _this.pager.setCurrentView(0, 0);
+          _this.pager.setCurrentView({ index: 0 });
           return;
@@ -43,3 +43,3 @@
         case 'End':
-          _this.pager.setCurrentView(0, _this.pager.views.length - 1);
+          _this.pager.setCurrentView({ index: _this.pager.views.length - 1 });
           return;
@@ -53,3 +53,3 @@ }
         if (+e.key === i) {
-          _this.pager.setCurrentView(0, i - 1);
+          _this.pager.setCurrentView({ index: i - 1 });
         }
@@ -56,0 +56,0 @@ }

lib/Pager.js

@@ -15,2 +15,6 @@ 'use strict';
 
+var _resizeObserverPolyfill = require('resize-observer-polyfill');
+
+var _resizeObserverPolyfill2 = _interopRequireDefault(_resizeObserverPolyfill);
+
 var _animationBus = require('animation-bus');
@@ -20,5 +24,5 @@
 
-var _PagerElement2 = require('./PagerElement');
+var _PagerElement3 = require('./PagerElement');
 
-var _PagerElement3 = _interopRequireDefault(_PagerElement2);
+var _PagerElement4 = _interopRequireDefault(_PagerElement3);
 
@@ -31,2 +35,4 @@ var _utils = require('./utils');
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -38,5 +44,43 @@
 
-var View = function (_PagerElement) {
-  _inherits(View, _PagerElement);
+var TRANSFORM = require('get-prefix')('transform');
 
+var Track = function (_PagerElement) {
+  _inherits(Track, _PagerElement);
+
+  function Track() {
+    _classCallCheck(this, Track);
+
+    return _possibleConstructorReturn(this, (Track.__proto__ || Object.getPrototypeOf(Track)).apply(this, arguments));
+  }
+
+  _createClass(Track, [{
+    key: 'getStyles',
+    value: function getStyles(trackPosition) {
+      var _pager$getPositionVal = this.pager.getPositionValue(trackPosition),
+          x = _pager$getPositionVal.x,
+          y = _pager$getPositionVal.y;
+
+      var trackSize = this.pager.getTrackSize();
+      var style = _defineProperty({}, TRANSFORM, 'translate3d(' + x + 'px, ' + y + 'px, 0)');
+
+      if (trackSize) {
+        var _pager$options = this.pager.options,
+            axis = _pager$options.axis,
+            viewsToShow = _pager$options.viewsToShow;
+
+        var dimension = axis === 'x' ? 'width' : 'height';
+
+        style[dimension] = viewsToShow === 'auto' ? trackSize : this.pager.views.length / viewsToShow * 100 + '%';
+      }
+
+      return style;
+    }
+  }]);
+
+  return Track;
+}(_PagerElement4.default);
+
+var View = function (_PagerElement2) {
+  _inherits(View, _PagerElement2);
+
   function View(_ref) {
@@ -48,9 +92,10 @@ var index = _ref.index,
 
-    var _this = _possibleConstructorReturn(this, (View.__proto__ || Object.getPrototypeOf(View)).call(this, restOptions));
+    var _this2 = _possibleConstructorReturn(this, (View.__proto__ || Object.getPrototypeOf(View)).call(this, restOptions));
 
-    _this.index = index;
-    _this.isCurrent = false;
-    _this.setTarget();
-    _this.setOrigin();
-    return _this;
+    _this2.index = index;
+    _this2.isCurrent = false;
+    _this2.inBounds = true;
+    _this2.setTarget();
+    _this2.setOrigin();
+    return _this2;
   }
@@ -61,5 +106,9 @@
     value: function setTarget() {
+      var _pager$options2 = this.pager.options,
+          align = _pager$options2.align,
+          viewsToShow = _pager$options2.viewsToShow;
+
       var target = this.pager.getStartCoords(this.index);
 
-      if (this.pager.options.align) {
+      if (align) {
         target += this.pager.getAlignOffset(this);
@@ -77,6 +126,36 @@ }
     }
+  }, {
+    key: 'getStyles',
+    value: function getStyles() {
+      var _pager$options3 = this.pager.options,
+          axis = _pager$options3.axis,
+          viewsToShow = _pager$options3.viewsToShow,
+          infinite = _pager$options3.infinite;
+
+      var style = {};
+
+      // we need to position views inline when using the x axis
+      if (axis === 'x') {
+        style.display = 'inline-block';
+        style.verticalAlign = 'top';
+      }
+
+      // set width or height on view when viewsToShow is not auto
+      if (viewsToShow !== 'auto') {
+        style[axis === 'x' ? 'width' : 'height'] = 100 / this.pager.views.length + '%';
+      }
+
+      // make sure view stays in frame when using infinite option
+      if (infinite && !this.inBounds) {
+        style.position = 'relative';
+        style[axis === 'y' ? 'top' : 'left'] = this.getPosition();
+      }
+
+      // finally, apply any animations
+      return _extends({}, style, this.pager.animationBus.getStyles(this));
+    }
   }]);
 
   return View;
-}(_PagerElement3.default);
+}(_PagerElement4.default);
 
@@ -91,23 +170,18 @@ var Pager = function (_Events) {
 
-    var _this2 = _possibleConstructorReturn(this, (Pager.__proto__ || Object.getPrototypeOf(Pager)).call(this));
+    var _this3 = _possibleConstructorReturn(this, (Pager.__proto__ || Object.getPrototypeOf(Pager)).call(this));
 
-    _this2.resize = function () {
-      _this2.hydrate();
-      _this2.emit('resize');
-    };
-
-    _this2.hydrate = function () {
-      _this2.frame && _this2.frame.setSize();
-      _this2.track && _this2.track.setSize();
-      _this2.views.forEach(function (view) {
+    _this3.hydrate = function () {
+      _this3.frame.setSize();
+      _this3.track.setSize();
+      _this3.views.forEach(function (view) {
         view.setSize();
         view.setTarget();
       });
-      _this2.setPositionValue();
-      _this2.setViewStyles();
-      _this2.emit('hydrated');
+      _this3.setPositionValue();
+      _this3.setViewStyles();
+      _this3.emit('hydrated');
     };
 
-    _this2.options = _extends({
-      viewsToShow: 'auto',
+    _this3.options = _extends({
+      viewsToShow: 1,
       viewsToMove: 1,
@@ -127,10 +201,15 @@ align: 0,
 
-    _this2.views = [];
-    _this2.currentIndex = 0;
-    _this2.currentView = null;
-    _this2.currentTween = 0;
-    _this2.trackPosition = 0;
-    _this2.isSwiping = false;
-    _this2.animationBus = new _animationBus2.default({
-      animations: _this2.options.animations,
+    _this3.views = [];
+    _this3.currentIndex = 0;
+    _this3.currentView = null;
+    _this3.currentTween = 0;
+    _this3.trackPosition = 0;
+    _this3.isSwiping = false;
+
+    _this3.resizeObserver = new _resizeObserverPolyfill2.default(function () {
+      _this3.hydrate();
+    });
+
+    _this3.animationBus = new _animationBus2.default({
+      animations: _this3.options.animations,
       origin: function origin(view) {
@@ -140,9 +219,3 @@ return view.origin;
     });
-
-    if (typeof window === 'undefined') {
-      return _possibleConstructorReturn(_this2);
-    } else {
-      window.addEventListener('resize', _this2.resize);
-    }
-    return _this2;
+    return _this3;
   }
@@ -163,15 +236,12 @@
       if (lastOptions.viewsToShow !== this.options.viewsToShow) {
-        this.emit('viewChange', this.getCurrentViewIndicies());
+        this.emit('viewChange', this.getCurrentIndicies());
       }
     }
   }, {
-    key: 'destroy',
-    value: function destroy() {
-      window.removeEventListener('resize', this.resize);
-    }
-  }, {
     key: 'addFrame',
     value: function addFrame(node) {
-      this.frame = new _PagerElement3.default({ node: node, pager: this });
-      this.hydrate();
+      this.frame = new _PagerElement4.default({
+        node: node,
+        pager: this
+      });
     }
@@ -181,4 +251,6 @@ }, {
     value: function addTrack(node) {
-      this.track = new _PagerElement3.default({ node: node, pager: this });
-      this.hydrate();
+      this.track = new Track({
+        node: node,
+        pager: this
+      });
     }
@@ -200,30 +272,14 @@ }, {
       if (!this.currentView) {
-        this.setCurrentView(0, index, true);
+        this.setCurrentView({
+          index: index,
+          suppressEvent: true
+        });
       }
 
+      // listen for width and height changes
+      this.resizeObserver.observe(node);
+
       // fire an event
       this.emit('viewAdded');
 
-      // with each view added we need to re-calculate widths and positions
-      // however, if there are any images present we need to wait until
-      // they have loaded to hydrate
-
-      var childImages = node.querySelectorAll('img');
-      var childImagesLength = childImages.length;
-
-      if (childImagesLength) {
-        for (var i = 0; i < childImagesLength; i++) {
-          childImages[i].onload = this.hydrate;
-        }
-      }
-
-      // if the view itself is an image then we wait for it to load
-      if (node instanceof HTMLImageElement) {
-        node.onload = this.hydrate;
-      }
-      // otherwise just run a hydration right now
-      else {
-          this.hydrate();
-        }
-
       return view;
@@ -241,5 +297,2 @@ }
       this.emit('viewRemoved');
-
-      // re-calculate view positions
-      this.hydrate();
     }
@@ -249,3 +302,3 @@ }, {
     value: function prev() {
-      this.setCurrentView(-1);
+      this.setCurrentView({ direction: -1 });
     }
@@ -255,10 +308,13 @@ }, {
     value: function next() {
-      this.setCurrentView(1);
+      this.setCurrentView({ direction: 1 });
     }
   }, {
     key: 'setCurrentView',
-    value: function setCurrentView() {
-      var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-      var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.currentIndex;
-      var suppressEvent = arguments[2];
+    value: function setCurrentView(_ref2) {
+      var _ref2$direction = _ref2.direction,
+          direction = _ref2$direction === undefined ? 0 : _ref2$direction,
+          _ref2$index = _ref2.index,
+          index = _ref2$index === undefined ? this.currentIndex : _ref2$index,
+          _ref2$suppressEvent = _ref2.suppressEvent,
+          suppressEvent = _ref2$suppressEvent === undefined ? false : _ref2$suppressEvent;
       var _options = this.options,
@@ -288,3 +344,3 @@ viewsToMove = _options.viewsToMove,
       if (!suppressEvent) {
-        this.emit('viewChange', this.getCurrentViewIndicies());
+        this.emit('viewChange', this.getCurrentIndicies());
       }
@@ -362,3 +418,3 @@ }
     value: function getMaxDimensions(indices) {
-      var _this3 = this;
+      var _this4 = this;
 
@@ -371,3 +427,3 @@ var axis = this.options.axis;
       indices.forEach(function (index) {
-        var view = isNaN(index) ? index : _this3.getView(index);
+        var view = isNaN(index) ? index : _this4.getView(index);
         widths.push(view.getSize('width'));
@@ -383,4 +439,4 @@ heights.push(view.getSize('height'));
   }, {
-    key: 'getCurrentViewIndicies',
-    value: function getCurrentViewIndicies() {
+    key: 'getCurrentIndicies',
+    value: function getCurrentIndicies() {
       var _options4 = this.options,
@@ -413,7 +469,7 @@ infinite = _options4.infinite,
     value: function getFrameSize() {
-      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-          _ref2$autoSize = _ref2.autoSize,
-          autoSize = _ref2$autoSize === undefined ? this.options.autoSize : _ref2$autoSize,
-          _ref2$fullSize = _ref2.fullSize,
-          fullSize = _ref2$fullSize === undefined ? false : _ref2$fullSize;
+      var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          _ref3$autoSize = _ref3.autoSize,
+          autoSize = _ref3$autoSize === undefined ? this.options.autoSize : _ref3$autoSize,
+          _ref3$fullSize = _ref3.fullSize,
+          fullSize = _ref3$fullSize === undefined ? false : _ref3$fullSize;
 
@@ -427,3 +483,3 @@ var dimensions = {
         if (autoSize) {
-          var currentViews = this.getCurrentViewIndicies();
+          var currentViews = this.getCurrentIndicies();
           dimensions = this.getMaxDimensions(currentViews);
@@ -514,6 +570,9 @@ } else if (this.frame) {
   }, {
-    key: 'resetViews',
-    value: function resetViews() {
+    key: 'resetViewIndex',
+    value: function resetViewIndex() {
       // reset back to a normal index
-      this.setCurrentView(0, (0, _utils.modulo)(this.currentIndex, this.views.length), true);
+      this.setCurrentView({
+        index: (0, _utils.modulo)(this.currentIndex, this.views.length),
+        suppressEvent: true
+      });
     }
@@ -520,0 +579,0 @@ }]);

lib/Track.js

@@ -41,4 +41,2 @@ 'use strict';
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
@@ -52,7 +50,4 @@
 
-var TRANSFORM = require('get-prefix')('transform');
-
 // Track scroller is an intermediate component that allows us to provide the
 // React Motion value to onScroll and lets any user of onScroll use setState
-
 var TrackScroller = function (_Component) {
@@ -91,5 +86,2 @@ _inherits(TrackScroller, _Component);
 
-      // get the x & y values to position the track
-      this.setState(pager.getPositionValue(trackPosition));
-
       // update onScroll callback, we use requestAnimationFrame to avoid bouncing
@@ -106,5 +98,7 @@ // back from updates from onScroll while React Motion is trying to update it's own tree
     key: '_renderViews',
-    value: function _renderViews(trackSize) {
+    value: function _renderViews() {
+      // we need Children map in order for the infinite option to work
+      // not actually sure why this is the case
       return _react.Children.map(this.props.children, function (child) {
-        return (0, _react.cloneElement)(child, { trackSize: trackSize });
+        return child;
       });
@@ -123,17 +117,6 @@ }
 
-      var _state = this.state,
-          x = _state.x,
-          y = _state.y;
+      var style = _extends({}, restProps.style);
 
-      var trackSize = pager.getTrackSize();
-      var style = _extends({}, restProps.style, _defineProperty({}, TRANSFORM, 'translate3d(' + x + 'px, ' + y + 'px, 0)'));
-
-      // option?
-      if (trackSize) {
-        var _pager$options = pager.options,
-            axis = _pager$options.axis,
-            viewsToShow = _pager$options.viewsToShow;
-
-        var dimension = axis === 'x' ? 'width' : 'height';
-        style[dimension] = viewsToShow === 'auto' ? trackSize : _react.Children.count(children) / viewsToShow * 100 + '%';
+      if (pager.track) {
+        style = _extends({}, style, pager.track.getStyles(trackPosition));
       }
@@ -143,3 +126,3 @@
         style: style
-      }), this._renderViews(trackSize));
+      }), this._renderViews());
     }
@@ -207,3 +190,3 @@ }]);
         // reset back to a normal index
-        _this3.context.pager.resetViews();
+        _this3.context.pager.resetViewIndex();
 
@@ -299,3 +282,3 @@ // set instant flag so we can prime track for next move
     value: function scrollTo(index) {
-      this.context.pager.setCurrentView(0, index);
+      this.context.pager.setCurrentView({ index: index });
     }
@@ -302,0 +285,0 @@ }, {

lib/View.js

@@ -47,3 +47,3 @@ 'use strict';
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = View.__proto__ || Object.getPrototypeOf(View)).call.apply(_ref, [this].concat(args))), _this), _this._viewInstance = null, _temp), _possibleConstructorReturn(_this, _ret);
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = View.__proto__ || Object.getPrototypeOf(View)).call.apply(_ref, [this].concat(args))), _this), _this._viewAdded = false, _this._viewInstance = null, _temp), _possibleConstructorReturn(_this, _ret);
   }
@@ -62,2 +62,3 @@
       this._viewInstance = this.context.pager.addView((0, _reactDom.findDOMNode)(this));
+      this._viewAdded = true;
       this.forceUpdate();
@@ -83,24 +84,13 @@ }
 
-      var style = _extends({}, this.props.style);
+      var style = _extends({}, restProps.style);
 
-      // we need to position views inline when using the x axis
-      if (axis === 'x') {
-        style.display = 'inline-block';
-        style.verticalAlign = 'top';
+      // hide view visually until it has been added to the pager
+      // this should help avoid FOUC
+      if (!this._viewAdded) {
+        style.visibility = 'hidden';
+        style.pointerEvents = 'none';
       }
 
-      // set width or height on view when viewsToShow is not auto
-      if (viewsToShow !== 'auto' && pager.views.length) {
-        style[axis === 'x' ? 'width' : 'height'] = 100 / pager.views.length + '%';
-      }
-
       if (this._viewInstance) {
-        // make sure view stays in frame when using infinite option
-        if (pager.options.infinite && !this._viewInstance.inBounds) {
-          style.position = 'relative';
-          style[axis === 'y' ? 'top' : 'left'] = this._viewInstance.getPosition();
-        }
-
-        // apply any animations
-        style = _extends({}, style, pager.animationBus.getStyles(this._viewInstance));
+        style = _extends({}, style, this._viewInstance.getStyles());
       }
@@ -107,0 +97,0 @@

package.json

 {
   "name": "react-view-pager",
-  "version": "0.5.0-prerelease.3",
+  "version": "0.5.0-prerelease.4",
   "description": "View-Pager/Slider/Carousel powered by React Motion.",
@@ -44,3 +44,4 @@ "main": "lib/react-view-pager.js",
     "minivents": "^2.0.2",
-    "react-motion": "^0.4.5"
+    "react-motion": "^0.4.5",
+    "resize-observer-polyfill": "^1.2.1"
   },
@@ -47,0 +48,0 @@ "peerDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

304228

increased by21.13%

Lines of code

6115

increased by19.43%

Worsened metrics

Dependency count

7

increased by16.67%

Dependency changes

• + Addedresize-observer-polyfill@^1.2.1

• + Addedresize-observer-polyfill@1.5.1(transitive)