From c8fa22c7671e1f4a1e8f14d7a488967f4f7167b1 Mon Sep 17 00:00:00 2001
From: perploug <pph@umbraco.dk>
Date: Fri, 4 Oct 2013 14:00:43 +0200
Subject: [PATCH] Tree can now sync, only need to bridge it with the old legacy
 umbClient calls

---
 .../common/directives/umbtree.directive.js    | 19 +++++-
 .../directives/umbtreeitem.directive.js       | 63 ++++++++++++-------
 .../src/common/services/navigation.service.js | 31 ++++++++-
 .../src/views/directives/umb-navigation.html  |  8 ++-
 4 files changed, 91 insertions(+), 30 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/umbtree.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/umbtree.directive.js
index 389954ea71..d964fb8901 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/umbtree.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/umbtree.directive.js
@@ -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
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/umbtreeitem.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/umbtreeitem.directive.js
index 9a4add773d..6daba032f0 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/umbtreeitem.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/umbtreeitem.directive.js
@@ -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);
diff --git a/src/Umbraco.Web.UI.Client/src/common/services/navigation.service.js b/src/Umbraco.Web.UI.Client/src/common/services/navigation.service.js
index 70d7dc577c..8457a6f198 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/navigation.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/navigation.service.js
@@ -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
diff --git a/src/Umbraco.Web.UI.Client/src/views/directives/umb-navigation.html b/src/Umbraco.Web.UI.Client/src/views/directives/umb-navigation.html
index 8d58bf238a..eb169d2218 100644
--- a/src/Umbraco.Web.UI.Client/src/views/directives/umb-navigation.html
+++ b/src/Umbraco.Web.UI.Client/src/views/directives/umb-navigation.html
@@ -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>