| 1 |
!function(t,e){"function"==typeof define&&define.amd?define([],function(){return e()}):"object"==typeof module&&module.exports?module.exports=e():t.toolslide=e()}(this,function(){"use strict";var t={position:"left",height:"100%",width:"25%",startOpen:!0,closeable:!0,minClosedSize:0,toggleButton:"",embed:!1,navigationItemWidth:"0px",navigationItemHeight:"0px",autoclose:!1,autocloseDelay:5e3,clickOutsideToClose:!0,animations:{replace:"crossfade 0.5s ease-in-out",toggle:"slide 0.5s ease"}};function e(){this.init.apply(this,arguments)}return e.prototype={init:function(e,i){if(this.config=Object.assign({},t,i),!e)throw new Error("Missing required attribute: target element (css selector or DOM node) must be provided");if(this.__isString(e))this.targetElement=document.querySelector(e);else{if(!this.__isDOMElement(e))throw new Error("Incorrect type: target element must be DOM node or string css selector");this.targetElement=e}this.targetElement.classList.add("toolslide"),this.config.embed&&this.targetElement.parentElement.classList.add("ts-embed-container"),this.containerElement=this.targetElement.querySelector(".ts-container"),this.contentElement=this.targetElement.querySelector(".ts-content-container"),this.navElement=this.targetElement.querySelector(".ts-nav-container"),this.__applyConfig(this.config),this.__attachEventListeners()},setPosition:function(t){this.targetElement.classList.add("ts-"+t)},setHeight:function(t){this.targetElement.style.height=t,"top"!==this.config.position&&"bottom"!==this.config.position||(this.containerElement.style.height="calc(100% - "+this.navElement.clientHeight+"px)")},setWidth:function(t){this.targetElement.style.width=t,"left"!==this.config.position&&"right"!==this.config.position||(this.containerElement.style.width="calc(100% - "+this.navElement.clientWidth+"px)")},setNavigationSize:function(t,e){"left"!==this.config.position&&"right"!==this.config.position||(this.navElement.style.width=t),"top"!==this.config.position&&"bottom"!==this.config.position||(this.navElement.style.height=e);for(var i=this.navElement.querySelectorAll(".ts-nav-item"),n=i.length;n--;)i[n].style.width=t,i[n].style.height=e},setAutoClose:function(t){this.autocloseTimeout&&clearTimeout(this.autocloseTimeout),this.autocloseTimeout=setTimeout(this.close.bind(this),t)},setActiveById:function(t){var e,i=this.targetElement.querySelector(".ts-content-item.active");if(this.__isDOMElement(t))e=t.id;else{if(!this.__isString(t))return;e=t}if(!i||e!==i.id){this.fire("beforeToggle",[i,s]);var n=this.targetElement.querySelector(".ts-nav-item[ts-target='"+e+"']"),s=this.targetElement.querySelector("#"+e);this.__deactivateAll(),s&&s.classList.add("active"),n&&n.classList.add("active"),this.fire("afterToggle",[i,s])}},setActiveByIndex:function(t){var e=this.contentElement&&this.contentElement.children;this.setActiveById(e[t]&&e[t].id)},open:function(){this.fire("beforeOpen",[this.targetElement]),this.targetElement.classList.remove("closed"),this.targetElement.classList.add("open"),this.containerElement.style.left="",this.__updateEmbeding(),this.fire("afterOpen",[this.targetElement])},close:function(){this.fire("beforeClose",[this.targetElement]),this.targetElement.classList.remove("open"),this.targetElement.classList.add("closed"),this.containerElement.style.left=this.config.minClosedSize+"px",this.__updateEmbeding(),this.fire("afterClose",[this.targetElement])},isOpen:function(){return this.targetElement.classList.contains("open")},isActive:function(t){if(this.__isString(t))t=document.getElementById(t);else if(!this.__isDOMElement(t))return!1;return t.classList.contains("active")},__applyConfig:function(t){this.setPosition(t.position),t.startOpen?this.open():this.close(),this.setNavigationSize(t.navigationItemWidth,t.navigationItemHeight),this.setWidth(t.width),this.setHeight(t.height),this.__updateEmbeding(),t.autoclose&&this.setAutoClose(),this.__setAnimations(t.animations),this.setActiveById(this.config.activePanel||this.__getContentPanel(0))},__attachEventListeners:function(){for(var t=this.navElement.children,e=t.length;e--;)t[e].onclick=this.onNavButtonClick.bind(this);this.autocloseTimeout&&(this.containerElement.onmouseover=this.onMouseOver.bind(this),this.containerElement.onmouseout=this.onMouseOut.bind(this)),this.config.clickOutsideToClose&&document.addEventListener("click",this.onDocumentClick.bind(this),!1),this.config.toggleButton&&(this.toggleButtonElement=document.querySelector(this.config.toggleButton),this.toggleButtonElement&&(this.toggleButtonElement.onclick=this.onToggleButtonClick.bind(this)))},__updateEmbeding:function(){this.config.embed&&("left"===this.config.position?this.targetElement.parentElement.style.marginLeft=this.isOpen()?"calc("+this.config.width+" - "+this.config.navigationItemWidth+")":this.config.minClosedSize+"px":"right"===this.config.position?(this.targetElement.parentElement.style.marginRight=this.isOpen()?"calc("+this.config.width+" - "+this.config.navigationItemWidth+")":this.config.minClosedSize+"px",this.targetElement.parentElement.style.marginLeft=this.isOpen()?"calc(-"+this.config.width+" + "+this.config.navigationItemWidth+")":this.config.minClosedSize+"px"):"top"===this.config.position?this.targetElement.parentElement.style.marginTop=this.isOpen()?"calc("+this.config.height+" - "+this.config.navigationItemHeight+")":this.config.minClosedSize+"px":"bottom"===this.config.position&&(this.targetElement.parentElement.style.marginBottom=this.isOpen()?"calc("+this.config.height+" - "+this.config.navigationItemHeight+")":this.config.minClosedSize+"px"))},__setAnimations:function(t){if(t&&Object.keys(t).length){if(t.replace)for(var e=this.__getAnimationFromString(t.replace),i=this.contentElement.children,n=i.length;n--;)this.__setVendorStyleProperty(i[n],"transition",this.__getTransitionFromAnimation(e)),i[n].classList.add(e.type);t.toggle&&(e=this.__getAnimationFromString(t.toggle),this.__setVendorStyleProperty(this.targetElement,"transition",this.__getTransitionFromAnimation(e)))}},onNavButtonClick:function(t){this.isOpen()?this.isActive(t.currentTarget)&&this.config.closeable&&this.close():this.open(),this.setActiveById(t.currentTarget.getAttribute("ts-target"))},onMouseOver:function(t){clearTimeout(this.autocloseTimeout)},onMouseOut:function(t){this.setAutoClose(this.config.autocloseDelay)},onDocumentClick:function(t){this.targetElement.contains(t.target)||this.toggleButtonElement&&this.toggleButtonElement.contains(t.target)||this.close()},onToggleButtonClick:function(t){this.isOpen()?this.close():this.open()},fire:function(t,e){this.config.listeners&&this.config.listeners[t]&&this.config.listeners[t].apply(this,e)},__deactivateAll:function(){for(var t=this.contentElement&&this.contentElement.children,e=this.navElement&&this.navElement.children,i=t.length,n=e.length;i--;)t[i].classList.remove("active");for(;n--;)e[n].classList.remove("active")},__getContentPanel:function(t){return this.contentElement&&this.contentElement.children&&this.contentElement.children[t]},__isDOMElement:function(t){return t&&(t.nodeType===document.ELEMENT_NODE||t.nodeType===document.DOCUMENT_FRAGMENT_NODE)},__isString:function(t){return"string"==typeof t},__getAnimationFromString:function(t){var e=t.split(" ");return{type:e[0],speed:e[1],easing:e[2]}},__getTransitionFromAnimation:function(t){var e="";return"slide"===t.type?e+="transform "+t.speed+" "+t.easing:"crossfade"===t.type?e+="opacity "+t.speed+" "+t.easing:"slidefade"===t.type&&(e+="opacity "+t.speed+" "+t.easing+", ",e+="transform "+t.speed+" "+t.easing),e},__setVendorStyleProperty:function(t,e,i){var n=this.__capitalizeFirstLetter(e);t.style["webkit"+n]=i,t.style["Moz"+n]=i,t.style["ms"+n]=i,t.style["O"+n]=i,t.style[e]=i},__capitalizeFirstLetter:function(t){return t.charAt(0).toUpperCase()+t.slice(1)}},function(t,i){return new e(t,i)}}); |
