diff options
Diffstat (limited to 'js')
-rw-r--r-- | js/controllers/elements/component-controller.js | 41 | ||||
-rw-r--r-- | js/io/document/html-document.js | 47 | ||||
-rw-r--r-- | js/panels/Components/Components.xml | 28 | ||||
-rw-r--r-- | js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html | 39 | ||||
-rw-r--r-- | js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js | 295 |
5 files changed, 290 insertions, 160 deletions
diff --git a/js/controllers/elements/component-controller.js b/js/controllers/elements/component-controller.js index 458e6b46..33b9b79a 100644 --- a/js/controllers/elements/component-controller.js +++ b/js/controllers/elements/component-controller.js | |||
@@ -9,4 +9,45 @@ 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 | case "enabled": | ||
19 | return this.application.ninja.currentDocument.getComponentFromElement(el).enabled; | ||
20 | break; | ||
21 | case "disabled": | ||
22 | return this.application.ninja.currentDocument.getComponentFromElement(el).disabled; | ||
23 | break; | ||
24 | case "value": | ||
25 | return this.application.ninja.currentDocument.getComponentFromElement(el).value; | ||
26 | break; | ||
27 | default: | ||
28 | return ElementController.getProperty(el, prop, true); | ||
29 | } | ||
30 | } | ||
31 | }, | ||
32 | |||
33 | setProperty: { | ||
34 | value: function(el, p, value) { | ||
35 | switch(p) { | ||
36 | case "label": | ||
37 | this.application.ninja.currentDocument.getComponentFromElement(el).label = value; | ||
38 | break; | ||
39 | case "enabled": | ||
40 | this.application.ninja.currentDocument.getComponentFromElement(el).enabled = value; | ||
41 | break; | ||
42 | case "disabled": | ||
43 | this.application.ninja.currentDocument.getComponentFromElement(el).disabled = value; | ||
44 | break; | ||
45 | case "value": | ||
46 | this.application.ninja.currentDocument.getComponentFromElement(el).value = value; | ||
47 | break; | ||
48 | default: | ||
49 | ElementController.setProperty(el, p, value); | ||
50 | } | ||
51 | } | ||
52 | } | ||
12 | }); | 53 | }); |
diff --git a/js/io/document/html-document.js b/js/io/document/html-document.js index dd3507c2..393d29fe 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 deleted file mode 100644 index b3056330..00000000 --- a/js/panels/Components/Components.xml +++ /dev/null | |||
@@ -1,28 +0,0 @@ | |||
1 | <?xml version="1.0" encoding="ISO-8859-1"?> | ||
2 | <tree id="Components"> | ||
3 | <folder id="montageComponents" label="Montage Components"> | ||
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> | ||
28 | </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..6d7c8a2c 100644 --- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html +++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html | |||
@@ -15,8 +15,41 @@ | |||
15 | "module": "js/panels/Components/ComponentsPanelBase.reel", | 15 | "module": "js/panels/Components/ComponentsPanelBase.reel", |
16 | "name": "ComponentsPanelBase", | 16 | "name": "ComponentsPanelBase", |
17 | "properties": { | 17 | "properties": { |
18 | "element": {"#": "components_panel"} | 18 | "element": {"#": "components_panel"}, |
19 | "controller": {"@": "componentsTree"} | ||
19 | } | 20 | } |
21 | }, | ||
22 | |||
23 | "componentsController" : { | ||
24 | "module": "js/components/controllers/tree-controller", | ||
25 | "name": "TreeController", | ||
26 | "properties" : { | ||
27 | "branchKey" : "children", | ||
28 | "labelKey" : "text", | ||
29 | "delegate": {"@": "owner" } | ||
30 | }, | ||
31 | "bindings": { | ||
32 | "content": { | ||
33 | "boundObject": {"@": "owner"}, | ||
34 | "boundObjectPropertyPath": "components" | ||
35 | } | ||
36 | } | ||
37 | }, | ||
38 | |||
39 | "componentsTree" : { | ||
40 | "module" : "js/components/treeview/treeview.reel", | ||
41 | "name" : "Treeview", | ||
42 | "properties" : { | ||
43 | "element" : {"#": "componentsContainer"}, | ||
44 | "branchComponent" : {"@": "branch" }, | ||
45 | "contentController": {"@": "componentsController"}, | ||
46 | "showRoot" : false | ||
47 | } | ||
48 | }, | ||
49 | |||
50 | "branch" : { | ||
51 | "module" : "js/components/treeview/ninja-branch.reel", | ||
52 | "name" : "Branch" | ||
20 | } | 53 | } |
21 | } | 54 | } |
22 | </script> | 55 | </script> |
@@ -25,9 +58,7 @@ | |||
25 | <body> | 58 | <body> |