TYPO3 v15 dev-main snapshot ()

Resources/Public/JavaScript/tree/file-storage-browser.js

@@ -0,0 +1,13 @@
+/*
+ * 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 l,LitElement as m}from"lit";import{customElement as f,query as u}from"lit/decorators.js";import h from"@typo3/core/ajax/ajax-request.js";import"@typo3/backend/tree/tree-toolbar.js";import g from"@typo3/backend/element-browser.js";import b from"@typo3/backend/link-browser.js";import"@typo3/backend/element/icon-element.js";import{FileStorageTree as w}from"@typo3/backend/tree/file-storage-tree.js";var d=function(n,e,t,r){var o=arguments.length,i=o<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(n,e,t,r);else for(var c=n.length-1;c>=0;c--)(s=n[c])&&(i=(o<3?s(i):o>3?s(e,t,i):s(e,t))||i);return o>3&&i&&Object.defineProperty(e,t,i),i};let p=class extends w{createNodeContentAction(e){return this.settings.actions.includes("link")?l`<span class=node-action @click=${()=>this.linkItem(e)}> <typo3-backend-icon identifier=actions-link size=small></typo3-backend-icon> </span>`:this.settings.actions.includes("select")?l`<span class=node-action @click=${()=>this.selectItem(e)}> <typo3-backend-icon identifier=actions-link size=small></typo3-backend-icon> </span>`:super.createNodeContentAction(e)}linkItem(e){b.finalizeFunction("t3://folder?storage="+e.storage+"&identifier="+e.pathIdentifier)}selectItem(e){g.insertElement(e.recordType,e.identifier,e.name,e.identifier,!0)}};p=d([f("typo3-backend-component-filestorage-browser-tree")],p);let a=class extends m{constructor(){super(...arguments),this.activeFolder="",this.actions=[],this.selectActiveNode=e=>{const t=e.detail.nodes;e.detail.nodes=t.map(r=>(decodeURIComponent(r.identifier)===this.activeFolder&&(r.checked=!0),r))},this.loadFolderDetails=e=>{const t=e.detail.node;if(!t.checked)return;const r=document.location.href+"&contentOnly=1&expandFolder="+t.identifier;new h(r).get().then(o=>o.resolve()).then(o=>{const i=document.querySelector(".element-browser-main-content .element-browser-body");i.innerHTML=o})}}firstUpdated(){this.activeFolder=this.getAttribute("active-folder")||""}createRenderRoot(){return this}render(){this.hasAttribute("tree-actions")&&this.getAttribute("tree-actions").length&&(this.actions=JSON.parse(this.getAttribute("tree-actions")));const e={dataUrl:top.TYPO3.settings.ajaxUrls.filestorage_tree_data,rootlineUrl:top.TYPO3.settings.ajaxUrls.filestorage_tree_rootline,filterUrl:top.TYPO3.settings.ajaxUrls.filestorage_tree_filter,showIcons:!0,actions:this.actions},t=()=>{const r=this.querySelector("typo3-backend-tree-toolbar");r.tree=this.tree,this.activeFolder&&this.expandToActiveFolder()};return l`<typo3-backend-tree-toolbar .tree=${this.tree}></typo3-backend-tree-toolbar><typo3-backend-component-filestorage-browser-tree .setup=${e} @tree:initialized=${t} @typo3:tree:node-selected=${this.loadFolderDetails} @typo3:tree:nodes-prepared=${this.selectActiveNode}></typo3-backend-component-filestorage-browser-tree>`}async expandToActiveFolder(){if(!this.activeFolder||!this.tree.settings.rootlineUrl)return;const e=this.tree.nodes.find(t=>decodeURIComponent(t.identifier)===this.activeFolder);if(e){await this.tree.expandNodeParents(e);return}try{const t=new URL(this.tree.settings.rootlineUrl,window.location.origin);t.searchParams.set("identifier",this.activeFolder);const r=await new h(t.toString()).get({cache:"no-cache"}),{rootline:o}=await r.resolve();o&&o.length>0&&(o.pop(),await this.tree.expandParents(o.map(i=>encodeURIComponent(i))))}catch(t){console.debug("Could not expand to active folder:",t)}}};d([u("typo3-backend-component-filestorage-browser-tree")],a.prototype,"tree",void 0),a=d([f("typo3-backend-component-filestorage-browser")],a);export{a as FileStorageBrowser,p as FileStorageBrowserTree};

Resources/Public/JavaScript/tree/file-storage-tree.js

@@ -0,0 +1,13 @@
+/*
+ * 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{Tree as o}from"@typo3/backend/tree/tree.js";class i extends o{constructor(){super(),this.settings.defaultProperties={hasChildren:!1,nameSourceField:"title",type:"sys_file",prefix:"",suffix:"",locked:!1,loaded:!1,overlayIcon:"",selectable:!0,expanded:!1,checked:!1}}getNodeTitle(e){let t=decodeURIComponent(e.name);const s=this.getNodeLabels(e);s.length&&(t+="; "+s.map(l=>l.label).join("; "));const a=this.getNodeStatusInformation(e);return a.length&&(t+="; "+a.map(l=>l.label).join("; ")),t}}export{i as FileStorageTree};

Resources/Public/JavaScript/tree/page-tree.js

@@ -0,0 +1,13 @@
+/*
+ * 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{Tree as l}from"@typo3/backend/tree/tree.js";import{html as a}from"lit";import{DataTransferTypes as i}from"@typo3/backend/enum/data-transfer-types.js";import n from"@typo3/backend/modal.js";import{SeverityEnum as u}from"@typo3/backend/enum/severity.js";import s from"@typo3/backend/utility/drag-drop-utility.js";import p from"@typo3/core/ajax/ajax-request.js";class m extends l{constructor(){super(),this.settings.defaultProperties={hasChildren:!1,nameSourceField:"title",prefix:"",suffix:"",locked:!1,loaded:!1,overlayIcon:"",selectable:!0,expanded:!1,checked:!1,stopPageTree:!1}}getDataUrl(e=null){return e===null?this.settings.dataUrl:this.settings.dataUrl+"&parent="+e.identifier+"&mount="+e.mountPoint+"&depth="+e.depth}ensureActiveNodeLoaded(e){return!e||this.nodes.find(t=>t.checked)?Promise.resolve():new p(TYPO3.settings.ajaxUrls.page_tree_rootline).withQueryArguments({identifier:e}).get({cache:"no-cache"}).then(t=>t.resolve()).then(t=>{const{rootline:r}=t;return r.pop(),this.expandParents(r)})}createNodeToggle(e){return a`${e.stopPageTree&&e.depth!==0?a`<span class=node-stop @click=${t=>{t.preventDefault(),t.stopImmediatePropagation(),document.dispatchEvent(new CustomEvent("typo3:pagetree:mountPoint",{detail:{pageId:parseInt(e.identifier,10)}}))}}> <typo3-backend-icon identifier=actions-caret-end size=small></typo3-backend-icon> </span>`:super.createNodeToggle(e)}`}handleNodeDragOver(e){if(super.handleNodeDragOver(e))return!0;if(e.dataTransfer.types.includes(i.content)){const t=this.getNodeFromDragEvent(e);return t===null?!1:(this.cleanDrag(),this.getElementFromNode(t).classList.add("node-hover"),t.hasChildren&&!t.__expanded?this.openNodeTimeout.targetNode!=t&&(this.openNodeTimeout.targetNode=t,clearTimeout(this.openNodeTimeout.timeout),this.openNodeTimeout.timeout=setTimeout(()=>{this.showChildren(this.openNodeTimeout.targetNode),this.openNodeTimeout.targetNode=null,this.openNodeTimeout.timeout=null},1e3)):(clearTimeout(this.openNodeTimeout.timeout),this.openNodeTimeout.targetNode=null,this.openNodeTimeout.timeout=null),e.preventDefault(),s.updateEventAndTooltipToReflectCopyMoveIntention(e),!0)}return!1}handleNodeDrop(e){if(super.handleNodeDrop(e))return!0;if(e.dataTransfer.types.includes(i.content)){const t=this.getNodeFromDragEvent(e);if(t===null)return!1;const r=e.dataTransfer.getData(i.content),d=JSON.parse(r);e.preventDefault();const o=new URL(d.moveElementUrl,window.origin);return o.searchParams.set("expandPage",t.identifier),o.searchParams.set("originalPid",t.identifier),s.isCopyModifierFromEvent(e)&&o.searchParams.set("makeCopy","1"),n.advanced({content:o.toString(),severity:u.notice,size:n.sizes.large,type:n.types.iframe}),!0}return!1}}export{m as PageTree};

Resources/Public/JavaScript/tree/tree-module-state.js

@@ -0,0 +1,13 @@
+/*
+ * 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 l from"@typo3/core/ajax/ajax-request.js";import{ModuleStateStorage as a}from"@typo3/backend/storage/module-state-storage.js";const u=f=>{class c extends f{constructor(){super(...arguments),this.selectActiveNodeInLoadedNodes=t=>{let e=a.current(this.moduleStateType);if(!e.identifier)return;const{nodes:r}=t.detail,i=this.transformModuleStateIdentifierToNodeIdentifier(e.treeIdentifier),o=this.transformModuleStateIdentifierToNodeIdentifier(e.identifier),n=r.find(s=>e.treeIdentifier!==null&&s.__treeIdentifier===i||e.treeIdentifier===null&&s.identifier===o);if(!n)return;e.treeIdentifier===null&&(e=a.updateWithTreeIdentifier(this.moduleStateType,this.transformNodeIdentifierToModuleStateIdentifier(n.identifier),this.transformNodeIdentifierToModuleStateIdentifier(n.__treeIdentifier))),n.checked=!0;const d=r.find(s=>s.__treeIdentifier===n.__parents.join("_"));d&&!d.__expanded&&this.tree.updateComplete.then(()=>this.tree.expandNodeParents(n))},this.fetchActiveNodeIfMissing=async()=>{const t=a.current(this.moduleStateType);t.identifier&&(this.tree.nodes.find(e=>e.checked)||await this.selectActiveViaRootline(t.identifier))},this.moduleStateUpdated=async t=>{const e=t.detail.state.identifier;if(!this.tree||e&&e===t.detail.oldState.identifier&&this.tree.nodes.find(d=>d.checked))return;if(!e){console.error("invalid identifier",t.detail);return}this.tree.loading&&await this.tree.loadComplete;const r=this.transformModuleStateIdentifierToNodeIdentifier(e),i=this.tree.nodes.find(d=>d.identifier===r),o=this.tree.nodes.find(d=>d.checked);if(i&&i===o){await this.tree.expandNodeParents(i);return}const n=!1;if(i){await this.selectActiveNodeByParents(e,i.__parents,n);return}await this.selectActiveViaRootline(e)}}connectedCallback(){super.connectedCallback(),document.addEventListener("typo3:module-state-storage:update:"+this.moduleStateType,this.moduleStateUpdated)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("typo3:module-state-storage:update:"+this.moduleStateType,this.moduleStateUpdated)}transformModuleStateIdentifierToNodeIdentifier(t){return t}transformNodeIdentifierToModuleStateIdentifier(t){return t}async selectActiveViaRootline(t){const e=new URL(this.tree.settings.rootlineUrl,window.location.origin);e.searchParams.set("identifier",t);const r=await new l(e.toString()).get({cache:"no-cache"}),{rootline:i}=await r.resolve();i.pop(),await this.selectActiveNodeByParents(t,i.map(n=>this.transformModuleStateIdentifierToNodeIdentifier(n)),!1)}async selectActiveNodeByParents(t,e,r=!0){await this.tree.expandParents(e);const i=this.transformModuleStateIdentifierToNodeIdentifier(t),o=this.tree.nodes.find(n=>n.identifier===i);o&&this.tree.selectNode(o,r)}}return c};export{u as TreeModuleState};

Resources/Public/JavaScript/tree/tree-node-toggle.js

@@ -0,0 +1,13 @@
+/*
+ * 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{property as a,customElement as f}from"lit/decorators.js";import{LitElement as u,html as s}from"lit";import"@typo3/backend/element/icon-element.js";var p=function(r,t,o,n){var d=arguments.length,e=d<3?t:n===null?n=Object.getOwnPropertyDescriptor(t,o):n,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")e=Reflect.decorate(r,t,o,n);else for(var i=r.length-1;i>=0;i--)(l=r[i])&&(e=(d<3?l(e):d>3?l(t,o,e):l(t,o))||e);return d>3&&e&&Object.defineProperty(t,o,e),e};let c=class extends u{constructor(){super(...arguments),this.expanded="false"}render(){return s`<typo3-backend-icon size=small identifier=${this.expanded==="true"?"actions-chevron-down":"actions-chevron-end"}></typo3-backend-icon>`}};p([a({type:String,reflect:!0,attribute:"aria-expanded"})],c.prototype,"expanded",void 0),c=p([f("typo3-backend-tree-node-toggle")],c);var m=c;export{m as default};

Resources/Public/JavaScript/tree/tree-node.js

@@ -0,0 +1,13 @@
+/*
+ * 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!
+ */
+var t;(function(E){E.COPY="copy",E.EDIT="edit",E.MOVE="move",E.DELETE="delete",E.NEW="new"})(t||(t={}));var f;(function(E){E.INSIDE="inside",E.BEFORE="before",E.AFTER="after"})(f||(f={}));export{t as TreeNodeCommandEnum,f as TreeNodePositionEnum};

Resources/Public/JavaScript/tree/tree-toolbar.js

@@ -0,0 +1,13 @@
+/*
+ * 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 u,html as d}from"lit";import{property as m,customElement as b}from"lit/decorators.js";import h from"@typo3/core/event/debounce-event.js";import"@typo3/backend/element/icon-element.js";import"@typo3/backend/viewport/content-navigation-toggle.js";import{Tree as f}from"@typo3/backend/tree/tree.js";import r from"~labels/core.core";import"bootstrap";var p=function(s,e,t,n){var i=arguments.length,o=i<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,t):n,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(s,e,t,n);else for(var c=s.length-1;c>=0;c--)(a=s[c])&&(o=(i<3?a(o):i>3?a(e,t,o):a(e,t))||o);return i>3&&o&&Object.defineProperty(e,t,o),o};let l=class extends u{constructor(){super(...arguments),this.tree=null,this.showRefresh=!0,this.settings={searchInput:".search-input",filterTimeout:450}}createRenderRoot(){return this}firstUpdated(){const e=this.querySelector(this.settings.searchInput);e&&new h("input",t=>{const n=t.target;this.tree.filter(n.value.trim())},this.settings.filterTimeout).bindTo(e)}render(){return d`<div class=tree-toolbar><div class=tree-toolbar__menu><div class=tree-toolbar__search><label for=toolbarSearch class=visually-hidden>${r.get("labels.label.searchString")}</label> <input type=search autocomplete=off id=toolbarSearch class="form-control form-control-sm search-input" placeholder=${this.tree?.setup?.searchPlaceholder||r.get("tree.searchTermInfo")}></div><div class=dropdown><button type=button class="btn btn-sm btn-icon btn-default btn-borderless dropdown-toggle dropdown-toggle-no-chevron" data-bs-toggle=dropdown data-bs-boundary=window aria-expanded=false aria-label=${r.get("labels.openTreeOptionsMenu")}><typo3-backend-icon identifier=actions-menu-alternative size=small></typo3-backend-icon></button><ul class="dropdown-menu dropdown-menu-end">${this.showRefresh?d`<li><button class=dropdown-item @click=${()=>this.refreshTree()}><span class=dropdown-item-columns> <span class="dropdown-item-column dropdown-item-column-icon" aria-hidden=true><typo3-backend-icon identifier=actions-refresh size=small></typo3-backend-icon> </span> <span class="dropdown-item-column dropdown-item-column-title">${r.get("labels.refresh")} </span> </span></button></li>`:""}<li><button class=dropdown-item @click=${e=>this.collapseAll(e)}><span class=dropdown-item-columns> <span class="dropdown-item-column dropdown-item-column-icon" aria-hidden=true><typo3-backend-icon identifier=apps-pagetree-category-collapse-all size=small></typo3-backend-icon> </span> <span class="dropdown-item-column dropdown-item-column-title">${r.get("labels.collapse")} </span> </span></button></li></ul></div><typo3-backend-content-navigation-toggle class="btn btn-sm btn-icon btn-default btn-borderless" action=collapse></typo3-backend-content-navigation-toggle></div></div>`}refreshTree(){this.tree.refreshOrFilterTree()}collapseAll(e){e.preventDefault(),this.tree.nodes.forEach(t=>{t.__parents.length&&this.tree.hideChildren(t)})}};p([m({type:f})],l.prototype,"tree",void 0),p([m({type:Boolean})],l.prototype,"showRefresh",void 0),l=p([b("typo3-backend-tree-toolbar")],l);export{l as TreeToolbar};