1 line
No EOL
3.3 KiB
JavaScript
1 line
No EOL
3.3 KiB
JavaScript
import dom from"./../../dom.js";import"./../emby-button/emby-button.js";function slideDownToShow(button,elem,animate){elem.classList.remove("hide"),elem.classList.add("expanded"),elem.style.height="auto",animate&&(animate=elem.offsetHeight+"px",elem.style.height="0",elem.style.height=animate,setTimeout(function(){elem.classList.contains("expanded")?elem.classList.remove("hide"):elem.classList.add("hide"),elem.style.height="auto"},400)),button.querySelector("i").classList.add("emby-collapse-expandIconExpanded"),button.classList.remove("emby-collapsible-button-collapsed")}function slideUpToHide(button,elem){elem.style.height=elem.offsetHeight+"px",elem.classList.remove("expanded"),elem.style.height="0",setTimeout(function(){button.classList.add("emby-collapsible-button-collapsed"),elem.classList.contains("expanded")?elem.classList.remove("hide"):elem.classList.add("hide")},400),button.querySelector("i").classList.remove("emby-collapse-expandIconExpanded")}function setState(button,expanded,animate){var collapseContent=button.parentNode.querySelector(".collapseContent");(collapseContent.expanded=expanded)?slideDownToShow(button,collapseContent,!1!==animate):slideUpToHide(button,collapseContent)}function onButtonClick(e,animate){var collapseContent=this.parentNode.querySelector(".collapseContent");setState(this,!0!==collapseContent.expanded,animate)}function onInit(){this.hasInit||(this.hasInit=!0)}function onButtonDragEnter(e){this.parentNode.querySelector(".collapseContent").expanded||this.click()}function connectedCallback(){if(!this.classList.contains("emby-collapse")){this.classList.add("emby-collapse");var collapseContent=this.querySelector(".collapseContent"),collapseContent=(collapseContent&&collapseContent.classList.add("hide"),this.getAttribute("title")),headerClass=(this.title="",((this.getAttribute("data-headerclass")||"")+" emby-collapsible-title").trim()),buttonClass=((this.getAttribute("data-buttonclass")||"")+" emby-collapsible-button").trim();let expandIconClass="emby-collapse-expandIcon";"rtl"===document.dir&&(expandIconClass+=" emby-collapse-expandIcon-rtl");var iconClass=((this.getAttribute("data-iconclass")||"")+" md-icon "+expandIconClass).trim(),buttonClass=(this.insertAdjacentHTML("afterbegin",'<button is="emby-button" type="button" on-click="toggleExpand" class="'+buttonClass+'"><h3 class="'+headerClass+'" title="'+collapseContent+'" aria-label="'+collapseContent+'">'+collapseContent+'</h3><i class="'+iconClass+'">expand_more</i></button>'),this.querySelector(".emby-collapsible-button"));buttonClass.addEventListener("click",onButtonClick),"true"===this.getAttribute("data-expanded")?setState(buttonClass,!0,!1):buttonClass.classList.add("emby-collapsible-button-collapsed"),dom.addEventListener(buttonClass,"dragenter",onButtonDragEnter,{passive:!0})}}require(["css!modules/emby-elements/emby-collapse/emby-collapse.css"]);class EmbyCollapse extends HTMLDivElement{constructor(){var self=super();return onInit.call(self),self}expand(){var button=this.querySelector(".emby-collapsible-button");button&&setState(button,!0,!1)}collapse(){var button=this.querySelector(".emby-collapsible-button");button&&setState(button,!1,!1)}connectedCallback(){onInit.call(this),connectedCallback.call(this)}}customElements.define("emby-collapse",EmbyCollapse,{extends:"div"});export default EmbyCollapse; |