mercury_editor-2.0.x-dev/components/component-outline/component-outline.min.js

!function(){"use strict";class e{constructor(t){this.outlineElement=t,this.treeItems=[],this.addButtons=[],this.menuToggles=[],this.expandToggles=[],this.openMenuDialog=null,this.outlineId=this.generateOutlineId(),e.outlines.set(this.outlineId,this),this.outlineElement.componentOutlineNavigation=this,this.mount()}static outlines=new Map;static setHighlightedComponent(t){sessionStorage.setItem("mercuryEditor.highlightedComponent",t),e.outlines.forEach((e=>{e.setHighlightedComponent(t)}))}generateOutlineId(){const e=this.outlineElement.getAttribute("data-entity-id");if(e)return`MercuryEditorOutline.${e}`;return`MercuryEditorOutline.${Array.from(document.querySelectorAll(".me-component-outline__list")).indexOf(this.outlineElement)}`}getExpandedStatesKey(){return`${this.outlineId}.expandedStates`}getActiveTreeItemKey(){return`${this.outlineId}.activeTreeItem`}saveExpandedStates(){const e={};this.treeItems.forEach((t=>{const n=this.getTreeItemId(t);n&&this.getExpandButton(t)&&(e[n]="true"===t.getAttribute("aria-expanded"))})),sessionStorage.setItem(this.getExpandedStatesKey(),JSON.stringify(e))}loadExpandedStates(){const e=sessionStorage.getItem(this.getExpandedStatesKey());return e?JSON.parse(e):{}}saveActiveTreeItem(e){const t=this.getTreeItemId(e);t&&sessionStorage.setItem(this.getActiveTreeItemKey(),t)}loadActiveTreeItem(){return sessionStorage.getItem(this.getActiveTreeItemKey())}getTreeItemId(e){const t=e?.querySelector(".me-component-outline__component-label, .me-component-outline__region-label"),n=t?.getAttribute("data-uuid");if(n)return n;const o=this.getTreeItemLabel(e),i=e.style.getPropertyValue("--me-treeitem-depth")||"0";return o?`${o.replace(/\s+/g,"_")}_${i}`:null}findTreeItemById(e){return this.treeItems.find((t=>this.getTreeItemId(t)===e))||null}mount(){this.treeItems=Array.from(this.outlineElement.querySelectorAll('.me-component-outline__component[role="treeitem"]')),this.addButtons=Array.from(this.outlineElement.querySelectorAll(".me-component-outline__add-button")),this.menuToggles=Array.from(this.outlineElement.querySelectorAll(".me-component-outline__component-menu-toggle")),this.expandToggles=Array.from(this.outlineElement.querySelectorAll(".me-component-outline__component-toggle")),this.currentFocusedItem=null,this.typeAheadTimeout=null,this.typeAheadString="",this.initializeTabIndex(),this.treeItems.forEach((e=>{e.addEventListener("keydown",this.onKeydownTreeItem.bind(this)),e.addEventListener("focus",this.onFocusTreeItem.bind(this))})),this.menuToggles.forEach((e=>{e.addEventListener("click",this.onMenuToggleClick.bind(this)),e.addEventListener("keydown",this.onMenuToggleKeydown.bind(this))})),this.expandToggles.forEach((e=>{e.addEventListener("click",this.onExpandToggleClick.bind(this))}));Array.from(this.outlineElement.querySelectorAll(".me-component-outline__component-controls")).forEach((e=>{e.addEventListener("click",this.onComponentControlClick.bind(this))}));Array.from(this.outlineElement.querySelectorAll('[role="menuitem"]')).forEach((e=>{e.addEventListener("keydown",this.onComponentActionKeydown.bind(this)),e.addEventListener("click",this.onComponentActionClick.bind(this))}));Array.from(this.outlineElement.querySelectorAll('button[data-action="add-component"]')).forEach((e=>{e.addEventListener("click",this.onAddComponentClick.bind(this))})),document.addEventListener("click",this.onDocumentClick.bind(this)),this.setDepthCustomProperty(),this.initializeDefaultState()}setDepthCustomProperty(){const e=(t,n)=>{t.style.setProperty("--me-treeitem-depth",n);t.querySelectorAll(':scope > ul > li > ul > [role="treeitem"]').forEach((t=>e(t,n+1)))};this.outlineElement.querySelectorAll(':scope > [role="treeitem"]').forEach((t=>e(t,0)))}initializeDefaultState(){const e=this.loadExpandedStates();this.treeItems.forEach((t=>{if(this.getExpandButton(t)){const n=this.getTreeItemId(t),o=n?e[n]:void 0;if(void 0!==o)o?this.expandTreeItem(t):this.collapseTreeItem(t);else{const e=t.getAttribute("aria-expanded");null===e||"false"===e?this.collapseTreeItem(t):"true"===e&&this.expandTreeItem(t)}}})),this.restoreActiveTreeItem()}initializeTabIndex(){[...this.treeItems,...this.menuToggles,...this.addButtons].forEach((e=>{e.tabIndex=-1,this.getMenuToggleByTreeItem(e)?.setAttribute("tabindex",-1),this.getAddButtonsByTreeItem(e).forEach((e=>e.setAttribute("tabindex",-1)))}))}restoreActiveTreeItem(){this.setHighlightedComponent(sessionStorage.getItem("mercuryEditor.highlightedComponent"));const e=this.loadActiveTreeItem();let t=null;e&&(t=this.findTreeItemById(e)),!t&&this.treeItems.length>0&&(t=this.treeItems[0]),t&&(this.expandParentTreeItems(t),this.setActiveTreeItem(t))}setActiveTreeItem(e){this.initializeTabIndex(),e.tabIndex=0,this.getMenuToggleByTreeItem(e)?.setAttribute("tabindex",0),this.getAddButtonsByTreeItem(e).forEach((e=>e.setAttribute("tabindex",0))),this.currentFocusedItem=e,this.expandParentTreeItems(e),this.saveActiveTreeItem(e)}expandParentTreeItems(e){let t=e;const n=[];for(;t;){const e=this.getParentTreeItem(t);e&&e.matches("[aria-expanded]")&&n.unshift(e),t=e}n.forEach((e=>{this.expandTreeItem(e)}))}onFocusTreeItem(e){this.currentFocusedItem=e.target}setFocusToTreeItem(e){this.setActiveTreeItem(e),e.focus()}setHighlightedComponent(e){if(this.treeItems.forEach((e=>e.classList.remove("is-highlighted"))),e){const t=this.findTreeItemById(e);t&&(this.setActiveTreeItem(t),t.classList.add("is-highlighted"))}}onKeydownTreeItem(e){let t=!1;const n=e.target;switch(e.key){case"Up":case"ArrowUp":t=!0,this.focusPreviousVisibleTreeItem(n);break;case"Down":case"ArrowDown":t=!0,this.focusNextVisibleTreeItem(n);break;case"Right":case"ArrowRight":t=!0,this.handleTreeItemRightArrow(n);break;case"Left":case"ArrowLeft":t=!0,this.handleTreeItemLeftArrow(n);break;case"Home":t=!0,this.focusFirstTreeItem();break;case"End":t=!0,this.focusLastVisibleTreeItem();break;case"Enter":t=!0,this.activateTreeItem(n);break;default:1===e.key.length&&/[a-zA-Z0-9]/.test(e.key)&&(t=!0,this.handleTypeAhead(e.key))}t&&(e.stopPropagation(),e.preventDefault())}handleTreeItemRightArrow(e){if(this.getExpandButton(e)&&"true"!==e.getAttribute("aria-expanded"))return void this.expandTreeItem(e);const t=this.getFirstChildTreeItem(e);t&&this.setFocusToTreeItem(t)}handleTreeItemLeftArrow(e){if("true"===e.getAttribute("aria-expanded"))this.collapseTreeItem(e);else{const t=this.getParentTreeItem(e);t&&this.setFocusToTreeItem(t)}}selectComponent(e){const t=document.querySelector("#me-preview");t&&e&&t.contentWindow.postMessage({type:"componentSelected",settings:{uuid:e}})}onComponentControlClick(e){this.selectComponent(e.target.getAttribute("data-uuid"))}onComponentActionClick(e){const t=e.target.closest('[role="menuitem"]');if(!t)return;const n=new CustomEvent("mercuryEditorComponentAction",{bubbles:!0,detail:{mercuryEditorEntityId:t.closest("[data-mercury-editor-id]").getAttribute("data-mercury-editor-id"),layoutParagraphsLayoutId:t.closest("[data-layout-id]").getAttribute("data-layout-id"),action:t.getAttribute("data-action"),componentUuid:t.getAttribute("data-component-uuid")}});t.dispatchEvent(n)}onAddComponentClick(e){const t=e.target.closest('button[data-action="add-component"]');if(!t)return;const n={mercuryEditorEntityId:t.closest("[data-mercury-editor-id]").getAttribute("data-mercury-editor-id"),layoutParagraphsLayoutId:t.closest("[data-layout-id]").getAttribute("data-layout-id"),action:"add-component",parentUuid:t.getAttribute("data-parent-uuid"),regionId:t.getAttribute("data-region"),siblingUuid:t.getAttribute("data-sibling-uuid"),placement:t.getAttribute("data-placement")},o=new CustomEvent("mercuryEditorComponentAction",{bubbles:!0,detail:n});t.dispatchEvent(o)}onComponentActionKeydown(e){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.onComponentActionClick(e))}activateTreeItem(e){const t=e?.querySelector(".me-component-outline__component-label");t&&this.selectComponent(t.getAttribute("data-uuid"))}focusFirstTreeItem(){this.treeItems.length>0&&this.setFocusToTreeItem(this.treeItems[0])}focusLastVisibleTreeItem(){const e=this.getVisibleTreeItems();e.length>0&&this.setFocusToTreeItem(e[e.length-1])}focusPreviousVisibleTreeItem(e){const t=this.getVisibleTreeItems(),n=t.indexOf(e);n>0&&this.setFocusToTreeItem(t[n-1])}focusNextVisibleTreeItem(e){const t=this.getVisibleTreeItems(),n=t.indexOf(e);n<t.length-1&&this.setFocusToTreeItem(t[n+1])}getVisibleTreeItems(){return this.treeItems.filter((e=>{let t=e.parentElement;for(;t&&t!==this.outlineElement;){const e=t.closest('[role="treeitem"]');if(e&&"false"===e.getAttribute("aria-expanded"))return!1;t=t.parentElement}return!0}))}getExpandButton(e){return e?.querySelector(".me-component-outline__component-toggle")??null}getFirstChildTreeItem(e){const t=e?.querySelector('[role="group"]');return t?t.querySelector('[role="treeitem"]')??null:null}getParentTreeItem(e){return e?.parentElement?.closest('[role="treeitem"]')}handleTypeAhead(e){this.typeAheadTimeout&&clearTimeout(this.typeAheadTimeout),this.typeAheadString+=e.toLowerCase();const t=this.getVisibleTreeItems(),n=this.currentFocusedItem?t.indexOf(this.currentFocusedItem):-1,o=[...t.slice(n+1),...t.slice(0,n+1)].find((e=>{const t=this.getTreeItemLabel(e);return t&&t.toLowerCase().startsWith(this.typeAheadString)}));o&&this.setFocusToTreeItem(o),this.typeAheadTimeout=setTimeout((()=>{this.typeAheadString=""}),500)}getTreeItemLabel(e){const t=e?.querySelector(".me-component-outline__component-label");return t?.textContent?.trim()??""}onMenuToggleClick(e){e.stopPropagation();const t=e.target,n=t.nextElementSibling;this.openMenuDialog&&this.openMenuDialog!==n&&this.closeMenu(this.openMenuDialog),n.hasAttribute("open")?this.closeMenu(n):this.openMenu(t,n)}onMenuToggleKeydown(e){const t=e.target,n=t.nextElementSibling;let o=!1;switch(e.key){case"Enter":case" ":o=!0,n.hasAttribute("open")||(this.openMenu(t,n),this.focusFirstMenuItem(n));break;case"Down":case"ArrowDown":o=!0,n.hasAttribute("open")||this.openMenu(t,n),this.focusFirstMenuItem(n);break;case"Right":case"ArrowRight":case"Left":case"ArrowLeft":o=!0;break;case"Escape":if(n.hasAttribute("open")){o=!0,this.closeMenu(n);const e=t.closest('[role="treeitem"]');e&&this.setFocusToTreeItem(e)}}o&&(e.preventDefault(),e.stopPropagation())}openMenu(e,t){t.setAttribute("open",""),t.setAttribute("aria-hidden","false"),e.setAttribute("aria-expanded","true"),this.openMenuDialog=t;t.querySelectorAll('[role="menuitem"]').forEach(((e,t)=>{e.tabIndex=0===t?0:-1,e.addEventListener("keydown",this.onMenuItemKeydown.bind(this))}))}closeMenu(e){const t=e.previousElementSibling;e.removeAttribute("open"),e.setAttribute("aria-hidden","true"),t.setAttribute("aria-expanded","false"),this.openMenuDialog=null;e.querySelectorAll('[role="menuitem"]').forEach((e=>{e.removeEventListener("keydown",this.onMenuItemKeydown.bind(this))}))}getMenuToggleByDialog(e){return e.previousElementSibling}getMenuToggleByTreeItem(e){return e.querySelector(":scope > .me-component-outline__component-controls .me-component-outline__component-menu-toggle")}getAddButtonsByTreeItem(e){return Array.from(e.querySelectorAll(":scope > :is(.me-component-outline__component-controls, .me-component-outline__region-controls) > .me-component-outline__add-button"))}onMenuItemKeydown(e){const t=e.target,n=t.closest(".me-component-outline__component-menu-dialog"),o=Array.from(n.querySelectorAll('[role="menuitem"]')),i=o.indexOf(t);let r=!1;switch(e.key){case"Down":case"ArrowDown":const e=(i+1)%o.length;o[i].tabIndex=-1,o[e].tabIndex=0,o[e].focus(),r=!0;break;case"Up":case"ArrowUp":const t=(i-1+o.length)%o.length;o[i].tabIndex=-1,o[t].tabIndex=0,o[t].focus(),r=!0;break;case"Escape":this.closeMenu(n);const s=this.getMenuToggleByDialog(n).closest('[role="treeitem"]');s&&this.setFocusToTreeItem(s),r=!0;break;case"Tab":this.closeMenu(n)}r&&(e.preventDefault(),e.stopPropagation())}focusFirstMenuItem(e){const t=e.querySelector('[role="menuitem"]');t&&(t.tabIndex=0,t.focus())}onDocumentClick(e){!this.openMenuDialog||this.openMenuDialog.contains(e.target)||this.getMenuToggleByDialog(this.openMenuDialog)?.contains(e.target)||this.closeMenu(this.openMenuDialog)}onExpandToggleClick(e){e.stopPropagation();const t=e.target.closest('[role="treeitem"]');if(!t)return;"true"===t.getAttribute("aria-expanded")?this.collapseTreeItem(t):this.expandTreeItem(t)}expandTreeItem(e){e.setAttribute("aria-expanded","true");const t=this.getChildGroup(e);t&&(t.style.display="",t.setAttribute("aria-hidden","false")),this.updateTreeItemsCache(),this.saveExpandedStates()}collapseTreeItem(e){e.setAttribute("aria-expanded","false");const t=this.getChildGroup(e);t&&(t.style.display="none",t.setAttribute("aria-hidden","true")),this.updateTreeItemsCache(),this.saveExpandedStates()}updateTreeItemsCache(){this.treeItems=Array.from(this.outlineElement.querySelectorAll('[role="treeitem"]'))}getChildGroup(e){const t=e.nextElementSibling;if(t?.matches('[role="group"]'))return t;const n=e.closest("li");if(n){const e=n.querySelector('[role="group"]');if(e)return e}const o=e.parentElement?.closest("li");if(o){const e=o.querySelector("ul:not(:first-child)");if(e)return e}return null}}((t,n)=>{document.addEventListener("mercuryEditorComponentAction",(e=>{const{mercuryEditorEntityId:n,layoutParagraphsLayoutId:o,action:i,componentUuid:r}=e.detail,s={};switch(i){case"edit":const a=document.querySelector("#me-preview");a&&r&&a.contentWindow.postMessage({type:"componentSelected",settings:{uuid:r}});break;case"add-component":const{parentUuid:l,regionId:u,siblingUuid:c,placement:d}=e.detail,m=new URLSearchParams(Object.entries({parent_uuid:l,region:u,sibling_uuid:c,placement:d,me_id:n}).filter((([e,t])=>null!==t))).toString(),h=t.url(`mercury-editor/${o}/choose-component?${m}`);new t.Ajax(!1,!1,{url:h,event:"click"}).execute();break;case"reorder":s.components=JSON.stringify(e.detail.components),s.component_uuid=e.detail.componentUuid;default:let p=`mercury-editor/${n}/${o}/action/${i}`;r&&(p+=`/${r}`);const g=t.url(p);new t.Ajax(!1,!1,{url:g,event:"click",submit:s}).execute()}})),document.addEventListener("mercuryEditorUpdateState",(()=>{if(document.querySelector(".me-component-outline")){const e=document.querySelector(".me-button--component-outline").getAttribute("href").split("?")[0];new t.Ajax(!1,!1,{url:`${e}?update=true`}).execute()}})),window.addEventListener("message",(t=>{if("layoutParagraphsEvent"===t.data?.type)if("lpb-component:focus"===t.data?.eventName){const n=t.data?.ref;e.setHighlightedComponent(n)}else"lpb-component:blur"===t.data?.eventName&&e.setHighlightedComponent(null)})),t.behaviors.mercuryEditorComponentOutline={attach:function(t){n("me-component-outline",".me-component-outline__list",t).forEach((t=>new e(t))),n("me-no-components",".me-component-outline__no-components button").forEach((e=>{e.addEventListener("click",(()=>{const t=new CustomEvent("mercuryEditorComponentAction",{bubbles:!0,detail:{action:"add-component",mercuryEditorEntityId:e.getAttribute("data-mercury-editor-id"),layoutParagraphsLayoutId:e.getAttribute("data-layout-id"),parentUuid:"",regionId:"",siblingUuid:"",placement:""}});e.dispatchEvent(t)}))}))}}})(Drupal,once)}();