yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Stop event propagation when clicking on the expand-arrow in the tree. (#14637)

Browse Source
This commit is contained in:
Bjarke Berg
2023-08-08 09:27:23 +02:00
committed by GitHub
parent e16e36c68f
commit 4e410a9dd5
2 changed files with 19 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtreeitem.directive.js
View File

@@ -32,16 +32,16 @@ angular.module("umbraco.directives")
tree: '=',
isDialog: '='
},
link: function (scope, element, attrs, umbTreeCtrl) {
localizationService.localizeMany(["general_search", "visuallyHiddenTexts_openContextMenu"]).then(function (value) {
scope.searchAltText = value[0];
scope.optionsText = value[1];
});
// updates the node's DOM/styles
function setupNodeDom(node, tree) {
//get the first div element
element.children(":first")
//set the padding
@@ -61,14 +61,14 @@ angular.module("umbraco.directives")
if (!node) {
return '';
}
// TODO: This is called constantly because as a method in a template it's re-evaluated pretty much all the time
// it would be better if we could cache the processing. The problem is that some of these things are dynamic.
//is this the current action node (this is not the same as the current selected node!)
var actionNode = appState.getMenuState("currentNode");
var css = [];
var css = [];
if (node.cssClasses) {
node.cssClasses.forEach(c => css.push(c));
}
@@ -94,8 +94,8 @@ angular.module("umbraco.directives")
if (actionNode.id === node.id && String(node.id) !== "-1") {
css.push("active");
}
// special handling of root nodes with id -1
// special handling of root nodes with id -1
// as there can be many nodes with id -1 in a tree we need to check the treeAlias instead
if (String(node.id) === "-1" && actionNode.metaData.treeAlias === node.metaData.treeAlias) {
css.push("active");
@@ -125,7 +125,7 @@ angular.module("umbraco.directives")
};
/**
Method called when an item is clicked in the tree, this passes the
Method called when an item is clicked in the tree, this passes the
DOM element, the tree node object and the original click
and emits it as a treeNodeSelect element if there is a callback object
defined on the tree
@@ -149,7 +149,7 @@ angular.module("umbraco.directives")
};
/**
Method called when an item is right-clicked in the tree, this passes the
Method called when an item is right-clicked in the tree, this passes the
DOM element, the tree node object and the original click
and emits it as a treeNodeSelect element if there is a callback object
defined on the tree
@@ -158,13 +158,17 @@ angular.module("umbraco.directives")
if(ev.altKey) return false;
umbTreeCtrl.emitEvent("treeNodeAltSelect", { element: element, tree: scope.tree, node: n, event: ev });
};
/**
Method called when a node in the tree is expanded, when clicking the arrow
takes the arrow DOM element and node data as parameters
emits treeNodeCollapsing event if already expanded and treeNodeExpanding if collapsed
*/
scope.load = function (node) {
scope.load = function (node, ev) {
if(ev){
ev.stopPropagation();
}
if (node.expanded && !node.metaData.isContainer) {
umbTreeCtrl.emitEvent("treeNodeCollapsing", { tree: scope.tree, node: node, element: element });
node.expanded = false;
@@ -199,7 +203,7 @@ angular.module("umbraco.directives")
}));
// Update tree icon if changed
evts.push(eventsService.on("editors.tree.icon.changed", function (e, args) {
evts.push(eventsService.on("editors.tree.icon.changed", function (e, args) {
if (args.icon !== scope.node.icon && args.id === scope.node.id) {
scope.node.icon = args.icon;
}

4
src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-item.html
View File

@@ -1,9 +1,9 @@
<li class="umb-tree-item" data-element="tree-item-{{::node.dataElement}}" ng-class="getNodeCssClass(node)" on-right-click="altSelect(node, $event)">
<div class="umb-tree-item__inner" ng-swipe-right="options(node, $event)" ng-dblclick="load(node)" tabindex="-1">
<div class="umb-tree-item__inner" ng-swipe-right="options(node, $event)" ng-dblclick="load(node, $event)" tabindex="-1">
<button data-element="tree-item-expand"
class="umb-tree-item__arrow umb-outline btn-reset"
ng-style="{'visibility': (scope.enablelistviewexpand === 'true' || node.hasChildren && (!node.metaData.isContainer || isDialog)) ? 'visible' : 'hidden'}"
ng-click="load(node)">
ng-click="load(node, $event)">
<umb-icon icon="{{(node.expanded && !node.metaData.isContainer) ? 'icon-navigation-down' : 'icon-navigation-right'}}"></umb-icon>
<!-- TODO: Use localization for this text -->
<span class="sr-only">Expand child items for {{node.name}}</span>