14 lines
9.3 KiB
JavaScript
14 lines
9.3 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{LitElement as W,css as b,html as g}from"lit";import{property as d,query as f,state as w,customElement as C}from"lit/decorators.js";import{classMap as m}from"lit/directives/class-map.js";import{styleMap as M}from"lit/directives/style-map.js";import y from"@typo3/backend/storage/persistent.js";import x from"~labels/backend.messages";var o=function(r,t,i,e){var s=arguments.length,n=s<3?t:e===null?e=Object.getOwnPropertyDescriptor(t,i):e,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(r,t,i,e);else for(var c=r.length-1;c>=0;c--)(l=r[c])&&(n=(s<3?l(n):s>3?l(t,i,n):l(t,i))||n);return s>3&&n&&Object.defineProperty(t,i,n),n},u,h;(function(r){r.navigation="navigation",r.content="content"})(h||(h={}));class v extends CustomEvent{static{this.eventName="typo3:content-navigation:toggle"}constructor(t){super(v.eventName,{bubbles:!1,detail:{focusTarget:t}})}}class p extends CustomEvent{static{this.eventName="typo3:content-navigation:state-change"}constructor(t,i,e){super(p.eventName,{bubbles:!0,composed:!0,detail:{collapsed:t,hidden:i,identifier:e}})}}let a=class extends W{constructor(){super(...arguments),this.identifier="",this.navigationMinWidth=280,this.navigationHidden=!1,this.navigationCollapsed=!1,this.navigationLabelCollapse=x.get("viewport.navigation.hide"),this.navigationLabelExpand=x.get("viewport.navigation.show"),this.resizing=!1,this.resizeReferencePosition=0,this.startResize=t=>{if(this.isFlyoutMode()||t.button!==0)return;t.stopPropagation(),t.preventDefault();const i=this.shadowRoot?.querySelector('[data-panel="navigation"]');if(i){const s=i.getBoundingClientRect();this.resizeReferencePosition=this.isRtl()?s.right:s.left}this.resizing=!0;const e=t.target;e.setPointerCapture(t.pointerId),e.addEventListener("pointermove",this.handlePointerMove),e.addEventListener("pointerup",this.handlePointerUp),e.addEventListener("pointercancel",this.handlePointerUp),e.addEventListener("lostpointercapture",this.handlePointerUp)},this.handlePointerMove=t=>{this.resizeNavigation(t.clientX)},this.handlePointerUp=t=>{const i=t.currentTarget;i.removeEventListener("pointermove",this.handlePointerMove),i.removeEventListener("pointerup",this.handlePointerUp),i.removeEventListener("pointercancel",this.handlePointerUp),i.removeEventListener("lostpointercapture",this.handlePointerUp),this.stopResize()},this.resizeNavigation=t=>{if(!this.resizing)return;const i=this.shadowRoot?.querySelector('[data-panel="navigation"]');if(!i)return;const e=this.navigationMinWidth,s=this.getMaxWidth();let n=this.isRtl()?Math.round(this.resizeReferencePosition-t):Math.round(t-this.resizeReferencePosition);n=Math.max(e,Math.min(n,s)),i.style.width=`${n}px`,this.navigationWidth=n},this.stopResize=()=>{this.resizing=!1,this.persistWidth()},this.handleWindowResize=()=>{if(this.navigationWidth&&!this.isFlyoutMode()){const t=this.getMaxWidth();this.navigationWidth>t&&this.setNavigationWidth(t)}},this.handleNodeSelected=()=>{this.isFlyoutMode()&&!this.navigationCollapsed&&this.collapseNavigation()}}static{u=this}static{this.styles=b`:host{--content-navigation-divider-color:transparent;--content-navigation-divider-color-active:currentColor;--content-navigation-divider-width:0.5rem;--content-navigation-flyout-box-shadow:0 8px 16px rgba(0,0,0,.15);display:flex;position:relative;width:100%;height:100%;container-type:inline-size}:host([resizing]){cursor:col-resize;user-select:none}:host([resizing]) *{cursor:col-resize}.panel{height:100%}.panel--navigation{position:relative;flex:0 0 auto}.panel--content{position:relative;flex:1 1 auto;min-width:0}.panel--content ::slotted(*){position:relative}.panel--collapsed{display:none}.divider{position:relative;z-index:1;flex:0 0 1px;background-color:var(--content-navigation-divider-color)}.divider-handle{position:absolute;inset-block:0;inset-inline:calc(var(--content-navigation-divider-width)*-.5);width:var(--content-navigation-divider-width);cursor:col-resize;touch-action:none;transition:background-color .2s ease-in-out}.divider-handle:hover,.divider.resizing .divider-handle{background-color:var(--content-navigation-divider-color-active)}@container (max-width: 750px){.panel--navigation{position:absolute;inset-block:0;inset-inline-start:0;z-index:2;border-inline-end:1px solid var(--content-navigation-divider-color);box-shadow:var(--content-navigation-flyout-box-shadow);transition:transform .2s ease-in-out,box-shadow .2s ease-in-out;max-width:100%}.panel--navigation.panel--collapsed{display:block;transform:translateX(-100%);box-shadow:none}:host(:dir(rtl)) .panel--navigation.panel--collapsed,:host([dir=rtl]) .panel--navigation.panel--collapsed{transform:translateX(100%)}.divider{display:none}.panel--content{flex:1 1 100%;z-index:1}}`}static{this.FLYOUT_BREAKPOINT=750}connectedCallback(){super.connectedCallback(),this.loadPersistedWidth(),window.addEventListener("resize",this.handleWindowResize,{passive:!0}),this.addEventListener("typo3:tree:node-selected",this.handleNodeSelected)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this.handleWindowResize),this.removeEventListener("typo3:tree:node-selected",this.handleNodeSelected)}expandNavigation(){this.navigationCollapsed&&this.toggleNavigation()}collapseNavigation(){this.navigationCollapsed||this.toggleNavigation()}toggleNavigation(){this.navigationCollapsed=!this.navigationCollapsed;const t=this.navigationCollapsed?h.content:h.navigation;this.updateComplete.then(()=>{this.dispatchEvent(new v(t))})}isCollapsed(){return this.navigationCollapsed}showNavigation(){this.navigationHidden=!1}hideNavigation(){this.navigationHidden=!0}isNavigationHidden(){return this.navigationHidden}isFlyoutMode(){return this.getBoundingClientRect().width<u.FLYOUT_BREAKPOINT}shouldShowCollapseButton(){return this.navigationHidden?!1:this.isFlyoutMode()||!this.navigationCollapsed}shouldShowExpandButton(){return this.navigationHidden?!1:this.isFlyoutMode()||this.navigationCollapsed}setNavigationWidth(t){const i=this.navigationMinWidth,e=this.getMaxWidth();t=Math.max(i,Math.min(t,e)),this.navigationWidth=t,this.updateNavigationElement(t)}render(){const t=this.navigationWidth||this.navigationInitialWidth,i={};if(!this.navigationHidden){const n=this.isFlyoutMode();if(t){const l=n?t:Math.min(t,this.getMaxWidth());i.width=`${l}px`}this.navigationMinWidth&&(i.minWidth=`${this.navigationMinWidth}px`),n?i.maxWidth="100%":this.navigationMaxWidth&&(i.maxWidth=`${this.getMaxWidth()}px`)}const e={panel:!0,"panel--navigation":!0,"panel--collapsed":this.navigationCollapsed},s={divider:!0,resizing:this.resizing};return g`${this.navigationHidden?"":g`<div class=${m(e)} style=${M(i)} data-panel=navigation><slot name=navigation></slot></div>${this.navigationCollapsed?"":g`<div class=${m(s)}><div class=divider-handle @pointerdown=${this.startResize}></div></div>`}`}<div class="panel panel--content" data-panel=content><slot name=content></slot></div>`}updated(t){super.updated(t),(t.has("navigationCollapsed")||t.has("navigationHidden"))&&this.dispatchEvent(new p(this.navigationCollapsed,this.navigationHidden,this.identifier))}getPersistenceKey(){return this.identifier?`resize.${this.identifier}.navigation`:null}loadPersistedWidth(){const t=this.getPersistenceKey();if(t){const i=y.get(t);if(i){const e=parseInt(i,10);if(!isNaN(e)&&e>0){this.navigationWidth=e;return}}}this.navigationInitialWidth&&!this.navigationWidth&&(this.navigationWidth=this.navigationInitialWidth)}persistWidth(){const t=this.getPersistenceKey();t&&this.navigationWidth&&y.set(t,String(this.navigationWidth))}getMaxWidth(){const t=this.getBoundingClientRect().width;let i=Math.round(t/2);return this.navigationMaxWidth&&(i=Math.min(i,this.navigationMaxWidth)),i}isRtl(){return getComputedStyle(this).direction==="rtl"}updateNavigationElement(t){const i=this.shadowRoot?.querySelector('[data-panel="navigation"]');i&&(i.style.width=`${t}px`)}};o([d({type:String})],a.prototype,"identifier",void 0),o([d({type:Number,attribute:"navigation-min-width"})],a.prototype,"navigationMinWidth",void 0),o([d({type:Number,attribute:"navigation-max-width"})],a.prototype,"navigationMaxWidth",void 0),o([d({type:Number,attribute:"navigation-initial-width"})],a.prototype,"navigationInitialWidth",void 0),o([d({type:Boolean,attribute:"navigation-hidden",reflect:!0})],a.prototype,"navigationHidden",void 0),o([d({type:Boolean,attribute:"navigation-collapsed",reflect:!0})],a.prototype,"navigationCollapsed",void 0),o([d({type:String,attribute:"navigation-label-collapse"})],a.prototype,"navigationLabelCollapse",void 0),o([d({type:String,attribute:"navigation-label-expand"})],a.prototype,"navigationLabelExpand",void 0),o([d({type:Boolean,reflect:!0})],a.prototype,"resizing",void 0),o([f('slot[name="navigation"]')],a.prototype,"navigationSlot",void 0),o([f('slot[name="content"]')],a.prototype,"contentSlot",void 0),o([w()],a.prototype,"navigationWidth",void 0),a=u=o([C("typo3-backend-content-navigation")],a);export{a as ContentNavigation,h as ContentNavigationSlotEnum,p as NavigationStateChangeEvent,v as NavigationToggleEvent};
|