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

Tree can now sync, only need to bridge it with the old legacy umbClient calls

Browse Source
This commit is contained in:
perploug
2013-10-04 14:00:43 +02:00
parent 418a29cbbf
commit c8fa22c767
4 changed files with 91 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/Umbraco.Web.UI.Client/src/common/directives/umbtree.directive.js
View File

@@ -13,10 +13,12 @@ angular.module("umbraco.directives")
scope: {
section: '@',
activetree: '@',
showoptions: '@',
showheader: '@',
cachekey: '@',
eventhandler: '='
eventhandler: '=',
path: '@'
},
compile: function (element, attrs) {
@@ -34,7 +36,7 @@ angular.module("umbraco.directives")
'</div>';
}
template += '<ul>' +
'<umb-tree-item ng-repeat="child in tree.root.children" eventhandler="eventhandler" node="child" section="{{section}}" ng-animate="animation()"></umb-tree-item>' +
'<umb-tree-item ng-repeat="child in tree.root.children" eventhandler="eventhandler" path="{{path}}" activetree="{{activetree}}" node="child" section="{{section}}" ng-animate="animation()"></umb-tree-item>' +
'</ul>' +
'</li>' +
'</ul>';
@@ -139,6 +141,19 @@ angular.module("umbraco.directives")
}
});
//watch for active tree changes
scope.$watch("activetree", function (newVal, oldVal) {
if(!scope.tree){
loadTree();
}
if (newVal && newVal !== oldVal) {
//only reload the tree data and Dom if the newval is different from the old one
loadTree();
}
});
//When the user logs in
scope.$on("authenticated", function (evt, data) {
//populate the tree if the user has changed

63
src/Umbraco.Web.UI.Client/src/common/directives/umbtreeitem.directive.js
View File

@@ -27,14 +27,16 @@ angular.module("umbraco.directives")
section: '@',
cachekey: '@',
eventhandler: '=',
node:'='
path: '@',
node:'=',
activetree:'@'
},
template: '<li ng-swipe-right="options(this, node, $event)"><div ng-style="setTreePadding(node)" ng-class="{\'loading\': node.loading}">' +
'<ins ng-hide="node.hasChildren" style="background:none;width:18px;"></ins>' +
'<ins ng-show="node.hasChildren" ng-class="{\'icon-navigation-right\': !node.expanded, \'icon-navigation-down\': node.expanded}" ng-click="load(this, node)"></ins>' +
'<i title="#{{node.routePath}}" class="{{node.cssClass}}" style="{{node.style}}"></i>' +
'<a href ng-click="select(this, node, $event)" >{{node.name}}</a>' +
'<a href ng-click="select(this, node, $event)" >{{node.name}} {{path}}</a>' +
'<a href class="umb-options" ng-hide="!node.menuUrl" ng-click="options(this, node, $event)"><i></i><i></i><i></i></a>' +
'<div ng-show="node.loading" class="l"><div></div></div>' +
'</div>' +
@@ -91,32 +93,35 @@ angular.module("umbraco.directives")
emits treeNodeCollapsing event if already expanded and treeNodeExpanding if collapsed
*/
scope.load = function(arrow, node) {
if (node.expanded) {
enableDeleteAnimations = false;
emitEvent("treeNodeCollapsing", { element: arrow, node: node });
node.expanded = false;
node.expanded = false;
}
else {
scope.loadChildren(arrow, node, false);
}
};
//emit treeNodeExpanding event, if a callback object is set on the tree
emitEvent("treeNodeExpanding", { element: arrow, node: node });
if (!node.children || (angular.isArray(node.children) && node.children.length === 0)) {
//get the children from the tree service
treeService.loadNodeChildren({ node: node, section: scope.section })
.then(function(data) {
//emit expanded event
emitEvent("treeNodeExpanded", { element: arrow, node: node, children: data });
enableDeleteAnimations = true;
});
}
else {
emitEvent("treeNodeExpanded", { element: arrow, node: node, children: node.children });
node.expanded = true;
enableDeleteAnimations = true;
}
}
/* helper to force reloading children of a tree node */
scope.loadChildren = function(arrow, node, forceReload){
//emit treeNodeExpanding event, if a callback object is set on the tree
emitEvent("treeNodeExpanding", { element: arrow, node: node });
if (forceReload || !node.children || (angular.isArray(node.children) && node.children.length === 0)) {
//get the children from the tree service
treeService.loadNodeChildren({ node: node, section: scope.section })
.then(function(data) {
//emit expanded event
emitEvent("treeNodeExpanded", { element: arrow, node: node, children: data });
enableDeleteAnimations = true;
});
}
else {
emitEvent("treeNodeExpanded", { element: arrow, node: node, children: node.children });
node.expanded = true;
enableDeleteAnimations = true;
}
};
/**
@@ -128,7 +133,19 @@ angular.module("umbraco.directives")
return { 'padding-left': (node.level * 20) + "px" };
};
var template = '<ul ng-class="{collapsed: !node.expanded}"><umb-tree-item ng-repeat="child in node.children" eventhandler="eventhandler" node="child" section="{{section}}" ng-animate="animation()"></umb-tree-item></ul>';
scope.expandActivePath = function(node, activeTree, activePath) {
if(activePath || activeTree){
if( (node.metaData.treeAlias && activeTree === node.metaData.treeAlias) || activePath.indexOf(node.id) >= 0){
scope.loadChildren(null, scope.node, true);
}
}
};
//if the current path contains the node id, we will auto-expand the tree item children
scope.expandActivePath(scope.node, scope.activetree, scope.path);
var template = '<ul ng-class="{collapsed: !node.expanded}"><umb-tree-item ng-repeat="child in node.children" eventhandler="eventhandler" activetree="{{activetree}}" path="{{path}}" node="child" section="{{section}}" ng-animate="animation()"></umb-tree-item></ul>';
var newElement = angular.element(template);
$compile(newElement)(scope);
element.append(newElement);

31
src/Umbraco.Web.UI.Client/src/common/services/navigation.service.js
View File

@@ -115,13 +115,38 @@ angular.module('umbraco.services')
* only changes if the section is different from the current one
* @param {string} sectionAlias The alias of the section the tree should load data from
*/
showTree: function (sectionAlias) {
showTree: function (sectionAlias, treeAlias, path) {
if (sectionAlias !== this.ui.currentSection) {
this.ui.currentSection = sectionAlias;
setMode("tree");
this.syncTree(sectionAlias, treeAlias, path);
}
setMode("tree");
},
/**
* @ngdoc method
* @name umbraco.services.navigationService#syncTree
* @methodOf umbraco.services.navigationService
*
* @description
* Syncs the tree with a given section alias and a given path
* The path format is: ["treeAlias","itemId","itemId"], and so on
* so to sync to a specific document type node do:
* <pre>
* navigationService.syncTree("content", "nodeTypes", [-1,1023,3453]);
* </pre>
* @param {string} sectionAlias The alias of the section the tree should load data from
* @param {string} treeAlias The alias of tree to auto-expand
* @param {array} path array of ascendant ids, ex: [,1023,1243] (loads a specific document type into the settings tree)
*/
syncTree: function (sectionAlias, treeAlias, path) {
//TODO: investicate if we need to halt watch triggers
//and instead pause them and then manually tell the tree to digest path changes
//as this might be a bit heavy loading
this.ui.currentSection = sectionAlias;
this.ui.currentTree = treeAlias;
this.ui.currentPath = path;
},
/**
* @ngdoc method

8
src/Umbraco.Web.UI.Client/src/views/directives/umb-navigation.html
View File

@@ -78,10 +78,14 @@
</ul>
</div>
<!-- the tree -->
<div id="tree" class="umb-modalcolumn-body">
<umb-tree eventhandler="treeEventHandler" section="{{nav.ui.currentSection}}" ></umb-tree>
<umb-tree
eventhandler="treeEventHandler"
path="{{nav.ui.currentPath}}"
section="{{nav.ui.currentSection}}"
activetree="{{nav.ui.currentTree}}" >
</umb-tree>
</div>
</div>