Binding HUD - Show promoted PI properties at top of list

3 files changed, 47 insertions, 9 deletions

diff --git a/js/controllers/objects-controller.js b/js/controllers/objects-controller.js
index 6557c14e..f6d400f4 100644
--- a/js/controllers/objects-controller.js
+++ b/js/controllers/objects-controller.js
@@ -150,9 +150,9 @@ var objectsController = exports.ObjectsController = Montage.create(Montage, {
             var properties = [];
 
             for(var key in object) {
-                if(object.hasOwnProperty(key)) {
+                //if(object.hasOwnProperty(key)) {
                         properties.push(key);
-                }
+                //}
             }
 
             if(excludeUnderscoreProperties) {
diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js
index 9918b06d..0f1b99c9 100755
--- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js
+++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js
@@ -45,7 +45,10 @@ exports.BindingHud = Montage.create(Component, {
     optionsRepeater: {
         value: null
     },
-
+    panelData : {
+        value: null,
+        serializable: true
+    },
     _userComponent: { value: null  },
     userComponent: {
         get: function() {
@@ -59,7 +62,7 @@ exports.BindingHud = Montage.create(Component, {
                 isOffStage, icon, iconOffsets;
 
             this._userComponent = val;
-            this.properties = controller.getPropertiesFromObject(val, true);
+            this.properties = this.getPropertyList(val); //controller.getPropertiesFromObject(val, true);
 
             controller.getObjectBindings(this.userComponent).forEach(function(obj) {
                 this.boundProperties.push(obj.sourceObjectPropertyPath);
@@ -84,6 +87,37 @@ exports.BindingHud = Montage.create(Component, {
         }
     },
 
+    getPropertyList : {
+        value: function(component) {
+            var props = this.application.ninja.objectsController.getPropertiesFromObject(component, true);
+
+            var objectName, promotedProperties;
+
+            if(this.userComponent._montage_metadata) {
+                objectName = this.userComponent._montage_metadata.objectName;
+
+                if(this.panelData && this.panelData[objectName + 'Pi']) {
+
+                    promotedProperties = this.panelData[objectName + 'Pi'][0].Section.map(function(item) {
+                        return item[0].prop;
+                    });
+
+                    //// Remove promoted properties from current position in array
+                    props = props.filter(function(prop) {
+                        return promotedProperties.indexOf(prop) === -1;
+                    });
+
+                    //// Add them at the top
+
+                    props = promotedProperties.concat(props);
+
+                }
+            }
+
+            return props;
+        }
+    },
+
     properties: { value: [] },
 
     _isResizing: {
@@ -248,11 +282,11 @@ exports.BindingHud = Montage.create(Component, {
                 if(direction === "down") {
                     this.scrollInterval = setInterval(function() {
                         this.optionsRepeater.element.scrollTop += 3;
-                    }.bind(this), 50);
+                    }.bind(this), 20);
                 } else {
                     this.scrollInterval = setInterval(function() {
                         this.optionsRepeater.element.scrollTop -= 3;
-                    }.bind(this), 50);
+                    }.bind(this), 20);
                 }
             }
         }
@@ -267,11 +301,11 @@ exports.BindingHud = Montage.create(Component, {
                         //e._event.target.parentElement.controller.currentScrollDirection = "down";
                         this.scrollInterval = setInterval(function() {
                             self.optionsRepeater.element.scrollTop += 3;
-                        }, 50);
+                        }, 20);
                     } else {
                         this.scrollInterval = setInterval(function() {
                             self.optionsRepeater.element.scrollTop -= 3;
-                        }, 50);
+                        }, 20);
                     }
                 }
             }
diff --git a/js/stage/binding-view.reel/binding-view.html b/js/stage/binding-view.reel/binding-view.html
index 9eb338d8..b6c5ff40 100755
--- a/js/stage/binding-view.reel/binding-view.html
+++ b/js/stage/binding-view.reel/binding-view.html
@@ -37,7 +37,8 @@
             "hud": {
                 "prototype": "js/stage/binding-view.reel/binding-hud.reel",
                 "properties": {
-                    "element": {"#" : "hud"}
+                    "element": {"#" : "hud"},
+                    "panelData": {"@": "panelData"}
                 },
                 "bindings": {
                     "userComponent": {"<-": "@hudRepeater.objectAtCurrentIteration"}
@@ -48,6 +49,9 @@
                         "listener": {"@": "owner"}
                     }
                 ]
+            },
+            "panelData": {
+                "object": "js/data/pi/pi-data[PiData]"
             }
         }
     </script>