zlide
Version:
Plain JavaScript to collapse or expand an element in height
1 lines • 2.51 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.zlide=t()}(this,function(){"use strict";function e(t){return"string"==typeof t?{element:u(t)}:t instanceof Element?{element:t}:"function"==typeof t?e(t()):t||{}}function t(t){var n=e(t),i=n.element,l=n.doneCallback;return i.classList.add("zlide-inert"),i.style.maxHeight="0px",l&&l({type:"collapsed"}),this}function n(t){var n=e(t),i=n.element,l=n.doneCallback;return i.style.maxHeight="",i.classList.remove("zlide-inert"),l&&l({type:"expanded"}),this}function i(n){var i=e(n),l=i.element,a=i.beforeCallback,u=i.doneCallback;a&&a({type:"collapsing"});var m=l[d]().height;if(0===m)return t({element:l,doneCallback:u}),this;var f=l.style.transition;l.style.transition="max-height 0s !important";var p=function(e){"max-height"===e.propertyName&&(l[c](r,p),t({element:l,doneCallback:u}))};return o(function(){l.style.maxHeight=m+"px",l.style.transition=f,l[s](r,p),o(function(){l.style.maxHeight="0px"})}),this}function l(t){var i=e(t),l=i.element,a=i.beforeCallback,u=i.doneCallback;a&&a({type:"expanding"}),l.classList.remove("zlide-inert");var m=function(e){"max-height"===e.propertyName&&(l[c](r,m),n({element:l,doneCallback:u}))},f=l.style.transition;l.style.transition="max-height 0s !important",o(function(){l.style.maxHeight="";var e=l[d]().height;l.style.maxHeight="0px",l.style.transition=f,l[s](r,m),o(function(){l.style.maxHeight=e+"px"})})}var a="undefined"!=typeof window?window:global,o=a.requestAnimationFrame?a.requestAnimationFrame.bind(a):function(e){return setTimeout(e,0)},r="transitionend",s="addEventListener",c="removeEventListener",d="getBoundingClientRect",u=function(e,t){return(t||document).querySelector(e)},m=function(){};return m.toggle=function(t){var n=e(t),a=n.element,o=n.beforeCallback,r=n.doneCallback;return a.classList.contains("zlide-inert")?l({element:a,beforeCallback:o,doneCallback:r}):i({element:a,beforeCallback:o,doneCallback:r}),this},m.collapse=i,m.up=i,m.expand=l,m.down=l,m.setToCollapsed=t,m.setToExpanded=n,m.applyDefaultStyleSheet=function(){if(!u("#zlide-stylesheet")){var e=document.createElement("style");e.setAttribute("id","zlide-stylesheet"),e.innerHTML="\n .zlide-inert{display:none !important;}\n ",document.head.appendChild(e)}return this},m.rAF=o,m.rAF2=function(e){return o(function(){return o(e)})},m.qs=u,m.qsa=function(e,t){return[].slice.call((t||document).querySelectorAll(e),0)},m.VERSION="0.0.9",m});