14 lines
5.0 KiB
JavaScript
14 lines
5.0 KiB
JavaScript
/*
|
|
* This file is part of the TYPO3 CMS project.
|
|
*
|
|
* It is free software; you can redistribute it and/or modify it under
|
|
* the terms of the GNU General Public License, either version 2
|
|
* of the License, or any later version.
|
|
*
|
|
* For the full copyright and license information, please read the
|
|
* LICENSE.txt file that was distributed with this source code.
|
|
*
|
|
* The TYPO3 project - inspiring people to share!
|
|
*/
|
|
import{html as d,nothing as g}from"lit";import{property as b,state as m,customElement as f}from"lit/decorators.js";import{PseudoButtonLitElement as x}from"@typo3/backend/element/pseudo-button.js";import{ContentNavigationSlotEnum as u,NavigationStateChangeEvent as p,NavigationToggleEvent as v}from"@typo3/backend/viewport/content-navigation.js";import"@typo3/backend/element/icon-element.js";var h=function(i,t,e,o){var r=arguments.length,n=r<3?t:o===null?o=Object.getOwnPropertyDescriptor(t,e):o,c;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(i,t,e,o);else for(var l=i.length-1;l>=0;l--)(c=i[l])&&(n=(r<3?c(n):r>3?c(t,e,n):c(t,e))||n);return r>3&&n&&Object.defineProperty(t,e,n),n},s;(function(i){i.collapse="collapse",i.expand="expand"})(s||(s={}));let a=class extends x{constructor(){super(...arguments),this.context=null,this.mutationObserver=null,this.resizeObserver=null,this.boundStateChangeHandler=this.handleStateChange.bind(this),this.boundFocusRequestHandler=this.handleFocusRequest.bind(this),this.pageHideHandler=()=>{this.releaseTopLevelListeners()}}connectedCallback(){if(super.connectedCallback(),this.hidden=!0,!this.action){console.error('<typo3-backend-content-navigation-toggle> requires an "action" attribute (collapsed or expanded)');return}this.discoverContext(),this.setupStateSync(),this.setupFocusListener(),this.setupResizeObserver(),window.addEventListener("pagehide",this.pageHideHandler)}disconnectedCallback(){super.disconnectedCallback(),this.releaseTopLevelListeners(),window.removeEventListener("pagehide",this.pageHideHandler)}render(){if(!this.context||!this.action)return d`${g}`;const t=this.action===s.collapse?"actions-panel-collapse-start":"actions-panel-expand-start";return d`<typo3-backend-icon identifier=${t} size=small></typo3-backend-icon>`}buttonActivated(){this.context?.contentNavigation.toggleNavigation()}shouldBeVisible(){if(!this.context||!this.action)return!1;const{contentNavigation:t}=this.context;return this.action===s.collapse?t.shouldShowCollapseButton():t.shouldShowExpandButton()}shouldRender(){return this.context!==null&&!this.hidden}discoverContext(){const t=this.findContentNavigation();t&&(this.context={contentNavigation:t,slot:this.detectSlot(t)},this.updateVisibility())}findContentNavigation(){const t=this.closest("typo3-backend-content-navigation");if(t)return t;try{const e=window.frameElement;if(e)return e.closest("typo3-backend-content-navigation")}catch{}return null}detectSlot(t){let e=this.parentElement;for(;e!==null;){if(e.parentElement===t){if(e.getAttribute("slot")===u.navigation)return u.navigation;break}e=e.parentElement}return u.content}getTargetDocument(){try{return window.top?.document??document}catch{return document}}setupStateSync(){if(!this.context)return;const{contentNavigation:t}=this.context;this.mutationObserver=new MutationObserver(e=>{for(const o of e)o.type==="attributes"&&this.updateVisibility()}),this.mutationObserver.observe(t,{attributes:!0,attributeFilter:["navigation-collapsed","navigation-hidden"]}),this.getTargetDocument().addEventListener(p.eventName,this.boundStateChangeHandler)}cleanupStateSync(){this.mutationObserver&&(this.mutationObserver.disconnect(),this.mutationObserver=null),this.getTargetDocument().removeEventListener(p.eventName,this.boundStateChangeHandler)}releaseTopLevelListeners(){this.cleanupStateSync(),this.cleanupFocusListener(),this.cleanupResizeObserver()}handleStateChange(t){const{contentNavigation:e}=this.context||{};e&&t.target===e&&this.updateVisibility()}updateVisibility(){this.hidden=!this.shouldBeVisible(),this.updateTitle()}updateTitle(){if(!this.context||!this.action)return;const{contentNavigation:t}=this.context;this.title=this.action===s.collapse?t.navigationLabelCollapse:t.navigationLabelExpand}setupFocusListener(){this.context&&this.context.contentNavigation.addEventListener(v.eventName,this.boundFocusRequestHandler)}cleanupFocusListener(){this.context&&this.context.contentNavigation.removeEventListener(v.eventName,this.boundFocusRequestHandler)}setupResizeObserver(){this.context&&(this.resizeObserver=new ResizeObserver(()=>{this.updateVisibility()}),this.resizeObserver.observe(this.context.contentNavigation),this.updateVisibility())}cleanupResizeObserver(){this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null)}handleFocusRequest(t){const{slot:e}=this.context||{};e===t.detail.focusTarget&&this.shouldRender()&&this.updateComplete.then(()=>{this.focus()})}};h([b({type:String})],a.prototype,"action",void 0),h([m()],a.prototype,"context",void 0),a=h([f("typo3-backend-content-navigation-toggle")],a);export{a as ContentNavigationToggle,s as ContentNavigationToggleActionEnum};
|