From e07ec7dd1a4b8df747f6af0d54fe95e3a237f0c8 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Wed, 14 Mar 2012 11:47:06 -0700
Subject: Removing the name attribute from the PI. Fixing the ID and Class
 attribute from the PI

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 js/controllers/elements/element-controller.js | 17 -------
 js/panels/properties.reel/properties.html     | 70 +++++----------------------
 js/panels/properties.reel/properties.js       | 64 ++++++++++++------------
 3 files changed, 47 insertions(+), 104 deletions(-)

diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js
index 9f00604f..70aba54e 100755
--- a/js/controllers/elements/element-controller.js
+++ b/js/controllers/elements/element-controller.js
@@ -51,23 +51,6 @@ var ElementController = exports.ElementController = Montage.create(NJComponent,
 
     setAttribute: {
         value: function(el, att, value) {
-            if(att === "id") {
-                if(value === "") {
-                    el.setAttribute(att, value);
-                    return;
-                }
-
-                // Then check if this is a valid id by the following spec: http://www.w3.org/TR/REC-html40/types.html#h-6.2
-                var regexID = /^([a-zA-Z])+([a-zA-Z0-9_\.\:\-])+/;
-                if(!regexID.test(value)) {
-                    alert("Invalid ID");
-                    return;
-                } else if (this.application.ninja.currentDocument._document.getElementById(value) !== null) {
-                    alert("The following ID: " + value + " is already in Use");
-                }
-
-            }
-
             el.setAttribute(att, value);
         }
     },
diff --git a/js/panels/properties.reel/properties.html b/js/panels/properties.reel/properties.html
index 72a6def6..bcf54b95 100755
--- a/js/panels/properties.reel/properties.html
+++ b/js/panels/properties.reel/properties.html
@@ -10,35 +10,19 @@
         <link rel="stylesheet" href="properties.css" type="text/css">
         <script type="text/montage-serialization">
         {
-            "elementNameInput1": {
-                "module": "montage/ui/textfield.reel",
-                "name": "Textfield",
+            "elementName": {
+                "prototype": "montage/ui/textfield.reel",
                 "properties": {
                     "element": {"#": "elementName"},
                     "readOnly": true
-                },
-                "bindings": {
-                    "value": {
-                        "boundObject": {"@": "owner"},
-                        "boundObjectPropertyPath": "elementName",
-                        "oneway": true
-                    }
                 }
             },
 
-            "elementID": {
-                "module": "montage/ui/textfield.reel",
-                "name": "Textfield",
+            "elementId": {
+                "prototype": "montage/ui/textfield.reel",
                 "properties": {
-                    "element": {"#": "elementID"},
+                    "element": {"#": "elementId"},
                     "readOnly": false
-                },
-                "bindings": {
-                    "value": {
-                        "boundObject": {"@": "owner"},
-                        "boundObjectPropertyPath": "elementID",
-                        "oneway": true
-                    }
                 }
             },
 
@@ -46,35 +30,11 @@
                 "module": "montage/ui/textfield.reel",
                 "name": "Textfield",
                 "properties": {
-                    "element": {"#": "elementClassName"},
+                    "element": {"#": "elementClass"},
                     "readOnly": false
-                },
-                "bindings": {
-                    "value": {
-                        "boundObject": {"@": "owner"},
-                        "boundObjectPropertyPath": "elementClassName",
-                        "oneway": true
-                    }
-                }
-            },
-
-            "elementNameAttribute": {
-                "module": "montage/ui/textfield.reel",
-                "name": "Textfield",
-                "properties": {
-                    "element": {"#": "elementNameAttribute"},
-                    "readOnly": false
-                },
-                "bindings": {
-                    "value": {
-                        "boundObject": {"@": "owner"},
-                        "boundObjectPropertyPath": "nameAttribute",
-                        "oneway": false
-                    }
                 }
             },
 
-
             "PosSizeSection": {
                 "module": "js/panels/properties.reel/section.reel",
                 "name": "Section",
@@ -142,9 +102,9 @@
                 "name": "Properties",
                 "properties": {
                     "element":              {"#": "propertiesPanel"},
-                    "elementNameInput":     {"@": "elementNameInput1"},
-                    "elementId":            {"@": "elementID"},
-                    "elementNameAttribute": {"@": "elementNameAttribute"},
+                    "elementName":          {"@": "elementName"},
+                    "elementClass":         {"@": "elementClass"},
+                    "elementId":            {"@": "elementId"},
                     "positionSize":         {"@": "PosSize"},
                     "threeD":               {"@": "threeDProperties"}
                 }
@@ -156,21 +116,17 @@
     <section id="propertiesPanel" class="propertiesPanel">
         <section class="sectional">
             <section class="fieldCol">
-                <label id="lblElement">Element:</label>
+                <label>Element:</label>
                 <article class="fieldRow"><input type="text" id="elementName" class="nj-skinned" readonly="readonly"></article>
             </section>
             <section class="fieldCol">
-                <label id="lblID">ID:</label>
-                <article class="fieldRow"><input type="text" id="elementID" class="nj-skinned" /></article>
+                <label>ID:</label>
+                <article class="fieldRow"><input type="text" id="elementId" class="nj-skinned" /></article>
             </section>
             <section class="fieldCol">
-                <label id="lblClass">Class:</label>
+                <label>Class:</label>
                 <article class="fieldRow"><input type="text" id="elementClassName" class="nj-skinned" /></article>
             </section>
-            <section class="fieldCol">
-                <label id="lblName">Name:</label>
-                <article class="fieldRow"><input type="text" id="elementNameAttribute" class="nj-skinned" /></article>
-            </section>
         </section>
         <section id="PosSize"></section>
         <section id="customSections">
diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js
index 947d7937..f35bf2e0 100755
--- a/js/panels/properties.reel/properties.js
+++ b/js/panels/properties.reel/properties.js
@@ -17,15 +17,11 @@ exports.Properties = Montage.create(Component, {
         value: null
     },
 
-    elementID: {
+    elementId: {
         value: null
     },
 
-    elementClassName: {
-        value: null
-    },
-
-    nameAttribute: {
+    elementClass: {
         value: null
     },
 
@@ -60,6 +56,14 @@ exports.Properties = Montage.create(Component, {
 
             this.eventManager.addEventListener("openDocument", this, false);
             this.eventManager.addEventListener("switchDocument", this, false);
+
+            this.elementId.element.addEventListener("blur", this, false);
+            this.elementId.element.addEventListener("focus", this, false);
+            this.elementId.element.addEventListener("keyup", this, false);
+
+            this.elementClass.element.addEventListener("blur", this, false);
+            this.elementClass.element.addEventListener("focus", this, false);
+            this.elementClass.element.addEventListener("keyup", this, false);
         }
     },
 
@@ -73,12 +77,6 @@ exports.Properties = Montage.create(Component, {
             if(this.application.ninja.selectedElements.length === 0) {
                 this.displayStageProperties();
             }
-
-            this.elementId.element.addEventListener("blur", this, false);
-            this.elementId.element.addEventListener("keyup", this, false);
-
-            this.elementNameAttribute.element.addEventListener("blur", this, false);
-            this.elementNameAttribute.element.addEventListener("keyup", this, false);
         }
     },
 
@@ -87,7 +85,7 @@ exports.Properties = Montage.create(Component, {
             // For now always assume that the stage is selected by default
             if(this.application.ninja.selectedElements.length === 0) {
                 this.displayStageProperties();
-            }else {
+            } else {
                 if(this.application.ninja.selectedElements.length === 1) {
                     this.displayElementProperties(this.application.ninja.selectedElements[0]._element);
                 } else {
@@ -102,17 +100,29 @@ exports.Properties = Montage.create(Component, {
      */
     handleBlur: {
         value: function(event) {
-            console.log(event.target);
-            if(event.target.id === "elementID") {
+
+            if(event.target.id === "elementId") {
+
+                // Remove all white spaces from the id
+                this.elementId.value = this.elementId.value.replace(/\s/g, '');
+
+                // Check if that id is in use
+                if(this.application.ninja.currentDocument._document.getElementById(this.elementId.value) !== null) {
+                    // TODO: Replace with Ninja Alert
+                    alert("The following ID: " + this.elementId.value + " is already in use");
+                }
+
                 if(this.application.ninja.selectedElements.length) {
                     ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "id", this.elementId.value, "Change", "pi");
                 } else {
                     ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "id", this.elementId.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.id);
                 }
-            } else if(event.target.id === "elementNameAttribute") {
+            } else if(event.target.id === "elementClass") {
                 if(this.application.ninja.selectedElements.length) {
-                    //ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "name", this.elementNameAttribute.value, "Change", "pi");
-                    this.application.ninja.selectedElements[0]._element.setAttribute("name", this.elementNameAttribute.value);
+                    ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "class", this.elementClass.value, "Change", "pi");
+                    console.log(this.application.ninja.selectedElements[0]._element.className);
+                } else {
+                    ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "class", this.elementClass.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.elementClass);
                 }
             }
         }
@@ -121,11 +131,7 @@ exports.Properties = Montage.create(Component, {
     handleKeyup: {
         value: function(event) {
             if(event.keyCode === 13) {
-                if(event.target === "elementID") {
-                    this.elementId.element.blur();
-                } else if(event.target === "elementNameAttribute") {
-                    this.elementNameAttribute.element.blur();
-                }
+                event.target.blur();
             }      
         }
     },
@@ -180,10 +186,9 @@ exports.Properties = Montage.create(Component, {
         value: function() {
             var stage = this.application.ninja.currentDocument.documentRoot;
             //this is test code please remove
-            this.elementName = "Stage";
+            this.elementName.value = "Stage";
             this.elementId.value = stage.elementModel.id;
-            this.elementClassName = "";
-            this.nameAttribute = "";
+            this.elementClass.value = "";
 
             this.positionSize.disablePosition = true;
             this.threeD.disableTranslation = true;
@@ -243,10 +248,9 @@ exports.Properties = Montage.create(Component, {
             var customPI,
                 currentValue;
 
-            this.elementName = el.elementModel.selection;
+            this.elementName.value = el.elementModel.selection;
             this.elementId.value = el.getAttribute("id") || "";
-            this.elementClassName = el.getAttribute("class");
-            this.nameAttribute = el.getAttribute("name") || "";
+            this.elementClass.value = el.getAttribute("class");
 
             this.positionSize.disablePosition = false;
             this.threeD.disableTranslation = false;
@@ -358,7 +362,7 @@ exports.Properties = Montage.create(Component, {
 
     displayGroupProperties: {
         value: function (els) {
-            this.elementName = "Multiple Elements";
+            this.elementName.value = "Multiple Elements";
         }
     },
 
-- 
cgit v1.2.3


From a7cb2c0b22f03b79f19d4a9a2eb691d1ccc392f9 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Wed, 14 Mar 2012 18:04:11 -0700
Subject: adding a focus manager to handle panel bugs where blur was not
 getting called when clicking on the canvas.

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 js/components/focus-manager.reel/focus-manager.js | 49 +++++++++++++++++++++++
 js/ninja.reel/ninja.css                           |  4 ++
 js/ninja.reel/ninja.html                          | 11 ++++-
 js/panels/properties.reel/properties.html         |  2 +-
 js/stage/stage.reel/stage.html                    |  7 +++-
 js/stage/stage.reel/stage.js                      |  4 ++
 6 files changed, 74 insertions(+), 3 deletions(-)
 create mode 100644 js/components/focus-manager.reel/focus-manager.js

diff --git a/js/components/focus-manager.reel/focus-manager.js b/js/components/focus-manager.reel/focus-manager.js
new file mode 100644
index 00000000..65a84bc1
--- /dev/null
+++ b/js/components/focus-manager.reel/focus-manager.js
@@ -0,0 +1,49 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+
+var Montage = require("montage/core/core").Montage,
+    Component = require("montage/ui/component").Component;
+
+exports.FocusManager = Montage.create(Component, {
+
+    hasTemplate: {
+        value: false
+    },
+
+    element: {
+        serializable: true,
+        enumerable: true,
+        get: function() {
+            return this._element;
+        },
+        set: function(value) {
+            // call super set
+            Object.getPropertyDescriptor(Component, "element").set.call(this, value);
+        }
+    },
+
+    hiddenInput: {
+        value: null
+    },
+
+    prepareForDraw: {
+        value: function() {
+            this.hiddenInput = document.createElement("input");
+            this.hiddenInput.type = "text";
+
+            this.element.appendChild(this.hiddenInput);
+
+        }
+    },
+
+    setFocus: {
+        value: function() {
+            this.hiddenInput.focus();
+        }
+    }
+
+});
+
diff --git a/js/ninja.reel/ninja.css b/js/ninja.reel/ninja.css
index 83c0e569..61251eff 100755
--- a/js/ninja.reel/ninja.css
+++ b/js/ninja.reel/ninja.css
@@ -7,3 +7,7 @@
 .main {
     padding: 100px;
 }
+
+.hidden {
+    display: none;
+}
diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html
index 3dc45498..f9e1efdd 100755
--- a/js/ninja.reel/ninja.html
+++ b/js/ninja.reel/ninja.html
@@ -287,6 +287,13 @@
                 "name": "MainMenuController"
             },
 
+            "focusManager": {
+                "object": "js/components/focus-manager.reel",
+                "properties": {
+                    "element": {"#": "focus-container" }
+                }
+            },
+
             "owner": {
                 "module": "js/ninja.reel",
                 "name": "Ninja",
@@ -396,7 +403,9 @@
 
             <section data-montage-id="bottomSplitter" class="bottomSplitter splitter"></section>
         </section>
-        
+
+        <div data-montage-id="focus-container" class="hidden"></div>
+
         <section id="popupWindows"></section>
 
     </div>
diff --git a/js/panels/properties.reel/properties.html b/js/panels/properties.reel/properties.html
index bcf54b95..d212ae80 100755
--- a/js/panels/properties.reel/properties.html
+++ b/js/panels/properties.reel/properties.html
@@ -125,7 +125,7 @@
             </section>
             <section class="fieldCol">
                 <label>Class:</label>
-                <article class="fieldRow"><input type="text" id="elementClassName" class="nj-skinned" /></article>
+                <article class="fieldRow"><input type="text" id="elementClass" class="nj-skinned" /></article>
             </section>
         </section>
         <section id="PosSize"></section>
diff --git a/js/stage/stage.reel/stage.html b/js/stage/stage.reel/stage.html
index 812e3d55..f796303c 100755
--- a/js/stage/stage.reel/stage.html
+++ b/js/stage/stage.reel/stage.html
@@ -50,6 +50,10 @@
                     "element" : {"#": "textToolObject"}
                 }
             },
+
+            "focusManager": {
+                "object": "js/components/focus-manager.reel"
+            },
             
             "owner": {
                 "module": "js/stage/stage.reel",
@@ -63,7 +67,8 @@
                     "stageDeps": {"@": "StageDeps1"},
                     "layout":   {"@": "layout1"},
 					"stageView": {"@": "stageView"},
-                    "textTool": {"@": "textTool"}
+                    "textTool": {"@": "textTool"},
+                    "focusManager": {"@": "focusManager"}
                 },
                 "bindings": {
                     "currentDocumentStageView": {
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index 4c1d046b..a624b2c6 100755
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -319,6 +319,10 @@ exports.Stage = Montage.create(Component, {
 
     handleMousedown: {
         value: function(event) {
+            // Call the focus manager to set focus to blur any focus'd elements
+            this.focusManager.setFocus();
+
+
             var point;
 //            event.preventDefault();   // commenting because HTML elements in the IDE are retaining focus
             // If right click set the context menu to true to prevent a mouse up.
-- 
cgit v1.2.3


From da5dfc8863ad47c48414ff1fdacbacdb91abd30c Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Wed, 14 Mar 2012 23:25:34 -0700
Subject: Fixing the splitter resize canvas bug by getting the size when a
 document is opened.

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 js/panels/Splitter.js        | 6 ------
 js/stage/stage.reel/stage.js | 7 +++++--
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/js/panels/Splitter.js b/js/panels/Splitter.js
index a396ea28..e92cb2dd 100755
--- a/js/panels/Splitter.js
+++ b/js/panels/Splitter.js
@@ -91,12 +91,6 @@ exports.Splitter = Montage.create(Component, {
         }
     },
 
-    didDraw: {
-        value: function() {
-            this.application.ninja.stage.resizeCanvases = true;
-        }
-    },
-
     handleClick : {
         value: function() {
             if (!this.disabled) {
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index a624b2c6..e139af97 100755
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -170,8 +170,7 @@ exports.Stage = Montage.create(Component, {
 
                 // Hack for now until a full component
                 this.layout.draw();
-            }
-            else if(this.updatedStage) {
+            } else if(this.updatedStage) {
                 this.layout.draw();
                 this.layout.draw3DInfo(true);
             }
@@ -235,6 +234,10 @@ exports.Stage = Montage.create(Component, {
 
             this.hideCanvas(false);
 
+            // Recalculate the canvas sizes because of splitter resizing
+            this._canvas.width = this._layoutCanvas.width = this._drawingCanvas.width = this.element.offsetWidth - 11 ;
+            this._canvas.height = this._layoutCanvas.height = this._drawingCanvas.height = this.element.offsetHeight - 11;
+
             this._documentRoot = this.application.ninja.currentDocument.documentRoot;
             this._viewport = this.application.ninja.currentDocument.documentRoot.parentNode;
 
-- 
cgit v1.2.3