Commit 06bca9f1 authored by Benni Mack's avatar Benni Mack
Browse files

[BUGFIX] Show SVG actions in Element Browser trees

Due to the change of scalable SVG icons the tree actions
for selecting actions in the Page Selector / File Selector
were not rendered again.

This change fixes the issue by properly using a SVG
inside another SVG again, just like with icons
of the actual tree.

Resolves: #94545
Releases: master
Change-Id: I7bfae2e422adce6fd07eed46a26e8ab9767f12a6
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/69814


Tested-by: core-ci's avatarcore-ci <typo3@b13.com>
Tested-by: Jochen's avatarJochen <rothjochen@gmail.com>
Tested-by: Oliver Bartsch's avatarOliver Bartsch <bo@cedev.de>
Tested-by: Benni Mack's avatarBenni Mack <benni@typo3.org>
Reviewed-by: Jochen's avatarJochen <rothjochen@gmail.com>
Reviewed-by: Oliver Bartsch's avatarOliver Bartsch <bo@cedev.de>
Reviewed-by: Benni Mack's avatarBenni Mack <benni@typo3.org>
parent 41110e39
......@@ -379,14 +379,14 @@ $svgColors: (
opacity: 0;
cursor: pointer;
path {
rect {
opacity: 0;
}
&.node-action-over {
opacity: 1;
path {
rect {
opacity: 1;
}
}
......
......@@ -451,7 +451,6 @@ export class SvgTree extends LitElement {
// delete nodes without corresponding data
nodes.exit().remove();
// delete
nodesBg.exit().remove();
nodesActions.exit().remove();
......@@ -724,6 +723,8 @@ export class SvgTree extends LitElement {
*/
protected updateNodeActions(nodesActions: TreeNodeSelection): TreeNodeSelection {
if (this.settings.actions && this.settings.actions.length) {
// Remove all existing actions again
this.nodesActionsContainer.selectAll('.node-action').selectChildren().remove();
return nodesActions.enter()
.append('g')
.merge(nodesActions as d3selection.Selection<SVGGElement, TreeNode, any, any>)
......@@ -736,6 +737,39 @@ export class SvgTree extends LitElement {
return nodesActions.enter();
}
/**
* This is a quick helper function to create custom action icons.
*/
protected createIconAreaForAction(actionItem: any, iconIdentifier: string): void
{
const icon = actionItem
.append('svg')
.attr('class', 'node-icon-container')
.attr('height', '20')
.attr('width', '20')
.attr('x', '0')
.attr('y', '0');
// improve usability by making the click area a 20px square
icon
.append('rect')
.attr('width', '20')
.attr('height', '20')
.attr('y', '0')
.attr('x', '0')
.attr('class', 'node-icon-click');
const nodeInner = icon
.append('svg')
.attr('height', '16')
.attr('width', '16')
.attr('y', '2')
.attr('x', '2')
.attr('class', 'node-icon-inner');
nodeInner
.append('use')
.attr('class', 'node-icon')
.attr('xlink:href', '#icon-' + iconIdentifier);
}
/**
* Check whether node can be selected.
* In some cases (e.g. selecting a parent) it should not be possible to select
......@@ -942,7 +976,7 @@ export class SvgTree extends LitElement {
* @param {Node} node
*/
protected getNodeActionTransform(node: TreeNode): string {
return 'translate(0, ' + ((node.y || 0) - 9) + ')';
return 'translate(-10, ' + ((node.y || 0) - 10) + ')';
}
/**
......
......@@ -42,14 +42,7 @@ class FileStorageBrowserTree extends FileStorageTree {
.on('click', (evt: MouseEvent, node: TreeNode) => {
this.linkItem(node);
});
linkAction
// improve usability by making the click area a 16px square
.append('path')
.attr('d', 'M 0 0 L 18 0 L 18 18 L 0 18 Z')
.exit();
linkAction
.append('use')
.attr('xlink:href', '#icon-actions-link');
this.createIconAreaForAction(linkAction, 'actions-link');
} else if (this.settings.actions.includes('select')) {
// Check if a node can be selected
this.fetchIcon('actions-link');
......@@ -58,14 +51,7 @@ class FileStorageBrowserTree extends FileStorageTree {
.on('click', (evt: MouseEvent, node: TreeNode) => {
this.selectItem(node);
});
linkAction
// improve usability by making the click area a 16px square
.append('path')
.attr('d', 'M 0 0 L 18 0 L 18 18 L 0 18 Z')
.exit();
linkAction
.append('use')
.attr('xlink:href', '#icon-actions-link');
this.createIconAreaForAction(linkAction, 'actions-link');
}
return nodes;
}
......
......@@ -59,7 +59,7 @@ class PageBrowserTree extends PageTree {
if (this.settings.actions.includes('link')) {
// Check if a node can be linked
this.fetchIcon('actions-link');
const linkAction = nodes
const linkAction = this.nodesActionsContainer.selectAll('.node-action')
.append('g')
.attr('visibility', (node: TreeNode) => {
return this.isLinkable(node) ? 'visible' : 'hidden'
......@@ -67,14 +67,7 @@ class PageBrowserTree extends PageTree {
.on('click', (evt: MouseEvent, node: TreeNode) => {
this.linkItem(node);
});
linkAction
// improve usability by making the click area a 16px square
.append('path')
.attr('d', 'M 0 0 L 18 0 L 18 18 L 0 18 Z')
.exit();
linkAction
.append('use')
.attr('xlink:href', '#icon-actions-link');
this.createIconAreaForAction(linkAction, 'actions-link');
} else if (this.settings.actions.includes('select')) {
// Check if a node can be selected
this.fetchIcon('actions-link');
......@@ -83,14 +76,7 @@ class PageBrowserTree extends PageTree {
.on('click', (evt: MouseEvent, node: TreeNode) => {
this.selectItem(node);
});
linkAction
// improve usability by making the click area a 16px square
.append('path')
.attr('d', 'M 0 0 L 18 0 L 18 18 L 0 18 Z')
.exit();
linkAction
.append('use')
.attr('xlink:href', '#icon-actions-link');
this.createIconAreaForAction(linkAction, 'actions-link');
}
return nodes;
}
......
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -27,7 +27,7 @@ var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,s,i)
</g>
<defs></defs>
</svg>
`}firstUpdated(){this.svg=n.select(this.querySelector("svg")),this.container=n.select(this.querySelector(".nodes-wrapper")).attr("transform","translate("+this.settings.indentWidth/2+","+this.settings.nodeHeight/2+")"),this.nodesBgContainer=n.select(this.querySelector(".nodes-bg")),this.nodesActionsContainer=n.select(this.querySelector(".nodes-actions")),this.linksContainer=n.select(this.querySelector(".links")),this.nodesContainer=n.select(this.querySelector(".nodes")),this.doSetup(this.setup||{}),this.updateView()}updateView(){this.updateScrollPosition(),this.updateVisibleNodes(),this.settings.actions&&this.settings.actions.length&&this.nodesActionsContainer.attr("transform","translate("+(this.querySelector("svg").clientWidth-16-16*this.settings.actions.length)+",0)")}disableSelectedNodes(){this.getSelectedNodes().forEach(e=>{!0===e.checked&&(e.checked=!1)})}updateNodeActions(e){return this.settings.actions&&this.settings.actions.length?e.enter().append("g").merge(e).attr("class","node-action").on("mouseover",(e,t)=>this.onMouseOverNode(t)).on("mouseout",(e,t)=>this.onMouseOutOfNode(t)).attr("data-state-id",this.getNodeStateIdentifier).attr("transform",this.getNodeActionTransform):e.enter()}isNodeSelectable(e){return!0}appendTextElement(e){return e.append("text").attr("dx",e=>this.textPosition+(e.locked?15:0)).attr("dy",5).attr("class","node-name").on("click",(e,t)=>this.selectNode(t))}nodesUpdate(e){return(e=e.enter().append("g").attr("class",this.getNodeClass).attr("id",e=>"identifier-"+e.stateIdentifier).attr("role","treeitem").attr("aria-owns",e=>e.hasChildren?"group-identifier-"+e.stateIdentifier:null).attr("aria-level",this.getNodeDepth).attr("aria-setsize",this.getNodeSetsize).attr("aria-posinset",this.getNodePositionInSet).attr("aria-expanded",e=>e.hasChildren?e.expanded:null).attr("transform",this.getNodeTransform).attr("data-state-id",this.getNodeStateIdentifier).attr("title",this.getNodeTitle).on("mouseover",(e,t)=>this.onMouseOverNode(t)).on("mouseout",(e,t)=>this.onMouseOutOfNode(t)).on("contextmenu",(e,t)=>{e.preventDefault(),this.dispatchEvent(new CustomEvent("typo3:svg-tree:node-context",{detail:{node:t}}))})).append("text").text(e=>e.readableRootline).attr("class","node-rootline").attr("dx",0).attr("dy",-15).attr("visibility",e=>e.readableRootline?"visible":"hidden"),e}getNodeIdentifier(e){return e.identifier}getNodeDepth(e){return e.depth}getNodeSetsize(e){return e.siblingsCount}getNodePositionInSet(e){return e.siblingsPosition}getNodeStateIdentifier(e){return e.stateIdentifier}getNodeLabel(e){let t=(e.prefix||"")+e.name+(e.suffix||"");const s=document.createElement("div");if(s.textContent=t,t=s.innerHTML,this.searchTerm){const e=new RegExp(this.searchTerm,"gi");t=t.replace(e,'<tspan class="node-highlight-text">$&</tspan>')}return t}getNodeClass(e){return"node identifier-"+e.stateIdentifier}getNodeByIdentifier(e){return this.nodes.find(t=>t.stateIdentifier===e)}getNodeBgClass(e,t,s){let i="node-bg",n=null,o=null;return"object"==typeof s&&(n=s.data()[t-1],o=s.data()[t+1]),e.checked&&(i+=" node-selected"),(n&&e.depth>n.depth||!n)&&(e.firstChild=!0,i+=" node-first-child"),(o&&e.depth>o.depth||!o)&&(e.lastChild=!0,i+=" node-last-child"),e.class&&(i+=" "+e.class),i}getNodeTitle(e){return e.tip?e.tip:"uid="+e.identifier}getChevronTransform(e){return e.expanded?"translate(16,0) rotate(90)":" rotate(0)"}getChevronColor(e){return e.expanded?"#000":"#8e8e8e"}getToggleVisibility(e){return e.hasChildren?"visible":"hidden"}getChevronClass(e){return"chevron "+(e.expanded?"expanded":"collapsed")}getLinkPath(e){const t=e.target.x,s=e.target.y,i=[];return i.push("M"+e.source.x+" "+e.source.y),i.push("V"+s),e.target.hasChildren?i.push("H"+(t-2)):i.push("H"+(t+this.settings.indentWidth/4-2)),i.join(" ")}getNodeTransform(e){return"translate("+(e.x||0)+","+(e.y||0)+")"}getNodeBgTransform(e){return"translate(-8, "+((e.y||0)-10)+")"}getNodeActionTransform(e){return"translate(0, "+((e.y||0)-9)+")"}clickOnIcon(e){this.dispatchEvent(new CustomEvent("typo3:svg-tree:node-context",{detail:{node:e}}))}chevronClick(e){e.expanded?this.hideChildren(e):this.showChildren(e),this.prepareDataForVisibleNodes(),this.updateVisibleNodes()}enterSvgElements(e){if(this.settings.showIcons){const e=Object.values(this.icons).filter(e=>""!==e.icon&&null!==e.icon),t=this.iconsContainer.selectAll(".icon-def").data(e,e=>e.identifier);t.exit().remove(),t.enter().append("g").attr("class","icon-def").attr("id",e=>"icon-"+e.identifier).append(e=>{if(e.icon instanceof SVGElement)return e.icon;const t="<svg>"+e.icon+"</svg>";return(new DOMParser).parseFromString(t,"image/svg+xml").documentElement.firstChild})}const t=this.nodesUpdate(e);let s=t.append("g").attr("class","toggle").attr("visibility",this.getToggleVisibility).attr("transform","translate(-8, -8)").on("click",(e,t)=>this.chevronClick(t));if(s.append("path").style("opacity",0).attr("d","M 0 0 L 16 0 L 16 16 L 0 16 Z"),s.append("path").attr("class","chevron").attr("d","M 4 3 L 13 8 L 4 13 Z"),this.settings.showIcons){const e=t.append("svg").attr("class","node-icon-container").attr("title",this.getNodeTitle).attr("height","20").attr("width","20").attr("x","6").attr("y","-10").attr("data-bs-toggle","tooltip").on("click",(e,t)=>{e.preventDefault(),this.clickOnIcon(t)});e.append("rect").style("opacity",0).attr("width","20").attr("height","20").attr("y","0").attr("x","0").attr("class","node-icon-click");const s=e.append("svg").attr("height","16").attr("width","16").attr("y","2").attr("x","2").attr("class","node-icon-inner");s.append("use").attr("class","node-icon").attr("data-uid",this.getNodeIdentifier);s.append("svg").attr("height","11").attr("width","11").attr("y","5").attr("x","5").append("use").attr("class","node-icon-overlay");s.append("svg").attr("height","11").attr("width","11").attr("y","5").attr("x","5").append("use").attr("class","node-icon-locked")}return l.initialize('[data-bs-toggle="tooltip"]',this.tooltipOptions),this.appendTextElement(t),e.merge(t)}updateScrollPosition(){this.viewportHeight=this.getBoundingClientRect().height,this.scrollBottom=this.scrollTop+this.viewportHeight+this.viewportHeight/2,setTimeout(()=>{l.hide(this.querySelectorAll(".bs-tooltip-end"))},this.tooltipOptions.delay)}onMouseOverNode(e){e.isOver=!0,this.hoveredNode=e;let t=this.svg.select('.nodes-bg .node-bg[data-state-id="'+e.stateIdentifier+'"]');t.size()&&t.classed("node-over",!0).attr("rx","3").attr("ry","3");let s=this.nodesActionsContainer.select('.node-action[data-state-id="'+e.stateIdentifier+'"]');s.size()&&(s.classed("node-action-over",!0),s.attr("fill",t.style("fill")))}onMouseOutOfNode(e){e.isOver=!1,this.hoveredNode=null;let t=this.svg.select('.nodes-bg .node-bg[data-state-id="'+e.stateIdentifier+'"]');t.size()&&t.classed("node-over node-alert",!1).attr("rx","0").attr("ry","0");let s=this.nodesActionsContainer.select('.node-action[data-state-id="'+e.stateIdentifier+'"]');s.size()&&s.classed("node-action-over",!1)}handleKeyboardInteraction(e){const t=e.target;let s=n.select(t).datum();if(-1===[a.KeyTypesEnum.ENTER,a.KeyTypesEnum.SPACE,a.KeyTypesEnum.END,a.KeyTypesEnum.HOME,a.KeyTypesEnum.LEFT,a.KeyTypesEnum.UP,a.KeyTypesEnum.RIGHT,a.KeyTypesEnum.DOWN].indexOf(e.keyCode))return;e.preventDefault();const i=t.parentNode;switch(e.keyCode){case a.KeyTypesEnum.END:this.scrollTop=this.lastElementChild.getBoundingClientRect().height+this.settings.nodeHeight-this.viewportHeight,i.scrollIntoView({behavior:"smooth",block:"end"}),this.updateVisibleNodes(),this.switchFocus(i.lastElementChild);break;case a.KeyTypesEnum.HOME:this.scrollTo({top:this.nodes[0].y,behavior:"smooth"}),this.prepareDataForVisibleNodes(),this.updateVisibleNodes(),this.switchFocus(i.firstElementChild);break;case a.KeyTypesEnum.LEFT:if(s.expanded)s.hasChildren&&(this.hideChildren(s),this.prepareDataForVisibleNodes(),this.updateVisibleNodes());else if(s.parents.length>0){let e=this.nodes[s.parents[0]];this.scrollNodeIntoVisibleArea(e,"up"),this.switchFocusNode(e)}break;case a.KeyTypesEnum.UP:this.scrollNodeIntoVisibleArea(s,"up"),this.switchFocus(t.previousSibling);break;case a.KeyTypesEnum.RIGHT:s.expanded?(this.scrollNodeIntoVisibleArea(s,"down"),this.switchFocus(t.nextSibling)):s.hasChildren&&(this.showChildren(s),this.prepareDataForVisibleNodes(),this.updateVisibleNodes(),this.switchFocus(t));break;case a.KeyTypesEnum.DOWN:this.scrollNodeIntoVisibleArea(s,"down"),this.switchFocus(t.nextSibling);break;case a.KeyTypesEnum.ENTER:case a.KeyTypesEnum.SPACE:this.selectNode(s)}}scrollNodeIntoVisibleArea(e,t="up"){let s=this.scrollTop;if("up"===t&&s>e.y-this.settings.nodeHeight)s=e.y-this.settings.nodeHeight;else{if(!("down"===t&&s+this.viewportHeight<=e.y+3*this.settings.nodeHeight))return;s+=this.settings.nodeHeight}this.scrollTo({top:s,behavior:"smooth"}),this.updateVisibleNodes()}updateLinks(){const e=this.data.links.filter(e=>e.source.y<=this.scrollBottom&&e.target.y>=this.scrollTop-this.settings.nodeHeight).map(e=>(e.source.owns=e.source.owns||[],e.source.owns.push("identifier-"+e.target.stateIdentifier),e)),t=this.linksContainer.selectAll(".link").data(e);t.exit().remove(),t.enter().append("path").attr("class","link").attr("id",this.getGroupIdentifier).attr("role",e=>1===e.target.siblingsPosition&&e.source.owns.length>0?"group":null).attr("aria-owns",e=>1===e.target.siblingsPosition&&e.source.owns.length>0?e.source.owns.join(" "):null).merge(t).attr("d",e=>this.getLinkPath(e))}getGroupIdentifier(e){return 1===e.target.siblingsPosition?"group-identifier-"+e.source.stateIdentifier:null}}__decorate([i.property({type:Object})],p.prototype,"setup",void 0),__decorate([i.state()],p.prototype,"settings",void 0),t.SvgTree=p;let g=class extends s.LitElement{constructor(){super(...arguments),this.tree=null,this.settings={searchInput:".search-input",filterTimeout:450}}createRenderRoot(){return this}firstUpdated(){const e=this.querySelector(this.settings.searchInput);e&&(new u.default("input",e=>{const t=e.target;this.tree.filter(t.value.trim())},this.settings.filterTimeout).bindTo(e),e.focus(),e.clearable({onClear:()=>{this.tree.resetFilter()}}))}render(){return s.html`
`}firstUpdated(){this.svg=n.select(this.querySelector("svg")),this.container=n.select(this.querySelector(".nodes-wrapper")).attr("transform","translate("+this.settings.indentWidth/2+","+this.settings.nodeHeight/2+")"),this.nodesBgContainer=n.select(this.querySelector(".nodes-bg")),this.nodesActionsContainer=n.select(this.querySelector(".nodes-actions")),this.linksContainer=n.select(this.querySelector(".links")),this.nodesContainer=n.select(this.querySelector(".nodes")),this.doSetup(this.setup||{}),this.updateView()}updateView(){this.updateScrollPosition(),this.updateVisibleNodes(),this.settings.actions&&this.settings.actions.length&&this.nodesActionsContainer.attr("transform","translate("+(this.querySelector("svg").clientWidth-16-16*this.settings.actions.length)+",0)")}disableSelectedNodes(){this.getSelectedNodes().forEach(e=>{!0===e.checked&&(e.checked=!1)})}updateNodeActions(e){return this.settings.actions&&this.settings.actions.length?(this.nodesActionsContainer.selectAll(".node-action").selectChildren().remove(),e.enter().append("g").merge(e).attr("class","node-action").on("mouseover",(e,t)=>this.onMouseOverNode(t)).on("mouseout",(e,t)=>this.onMouseOutOfNode(t)).attr("data-state-id",this.getNodeStateIdentifier).attr("transform",this.getNodeActionTransform)):e.enter()}createIconAreaForAction(e,t){const s=e.append("svg").attr("class","node-icon-container").attr("height","20").attr("width","20").attr("x","0").attr("y","0");s.append("rect").attr("width","20").attr("height","20").attr("y","0").attr("x","0").attr("class","node-icon-click");s.append("svg").attr("height","16").attr("width","16").attr("y","2").attr("x","2").attr("class","node-icon-inner").append("use").attr("class","node-icon").attr("xlink:href","#icon-"+t)}isNodeSelectable(e){return!0}appendTextElement(e){return e.append("text").attr("dx",e=>this.textPosition+(e.locked?15:0)).attr("dy",5).attr("class","node-name").on("click",(e,t)=>this.selectNode(t))}nodesUpdate(e){return(e=e.enter().append("g").attr("class",this.getNodeClass).attr("id",e=>"identifier-"+e.stateIdentifier).attr("role","treeitem").attr("aria-owns",e=>e.hasChildren?"group-identifier-"+e.stateIdentifier:null).attr("aria-level",this.getNodeDepth).attr("aria-setsize",this.getNodeSetsize).attr("aria-posinset",this.getNodePositionInSet).attr("aria-expanded",e=>e.hasChildren?e.expanded:null).attr("transform",this.getNodeTransform).attr("data-state-id",this.getNodeStateIdentifier).attr("title",this.getNodeTitle).on("mouseover",(e,t)=>this.onMouseOverNode(t)).on("mouseout",(e,t)=>this.onMouseOutOfNode(t)).on("contextmenu",(e,t)=>{e.preventDefault(),this.dispatchEvent(new CustomEvent("typo3:svg-tree:node-context",{detail:{node:t}}))})).append("text").text(e=>e.readableRootline).attr("class","node-rootline").attr("dx",0).attr("dy",-15).attr("visibility",e=>e.readableRootline?"visible":"hidden"),e}getNodeIdentifier(e){return e.identifier}getNodeDepth(e){return e.depth}getNodeSetsize(e){return e.siblingsCount}getNodePositionInSet(e){return e.siblingsPosition}getNodeStateIdentifier(e){return e.stateIdentifier}getNodeLabel(e){let t=(e.prefix||"")+e.name+(e.suffix||"");const s=document.createElement("div");if(s.textContent=t,t=s.innerHTML,this.searchTerm){const e=new RegExp(this.searchTerm,"gi");t=t.replace(e,'<tspan class="node-highlight-text">$&</tspan>')}return t}getNodeClass(e){return"node identifier-"+e.stateIdentifier}getNodeByIdentifier(e){return this.nodes.find(t=>t.stateIdentifier===e)}getNodeBgClass(e,t,s){let i="node-bg",n=null,o=null;return"object"==typeof s&&(n=s.data()[t-1],o=s.data()[t+1]),e.checked&&(i+=" node-selected"),(n&&e.depth>n.depth||!n)&&(e.firstChild=!0,i+=" node-first-child"),(o&&e.depth>o.depth||!o)&&(e.lastChild=!0,i+=" node-last-child"),e.class&&(i+=" "+e.class),i}getNodeTitle(e){return e.tip?e.tip:"uid="+e.identifier}getChevronTransform(e){return e.expanded?"translate(16,0) rotate(90)":" rotate(0)"}getChevronColor(e){return e.expanded?"#000":"#8e8e8e"}getToggleVisibility(e){return e.hasChildren?"visible":"hidden"}getChevronClass(e){return"chevron "+(e.expanded?"expanded":"collapsed")}getLinkPath(e){const t=e.target.x,s=e.target.y,i=[];return i.push("M"+e.source.x+" "+e.source.y),i.push("V"+s),e.target.hasChildren?i.push("H"+(t-2)):i.push("H"+(t+this.settings.indentWidth/4-2)),i.join(" ")}getNodeTransform(e){return"translate("+(e.x||0)+","+(e.y||0)+")"}getNodeBgTransform(e){return"translate(-8, "+((e.y||0)-10)+")"}getNodeActionTransform(e){return"translate(-10, "+((e.y||0)-10)+")"}clickOnIcon(e){this.dispatchEvent(new CustomEvent("typo3:svg-tree:node-context",{detail:{node:e}}))}chevronClick(e){e.expanded?this.hideChildren(e):this.showChildren(e),this.prepareDataForVisibleNodes(),this.updateVisibleNodes()}enterSvgElements(e){if(this.settings.showIcons){const e=Object.values(this.icons).filter(e=>""!==e.icon&&null!==e.icon),t=this.iconsContainer.selectAll(".icon-def").data(e,e=>e.identifier);t.exit().remove(),t.enter().append("g").attr("class","icon-def").attr("id",e=>"icon-"+e.identifier).append(e=>{if(e.icon instanceof SVGElement)return e.icon;const t="<svg>"+e.icon+"</svg>";return(new DOMParser).parseFromString(t,"image/svg+xml").documentElement.firstChild})}const t=this.nodesUpdate(e);let s=t.append("g").attr("class","toggle").attr("visibility",this.getToggleVisibility).attr("transform","translate(-8, -8)").on("click",(e,t)=>this.chevronClick(t));if(s.append("path").style("opacity",0).attr("d","M 0 0 L 16 0 L 16 16 L 0 16 Z"),s.append("path").attr("class","chevron").attr("d","M 4 3 L 13 8 L 4 13 Z"),this.settings.showIcons){const e=t.append("svg").attr("class","node-icon-container").attr("title",this.getNodeTitle).attr("height","20").attr("width","20").attr("x","6").attr("y","-10").attr("data-bs-toggle","tooltip").on("click",(e,t)=>{e.preventDefault(),this.clickOnIcon(t)});e.append("rect").style("opacity",0).attr("width","20").attr("height","20").attr("y","0").attr("x","0").attr("class","node-icon-click");const s=e.append("svg").attr("height","16").attr("width","16").attr("y","2").attr("x","2").attr("class","node-icon-inner");s.append("use").attr("class","node-icon").attr("data-uid",this.getNodeIdentifier);s.append("svg").attr("height","11").attr("width","11").attr("y","5").attr("x","5").append("use").attr("class","node-icon-overlay");s.append("svg").attr("height","11").attr("width","11").attr("y","5").attr("x","5").append("use").attr("class","node-icon-locked")}return l.initialize('[data-bs-toggle="tooltip"]',this.tooltipOptions),this.appendTextElement(t),e.merge(t)}updateScrollPosition(){this.viewportHeight=this.getBoundingClientRect().height,this.scrollBottom=this.scrollTop+this.viewportHeight+this.viewportHeight/2,setTimeout(()=>{l.hide(this.querySelectorAll(".bs-tooltip-end"))},this.tooltipOptions.delay)}onMouseOverNode(e){e.isOver=!0,this.hoveredNode=e;let t=this.svg.select('.nodes-bg .node-bg[data-state-id="'+e.stateIdentifier+'"]');t.size()&&t.classed("node-over",!0).attr("rx","3").attr("ry","3");let s=this.nodesActionsContainer.select('.node-action[data-state-id="'+e.stateIdentifier+'"]');s.size()&&(s.classed("node-action-over",!0),s.attr("fill",t.style("fill")))}onMouseOutOfNode(e){e.isOver=!1,this.hoveredNode=null;let t=this.svg.select('.nodes-bg .node-bg[data-state-id="'+e.stateIdentifier+'"]');t.size()&&t.classed("node-over node-alert",!1).attr("rx","0").attr("ry","0");let s=this.nodesActionsContainer.select('.node-action[data-state-id="'+e.stateIdentifier+'"]');s.size()&&s.classed("node-action-over",!1)}handleKeyboardInteraction(e){const t=e.target;let s=n.select(t).datum();if(-1===[a.KeyTypesEnum.ENTER,a.KeyTypesEnum.SPACE,a.KeyTypesEnum.END,a.KeyTypesEnum.HOME,a.KeyTypesEnum.LEFT,a.KeyTypesEnum.UP,a.KeyTypesEnum.RIGHT,a.KeyTypesEnum.DOWN].indexOf(e.keyCode))return;e.preventDefault();const i=t.parentNode;switch(e.keyCode){case a.KeyTypesEnum.END:this.scrollTop=this.lastElementChild.getBoundingClientRect().height+this.settings.nodeHeight-this.viewportHeight,i.scrollIntoView({behavior:"smooth",block:"end"}),this.updateVisibleNodes(),this.switchFocus(i.lastElementChild);break;case a.KeyTypesEnum.HOME:this.scrollTo({top:this.nodes[0].y,behavior:"smooth"}),this.prepareDataForVisibleNodes(),this.updateVisibleNodes(),this.switchFocus(i.firstElementChild);break;case a.KeyTypesEnum.LEFT:if(s.expanded)s.hasChildren&&(this.hideChildren(s),this.prepareDataForVisibleNodes(),this.updateVisibleNodes());else if(s.parents.length>0){let e=this.nodes[s.parents[0]];this.scrollNodeIntoVisibleArea(e,"up"),this.switchFocusNode(e)}break;case a.KeyTypesEnum.UP:this.scrollNodeIntoVisibleArea(s,"up"),this.switchFocus(t.previousSibling);break;case a.KeyTypesEnum.RIGHT:s.expanded?(this.scrollNodeIntoVisibleArea(s,"down"),this.switchFocus(t.nextSibling)):s.hasChildren&&(this.showChildren(s),this.prepareDataForVisibleNodes(),this.updateVisibleNodes(),this.switchFocus(t));break;case a.KeyTypesEnum.DOWN:this.scrollNodeIntoVisibleArea(s,"down"),this.switchFocus(t.nextSibling);break;case a.KeyTypesEnum.ENTER:case a.KeyTypesEnum.SPACE:this.selectNode(s)}}scrollNodeIntoVisibleArea(e,t="up"){let s=this.scrollTop;if("up"===t&&s>e.y-this.settings.nodeHeight)s=e.y-this.settings.nodeHeight;else{if(!("down"===t&&s+this.viewportHeight<=e.y+3*this.settings.nodeHeight))return;s+=this.settings.nodeHeight}this.scrollTo({top:s,behavior:"smooth"}),this.updateVisibleNodes()}updateLinks(){const e=this.data.links.filter(e=>e.source.y<=this.scrollBottom&&e.target.y>=this.scrollTop-this.settings.nodeHeight).map(e=>(e.source.owns=e.source.owns||[],e.source.owns.push("identifier-"+e.target.stateIdentifier),e)),t=this.linksContainer.selectAll(".link").data(e);t.exit().remove(),t.enter().append("path").attr("class","link").attr("id",this.getGroupIdentifier).attr("role",e=>1===e.target.siblingsPosition&&e.source.owns.length>0?"group":null).attr("aria-owns",e=>1===e.target.siblingsPosition&&e.source.owns.length>0?e.source.owns.join(" "):null).merge(t).attr("d",e=>this.getLinkPath(e))}getGroupIdentifier(e){return 1===e.target.siblingsPosition?"group-identifier-"+e.source.stateIdentifier:null}}__decorate([i.property({type:Object})],p.prototype,"setup",void 0),__decorate([i.state()],p.prototype,"settings",void 0),t.SvgTree=p;let g=class extends s.LitElement{constructor(){super(...arguments),this.tree=null,this.settings={searchInput:".search-input",filterTimeout:450}}createRenderRoot(){return this}firstUpdated(){const e=this.querySelector(this.settings.searchInput);e&&(new u.default("input",e=>{const t=e.target;this.tree.filter(t.value.trim())},this.settings.filterTimeout).bindTo(e),e.focus(),e.clearable({onClear:()=>{this.tree.resetFilter()}}))}render(){return s.html`
<div class="tree-toolbar">
<div class="svg-toolbar__menu">
<div class="svg-toolbar__search">
......
......@@ -10,7 +10,7 @@
*
* The TYPO3 project - inspiring people to share!
*/
var __decorate=this&&this.__decorate||function(e,t,i,r){var n,o=arguments.length,s=o<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,r);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(s=(o<3?n(s):o>3?n(t,i,s):n(t,i))||s);return o>3&&s&&Object.defineProperty(t,i,s),s},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};define(["require","exports","lit","lit/decorators","TYPO3/CMS/Core/Ajax/AjaxRequest","TYPO3/CMS/Recordlist/ElementBrowser","TYPO3/CMS/Recordlist/LinkBrowser","TYPO3/CMS/Backend/Storage/Persistent","./FileStorageTree","TYPO3/CMS/Backend/Element/IconElement"],(function(e,t,i,r,n,o,s,a,c){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.FileStorageBrowser=void 0,n=__importDefault(n),a=__importDefault(a);let d=class extends c.FileStorageTree{updateNodeActions(e){const t=super.updateNodeActions(e);if(this.settings.actions.includes("link")){this.fetchIcon("actions-link");const e=t.append("g").on("click",(e,t)=>{this.linkItem(t)});e.append("path").attr("d","M 0 0 L 18 0 L 18 18 L 0 18 Z").exit(),e.append("use").attr("xlink:href","#icon-actions-link")}else if(this.settings.actions.includes("select")){this.fetchIcon("actions-link");const e=t.append("g").on("click",(e,t)=>{this.selectItem(t)});e.append("path").attr("d","M 0 0 L 18 0 L 18 18 L 0 18 Z").exit(),e.append("use").attr("xlink:href","#icon-actions-link")}return t}linkItem(e){s.finalizeFunction("t3://folder?storage="+e.storage+"&identifier="+e.pathIdentifier)}selectItem(e){o.insertElement(e.itemType,e.identifier,e.name,e.identifier,!0)}};d=__decorate([r.customElement("typo3-backend-component-filestorage-browser-tree")],d);let l=class extends i.LitElement{constructor(){super(...arguments),this.activeFolder="",this.actions=[],this.triggerRender=()=>{this.tree.dispatchEvent(new Event("svg-tree:visible"))},this.selectActiveNode=e=>{let t=e.detail.nodes;e.detail.nodes=t.map(e=>(decodeURIComponent(e.identifier)===this.activeFolder&&(e.checked=!0),e))},this.toggleExpandState=e=>{const t=e.detail.node;t&&a.default.set("BackendComponents.States.FileStorageTree.stateHash."+t.stateIdentifier,t.expanded?"1":"0")},this.loadFolderDetails=e=>{const t=e.detail.node;if(!t.checked)return;let i=document.location.href+"&contentOnly=1&expandFolder="+t.identifier;new n.default(i).get().then(e=>e.resolve()).then(e=>{document.querySelector(".element-browser-main-content .element-browser-body").innerHTML=e})}}connectedCallback(){super.connectedCallback(),document.addEventListener("typo3:navigation:resized",this.triggerRender)}disconnectedCallback(){document.removeEventListener("typo3:navigation:resized",this.triggerRender),super.disconnectedCallback()}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,filterUrl:top.TYPO3.settings.ajaxUrls.filestorage_tree_filter,showIcons:!0,actions:this.actions};return i.html`
var __decorate=this&&this.__decorate||function(e,t,i,r){var n,o=arguments.length,s=o<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,r);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(s=(o<3?n(s):o>3?n(t,i,s):n(t,i))||s);return o>3&&s&&Object.defineProperty(t,i,s),s},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};define(["require","exports","lit","lit/decorators","TYPO3/CMS/Core/Ajax/AjaxRequest","TYPO3/CMS/Recordlist/ElementBrowser","TYPO3/CMS/Recordlist/LinkBrowser","TYPO3/CMS/Backend/Storage/Persistent","./FileStorageTree","TYPO3/CMS/Backend/Element/IconElement"],(function(e,t,i,r,n,o,s,a,c){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.FileStorageBrowser=void 0,n=__importDefault(n),a=__importDefault(a);let d=class extends c.FileStorageTree{updateNodeActions(e){const t=super.updateNodeActions(e);if(this.settings.actions.includes("link")){this.fetchIcon("actions-link");const e=t.append("g").on("click",(e,t)=>{this.linkItem(t)});this.createIconAreaForAction(e,"actions-link")}else if(this.settings.actions.includes("select")){this.fetchIcon("actions-link");const e=t.append("g").on("click",(e,t)=>{this.selectItem(t)});this.createIconAreaForAction(e,"actions-link")}return t}linkItem(e){s.finalizeFunction("t3://folder?storage="+e.storage+"&identifier="+e.pathIdentifier)}selectItem(e){o.insertElement(e.itemType,e.identifier,e.name,e.identifier,!0)}};d=__decorate([r.customElement("typo3-backend-component-filestorage-browser-tree")],d);let l=class extends i.LitElement{constructor(){super(...arguments),this.activeFolder="",this.actions=[],this.triggerRender=()=>{this.tree.dispatchEvent(new Event("svg-tree:visible"))},this.selectActiveNode=e=>{let t=e.detail.nodes;e.detail.nodes=t.map(e=>(decodeURIComponent(e.identifier)===this.activeFolder&&(e.checked=!0),e))},this.toggleExpandState=e=>{const t=e.detail.node;t&&a.default.set("BackendComponents.States.FileStorageTree.stateHash."+t.stateIdentifier,t.expanded?"1":"0")},this.loadFolderDetails=e=>{const t=e.detail.node;if(!t.checked)return;let i=document.location.href+"&contentOnly=1&expandFolder="+t.identifier;new n.default(i).get().then(e=>e.resolve()).then(e=>{document.querySelector(".element-browser-main-content .element-browser-body").innerHTML=e})}}connectedCallback(){super.connectedCallback(),document.addEventListener("typo3:navigation:resized",this.triggerRender)}disconnectedCallback(){document.removeEventListener("typo3:navigation:resized",this.triggerRender),super.disconnectedCallback()}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,filterUrl:top.TYPO3.settings.ajaxUrls.filestorage_tree_filter,showIcons:!0,actions:this.actions};return i.html`
<div class="svg-tree">
<div>
<typo3-backend-tree-toolbar .tree="${this.tree}" class="svg-toolbar"></typo3-backend-tree-toolbar>
......
......@@ -10,9 +10,9 @@
*
* The TYPO3 project - inspiring people to share!
*/
var __decorate=this&&this.__decorate||function(e,t,n,i){var r,o=arguments.length,s=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,i);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(s=(o<3?r(s):o>3?r(t,n,s):r(t,n))||s);return o>3&&s&&Object.defineProperty(t,n,s),s},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};define(["require","exports","lit","lit/decorators","lit/directives/until","TYPO3/CMS/Core/lit-helper","../PageTree/PageTree","TYPO3/CMS/Core/Ajax/AjaxRequest","TYPO3/CMS/Recordlist/ElementBrowser","TYPO3/CMS/Recordlist/LinkBrowser","TYPO3/CMS/Backend/Storage/Persistent","TYPO3/CMS/Backend/Element/IconElement"],(function(e,t,n,i,r,o,s,a,d,c,l){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.PageBrowser=void 0,a=__importDefault(a),l=__importDefault(l);let p=class extends s.PageTree{appendTextElement(e){return super.appendTextElement(e).attr("opacity",e=>this.settings.actions.includes("link")?this.isLinkable(e)?1:.5:1)}updateNodeActions(e){const t=super.updateNodeActions(e);if(this.settings.actions.includes("link")){this.fetchIcon("actions-link");const e=t.append("g").attr("visibility",e=>this.isLinkable(e)?"visible":"hidden").on("click",(e,t)=>{this.linkItem(t)});e.append("path").attr("d","M 0 0 L 18 0 L 18 18 L 0 18 Z").exit(),e.append("use").attr("xlink:href","#icon-actions-link")}else if(this.settings.actions.includes("select")){this.fetchIcon("actions-link");const e=t.append("g").on("click",(e,t)=>{this.selectItem(t)});e.append("path").attr("d","M 0 0 L 18 0 L 18 18 L 0 18 Z").exit(),e.append("use").attr("xlink:href","#icon-actions-link")}return t}linkItem(e){c.finalizeFunction("t3://page?uid="+e.identifier)}isLinkable(e){return!1===["199","254","255"].includes(String(e.type))}selectItem(e){d.insertElement(e.itemType,e.identifier,e.name,e.identifier,!0)}};p=__decorate([i.customElement("typo3-backend-component-page-browser-tree")],p);let u=class extends n.LitElement{constructor(){super(...arguments),this.mountPointPath=null,this.activePageId=0,this.actions=[],this.configuration=null,this.triggerRender=()=>{this.tree.dispatchEvent(new Event("svg-tree:visible"))},this.selectActivePageInTree=e=>{let t=e.detail.nodes;e.detail.nodes=t.map(e=>(parseInt(e.identifier,10)===this.activePageId&&(e.checked=!0),e))},this.toggleExpandState=e=>{const t=e.detail.node;t&&l.default.set("BackendComponents.States.Pagetree.stateHash."+t.stateIdentifier,t.expanded?"1":"0")},this.loadRecordsOfPage=e=>{const t=e.detail.node;if(!t.checked)return;let n=document.location.href+"&contentOnly=1&expandPage="+t.identifier;new a.default(n).get().then(e=>e.resolve()).then(e=>{document.querySelector(".element-browser-main-content .element-browser-body").innerHTML=e})},this.setMountPoint=e=>{this.setTemporaryMountPoint(e.detail.pageId)}}connectedCallback(){super.connectedCallback(),document.addEventListener("typo3:navigation:resized",this.triggerRender),document.addEventListener("typo3:pagetree:mountPoint",this.setMountPoint)}disconnectedCallback(){document.removeEventListener("typo3:navigation:resized",this.triggerRender),document.removeEventListener("typo3:pagetree:mountPoint",this.setMountPoint),super.disconnectedCallback()}firstUpdated(){this.activePageId=parseInt(this.getAttribute("active-page"),10),this.actions=JSON.parse(this.getAttribute("tree-actions"))}createRenderRoot(){return this}getConfiguration(){if(null!==this.configuration)return Promise.resolve(this.configuration);const e=top.TYPO3.settings.ajaxUrls.page_tree_browser_configuration,t=this.hasAttribute("alternative-entry-points")?JSON.parse(this.getAttribute("alternative-entry-points")):[];let n=new a.default(e);return t.length&&(n=n.withQueryArguments("alternativeEntryPoints="+encodeURIComponent(t))),n.get().then(async e=>{const t=await e.resolve("json");return t.actions=this.actions,this.configuration=t,this.mountPointPath=t.temporaryMountPoint||null,t})}render(){return n.html`
var __decorate=this&&this.__decorate||function(e,t,n,i){var o,r=arguments.length,s=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,i);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(s=(r<3?o(s):r>3?o(t,n,s):o(t,n))||s);return r>3&&s&&Object.defineProperty(t,n,s),s},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};define(["require","exports","lit","lit/decorators","lit/directives/until","TYPO3/CMS/Core/lit-helper","../PageTree/PageTree","TYPO3/CMS/Core/Ajax/AjaxRequest","TYPO3/CMS/Recordlist/ElementBrowser","TYPO3/CMS/Recordlist/LinkBrowser","TYPO3/CMS/Backend/Storage/Persistent","TYPO3/CMS/Backend/Element/IconElement"],(function(e,t,n,i,o,r,s,a,c,d,l){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.PageBrowser=void 0,a=__importDefault(a),l=__importDefault(l);let p=class extends s.PageTree{appendTextElement(e){return super.appendTextElement(e).attr("opacity",e=>this.settings.actions.includes("link")?this.isLinkable(e)?1:.5:1)}updateNodeActions(e){const t=super.updateNodeActions(e);if(this.settings.actions.includes("link")){this.fetchIcon("actions-link");const e=this.nodesActionsContainer.selectAll(".node-action").append("g").attr("visibility",e=>this.isLinkable(e)?"visible":"hidden").on("click",(e,t)=>{this.linkItem(t)});this.createIconAreaForAction(e,"actions-link")}else if(this.settings.actions.includes("select")){this.fetchIcon("actions-link");const e=t.append("g").on("click",(e,t)=>{this.selectItem(t)});this.createIconAreaForAction(e,"actions-link")}return t}linkItem(e){d.finalizeFunction("t3://page?uid="+e.identifier)}isLinkable(e){return!1===["199","254","255"].includes(String(e.type))}selectItem(e){c.insertElement(e.itemType,e.identifier,e.name,e.identifier,!0)}};p=__decorate([i.customElement("typo3-backend-component-page-browser-tree")],p);let u=class extends n.LitElement{constructor(){super(...arguments),this.mountPointPath=null,this.activePageId=0,this.actions=[],this.configuration=null,this.triggerRender=()=>{this.tree.dispatchEvent(new Event("svg-tree:visible"))},this.selectActivePageInTree=e=>{let t=e.detail.nodes;e.detail.nodes=t.map(e=>(parseInt(e.identifier,10)===this.activePageId&&(e.checked=!0),e))},this.toggleExpandState=e=>{const t=e.detail.node;t&&l.default.set("BackendComponents.States.Pagetree.stateHash."+t.stateIdentifier,t.expanded?"1":"0")},this.loadRecordsOfPage=e=>{const t=e.detail.node;if(!t.checked)return;let n=document.location.href+"&contentOnly=1&expandPage="+t.identifier;new a.default(n).get().then(e=>e.resolve()).then(e=>{document.querySelector(".element-browser-main-content .element-browser-body").innerHTML=e})},this.setMountPoint=e=>{this.setTemporaryMountPoint(e.detail.pageId)}}connectedCallback(){super.connectedCallback(),document.addEventListener("typo3:navigation:resized",this.triggerRender),document.addEventListener("typo3:pagetree:mountPoint",this.setMountPoint)}disconnectedCallback(){document.removeEventListener("typo3:navigation:resized",this.triggerRender),document.removeEventListener("typo3:pagetree:mountPoint",this.setMountPoint),super.disconnectedCallback()}firstUpdated(){this.activePageId=parseInt(this.getAttribute("active-page"),10),this.actions=JSON.parse(this.getAttribute("tree-actions"))}createRenderRoot(){return this}getConfiguration(){if(null!==this.configuration)return Promise.resolve(this.configuration);const e=top.TYPO3.settings.ajaxUrls.page_tree_browser_configuration,t=this.hasAttribute("alternative-entry-points")?JSON.parse(this.getAttribute("alternative-entry-points")):[];let n=new a.default(e);return t.length&&(n=n.withQueryArguments("alternativeEntryPoints="+encodeURIComponent(t))),n.get().then(async e=>{const t=await e.resolve("json");return t.actions=this.actions,this.configuration=t,this.mountPointPath=t.temporaryMountPoint||null,t})}render(){return n.html`
<div class="svg-tree">
${r.until(this.renderTree(),this.renderLoader())}
${o.until(this.renderTree(),this.renderLoader())}
</div>
`}renderTree(){return this.getConfiguration().then(e=>n.html`
<div>
......@@ -31,7 +31,7 @@ var __decorate=this&&this.__decorate||function(e,t,n,i){var r,o=arguments.length
<div class="node-mount-point">
<div class="node-mount-point__icon"><typo3-backend-icon identifier="actions-document-info" size="small"></typo3-backend-icon></div>
<div class="node-mount-point__text">${this.mountPointPath}</div>
<div class="node-mount-point__icon mountpoint-close" @click="${()=>this.unsetTemporaryMountPoint()}" title="${o.lll("labels.temporaryDBmount")}">
<div class="node-mount-point__icon mountpoint-close" @click="${()=>this.unsetTemporaryMountPoint()}" title="${r.lll("labels.temporaryDBmount")}">
<typo3-backend-icon identifier="actions-close" size="small"></typo3-backend-icon>
</div>
</div>
......
/*
* 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 __decorate=this&&this.__decorate||function(t,e,r,o){var n,s=arguments.length,l=s<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,r):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,r,o);else for(var i=t.length-1;i>=0;i--)(n=t[i])&&(l=(s<3?n(l):s>3?n(e,r,l):n(e,r))||l);return s>3&&l&&Object.defineProperty(e,r,l),l};define(["require","exports","lit","lit/decorators","TYPO3/CMS/Backend/Enum/Severity","TYPO3/CMS/Backend/Severity","TYPO3/CMS/Backend/Modal","TYPO3/CMS/Core/lit-helper"],(function(t,e,r,o,n,s,l,i){"use strict";var a;Object.defineProperty(e,"__esModule",{value:!0}),function(t){t.formatSelector=".t3js-record-export-format-selector",t.formatOptions=".t3js-record-export-format-option"}(a||(a={}));let c=class extends r.LitElement{constructor(){super(),this.addEventListener("click",t=>{t.preventDefault(),this.showExportConfigurationModal()})}render(){return r.html`<slot></slot>`}showExportConfigurationModal(){this.url&&l.advanced({content:this.url,title:this.title||"Export record",severity:n.SeverityEnum.notice,size:l.sizes.small,type:l.types.ajax,buttons:[{text:this.close||i.lll("button.close")||"Close",active:!0,btnClass:"btn-default",name:"cancel",trigger:()=>l.dismiss()},{text:this.ok||i.lll("button.ok")||"Export",btnClass:"btn-"+s.getCssClass(n.SeverityEnum.info),name:"export",trigger:()=>{const t=l.currentModal[0].querySelector("form");t&&t.submit(),l.dismiss()}}],ajaxCallback:()=>{const t=l.currentModal[0].querySelector(a.formatSelector),e=l.currentModal[0].querySelectorAll(a.formatOptions);null!==t&&e.length&&t.addEventListener("change",t=>{const r=t.target.value;e.forEach(t=>{t.dataset.formatname!==r?t.classList.add("hide"):t.classList.remove("hide")})})}})}};__decorate([o.property({type:String})],c.prototype,"url",void 0),__decorate([o.property({type:String})],c.prototype,"title",void 0),__decorate([o.property({type:String})],c.prototype,"ok",void 0),__decorate([o.property({type:String})],c.prototype,"close",void 0),c=__decorate([o.customElement("typo3-recordlist-record-export-button")],c)}));
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment