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

Removes tree icon filters and just ensures the data is formatted on retrieval, this is much better for performance and just makes a lot more sense.

Browse Source
This commit is contained in:
Shannon
2013-08-06 13:24:49 +10:00
parent 319da4816a
commit 801e2dea7b
4 changed files with 26 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -33,7 +33,7 @@ angular.module("umbraco.directives")
template: '<li><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-caret-right\': !node.expanded, \'icon-caret-down\': node.expanded}" ng-click="load(this, node)"></ins>' +
'<i class="{{node | umbTreeIconClass:\'icon umb-tree-icon sprTree\'}}" style="{{node | umbTreeIconStyle}}"></i>' +
'<i class="{{node.cssClass}}" style="{{node.style}}"></i>' +
'<a href="" ng-click="select(this, node, $event)" >{{node.name}}</a>' +
'<i class="umb-options" ng-hide="!node.menuUrl" ng-click="options(this, node, $event)"><i></i><i></i><i></i></i>' +
'<div ng-show="node.loading" class="l"><div></div></div>' +

15
src/Umbraco.Web.UI.Client/src/common/filters/treeiconclass.filter.js
View File

@@ -1,15 +0,0 @@
/**
* @ngdoc filter
* @name umbraco.filters.filter:umbTreeIconClass
* @description This will properly render the tree icon class based on the tree icon set on the server
**/
function treeIconClassFilter(iconHelper) {
return function (treeNode, standardClasses) {
if (treeNode.iconIsClass !== false) {
return standardClasses + " " + iconHelper.convertFromLegacyTreeNodeIcon(treeNode);
}
//we need an 'icon-' class in there for certain styles to work so if it is image based we'll add this
return standardClasses + " icon-custom-file";
};
}
angular.module('umbraco.filters').filter("umbTreeIconClass", treeIconClassFilter);

19
src/Umbraco.Web.UI.Client/src/common/filters/treeiconstyle.filter.js
View File

@@ -1,19 +0,0 @@
/**
* @ngdoc filter
* @name umbraco.filters.filter:umbTreeIconImage
* @description This will properly render the tree icon image based on the tree icon set on the server
**/
function treeIconStyleFilter(iconHelper) {
return function (treeNode) {
if (treeNode.iconIsClass) {
var converted = iconHelper.convertFromLegacyTreeNodeIcon(treeNode);
if (converted.startsWith('.')) {
//its legacy so add some width/height
return "height:16px;width:16px;";
}
return "";
}
return "background-image: url('" + treeNode.iconFilePath + "');height:16px; background-position:2px 0px; background-repeat: no-repeat";
};
}
angular.module('umbraco.filters').filter("umbTreeIconStyle", treeIconStyleFilter);

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

@@ -10,10 +10,11 @@
function treeService($q, treeResource, iconHelper, notificationsService, $rootScope) {
//implement this in local storage
var treeArray = [];
var currentSection = "content";
var standardCssClass = 'icon umb-tree-icon sprTree';
/** ensures there's a routePath, parent and level property on each tree node */
function ensureParentLevelAndView(parentNode, treeNodes, section, level) {
/** ensures there's a routePath, parent and level property on each tree node and
adds some icon specific properties so that the nodes display properly */
function formatNodeDataForUseInUI(parentNode, treeNodes, section, level) {
//if no level is set, then we make it 1
var childLevel = (level ? level : 1);
for (var i = 0; i < treeNodes.length; i++) {
@@ -23,6 +24,24 @@ function treeService($q, treeResource, iconHelper, notificationsService, $rootSc
treeNodes[i].routePath = section + "/edit/" + treeNodes[i].id;
}
treeNodes[i].parent = parentNode;
//now, format the icon data
if (treeNodes[i].iconIsClass) {
var converted = iconHelper.convertFromLegacyTreeNodeIcon(treeNodes[i]);
treeNodes[i].cssClass = standardCssClass + " " + converted;
if (converted.startsWith('.')) {
//its legacy so add some width/height
treeNodes[i].style = "height:16px;width:16px;";
}
else {
treeNodes[i].style = "";
}
}
else {
treeNodes[i].style = "background-image: url('" + treeNodes[i].iconFilePath + "');height:16px; background-position:2px 0px; background-repeat: no-repeat";
//we need an 'icon-' class in there for certain styles to work so if it is image based we'll add this
treeNodes[i].cssClass = standardCssClass + " icon-custom-file";
}
}
}
@@ -166,8 +185,8 @@ function treeService($q, treeResource, iconHelper, notificationsService, $rootSc
alias: section,
root: data
};
//ensure the view is added to each tree node
ensureParentLevelAndView(result.root, result.root.children, section);
//we need to format/modify some of the node data to be used in our app.
formatNodeDataForUseInUI(result.root, result.root.children, section);
//cache this result
//TODO: We'll need to un-cache this in many circumstances
treeArray[cacheKey] = result;
@@ -251,7 +270,7 @@ function treeService($q, treeResource, iconHelper, notificationsService, $rootSc
return treeResource.loadNodes({ section: section, node: treeItem })
.then(function(data) {
//now that we have the data, we need to add the level property to each item and the view
ensureParentLevelAndView(treeItem, data, section, treeItem.level + 1);
formatNodeDataForUseInUI(treeItem, data, section, treeItem.level + 1);
return data;
});
}