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

Adds native events to the umb-tree directive

Browse Source 
Better and isolated callbacks
This commit is contained in:
Per Ploug Krogslund
2013-07-05 16:08:16 +02:00
parent 0c3d274232
commit 92c797d837
6 changed files with 42 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,14 +10,17 @@ angular.module("umbraco.directives")
section: '@',
showoptions: '@',
showheader: '@',
cachekey: '@'
cachekey: '@',
callback: '='
},
compile: function (element, attrs) {
//config
var hideheader = (attrs.showheader === 'false') ? true : false;
var hideoptions = (attrs.showoptions === 'false') ? "hide-options" : "";
var template = '<ul class="umb-tree ' + hideoptions + '">' +
'<li class="root">';
@@ -27,7 +30,7 @@ angular.module("umbraco.directives")
'</div>';
}
template += '<ul>' +
'<umb-tree-item ng-repeat="child in tree.children" node="child" section="{{section}}"></umb-tree-item>' +
'<umb-tree-item ng-repeat="child in tree.children" node="child" callback="callback" section="{{section}}"></umb-tree-item>' +
'</ul>' +
'</li>' +
'</ul>';

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

@@ -7,6 +7,7 @@ angular.module("umbraco.directives")
scope: {
section: '@',
cachekey: '@',
callback: '=',
node:'='
},
@@ -21,9 +22,16 @@ angular.module("umbraco.directives")
'</li>',
link: function (scope, element, attrs) {
function emitEvent(eventName, args){
if(scope.callback){
$(scope.callback).trigger(eventName,args);
}
}
scope.options = function(e, n, ev){
scope.$emit("treeOptionsClick", {element: e, node: n, event: ev});
emitEvent("treeOptionsClick", {element: e, node: n, event: ev});
};
/**
@@ -38,32 +46,39 @@ angular.module("umbraco.directives")
* @param n {object} The tree node object associated with the click
*/
scope.select = function(e,n,ev){
scope.$emit("treeNodeSelect", { element: e, node: n, event: ev });
emitEvent("treeNodeSelect", { element: e, node: n, event: ev });
};
scope.load = function (arrow, node) {
if (node.expanded){
emitEvent("treeNodeCollapsing", { element: arrow, node: node});
node.expanded = false;
node.children = [];
}else {
emitEvent("treeNodeExpanding", { element: arrow, node: node});
node.loading = true;
treeService.getChildren( { node: node, section: scope.section } )
.then(function (data) {
emitEvent("treeNodeLoaded", { element: arrow, node: node, children: data});
node.loading = false;
// $(arrow).parent().remove(loader);
node.children = data;
node.expanded = true;
emitEvent("treeNodeExpanded", { element: arrow, node: node, children: data});
}, function (reason) {
// $(arrow).parent().remove(loader);
emitEvent("treeNodeLoadError", { element: arrow, node: node, error: reason});
node.loading = false;
notificationsService.error(reason);
//alert(reason);
return;
});
}
@@ -73,7 +88,7 @@ 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" node="child" section="{{section}}"></umb-tree-item></ul>';
var template = '<ul ng-class="{collapsed: !node.expanded}"><umb-tree-item ng-repeat="child in node.children" callback="callback" node="child" section="{{section}}"></umb-tree-item></ul>';
var newElement = angular.element(template);
$compile(newElement)(scope);
element.append(newElement);

7
src/Umbraco.Web.UI.Client/src/views/common/dialogs/contentpicker.controller.js
View File

@@ -1,8 +1,9 @@
//used for the media picker dialog
angular.module("umbraco").controller("Umbraco.Dialogs.ContentPickerController",
angular.module("umbraco").controller("Umbraco.Dialogs.ContentPickerController",
function ($scope) {
$scope.$on("treeNodeSelect", function(event, args){
$scope.treeCallback = $({});
$scope.treeCallback.bind("treeNodeSelect", function(event, args){
args.event.preventDefault();
args.event.stopPropagation();

3
src/Umbraco.Web.UI.Client/src/views/common/dialogs/contentpicker.html
View File

@@ -13,7 +13,8 @@
section="content"
cachekey="pickerDialog"
showheader="false"
showoptions="false">
showoptions="false"
callback="treeCallback">
</umb-tree>
</div>
</div>

9
src/Umbraco.Web.UI.Client/src/views/common/navigation.controller.js
View File

@@ -20,9 +20,12 @@ function NavigationController($scope, $location, navigationService, historyServi
$scope.hideDialog = navigationService.hideDialog;
$scope.hideNavigation = navigationService.hideNavigation;
$scope.ui = navigationService.ui;
//tree event handler everyone can subscribe to
$scope.ui.tree = $({});
$scope.selectedId = navigationService.currentId;
$scope.sections = navigationService.sections;
sectionResource.getSections()
.then(function(result) {
@@ -32,19 +35,17 @@ function NavigationController($scope, $location, navigationService, historyServi
alert(reason);
});
//events
//this reacts to the options item in the tree
$scope.$on("treeOptionsClick", function (ev, args) {
$scope.ui.tree.bind("treeOptionsClick", function (ev, args) {
$scope.currentNode = args.node;
args.scope = $scope;
navigationService.showMenu(ev, args);
});
//this reacts to tree items themselves being clicked
//the tree directive should not contain any handling, simply just bubble events
$scope.$on("treeNodeSelect", function (ev, args) {
$scope.ui.tree.bind("treeNodeSelect", function(ev, args){
var n = args.node;

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

@@ -65,7 +65,7 @@
<!-- the tree -->
<div id="tree" class="span5 umb-scrollable umb-panel" auto-scale="0" ng-animate="'slide'">
<umb-tree section="{{ui.currentTree}}" ></umb-tree>
<umb-tree callback="ui.tree" section="{{ui.currentTree}}" ></umb-tree>
</div>
<!-- The context menu -->