UNPKG

vue-show-slide

Version:

Vue.js directive for animating element to and from height: auto in a sliding motion

1 lines 13.1 kB
"use strict";function _typeof(t){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function _regeneratorRuntime(){_regeneratorRuntime=function(){return a};var a={},t=Object.prototype,c=t.hasOwnProperty,e="function"==typeof Symbol?Symbol:{},n=e.iterator||"@@iterator",r=e.asyncIterator||"@@asyncIterator",o=e.toStringTag||"@@toStringTag";function i(t,e,r){return Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{i({},"")}catch(t){i=function(t,e,r){return t[e]=r}}function s(t,e,r,n){var o,i,a,s,e=e&&e.prototype instanceof p?e:p,e=Object.create(e.prototype),n=new w(n||[]);return e._invoke=(o=t,i=r,a=n,s="suspendedStart",function(t,e){if("executing"===s)throw new Error("Generator is already running");if("completed"===s){if("throw"===t)throw e;return O()}for(a.method=t,a.arg=e;;){var r=a.delegate;if(r){r=function t(e,r){var n=e.iterator[r.method];if(void 0===n){if(r.delegate=null,"throw"===r.method){if(e.iterator.return&&(r.method="return",r.arg=void 0,t(e,r),"throw"===r.method))return l;r.method="throw",r.arg=new TypeError("The iterator does not provide a 'throw' method")}return l}n=u(n,e.iterator,r.arg);if("throw"===n.type)return r.method="throw",r.arg=n.arg,r.delegate=null,l;n=n.arg;return n?n.done?(r[e.resultName]=n.value,r.next=e.nextLoc,"return"!==r.method&&(r.method="next",r.arg=void 0),r.delegate=null,l):n:(r.method="throw",r.arg=new TypeError("iterator result is not an object"),r.delegate=null,l)}(r,a);if(r){if(r===l)continue;return r}}if("next"===a.method)a.sent=a._sent=a.arg;else if("throw"===a.method){if("suspendedStart"===s)throw s="completed",a.arg;a.dispatchException(a.arg)}else"return"===a.method&&a.abrupt("return",a.arg);s="executing";r=u(o,i,a);if("normal"===r.type){if(s=a.done?"completed":"suspendedYield",r.arg===l)continue;return{value:r.arg,done:a.done}}"throw"===r.type&&(s="completed",a.method="throw",a.arg=r.arg)}}),e}function u(t,e,r){try{return{type:"normal",arg:t.call(e,r)}}catch(t){return{type:"throw",arg:t}}}a.wrap=s;var l={};function p(){}function f(){}function h(){}var e={},d=(i(e,n,function(){return this}),Object.getPrototypeOf),d=d&&d(d(E([]))),y=(d&&d!==t&&c.call(d,n)&&(e=d),h.prototype=p.prototype=Object.create(e));function g(t){["next","throw","return"].forEach(function(e){i(t,e,function(t){return this._invoke(e,t)})})}function m(a,s){var e;this._invoke=function(r,n){function t(){return new s(function(t,e){!function e(t,r,n,o){var i,t=u(a[t],a,r);if("throw"!==t.type)return(r=(i=t.arg).value)&&"object"==_typeof(r)&&c.call(r,"__await")?s.resolve(r.__await).then(function(t){e("next",t,n,o)},function(t){e("throw",t,n,o)}):s.resolve(r).then(function(t){i.value=t,n(i)},function(t){return e("throw",t,n,o)});o(t.arg)}(r,n,t,e)})}return e=e?e.then(t,t):t()}}function v(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function b(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function w(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(v,this),this.reset(!0)}function E(e){if(e){var r,t=e[n];if(t)return t.call(e);if("function"==typeof e.next)return e;if(!isNaN(e.length))return r=-1,(t=function t(){for(;++r<e.length;)if(c.call(e,r))return t.value=e[r],t.done=!1,t;return t.value=void 0,t.done=!0,t}).next=t}return{next:O}}function O(){return{value:void 0,done:!0}}return i(y,"constructor",f.prototype=h),i(h,"constructor",f),f.displayName=i(h,o,"GeneratorFunction"),a.isGeneratorFunction=function(t){t="function"==typeof t&&t.constructor;return!!t&&(t===f||"GeneratorFunction"===(t.displayName||t.name))},a.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,h):(t.__proto__=h,i(t,o,"GeneratorFunction")),t.prototype=Object.create(y),t},a.awrap=function(t){return{__await:t}},g(m.prototype),i(m.prototype,r,function(){return this}),a.AsyncIterator=m,a.async=function(t,e,r,n,o){void 0===o&&(o=Promise);var i=new m(s(t,e,r,n),o);return a.isGeneratorFunction(e)?i:i.next().then(function(t){return t.done?t.value:i.next()})},g(y),i(y,o,"Generator"),i(y,n,function(){return this}),i(y,"toString",function(){return"[object Generator]"}),a.keys=function(r){var t,n=[];for(t in r)n.push(t);return n.reverse(),function t(){for(;n.length;){var e=n.pop();if(e in r)return t.value=e,t.done=!1,t}return t.done=!0,t}},a.values=E,w.prototype={constructor:w,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=void 0,this.done=!1,this.delegate=null,this.method="next",this.arg=void 0,this.tryEntries.forEach(b),!t)for(var e in this)"t"===e.charAt(0)&&c.call(this,e)&&!isNaN(+e.slice(1))&&(this[e]=void 0)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(r){if(this.done)throw r;var n=this;function t(t,e){return i.type="throw",i.arg=r,n.next=t,e&&(n.method="next",n.arg=void 0),!!e}for(var e=this.tryEntries.length-1;0<=e;--e){var o=this.tryEntries[e],i=o.completion;if("root"===o.tryLoc)return t("end");if(o.tryLoc<=this.prev){var a=c.call(o,"catchLoc"),s=c.call(o,"finallyLoc");if(a&&s){if(this.prev<o.catchLoc)return t(o.catchLoc,!0);if(this.prev<o.finallyLoc)return t(o.finallyLoc)}else if(a){if(this.prev<o.catchLoc)return t(o.catchLoc,!0)}else{if(!s)throw new Error("try statement without catch or finally");if(this.prev<o.finallyLoc)return t(o.finallyLoc)}}}},abrupt:function(t,e){for(var r=this.tryEntries.length-1;0<=r;--r){var n=this.tryEntries[r];if(n.tryLoc<=this.prev&&c.call(n,"finallyLoc")&&this.prev<n.finallyLoc){var o=n;break}}var i=(o=o&&("break"===t||"continue"===t)&&o.tryLoc<=e&&e<=o.finallyLoc?null:o)?o.completion:{};return i.type=t,i.arg=e,o?(this.method="next",this.next=o.finallyLoc,l):this.complete(i)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),l},finish:function(t){for(var e=this.tryEntries.length-1;0<=e;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),b(r),l}},catch:function(t){for(var e=this.tryEntries.length-1;0<=e;--e){var r,n,o=this.tryEntries[e];if(o.tryLoc===t)return"throw"===(r=o.completion).type&&(n=r.arg,b(o)),n}throw new Error("illegal catch attempt")},delegateYield:function(t,e,r){return this.delegate={iterator:E(t),resultName:e,nextLoc:r},"next"===this.method&&(this.arg=void 0),l}},a}function asyncGeneratorStep(t,e,r,n,o,i,a){try{var s=t[i](a),c=s.value}catch(t){return void r(t)}s.done?e(c):Promise.resolve(c).then(n,o)}function _asyncToGenerator(s){return function(){var t=this,a=arguments;return new Promise(function(e,r){var n=s.apply(t,a);function o(t){asyncGeneratorStep(n,e,r,o,i,"next",t)}function i(t){asyncGeneratorStep(n,e,r,o,i,"throw",t)}o(void 0)})}}function ownKeys(e,t){var r,n=Object.keys(e);return Object.getOwnPropertySymbols&&(r=Object.getOwnPropertySymbols(e),t&&(r=r.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,r)),n}function _objectSpread(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?ownKeys(Object(r),!0).forEach(function(t){_defineProperty(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):ownKeys(Object(r)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}function _defineProperty(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function _toConsumableArray(t){return _arrayWithoutHoles(t)||_iterableToArray(t)||_unsupportedIterableToArray(t)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(t,e){var r;if(t)return"string"==typeof t?_arrayLikeToArray(t,e):"Map"===(r="Object"===(r=Object.prototype.toString.call(t).slice(8,-1))&&t.constructor?t.constructor.name:r)||"Set"===r?Array.from(t):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?_arrayLikeToArray(t,e):void 0}function _iterableToArray(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}function _arrayWithoutHoles(t){if(Array.isArray(t))return _arrayLikeToArray(t)}function _arrayLikeToArray(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r<e;r++)n[r]=t[r];return n}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var VShowSlide={easingOptions:{builtIn:["linear","ease","ease-in","ease-out","ease-in-out"],custom:{}},targets:[],install:function(t,e){this.validateOptions(e),t.directive("show-slide",{created:this.bind.bind(this),mounted:this.inserted.bind(this),updated:this.componentUpdated.bind(this)})},bind:function(t,e){this.parseArgs(t,e)},inserted:function(t,e){this.initializeTarget(t,e.value)},componentUpdated:function(t,e){this.toggleSlide(t,e)},getTargetByEl:function(e){var t=this.targets.filter(function(t){return t.el.isSameNode(e)})[0];if(void 0===t)throw"Element not found!";return t},setTargetByEl:function(e,t){var r=this.targets.findIndex(function(t){return t.el.isSameNode(e)});this.targets[r]=t},setTargetPropertyByEl:function(e,t,r){var n=this.getTargetByEl(e),o=this.targets.filter(function(t){return!t.el.isSameNode(e)});this.targets=[].concat(_toConsumableArray(o),[_objectSpread(_objectSpread({},n),{},_defineProperty({},t,r))])},validateOptions:function(t){void 0!==t&&Object.prototype.hasOwnProperty.call(t,"customEasing")&&(this.easingOptions.custom=t.customEasing)},kebabToCamel:function(t){return t.replace(/-([a-z])/g,function(t){return t[1].toUpperCase()})},fireEvent:function(t,e){var r;"function"==typeof window.CustomEvent?t.dispatchEvent(new CustomEvent(e)):((r=document.createEvent("CustomEvent")).initCustomEvent(e,!1,!1,null),t.dispatchEvent(r))},parseArgs:function(t,e){var r;Object.prototype.hasOwnProperty.call(e,"arg")&&"string"==typeof e.arg?(e=e.arg.split(":"),r=this.validateEasing(e),e=this.validateDuration(e),this.targets.push({el:t,duration:e,durationInSeconds:"".concat(e/1e3,"s"),easing:r,isAnimating:!1})):this.targets.push({el:t,duration:300,durationInSeconds:"0.3s",easing:"ease",isAnimating:!1})},validateEasing:function(t){return Object.prototype.hasOwnProperty.call(t,1)?-1<this.easingOptions.builtIn.indexOf(t[1])?t[1]:Object.prototype.hasOwnProperty.call(this.easingOptions.custom,this.kebabToCamel(t[1]))?this.easingOptions.custom[this.kebabToCamel(t[1])]:"ease":"ease"},validateDuration:function(t){return Object.prototype.hasOwnProperty.call(t,0)?parseInt(t[0]):300},initializeTarget:function(t,e){var r=window.getComputedStyle(t),n=parseInt(r.paddingTop)||0,r=parseInt(r.paddingBottom)||0,o=this.getTargetByEl(t),n=(o.paddingTop=n,o.paddingBottom=r,this.setTargetByEl(t,o),e||(t.style.height="0px",t.style.visibility="hidden",t.style.paddingTop="0",t.style.paddingBottom="0",t.style.boxSizing="border-box"),o.easing),r=o.durationInSeconds;t.style.overflow="hidden",t.style.transition="height ".concat(r," ").concat(n,", padding ").concat(r," ").concat(n)},toggleSlide:function(t,e){e.value!==e.oldValue&&(e.value?this.slideOpen(t):this.slideClosed(t))},slideOpen:function(s){var c=this;return _asyncToGenerator(_regeneratorRuntime().mark(function t(){var e,r,n,o,i,a;return _regeneratorRuntime().wrap(function(t){for(;;)switch(t.prev=t.next){case 0:c.fireEvent(s,"slide-open-start"),n=c.getTargetByEl(s),a=n.isAnimating,i=n.timeout,e=n.duration,r=n.paddingTop,n=n.paddingBottom,a&&clearTimeout(i),c.setTargetPropertyByEl(s,"isAnimating",!0),s.style.visibility="visible",s.style.paddingTop="",s.style.paddingBottom="",a=s.scrollHeight,i=window.getComputedStyle(s),o=parseFloat(i.getPropertyValue("border-bottom-width")),i=parseFloat(i.getPropertyValue("border-top-width")),s.style.height="".concat(a+r+n+o+i,"px"),a=setTimeout(function(){s.style.height="auto",s.style.overflow="",s.style.boxSizing="",c.setTargetPropertyByEl(s,"isAnimating",!1),c.fireEvent(s,"slide-open-end")},e),c.setTargetPropertyByEl(s,"timeout",a);case 14:case"end":return t.stop()}},t)}))()},slideClosed:function(t){var e=this,r=(this.fireEvent(t,"slide-close-start"),this.getTargetByEl(t)),n=r.isAnimating,o=r.timeout,r=r.duration,n=(n&&clearTimeout(o),this.setTargetPropertyByEl(t,"isAnimating",!0),t.scrollHeight),o=(t.style.height="".concat(n,"px"),t.offsetLeft,t.style.height="0px",t.style.overflow="hidden",t.style.paddingTop="0",t.style.paddingBottom="0",t.style.boxSizing="border-box",setTimeout(function(){e.setTargetPropertyByEl(t,"isAnimating",!1),t.style.visibility="hidden",e.fireEvent(t,"slide-close-end")},r));this.setTargetPropertyByEl(t,"timeout",o)}},_default=VShowSlide;exports.default=_default;