diff options
Diffstat (limited to 'js')
-rw-r--r-- | js/controllers/elements/component-controller.js | 23 | ||||
-rw-r--r-- | js/data/pi/pi-data.js | 20 | ||||
-rw-r--r-- | js/io/document/html-document.js | 47 | ||||
-rw-r--r-- | js/panels/Components/Components.xml | 22 | ||||
-rw-r--r-- | js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html | 11 | ||||
-rw-r--r-- | js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js | 159 |
6 files changed, 209 insertions, 73 deletions
diff --git a/js/controllers/elements/component-controller.js b/js/controllers/elements/component-controller.js index 458e6b46..7a8acb3a 100644 --- a/js/controllers/elements/component-controller.js +++ b/js/controllers/elements/component-controller.js | |||
@@ -9,4 +9,27 @@ var Montage = require("montage/core/core").Montage, | |||
9 | 9 | ||
10 | exports.ComponentController = Montage.create(ElementController, { | 10 | exports.ComponentController = Montage.create(ElementController, { |
11 | 11 | ||
12 | getProperty: { | ||
13 | value: function(el, prop) { | ||
14 | switch(prop) { | ||
15 | case "label": | ||
16 | return this.application.ninja.currentDocument.getComponentFromElement(el).label; | ||
17 | break; | ||
18 | default: | ||
19 | return ElementController.getProperty(el, prop); | ||
20 | } | ||
21 | } | ||
22 | }, | ||
23 | |||
24 | setProperty: { | ||
25 | value: function(el, p, value) { | ||
26 | switch(p) { | ||
27 | case "label": | ||
28 | this.application.ninja.currentDocument.getComponentFromElement(el).label = value; | ||
29 | break; | ||
30 | default: | ||
31 | ElementController.setProperty(el, p, value); | ||
32 | } | ||
33 | } | ||
34 | } | ||
12 | }); | 35 | }); |
diff --git a/js/data/pi/pi-data.js b/js/data/pi/pi-data.js index de5cd34d..9edb0399 100644 --- a/js/data/pi/pi-data.js +++ b/js/data/pi/pi-data.js | |||
@@ -525,6 +525,26 @@ exports.PiData = Montage.create( Montage, { | |||
525 | ] | 525 | ] |
526 | } | 526 | } |
527 | ] | 527 | ] |
528 | }, | ||
529 | |||
530 | componentPi: { | ||
531 | value: [ | ||
532 | { | ||
533 | label: "Button", | ||
534 | |||
535 | Section: [ | ||
536 | [ | ||
537 | { | ||
538 | type: "textbox", | ||
539 | id: "Label", | ||
540 | prop: "label", | ||
541 | defaultValue: "Button", | ||
542 | label: "Label" | ||
543 | } | ||
544 | ] | ||
545 | ] | ||
546 | } | ||
547 | ] | ||
528 | } | 548 | } |
529 | }); | 549 | }); |
530 | 550 | ||
diff --git a/js/io/document/html-document.js b/js/io/document/html-document.js index c44dfe75..a8e06c69 100644 --- a/js/io/document/html-document.js +++ b/js/io/document/html-document.js | |||
@@ -27,6 +27,7 @@ var HTMLDocument = exports.HTMLDocument = Montage.create(baseDocumentModule.Base | |||
27 | _initialUserDocument: { value: null, enumerable: false }, | 27 | _initialUserDocument: { value: null, enumerable: false }, |
28 | _htmlSource: {value: "<html></html>", enumerable: false}, | 28 | _htmlSource: {value: "<html></html>", enumerable: false}, |
29 | _glData: {value: null, enumerable: false }, | 29 | _glData: {value: null, enumerable: false }, |
30 | _userComponents: { value: {}, enumarable: false}, | ||
30 | 31 | ||
31 | _elementCounter: { value: 1, enumerable: false }, | 32 | _elementCounter: { value: 1, enumerable: false }, |
32 | _snapping : { value: true, enumerable: false }, | 33 | _snapping : { value: true, enumerable: false }, |
@@ -108,23 +109,11 @@ var HTMLDocument = exports.HTMLDocument = Montage.create(baseDocumentModule.Base | |||
108 | } | 109 | } |
109 | }, | 110 | }, |
110 | 111 | ||
111 | _userComponentSet: { | 112 | userComponents: { |
112 | value: {}, | 113 | get: function() { |
113 | writable: true, | 114 | return this._userComponents; |
114 | enumerable:true | 115 | } |
115 | }, | 116 | }, |
116 | |||
117 | // userComponentSet:{ | ||
118 | // enumerable: true, | ||
119 | // get: function() { | ||
120 | // return this._userComponentSet; | ||
121 | // }, | ||
122 | // set: function(value) { | ||
123 | // this._userComponentSet = value; | ||
124 | // this._drawUserComponentsOnOpen(); | ||
125 | // } | ||
126 | // }, | ||
127 | // | ||
128 | // _drawUserComponentsOnOpen:{ | 117 | // _drawUserComponentsOnOpen:{ |
129 | // value:function(){ | 118 | // value:function(){ |
130 | // for(var i in this._userComponentSet){ | 119 | // for(var i in this._userComponentSet){ |
@@ -191,6 +180,29 @@ var HTMLDocument = exports.HTMLDocument = Montage.create(baseDocumentModule.Base | |||
191 | set: function(value) { this._zoomFactor = value; } | 180 | set: function(value) { this._zoomFactor = value; } |
192 | }, | 181 | }, |
193 | 182 | ||
183 | /** | ||
184 | * Add a reference to a component instance to the userComponents hash using the | ||
185 | * element UUID | ||
186 | */ | ||
187 | setComponentInstance: { | ||
188 | value: function(instance, el) { | ||
189 | this.userComponents[el.uuid] = instance; | ||
190 | } | ||
191 | }, | ||
192 | |||
193 | /** | ||
194 | * Returns the component instance obj from the element | ||
195 | */ | ||
196 | getComponentFromElement: { | ||
197 | value: function(el) { | ||
198 | if(el) { | ||
199 | if(el.uuid) return this.userComponents[el.uuid]; | ||
200 | } else { | ||
201 | return null; | ||
202 | } | ||
203 | } | ||
204 | }, | ||
205 | |||
194 | //****************************************// | 206 | //****************************************// |
195 | // PUBLIC METHODS | 207 | // PUBLIC METHODS |
196 | initialize: { | 208 | initialize: { |
@@ -353,9 +365,6 @@ var HTMLDocument = exports.HTMLDocument = Montage.create(baseDocumentModule.Base | |||
353 | this.callback(this); | 365 | this.callback(this); |
354 | } | 366 | } |
355 | }.bind(this), 50); | 367 | }.bind(this), 50); |
356 | |||
357 | // TODO - Not sure where this goes | ||
358 | this._userComponentSet = {}; | ||
359 | } else { | 368 | } else { |
360 | this._styles = this._document.styleSheets[this._document.styleSheets.length - 1]; | 369 | this._styles = this._document.styleSheets[this._document.styleSheets.length - 1]; |
361 | this._stylesheets = this._document.styleSheets; // Entire stlyesheets array | 370 | this._stylesheets = this._document.styleSheets; // Entire stlyesheets array |
diff --git a/js/panels/Components/Components.xml b/js/panels/Components/Components.xml index b3056330..e076602e 100644 --- a/js/panels/Components/Components.xml +++ b/js/panels/Components/Components.xml | |||
@@ -2,27 +2,5 @@ | |||
2 | <tree id="Components"> | 2 | <tree id="Components"> |
3 | <folder id="montageComponents" label="Montage Components"> | 3 | <folder id="montageComponents" label="Montage Components"> |
4 | <leaf id="Button" label="Button" /> | 4 | <leaf id="Button" label="Button" /> |
5 | <leaf id="Checkbox" label="Checkbox" /> | ||
6 | <leaf id="DynamicText" label="Dynamic Text" /> | ||
7 | <leaf id="FlowController" label="FlowController" /> | ||
8 | <leaf id="HotText" label="HotText" /> | ||
9 | <leaf id="HotTextUnit" label="HotTextUnit" /> | ||
10 | <leaf id="ImageContainer" label="Image Container" /> | ||
11 | <leaf id="Progress" label="Progress" /> | ||
12 | <leaf id="Scrollview" label="Scrollview" /> | ||
13 | <leaf id="Slider" label="Slider" /> | ||
14 | <leaf id="TextArea" label="TextArea" /> | ||
15 | <leaf id="Textfield" label="Textfield" /> | ||
16 | <leaf id="Toggle" label="Toggle" /> | ||
17 | </folder> | ||
18 | <folder id="metaComponents" label="Meta Components"> | ||
19 | <leaf id="Condition" label="Condition" /> | ||
20 | <leaf id="Repetition" label="Repetition" /> | ||
21 | <leaf id="Slot" label="Slot" /> | ||
22 | <leaf id="Substitution" label="Substitution" /> | ||
23 | </folder> | ||
24 | <folder id="htmlPresets" label="HTML Components"> | ||
25 | <leaf id="html_button" label="Button" /> | ||
26 | <leaf id="html_input" label="Text Input" /> | ||
27 | </folder> | 5 | </folder> |
28 | </tree> \ No newline at end of file | 6 | </tree> \ No newline at end of file |
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html index df104ecc..1e040e35 100644 --- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html +++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html | |||
@@ -11,6 +11,17 @@ | |||
11 | 11 | ||
12 | <script type="text/montage-serialization"> | 12 | <script type="text/montage-serialization"> |
13 | { | 13 | { |
14 | "componentController": { | ||
15 | "module": "montage/ui/controller/array-controller", | ||
16 | "name": "ArrayController", | ||
17 | "bindings": { | ||
18 | "content": { | ||
19 | "boundObject": {"@": "owner"}, | ||
20 | "boundObjectPropertyPath": "components" | ||
21 | } | ||
22 | } | ||
23 | }, | ||
24 | |||
14 | "owner": { | 25 | "owner": { |
15 | "module": "js/panels/Components/ComponentsPanelBase.reel", | 26 | "module": "js/panels/Components/ComponentsPanelBase.reel", |
16 | "name": "ComponentsPanelBase", | 27 | "name": "ComponentsPanelBase", |
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js index 41afefa5..8c81b3ab 100644 --- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js +++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js | |||
@@ -11,10 +11,43 @@ var Montage = require("montage/core/core").Montage, | |||
11 | var treeControlModule = require("js/components/tree.reel"); | 11 | var treeControlModule = require("js/components/tree.reel"); |
12 | 12 | ||
13 | var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component, { | 13 | var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component, { |
14 | _hasFocus: { | 14 | |
15 | enumerable: false, | 15 | components: { |
16 | value: false | 16 | value: null |
17 | }, | ||
18 | |||
19 |