From 8b96efc02e89b520004b39f66d3942dd613b4c94 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 28 May 2018 20:55:56 +0200 Subject: [PATCH] move umbTree markup to template --- .../components/tree/umbtree.directive.js | 255 ++++++++---------- .../src/views/components/tree/umb-tree.html | 14 + 2 files changed, 130 insertions(+), 139 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree.html diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtree.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtree.directive.js index be743ea21c..c4ee4bacca 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtree.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtree.directive.js @@ -9,7 +9,7 @@ function umbTreeDirective($compile, $log, $q, $rootScope, treeService, notificat restrict: 'E', replace: true, terminal: false, - + templateUrl: 'views/components/tree/umb-tree.html', scope: { section: '@', treealias: '@', @@ -22,82 +22,59 @@ function umbTreeDirective($compile, $log, $q, $rootScope, treeService, notificat customtreeparams: '@', enablecheckboxes: '@', enablelistviewsearch: '@', - enablelistviewexpand: '@', - - api: '=?', + enablelistviewexpand: '@', + api: '=?', onInit: '&?' }, + controller: function ($scope, $element) { - compile: function (element, attrs) { - //config - //var showheader = (attrs.showheader !== 'false'); - var hideoptions = (attrs.hideoptions === 'true') ? "hide-options" : ""; - var template = ''; + $scope.hideoptions = ($scope.hideoptions === 'true') ? "hide-options" : ""; - element.replaceWith(template); - - return function (scope, elem, attr, controller) { - - }; - }, - - controller: function ($scope, $element) { - var vm = this; - - var registeredCallbacks = { - treeNodeExpanded: [], - treeNodeSelect: [], - treeLoaded: [], - treeSynced: [], - treeOptionsClick: [], + + var registeredCallbacks = { + treeNodeExpanded: [], + treeNodeSelect: [], + treeLoaded: [], + treeSynced: [], + treeOptionsClick: [], treeNodeAltSelect: [] - }; - - //this is the API exposed by this directive, for either hosting controllers or for other directives - vm.callbacks = { - treeNodeExpanded: function (f) { + }; + + //this is the API exposed by this directive, for either hosting controllers or for other directives + vm.callbacks = { + treeNodeExpanded: function (f) { registeredCallbacks.treeNodeExpanded.push(f); - }, - treeNodeSelect: function (f) { + }, + treeNodeSelect: function (f) { registeredCallbacks.treeNodeSelect.push(f); - }, - treeLoaded: function (f) { + }, + treeLoaded: function (f) { registeredCallbacks.treeLoaded.push(f); - }, - treeSynced: function (f) { + }, + treeSynced: function (f) { registeredCallbacks.treeSynced.push(f); - }, - treeOptionsClick: function (f) { + }, + treeOptionsClick: function (f) { registeredCallbacks.treeOptionsClick.push(f); - }, - treeNodeAltSelect: function (f) { + }, + treeNodeAltSelect: function (f) { registeredCallbacks.treeNodeAltSelect.push(f); } - }; - vm.emitEvent = emitEvent; - vm.load = load; - vm.reloadNode = reloadNode; - vm.syncTree = syncTree; - + }; + vm.emitEvent = emitEvent; + vm.load = load; + vm.reloadNode = reloadNode; + vm.syncTree = syncTree; + //wire up the exposed api object for hosting controllers - if ($scope.api) { - $scope.api.callbacks = vm.callbacks; - $scope.api.load = vm.load; - $scope.api.reloadNode = vm.reloadNode; + if ($scope.api) { + $scope.api.callbacks = vm.callbacks; + $scope.api.load = vm.load; + $scope.api.reloadNode = vm.reloadNode; $scope.api.syncTree = vm.syncTree; - } - + } + //flag to track the last loaded section when the tree 'un-loads'. We use this to determine if we should // re-load the tree again. For example, if we hover over 'content' the content tree is shown. Then we hover // outside of the tree and the tree 'un-loads'. When we re-hover over 'content', we don't want to re-load the @@ -110,9 +87,9 @@ function umbTreeDirective($compile, $log, $q, $rootScope, treeService, notificat var deleteAnimations = false; /** Helper function to emit tree events */ - function emitEvent(eventName, args) { - if (registeredCallbacks[eventName] && angular.isArray(registeredCallbacks[eventName])) { - _.each(registeredCallbacks[eventName], function (c) { + function emitEvent(eventName, args) { + if (registeredCallbacks[eventName] && angular.isArray(registeredCallbacks[eventName])) { + _.each(registeredCallbacks[eventName], function (c) { c(args);//call it }); } @@ -126,37 +103,37 @@ function umbTreeDirective($compile, $log, $q, $rootScope, treeService, notificat deleteAnimations = true; }, 0, false); } - - function clearCache(section) { + + function clearCache(section) { treeService.clearCache({ section: section }); } - + /** * Re-loads the tree with the updated parameters * @param {any} args either a string representing the 'section' or an object containing: 'section', 'treeAlias', 'customTreeParams', 'cacheKey' - */ - function load(args) { - if (angular.isString(args)) { + */ + function load(args) { + if (angular.isString(args)) { $scope.section = args; - } - else if (args) { - if (args.section) { + } + else if (args) { + if (args.section) { $scope.section = args.section; - } - if (args.customTreeParams) { - $scope.customtreeparams = args.customTreeParams; - } - if (args.treeAlias) { - $scope.treealias = args.treeAlias; - } - if (args.cacheKey) { - $scope.cachekey = args.cacheKey; } - } + if (args.customTreeParams) { + $scope.customtreeparams = args.customTreeParams; + } + if (args.treeAlias) { + $scope.treealias = args.treeAlias; + } + if (args.cacheKey) { + $scope.cachekey = args.cacheKey; + } + } return loadTree(); - } - + } + function reloadNode(node) { if (!node) { @@ -165,24 +142,24 @@ function umbTreeDirective($compile, $log, $q, $rootScope, treeService, notificat if (node) { return $scope.loadChildren(node, true); - } - + } + return $q.reject(); - } - + } + /** * Used to do the tree syncing - * @param {any} args + * @param {any} args * @returns a promise with an object containing 'node' and 'activate' - */ - function syncTree(args) { + */ + function syncTree(args) { if (!args) { throw "args cannot be null"; } if (!args.path) { throw "args.path cannot be null"; } - + if (angular.isString(args.path)) { args.path = args.path.replace('"', '').split(','); } @@ -214,7 +191,7 @@ function umbTreeDirective($compile, $log, $q, $rootScope, treeService, notificat args.path = args.path.splice(_.indexOf(args.path, found)); } }); - + deleteAnimations = false; var treeNode = loadActiveTree(args.tree); @@ -231,8 +208,8 @@ function umbTreeDirective($compile, $log, $q, $rootScope, treeService, notificat emitEvent("treeSynced", { node: data, activate: args.activate }); - enableDeleteAnimations(); - + enableDeleteAnimations(); + return $q.when({ node: data, activate: args.activate }); }); }); @@ -242,17 +219,17 @@ function umbTreeDirective($compile, $log, $q, $rootScope, treeService, notificat //given a tree alias, this will search the current section tree for the specified tree alias and set the current active tree to it's root node function loadActiveTree(treeAlias) { - if (!$scope.tree) { - throw "Err in umbtree.directive.loadActiveTree, $scope.tree is null"; - } - - //if its not specified, it should have been specified before - if (!treeAlias) { - if (!$scope.activeTree) { + if (!$scope.tree) { + throw "Err in umbtree.directive.loadActiveTree, $scope.tree is null"; + } + + //if its not specified, it should have been specified before + if (!treeAlias) { + if (!$scope.activeTree) { throw "Err in umbtree.directive.loadActiveTree, $scope.activeTree is null"; } return $scope.activeTree; - } + } var childrenAndSelf = [$scope.tree.root].concat($scope.tree.root.children); $scope.activeTree = _.find(childrenAndSelf, function (node) { @@ -266,8 +243,8 @@ function umbTreeDirective($compile, $log, $q, $rootScope, treeService, notificat throw "Could not find the tree " + treeAlias; } - emitEvent("activeTreeLoaded", { tree: $scope.activeTree }); - + emitEvent("activeTreeLoaded", { tree: $scope.activeTree }); + return $scope.activeTree; } @@ -297,21 +274,21 @@ function umbTreeDirective($compile, $log, $q, $rootScope, treeService, notificat enableDeleteAnimations(); $scope.loading = false; - + //set the root as the current active tree - $scope.activeTree = $scope.tree.root; + $scope.activeTree = $scope.tree.root; emitEvent("treeLoaded", { tree: $scope.tree }); emitEvent("treeNodeExpanded", { tree: $scope.tree, node: $scope.tree.root, children: $scope.tree.root.children }); return $q.when(data); }, function (reason) { $scope.loading = false; - notificationsService.error("Tree Error", reason); + notificationsService.error("Tree Error", reason); return $q.reject(reason); }); - } - else { - return $q.reject(); + } + else { + return $q.reject(); } } @@ -374,7 +351,7 @@ function umbTreeDirective($compile, $log, $q, $rootScope, treeService, notificat emitEvent("treeNodeExpanded", { tree: $scope.tree, node: node, children: data }); enableDeleteAnimations(); - + return $q.when(data); }); } @@ -420,36 +397,36 @@ function umbTreeDirective($compile, $log, $q, $rootScope, treeService, notificat $scope.altSelect = function (n, ev) { emitEvent("treeNodeAltSelect", { element: $element, tree: $scope.tree, node: n, event: ev }); - }; + }; - //call the onInit method, if the result is a promise then load the tree after that resolves (if it's not a promise this will just resolve automatically). + //call the onInit method, if the result is a promise then load the tree after that resolves (if it's not a promise this will just resolve automatically). //NOTE: The promise cannot be rejected, else the tree won't be loaded and we'll get exceptions if some API calls syncTree or similar. - $q.when($scope.onInit(), function (args) { - - //the promise resolution can pass in parameters - if (args) { - if (args.section) { + $q.when($scope.onInit(), function (args) { + + //the promise resolution can pass in parameters + if (args) { + if (args.section) { $scope.section = args.section; - } - if (args.customTreeParams) { - $scope.customtreeparams = args.customTreeParams; - } - if (args.treealias) { - $scope.treealias = args.treealias; - } - if (args.cacheKey) { - $scope.cachekey = args.cacheKey; } - } - - //load the tree - loadTree().then(function () { - //because angular doesn't return a promise for the resolve method, we need to resort to some hackery, else - //like normal JS promises we could do resolve(...).then() - if (args.onLoaded && angular.isFunction(args.onLoaded)) { + if (args.customTreeParams) { + $scope.customtreeparams = args.customTreeParams; + } + if (args.treealias) { + $scope.treealias = args.treealias; + } + if (args.cacheKey) { + $scope.cachekey = args.cacheKey; + } + } + + //load the tree + loadTree().then(function () { + //because angular doesn't return a promise for the resolve method, we need to resort to some hackery, else + //like normal JS promises we could do resolve(...).then() + if (args.onLoaded && angular.isFunction(args.onLoaded)) { args.onLoaded(); - } - }); + } + }); }); } }; diff --git a/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree.html b/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree.html new file mode 100644 index 0000000000..1b45668ed5 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree.html @@ -0,0 +1,14 @@ + \ No newline at end of file