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>

6 files changed, 74 insertions, 3 deletions

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.