Address #609 for the active profile view, add a 'model' property that…

… the expander can use to set the expanded property on the model
hawtio · Oct 3, 2013 · 6249c45 · 6249c45
1 parent 68e9c57
commit 6249c45
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 26 deletions.
diff --git a/hawtio-web/src/main/webapp/app/fabric/html/activeProfileList.html b/hawtio-web/src/main/webapp/app/fabric/html/activeProfileList.html
@@ -25,7 +25,7 @@
 
   </div>
   <div class="active-profile-list" ng-repeat="profile in activeProfiles" ng-show="profileMatchesFilter(profile)">
-    <div class="expandable" ng-class="isOpen(profile)">
+    <div class="expandable" model="profile">
       <div class="active-profile-row">
         <div class="title active-profile-expander">
           <i class="expandable-indicator" ng-show="profile.count"></i>

diff --git a/hawtio-web/src/main/webapp/app/fabric/js/containerAndProfileDirectives.ts b/hawtio-web/src/main/webapp/app/fabric/js/containerAndProfileDirectives.ts
@@ -145,7 +145,7 @@ module Fabric {
             $scope.currentPage = $templateCache.get("addProfileRequirements");
           }
         }
-      })
+      });
 
 
       $scope.updateActiveContainers = () => {
@@ -156,8 +156,10 @@ module Fabric {
           var ap = activeProfiles.find((ap) => { return ap.id === activeProfile.id && ap.versionId === activeProfile.versionId });
           if (ap) {
             activeProfile['selected'] = ap.selected;
+            activeProfile['expanded'] = ap.expanded;
           } else {
             activeProfile['selected'] = false;
+            activeProfile['expanded'] = false;
           }
         });
       };

diff --git a/hawtio-web/src/main/webapp/app/ui/js/expandableDirective.ts b/hawtio-web/src/main/webapp/app/ui/js/expandableDirective.ts
@@ -5,37 +5,112 @@ module UI {
     public restrict = 'C';
     public replace = false;
 
-    public link = function (scope, element, attrs) {
-      var expandable = $(element);
+    public open(model, expandable, scope) {
+      expandable.find('.expandable-body').slideDown(400, function() {
+        expandable.toggleClass('opened');
+        expandable.toggleClass('closed');
+        if (model) {
+          model['expanded'] = true;
+        }
+        Core.$apply(scope);
+      });
+    }
 
-      var title = expandable.find('.title');
-      var button = expandable.find('.cancel');
+    public close(model, expandable, scope) {
+      expandable.find('.expandable-body').slideUp(400, function() {
+        expandable.toggleClass('opened');
+        expandable.toggleClass('closed');
+        if (model) {
+          model['expanded'] = false;
+        }
+        Core.$apply(scope);
+      });
+    }
 
-      button.bind('click', function () {
-        expandable.find('.expandable-body').slideUp(400, function() {
+    public forceClose(model, expandable, scope) {
+      expandable.find('.expandable-body').slideUp(0, function() {
+        if (!expandable.hasClass('closed')) {
           expandable.addClass('closed');
-          expandable.removeClass('opened');
-        });
-        return false;
+        }
+        expandable.removeClass('opened');
+        if (model) {
+          model['expanded'] = false;
+        }
+        Core.$apply(scope);
       });
+    }
 
-      title.bind('click', function () {
-        if (expandable.hasClass('opened')) {
-          expandable.find('.expandable-body').slideUp(400, function() {
-            expandable.toggleClass('opened');
-            expandable.toggleClass('closed');
-            Core.$apply(scope);
-          });
-        } else {
-          expandable.find('.expandable-body').slideDown(400, function() {
-            expandable.toggleClass('opened');
-            expandable.toggleClass('closed');
-            Core.$apply(scope);
-          });
+    public forceOpen(model, expandable, scope) {
+      expandable.find('.expandable-body').slideDown(0, function() {
+        if (!expandable.hasClass('opened')) {
+          expandable.addClass('opened');
+        }
+        expandable.removeClass('closed');
+        if (model) {
+          model['expanded'] = true;
         }
-        return false;
+        Core.$apply(scope);
       });
-    };
+    }
+
+    public link = null;
+
+    constructor() {
+
+      this.link = (scope, element, attrs) => {
+        var self = this;
+        var expandable = element;
+        var modelName = null;
+        var model = null;
+
+        if (angular.isDefined(attrs['model'])) {
+
+          modelName = attrs['model'];
+          model = scope[modelName];
+
+          if (!angular.isDefined(scope[modelName]['expanded'])) {
+            model['expanded'] = expandable.hasClass('opened');
+          } else {
+            if (model['expanded']) {
+              self.forceOpen(model, expandable, scope);
+            } else {
+              self.forceClose(model, expandable, scope);
+            }
+          }
+
+          /*
+          scope.$watch(modelName + '.expanded', (newValue, oldValue) => {
+
+            console.log("model: " + angular.toJson(model));
+            console.log(modelName + ".expanded: ", newValue);
+
+            if (newValue !== oldValue) {
+
+            }
+          });
+          */
+        }
+
+        var title = expandable.find('.title');
+        var button = expandable.find('.cancel');
+
+        button.bind('click', function () {
+          self.forceClose(model, expandable, scope);
+          return false;
+        });
+
+        title.bind('click', function () {
+          if (expandable.hasClass('opened')) {
+            self.close(model, expandable, scope);
+          } else {
+            self.open(model, expandable, scope);
+          }
+          return false;
+        });
+      };
+
+    }
+
 
   }