diff options
Diffstat (limited to 'js/panels')
-rwxr-xr-x | js/panels/properties.reel/properties.html | 70 | ||||
-rwxr-xr-x | js/panels/properties.reel/properties.js | 64 |
2 files changed, 47 insertions, 87 deletions
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 @@ | |||
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,21 +116,17 @@ | |||
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> | 125 | </section> |
166 | <section class="fieldCol"> | 126 | <section class="fieldCol"> |
167 | <label id="lblClass">Class:</label> | 127 | <label>Class:</label> |
168 | <article class="fieldRow"><input type="text" id="elementClassName" class="nj-skinned" /></article> | 128 | <article class="fieldRow"><input type="text" id="elementClassName" class="nj-skinned" /></article> |
169 | </section> | 129 | </section> |
170 | <section class="fieldCol"> | ||
171 | <label id="lblName">Name:</label> | ||
172 | <article class="fieldRow"><input type="text" id="elementNameAttribute" class="nj-skinned" /></article> | ||
173 | </section> | ||
174 | </section> | 130 | </section> |
175 | <section id="PosSize"></section> | 131 | <section id="PosSize"></section> |
176 | <section id="customSections"> | 132 | <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, { | |||
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) { |