| 1 | "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var _createClass=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),_react=require("react"),_react2=_interopRequireDefault(_react),_propTypes=require("prop-types"),_propTypes2=_interopRequireDefault(_propTypes),_keyframe=require("keyframe"),_keyframe2=_interopRequireDefault(_keyframe),_raf=require("raf"),_raf2=_interopRequireDefault(_raf),_css=require("stylefire/css"),_css2=_interopRequireDefault(_css),_easing=require("popmotion/lib/easing"),_keyframes=require("popmotion/lib/animations/keyframes"),_keyframes2=_interopRequireDefault(_keyframes),_spring=require("popmotion/lib/animations/spring"),_spring2=_interopRequireDefault(_spring),_tween=require("popmotion/lib/animations/tween"),_tween2=_interopRequireDefault(_tween),_value=require("popmotion/lib/reactions/value"),_value2=_interopRequireDefault(_value),_transformers=require("popmotion/lib/transformers"),_util=require("./util");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _toConsumableArray(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 _objectWithoutProperties(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(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 _inherits(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)}var getBox=function(e){var t=(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}).getMargins,n=void 0!==t&&t,r=e.getBoundingClientRect(),i=getComputedStyle(e);return{top:r.top+window.scrollY-(n?parseInt(i.marginTop,10):0),left:r.left+window.scrollX-(n?parseInt(i.marginLeft,10):0),width:r.width+(n?parseInt(i.marginLeft,10)+parseInt(i.marginRight,10):0),height:r.height+(n?parseInt(i.marginTop,10)+parseInt(i.marginBottom,10):0)}},fadeOutTween=function(e){var t=e.element,n=e.options,r=void 0===n?{}:n;return(0,_tween2.default)(Object.assign({from:1,to:0,ease:_easing.linear},r)).start(function(e){var n=t;n.style.opacity=e,1===e&&(n.style.pointerEvents="all")})},fadeInTween=function(e){var t=e.element,n=e.options,r=void 0===n?{}:n,i=(0,_css2.default)(t);return(0,_keyframes2.default)(Object.assign({values:[{opacity:0},{opacity:1}],easings:_easing.linear,times:[.8,1]},r)).start(function(e){var n=t;i.set(e),1===e.opacity&&(n.style.pointerEvents="all")}).pause()},hideTween=function(e){var t=e.element;return{seek:(0,_transformers.pipe)(Math.round,function(e){t.style.visibility=e>0?"hidden":"visible"})}},hide=function(e){return function(t){return e.set({opacity:t,visibility:t>0?"visible":"hidden"})}},diffRect=function(e,t){return{translateY:e.top-t.top,translateX:e.left-t.left,scaleY:e.height/t.height,scaleX:e.width/t.width}},Morph=function(e){function t(){var e,n,r;_classCallCheck(this,t);for(var i=arguments.length,o=Array(i),a=0;a<i;a++)o[a]=arguments[a];return n=r=_possibleConstructorReturn(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(o))),r.state={state:"from"},r.elementFrom={},r.elementTo={},r.elementsCloned=[],r.hideElements=[],r.fadeInElements=[],r.fadeOutElements=[],r.isPlaying=!1,r.timeline=[],r.hide=function(e){return{ref:function(t){var n=t;r.hideElements.push({element:n,options:e})}}},r.progress=(0,_value2.default)(0,r.seek),r.fadeIn=function(e){return{ref:function(t){var n=t;n&&(n.style.willChange="opacity",n.style.pointerEvents="none",n.style.opacity=0,r.fadeInElements.push({element:n,options:e}))}}},r.fadeOut=function(e){return{ref:function(t){var n=t;n&&(n.style.willChange="opacity",r.fadeOutElements.push({element:n,options:e}))}}},r.from=function(e,t){return{ref:function(n){var i=n;i&&!r.elementFrom[e]&&(i.style.willChange="transform",r.elementFrom[e]={element:i,options:t})}}},r.to=function(e,t){return{ref:function(n){var i=n;i&&!r.elementTo[e]&&(i.style.visibility="hidden",i.style.opacity=0,i.style.willChange="transform",r.elementTo[e]={element:i,options:t})}}},r.go=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};r.timeline.length?(0,_spring2.default)(Object.assign({from:r.progress.get(),to:e},r.props.spring,t)).start(function(e){r.progress.update(e),r.seek(e)}):r.init(e)},r.seek=function(e){1!==e&&0!==e||r.setState({state:e?"to":"from"}),r.timeline.forEach(function(t){return t.seek(e)})},r.morph=function(e){var t=r.elementFrom[e],n=t.element,i=t.options,o=(i=void 0===i?{}:i).zIndex,a=i.getMargins,s=void 0===a||a,l=i.easing,u=void 0===l?function(e){return e}:l,p=_objectWithoutProperties(i,["zIndex","getMargins","easing"]),f=r.elementTo[e].element,c=getBox(n,{getMargins:s}),m=getBox(f,{getMargins:s}),d=document.createElement("div"),_=n.cloneNode(!0);d.appendChild(_);var h=(0,_css2.default)(n),y=(0,_css2.default)(d),g=(0,_css2.default)(f);y.set(Object.assign({position:"absolute",transformOrigin:"top left",pointerEvents:"none"},c,p,{zIndex:o})),g.set({"transform-origin":"top left",visibility:"visible"}),r.props.portalElement.appendChild(d),r.elementsCloned=[].concat(_toConsumableArray(r.elementsCloned),[d]);var b=diffRect(m,c),v=(0,_util.interpolateObject)({translateX:0,translateY:0,scaleX:1,scaleY:1},b),O=diffRect(c,m),w=(0,_util.interpolateObject)(O,{translateX:0,translateY:0,scaleX:1,scaleY:1});r.timeline.push({seek:(0,_keyframe2.default)({.01:function(e){hide(h)(1-e)},30:function(){},100:function(e){hide(y)(1-e)}})},{seek:(0,_keyframe2.default)({100:function(e){(0,_transformers.pipe)(u,v,y.set)(e),(0,_transformers.pipe)(u,w,g.set)(e)}})},{seek:(0,_keyframe2.default)({.01:function(e){hide(y)(e)},30:function(e){return hide(g)(e)}})}),r.isPlaying=!0},r.init=function(e){if(!r.timeline.length){Object.keys(r.elementFrom).forEach(r.morph);var t=r.fadeOutElements.map(fadeOutTween),n=r.fadeInElements.map(fadeInTween),i=r.hideElements.map(hideTween);r.timeline=[].concat(_toConsumableArray(t),_toConsumableArray(n),_toConsumableArray(i),_toConsumableArray(r.timeline)),(0,_raf2.default)(function(){return r.go(e)})}},_possibleConstructorReturn(r,n)}return _inherits(t,_react.Component),_createClass(t,[{key:"componentWillUnmount",value:function(){var e=this;this.elementsCloned.forEach(function(t){return e.props.portalElement.removeChild(t)})}},{key:"render",value:function(){var e=this.props.children({from:this.from,to:this.to,fadeIn:this.fadeIn,fadeOut:this.fadeOut,back:this.back,seek:this.seek,go:this.go,progress:this.progress,state:this.state.state,hide:this.hide,init:this.init});return e&&_react2.default.Children.only(e)}}]),t}();function _defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}Morph.propTypes={portalElement:_propTypes2.default.object,children:_propTypes2.default.func.isRequired,spring:_propTypes2.default.shape({restDelta:_propTypes2.default.number,restSpeed:_propTypes2.default.number,stiffness:_propTypes2.default.number.isRequired,mass:_propTypes2.default.number,damping:_propTypes2.default.number.isRequired})},Morph.defaultProps={portalElement:global.document&&global.document.body,spring:{restDelta:.001,restSpeed:.001,damping:26,mass:1,stiffness:170}},exports.default=Morph,Object.defineProperty(exports,"__esModule",{value:!0});var getValueFromProgress=function(e,t,n){return-n*e+n*t+e},interpolateObject=exports.interpolateObject=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return function(n){return Object.assign({},Object.keys(e).reduce(function(r,i){return Object.assign(_defineProperty({},i,getValueFromProgress(e[i],t[i],n)),r)},{}))}};exports.default={interpolateObject:interpolateObject}; |