aboutsummaryrefslogtreecommitdiff
path: root/js/panels/properties.reel/sections
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/properties.reel/sections')
-rwxr-xr-xjs/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js8
-rwxr-xr-xjs/panels/properties.reel/sections/custom.reel/custom.js57
-rwxr-xr-xjs/panels/properties.reel/sections/position-and-size.reel/position-and-size.css32
-rwxr-xr-xjs/panels/properties.reel/sections/position-and-size.reel/position-and-size.html13
-rwxr-xr-xjs/panels/properties.reel/sections/position-and-size.reel/position-and-size.js10
5 files changed, 104 insertions, 16 deletions
<
diff --git a/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js b/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js
index 72d216ca..4c5c80d7 100755
--- a/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js
+++ b/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js
@@ -43,7 +43,13 @@ exports.DualRow = Montage.create(Component, {
43 this.element.getElementsByClassName("lbl")[0].innerHTML = this.label + ":"; 43 this.element.getElementsByClassName("lbl")[0].innerHTML = this.label + ":";
44 } 44 }
45 if(this.label2 !== null) { 45 if(this.label2 !== null) {
46 this.element.getElementsByClassName("lbl")[1].innerHTML = this.label2 + ":"; 46 if(this.content2.type === "button") {
47 this.content2.element = document.createElement("button");
48 this.content2.element.classList.add("nj-skinned");
49 this.element.getElementsByClassName("lbl")[1].style.display = "none";
50 } else {
51 this.element.getElementsByClassName("lbl")[1].innerHTML = this.label2 + ":";
52 }
47 } else { 53 } else {
48 this.element.getElementsByClassName("lbl")[1].style.display = "none"; 54 this.element.getElementsByClassName("lbl")[1].style.display = "none";
49 } 55 }
diff --git a/js/panels/properties.reel/sections/custom.reel/custom.js b/js/panels/properties.reel/sections/custom.reel/custom.js
index 3c595980..ac316907 100755
--- a/js/panels/properties.reel/sections/custom.reel/custom.js
+++ b/js/panels/properties.reel/sections/custom.reel/custom.js
@@ -20,6 +20,7 @@ var TextField = require("js/components/textfield.reel").TextField;
20var FileInput = require("js/components/ui/file-input.reel").FileInput; 20var FileInput = require("js/components/ui/file-input.reel").FileInput;
21var Checkbox = require("js/components/checkbox.reel").Checkbox; 21var Checkbox = require("js/components/checkbox.reel").Checkbox;
22var ColorChip = require("js/components/ui/color-chip.reel").ColorChip; 22var ColorChip = require("js/components/ui/color-chip.reel").ColorChip;
23var Button = require("montage/ui/button.reel").Button;
23 24
24exports.CustomSection = Montage.create(Component, { 25exports.CustomSection = Montage.create(Component, {
25 26
@@ -128,6 +129,15 @@ exports.CustomSection = Montage.create(Component, {
128 } 129 }
129 }, 130 },
130 131
132 handleAction: {
133 value:function(event) {
134 if(event._event.wasSetByCode) return;
135
136 var obj = event.currentTarget;
137 this._dispatchPropEvent({"type": "change", "id": obj.id, "prop": obj.prop, "value": obj.value, "control": obj});
138 }
139 },
140
131 _dispatchPropEvent: { 141 _dispatchPropEvent: {
132 value: function(event) { 142 value: function(event) {
133// console.log(event); 143// console.log(event);
@@ -163,6 +173,7 @@ exports.CustomSection = Montage.create(Component, {
163 case "file" : return this.createFileInput(fields); 173 case "file" : return this.createFileInput(fields);
164 case "checkbox" : return this.createCheckbox(fields); 174 case "checkbox" : return this.createCheckbox(fields);
165 case "chip" : return this.createColorChip(fields); 175 case "chip" : return this.createColorChip(fields);
176 case "button" : return this.createButton(fields);
166 } 177 }
167 } 178 }
168 }, 179 },
@@ -317,6 +328,19 @@ exports.CustomSection = Montage.create(Component, {
317 if (aField.value) obj.label = aField.value; 328 if (aField.value) obj.label = aField.value;
318 if (aField.prop) obj.prop = aField.prop; 329 if (aField.prop) obj.prop = aField.prop;
319 330
331 if (aField.enabled) {
332 if(aField.enabled.boundObject) {
333 // TODO - For now, always bind to this.controls[someProperty]
334 Object.defineBinding(obj, "enabled", {
335 boundObject: this.controls,
336 boundObjectPropertyPath: aField.enabled.boundProperty,
337 oneway: false
338 });
339 } else {
340 obj.enabled = aField.enabled;
341 }
342 }
343
320 //Initiate onChange Events 344 //Initiate onChange Events
321 obj.addEventListener("change", this, false); 345 obj.addEventListener("change", this, false);
322 346
@@ -351,6 +375,39 @@ exports.CustomSection = Montage.create(Component, {
351 375
352 return obj; 376 return obj;
353 } 377 }
378 },
379
380 createButton: {
381 value: function(aField) {
382 var obj = Button.create();
383
384 // Set Values for Button
385 if (aField.id) obj.id = aField.id;
386 if (aField.label) obj.label = aField.label;
387 if (aField.prop) obj.prop = aField.prop;
388
389 // Special casing button so slot uses "button" tag instead of "div"
390 obj.type = "button";
391
392 if (aField.enabled) {
393 if(aField.enabled.boundObject) {
394 // TODO - For now, always bind to this.controls[someProperty]
395 Object.defineBinding(obj, "enabled", {
396 boundObject: this.controls,
397 boundObjectPropertyPath: aField.enabled.boundProperty,
398 oneway: true
399 });
400 } else {
401 obj.enabled = aField.enabled;
402 }
403 }
404
405 obj.addEventListener("action", this, false);
406
407 this.controls[aField.id] = obj;
408
409 return obj;
410 }
354 } 411 }
355 412
356}); \ No newline at end of file 413}); \ No newline at end of file
diff --git a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.css b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.css
index 227a232b..7f8fdbc2 100755
--- a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.css
+++ b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.css
@@ -8,7 +8,33 @@
8 display: none; 8 display: none;
9} 9}
10 10
11.fieldCol .disabled 11.fieldCol .disabled {
12{
13 color:#999999; 12 color:#999999;
14} \ No newline at end of file 13}
14
15
16#posBound {
17 position: absolute;
18 left: 105px;
19 border: none;
20 background-color: transparent;
21 top: 2px;
22 opacity: 0.7;
23 width: 17px;
24 height: 18px;
25 margin-right: 10px;
26}
27
28#posBound:hover {
29 opacity: 1;
30}
31
32.unlock{
33 background: url("../../../../../images/optionsbar/unlinked.png") no-repeat;
34
35}
36
37.lockUp {
38 background: url("../../../../../images/optionsbar/link.png") no-repeat;
39}
40
diff --git a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html
index 6e355f31..f50724c5 100755
--- a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html
+++ b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html
@@ -85,13 +85,12 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
85 } 85 }
86 }, 86 },
87 "bindButton": { 87 "bindButton": {
88 "module": "js/components/button.reel", 88 "prototype": "montage/ui/toggle-button.reel",
89 "name": "Button",
90 "properties": { 89 "properties": {
91 "element": {"#" :"posBound"}, 90 "element": {"#": "posBound"},
92 "isToggleButton": true, 91 "pressedClass": "lockUp",
93 "onState": "LockToolUp", 92 "preventFocus": true,
94 "offState": "UnLockToolUp" 93 "identifier": "ratio"
95 } 94 }
96 } 95 }
97 } 96 }
@@ -119,7 +118,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
119 </section> 118 </section>
120 <hr /> 119 <hr />
121 <section class="fieldCol"> 120 <section class="fieldCol">
122 <button id="posBound"></button> 121 <button id="posBound" class="unlock"></button>
123 <label>Width:</label>