From fea28df758e1c8012b0b87e993219e8b9568e8c8 Mon Sep 17 00:00:00 2001
From: Shannon Deminick <sdeminick@gmail.com>
Date: Tue, 4 Jun 2013 15:59:14 -1000
Subject: [PATCH] Fixed more tree merge issues, fixed how property editors are
 rendered.

---
 .../Views/directives/umb-leftcolumn.html      |   3 +-
 .../Views/directives/umb-property.html        |  19 +++
 .../umbraco/js/umbraco.directives.js          | 158 +++++++++++-------
 .../umbraco/js/umbraco.filters.js             |  29 +++-
 .../UI/JavaScript/RequireJsConfig.js          |   3 +-
 .../UI/JavaScript/RequireJsInitialize.js      |   3 +-
 6 files changed, 146 insertions(+), 69 deletions(-)
 create mode 100644 src/Umbraco.Web.UI/umbraco/Views/directives/umb-property.html

diff --git a/src/Umbraco.Web.UI/umbraco/Views/directives/umb-leftcolumn.html b/src/Umbraco.Web.UI/umbraco/Views/directives/umb-leftcolumn.html
index 300db83a34..8de56c7978 100644
--- a/src/Umbraco.Web.UI/umbraco/Views/directives/umb-leftcolumn.html
+++ b/src/Umbraco.Web.UI/umbraco/Views/directives/umb-leftcolumn.html
@@ -27,7 +27,8 @@
 
     <!-- navigation container -->
     <div id="navigation" class="fill shadow umb-panel umb-modalcolumn"
-       >
+            ng-show="ui.showNavigation" 
+            ng-animate="'slide'">
         <!-- the search -->
         <div id="search-form" ng-animate="'slide'">
             <div class="umb-panel-header">
diff --git a/src/Umbraco.Web.UI/umbraco/Views/directives/umb-property.html b/src/Umbraco.Web.UI/umbraco/Views/directives/umb-property.html
new file mode 100644
index 0000000000..d30d0fe541
--- /dev/null
+++ b/src/Umbraco.Web.UI/umbraco/Views/directives/umb-property.html
@@ -0,0 +1,19 @@
+<div class="umb-pane">
+
+    <div class="control-group umb-control-group"
+         ng-class="{hidelabel:model.hideLabel}" >
+
+        <div class="umb-el-wrap">
+
+            <label class="control-label" ng-hide="model.hideLabel" for="{{model.alias}}">
+
+                {{model.label}}
+                <small>{{model.description}}</small>
+            </label>
+
+            <div class="controls controls-row" >
+               <ng-include src="model.editorView | propertyEditor"></ng-include>    
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/src/Umbraco.Web.UI/umbraco/js/umbraco.directives.js b/src/Umbraco.Web.UI/umbraco/js/umbraco.directives.js
index 16f3a21307..cda7d4e49c 100644
--- a/src/Umbraco.Web.UI/umbraco/js/umbraco.directives.js
+++ b/src/Umbraco.Web.UI/umbraco/js/umbraco.directives.js
@@ -301,7 +301,37 @@ angular.module('umbraco.directives', [])
         restrict: 'E',
         replace: true,
         transclude: 'true',
-        templateUrl: 'views/directives/umb-property.html'
+        templateUrl: 'views/directives/umb-property.html',
+        link: function (scope, element, attrs) {
+            //let's make a requireJs call to try and retrieve the associated js 
+            // for this view, only if its an absolute path, meaning its external to umbraco
+            if (scope.model.view && scope.model.view != "" && scope.model.view.startsWith('/')) {
+                //get the js file which exists at ../Js/EditorName.js
+                var lastSlash = scope.model.view.lastIndexOf("/");
+                var fullViewName = scope.model.view.substring(lastSlash + 1, scope.model.view.length);
+                var viewName = fullViewName.indexOf(".") > 0
+                    ? fullViewName.substring(0, fullViewName.indexOf("."))
+                    : fullViewName;
+                var jsPath = scope.model.view.substring(0, lastSlash + 1) + "../Js/" + viewName + ".js";
+                require([jsPath],
+                    function () {
+                        //the script loaded so load the view
+                        //NOTE: The use of $apply because we're operating outside of the angular scope with this callback.
+                        scope.$apply(function () {
+                            scope.model.editorView = scope.model.view;
+                        });
+                    }, function (err) {
+                        //an error occurred... most likely there is no JS file to load for this editor
+                        //NOTE: The use of $apply because we're operating outside of the angular scope with this callback.
+                        scope.$apply(function () {
+                            scope.model.editorView = scope.model.view;
+                        });
+                    });
+            }
+            else {
+                scope.model.editorView = scope.model.view;
+            }
+        }
     };
 })
 
@@ -392,83 +422,93 @@ angular.module('umbraco.directives', [])
                       .then(function (data) {
                           //set the data once we have it
                           scope.tree = data;
+                          template = rootTemplate;
+
+                          var newElement = angular.element(template);
+                          $compile(newElement)(scope);
+                          element.replaceWith(newElement);
+
                       }, function (reason) {
                           alert(reason);
                           return;
-                      });
-
-                  template = rootTemplate;
+                      });                                   
               }
               else {
                   template = itemTemplate + treeTemplate;
-              }
 
-              var newElement = angular.element(template);
-              $compile(newElement)(scope);
-              element.replaceWith(newElement);
+                  var newElement = angular.element(template);
+                  $compile(newElement)(scope);
+                  element.replaceWith(newElement);
+              }
           }
 
           scope.$watch("section", function (newVal, oldVal) {
               if (newVal !== oldVal) {
+                  $log.info("loading tree for section " + newVal);
                   loadTree();
               }
           });
           loadTree();
       }
   };
-})
-
-.directive('include', function($compile, $http, $templateCache, $interpolate, $log) {
-
-  $log.log("loading view");
-
-  // Load a template, possibly from the $templateCache, and instantiate a DOM element from it
-  function loadTemplate(template) {
-    return $http.get(template, {cache:$templateCache}).then(function(response) {
-      return angular.element(response.data);
-    }, function(response) {
-      throw new Error('Template not found: ' + template);
-    });
-  }
-
-  return {
-    restrict:'E',
-    priority: 100,        // We need this directive to happen before ng-model
-    terminal: false,       // We are going to deal with this element
-    compile: function(element, attrs) {
-      // Extract the label and validation message info from the directive's original element
-      //var validationMessages = getValidationMessageMap(element);
-      //var labelContent = getLabelContent(element);
-
-      // Clear the directive's original element now that we have extracted what we need from it
-      element.html('');
-
-      return function postLink(scope, element, attrs) {
-
-        var path = scope.$eval(attrs.template);
-
-        // Load up the template for this kind of field, default to the simple input if none given
-        loadTemplate(path || 'error.html').then(function(templateElement) {
-          // Set up the scope - the template will have its own scope, which is a child of the directive's scope
-          var childScope = scope.$new();
-          
-          // Place our template as a child of the original element.
-          // This needs to be done before compilation to ensure that it picks up any containing form.
-          element.append(templateElement);
-
-          // We now compile and link our template here in the postLink function
-          // This allows the ng-model directive on our template's <input> element to access the ngFormController
-          $compile(templateElement)(childScope);
-
-          // Now that our template has been compiled and linked we can access the <input> element's ngModelController
-          //childScope.$field = inputElement.controller('ngModel');
-        });
-      };
-    }
-  };
 });
 
-
+    /*** not sure why we need this, we already have ng-include which should suffice ? unless its so we can load in the error ?
+        The other problem with this directive is that it runs too early. If we change the ng-include on umb-property to use
+        this directive instead, it the template will be empty because the actual umbProperty directive hasn't executed 
+        yet, this seems to execute before it.
+    
+    .directive('include', function($compile, $http, $templateCache, $interpolate, $log) {
+    
+      $log.log("loading view");
+    
+      // Load a template, possibly from the $templateCache, and instantiate a DOM element from it
+      function loadTemplate(template) {
+        return $http.get(template, {cache:$templateCache}).then(function(response) {
+          return angular.element(response.data);
+        }, function(response) {
+          throw new Error('Template not found: ' + template);
+        });
+      }
+    
+      return {
+        restrict:'E',
+        priority: 100,        // We need this directive to happen before ng-model
+        terminal: false,       // We are going to deal with this element
+        compile: function(element, attrs) {
+          // Extract the label and validation message info from the directive's original element
+          //var validationMessages = getValidationMessageMap(element);
+          //var labelContent = getLabelContent(element);
+    
+          // Clear the directive's original element now that we have extracted what we need from it
+          element.html('');
+    
+          return function postLink(scope, element, attrs) {
+    
+            var path = scope.$eval(attrs.template);
+    
+            // Load up the template for this kind of field, default to the simple input if none given
+            loadTemplate(path || 'error.html').then(function(templateElement) {
+              // Set up the scope - the template will have its own scope, which is a child of the directive's scope
+              var childScope = scope.$new();
+              
+              // Place our template as a child of the original element.
+              // This needs to be done before compilation to ensure that it picks up any containing form.
+              element.append(templateElement);
+    
+              // We now compile and link our template here in the postLink function
+              // This allows the ng-model directive on our template's <input> element to access the ngFormController
+              $compile(templateElement)(childScope);
+    
+              // Now that our template has been compiled and linked we can access the <input> element's ngModelController
+              //childScope.$field = inputElement.controller('ngModel');
+            });
+          };
+        }
+      };
+    });
+    
+    */
 
 return angular;
 });
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI/umbraco/js/umbraco.filters.js b/src/Umbraco.Web.UI/umbraco/js/umbraco.filters.js
index 1524fbf0d2..75bcd48c9c 100644
--- a/src/Umbraco.Web.UI/umbraco/js/umbraco.filters.js
+++ b/src/Umbraco.Web.UI/umbraco/js/umbraco.filters.js
@@ -9,7 +9,6 @@ define(['app', 'angular'], function (app, angular) {
     /**
     * @ngdoc filter 
     * @name umbraco.filters:umbTreeIconImage
-    * @restrict E
     * @description This will properly render the tree icon image based on the tree icon set on the server
     **/
     function treeIconStyleFilter(treeIconHelper) {
@@ -30,7 +29,6 @@ define(['app', 'angular'], function (app, angular) {
     /**
     * @ngdoc filter 
     * @name umbraco.filters:umbTreeIconClass
-    * @restrict E
     * @description This will properly render the tree icon class based on the tree icon set on the server
     **/
     function treeIconClassFilter(treeIconHelper) {
@@ -45,6 +43,27 @@ define(['app', 'angular'], function (app, angular) {
     angular.module('umbraco').filter("umbTreeIconClass", treeIconClassFilter);
 
 
+    /**
+    * @ngdoc filter 
+    * @name umbraco.filters:propertyEditor
+    * @description This will ensure that the view for the property editor is rendered correctly, meaning it will check for an absolute path, otherwise load it in the normal umbraco path
+    **/
+    function propertyEditorFilter($log) {
+        return function (input) {
+            //if its not defined then return undefined
+            if (!input) return input;
+
+            $log.info("Filtering property editor view: " + input);
+
+            var path = String(input);
+            if (path.startsWith('/')) {
+                return path;
+            }
+            else {
+                return "views/propertyeditors/" + path.replace('.', '/') + "/editor.html";
+            }            
+        };
+    }
 
     angular.module('umbraco.filters', ["umbraco.services.tree"])
         .filter('interpolate', ['version', function(version) {
@@ -52,11 +71,7 @@ define(['app', 'angular'], function (app, angular) {
                 return String(text).replace(/\%VERSION\%/mg, version);
             };
         }])
-        .filter('propertyEditor', function() {
-            return function(input) {
-                return "views/propertyeditors/" + String(input).replace('.', '/') + "/editor.html";
-            };
-        });
+        .filter('propertyEditor', propertyEditorFilter);
 
 return app;
 });
\ No newline at end of file
diff --git a/src/Umbraco.Web/UI/JavaScript/RequireJsConfig.js b/src/Umbraco.Web/UI/JavaScript/RequireJsConfig.js
index 4e6fbf6214..81c2662fc6 100644
--- a/src/Umbraco.Web/UI/JavaScript/RequireJsConfig.js
+++ b/src/Umbraco.Web/UI/JavaScript/RequireJsConfig.js
@@ -19,7 +19,8 @@
         tinymce: '../lib/tinymce/tinymce.min',
         text: '../lib/require/text',
         async: '../lib/require/async',
-        css: '../lib/require/css'
+        css: '../lib/require/css',
+        namespaceMgr: '../lib/Umbraco/NamespaceManager',
     },
     shim: {
         'umbracoExtensions' : {'exports' : 'umbracoExtensions'},
diff --git a/src/Umbraco.Web/UI/JavaScript/RequireJsInitialize.js b/src/Umbraco.Web/UI/JavaScript/RequireJsInitialize.js
index 235cb7de9c..9073e741b2 100644
--- a/src/Umbraco.Web/UI/JavaScript/RequireJsInitialize.js
+++ b/src/Umbraco.Web/UI/JavaScript/RequireJsInitialize.js
@@ -12,5 +12,6 @@
     'umbraco.controllers',
     'sample.propertyeditor.controller',
     'sampletwo.propertyeditor.controller',
-    'routes'
+    'routes',
+    'namespaceMgr'
 ]
\ No newline at end of file