aboutsummaryrefslogtreecommitdiff
path: root/js/panels/properties.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/properties.reel')
-rwxr-xr-xjs/panels/properties.reel/properties.html72
-rwxr-xr-xjs/panels/properties.reel/properties.js64
2 files changed, 48 insertions, 88 deletions
diff --git a/js/panels/properties.reel/properties.html b/js/panels/properties.reel/properties.html
index 72a6def6..d212ae80 100755
--- a/js/panels/properties.reel/properties.html
+++ b/js/panels/properties.reel/properties.html
@@ -10,35 +10,19 @@
10 <link rel="stylesheet" href="properties.css" type="text/css"> 10 <link rel="stylesheet" href="properties.css" type="text/css">
11 <script type="text/montage-serialization"> 11 <script type="text/montage-serialization">
12 { 12 {
13 "elementNameInput1": { 13 "elementName": {
14 "module": "montage/ui/textfield.reel", 14 "prototype": "montage/ui/textfield.reel",
15 "name": "Textfield",
16 "properties": { 15 "properties": {
17 "element": {"#": "elementName"}, 16 "element": {"#": "elementName"},
18 "readOnly": true 17 "readOnly": true
19 },
20 "bindings": {
21 "value": {
22 "boundObject": {"@": "owner"},
23 "boundObjectPropertyPath": "elementName",
24 "oneway": true
25 }
26 } 18 }
27 }, 19 },
28 20
29 "elementID": { 21 "elementId": {
30 "module": "montage/ui/textfield.reel", 22 "prototype": "montage/ui/textfield.reel",
31 "name": "Textfield",
32 "properties": { 23 "properties": {
33 "element": {"#": "elementID"}, 24 "element": {"#": "elementId"},
34 "readOnly": false 25 "readOnly": false
35 },
36 "bindings": {
37 "value": {
38 "boundObject": {"@": "owner"},
39 "boundObjectPropertyPath": "elementID",
40 "oneway": true
41 }
42 } 26 }
43 }, 27 },
44 28
@@ -46,35 +30,11 @@
46 "module": "montage/ui/textfield.reel", 30 "module": "montage/ui/textfield.reel",
47 "name": "Textfield", 31 "name": "Textfield",
48 "properties": { 32 "properties": {
49 "element": {"#": "elementClassName"}, 33 "element": {"#": "elementClass"},
50 "readOnly": false 34 "readOnly": false
51 },
52 "bindings": {
53 "value": {
54 "boundObject": {"@": "owner"},
55 "boundObjectPropertyPath": "elementClassName",
56 "oneway": true
57 }
58 }
59 },
60
61 "elementNameAttribute": {
62 "module": "montage/ui/textfield.reel",
63 "name": "Textfield",
64 "properties": {
65 "element": {"#": "elementNameAttribute"},
66 "readOnly": false
67 },
68 "bindings": {
69 "value": {
70 "boundObject": {"@": "owner"},
71 "boundObjectPropertyPath": "nameAttribute",
72 "oneway": false
73 }
74 } 35 }
75 }, 36 },
76 37
77
78 "PosSizeSection": { 38 "PosSizeSection": {
79 "module": "js/panels/properties.reel/section.reel", 39 "module": "js/panels/properties.reel/section.reel",
80 "name": "Section", 40 "name": "Section",
@@ -142,9 +102,9 @@
142 "name": "Properties", 102 "name": "Properties",
143 "properties": { 103 "properties": {
144 "element": {"#": "propertiesPanel"}, 104 "element": {"#": "propertiesPanel"},
145 "elementNameInput": {"@": "elementNameInput1"}, 105 "elementName": {"@": "elementName"},
146 "elementId": {"@": "elementID"}, 106 "elementClass": {"@": "elementClass"},
147 "elementNameAttribute": {"@": "elementNameAttribute"}, 107 "elementId": {"@": "elementId"},
148 "positionSize": {"@": "PosSize"}, 108 "positionSize": {"@": "PosSize"},
149 "threeD": {"@": "threeDProperties"} 109 "threeD": {"@": "threeDProperties"}
150 } 110 }
@@ -156,20 +116,16 @@
156 <section id="propertiesPanel" class="propertiesPanel"> 116 <section id="propertiesPanel" class="propertiesPanel">
157 <section class="sectional"> 117 <section class="sectional">
158 <section class="fieldCol"> 118 <section class="fieldCol">
159 <label id="lblElement">Element:</label> 119 <label>Element:</label>
160 <article class="fieldRow"><input type="text" id="elementName" class="nj-skinned" readonly="readonly"></article> 120 <article class="fieldRow"><input type="text" id="elementName" class="nj-skinned" readonly="readonly"></article>
161 </section> 121 </section>
162 <section class="fieldCol"> 122 <section class="fieldCol">
163 <label id="lblID">ID:</label> 123 <label>ID:</label>
164 <article class="fieldRow"><input type="text" id="elementID" class="nj-skinned" /></article> 124 <article class="fieldRow"><input type="text" id="elementId" class="nj-skinned" /></article>
165 </section>
166 <section class="fieldCol">
167 <label id="lblClass">Class:</label>
168 <article class="fieldRow"><input type="text" id="elementClassName" class="nj-skinned" /></article>
169 </section> 125 </section>
170 <section class="fieldCol"> 126 <section class="fieldCol">
171 <label id="lblName">Name:</label> 127 <label>Class:</label>
172 <article class="fieldRow"><input type="text" id="elementNameAttribute" class="nj-skinned" /></article> 128 <article class="fieldRow"><input type="text" id="elementClass" class="nj-skinned" /></article>
173 </section> 129 </section>
174 </section> 130 </section>
175 <section id="PosSize"></section> 131 <section id="PosSize"></section>
diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js
index 580d945d..40e9b86a 100755
--- a/js/panels/properties.reel/properties.js
+++ b/js/panels/properties.reel/properties.js
@@ -17,15 +17,11 @@ exports.Properties = Montage.create(Component, {
17 value: null 17 value: null
18 }, 18 },
19 19
20 elementID: { 20 elementId: {
21 value: null 21 value: null
22 }, 22 },
23 23
24 elementClassName: { 24 elementClass: {
25 value: null
26 },
27
28 nameAttribute: {
29 value: null 25 value: null
30 }, 26 },
31 27
@@ -60,6 +56,14 @@ exports.Properties = Montage.create(Component, {
60 56
61 this.eventManager.addEventListener("openDocument", this, false); 57 this.eventManager.addEventListener("openDocument", this, false);
62 this.eventManager.addEventListener("switchDocument", this, false); 58 this.eventManager.addEventListener("switchDocument", this, false);
59
60 this.elementId.element.addEventListener("blur", this, false);
61 this.elementId.element.addEventListener("focus", this, false);
62 this.elementId.element.addEventListener("keyup", this, false);
63
64 this.elementClass.element.addEventListener("blur", this, false);
65 this.elementClass.element.addEventListener("focus", this, false);
66 this.elementClass.element.addEventListener("keyup", this, false);
63 } 67 }
64 }, 68 },
65 69
@@ -73,12 +77,6 @@ exports.Properties = Montage.create(Component, {
73 if(this.application.ninja.selectedElements.length === 0) { 77 if(this.application.ninja.selectedElements.length === 0) {
74 this.displayStageProperties(); 78 this.displayStageProperties();
75 } 79 }
76
77 this.elementId.element.addEventListener("blur", this, false);
78 this.elementId.element.addEventListener("keyup", this, false);
79
80 this.elementNameAttribute.element.addEventListener("blur", this, false);
81 this.elementNameAttribute.element.addEventListener("keyup", this, false);
82 } 80 }
83 }, 81 },
84 82
@@ -87,7 +85,7 @@ exports.Properties = Montage.create(Component, {
87 // For now always assume that the stage is selected by default 85 // For now always assume that the stage is selected by default
88 if(this.application.ninja.selectedElements.length === 0) { 86 if(this.application.ninja.selectedElements.length === 0) {
89 this.displayStageProperties(); 87 this.displayStageProperties();
90 }else { 88 } else {
91 if(this.application.ninja.selectedElements.length === 1) { 89 if(this.application.ninja.selectedElements.length === 1) {
92 this.displayElementProperties(this.application.ninja.selectedElements[0]._element); 90 this.displayElementProperties(this.application.ninja.selectedElements[0]._element);
93 } else { 91 } else {
@@ -102,17 +100,29 @@ exports.Properties = Montage.create(Component, {
102 */ 100 */
103 handleBlur: { 101 handleBlur: {
104 value: function(event) { 102 value: function(event) {
105 console.log(event.target); 103
106 if(event.target.id === "elementID") { 104 if(event.target.id === "elementId") {
105
106 // Remove all white spaces from the id
107 this.elementId.value = this.elementId.value.replace(/\s/g, '');
108
109 // Check if that id is in use
110 if(this.application.ninja.currentDocument._document.getElementById(this.elementId.value) !== null) {
111 // TODO: Replace with Ninja Alert
112 alert("The following ID: " + this.elementId.value + " is already in use");
113 }
114
107 if(this.application.ninja.selectedElements.length) { 115 if(this.application.ninja.selectedElements.length) {
108