diff options
author | Valerio Virgillito | 2012-02-01 14:37:30 -0800 |
---|---|---|
committer | Valerio Virgillito | 2012-02-01 14:37:30 -0800 |
commit | d26a13de2aca25c36cb35f85604de1ac2b9befbb (patch) | |
tree | 0419eb0ca8aa923e99b549702c79a219c06916ce | |
parent | 9d0f0e55167e0cb2f73dd056cb35a2e82b45340e (diff) | |
download | ninja-d26a13de2aca25c36cb35f85604de1ac2b9befbb.tar.gz |
Simple button native widget test. Added a controller, pi and panel code.
Signed-off-by: Valerio Virgillito <valerio@motorola.com>
-rw-r--r-- | js/controllers/elements/component-controller.js | 23 | ||||
-rw-r--r-- | js/data/pi/pi-data.js | 18 | ||||
-rw-r--r-- | js/io/document/html-document.js | 47 | ||||
-rw-r--r-- | js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js | 33 |
4 files changed, 80 insertions, 41 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 189d1dae..30b1f60d 100644 --- a/js/data/pi/pi-data.js +++ b/js/data/pi/pi-data.js | |||
@@ -508,7 +508,23 @@ exports.PiData = Montage.create( Montage, { | |||
508 | }, | 508 | }, |
509 | 509 | ||
510 | componentPi: { | 510 | componentPi: { |
511 | value: [] | 511 | value: [ |
512 | { | ||
513 | label: "Button", | ||
514 | |||
515 | Section: [ | ||
516 | [ | ||
517 | { | ||
518 | type: "textbox", | ||
519 | id: "Label", | ||
520 | prop: "label", | ||
521 | defaultValue: "Button", | ||
522 | label: "Label" | ||
523 | } | ||
524 | ] | ||
525 | ] | ||
526 | } | ||
527 | ] | ||
512 | } | 528 | } |
513 | }); | 529 | }); |
514 | 530 | ||
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/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js index c8624b29..58a798d8 100644 --- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js +++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js | |||
@@ -27,18 +27,6 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component | |||
27 | this.eventManager.addEventListener( "executeAddComponent", this, false); | 27 | this.eventManager.addEventListener( "executeAddComponent", this, false); |
28 | } | 28 | } |
29 | }, | 29 | }, |
30 | willDraw: { | ||
31 | enumerable: false, | ||
32 | value: function() { | ||
33 | |||
34 | } | ||
35 | }, | ||
36 | draw: { | ||
37 | enumerable: false, | ||
38 | value: function() { | ||
39 | |||
40 | } | ||
41 | }, | ||
42 | 30 | ||
43 | _loadXMLDoc: { | 31 | _loadXMLDoc: { |
44 | value:function(dname) { | 32 | value:function(dname) { |
@@ -61,18 +49,17 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component | |||
61 | value:function(componentType, dropX, dropY){ | 49 | value:function(componentType, dropX, dropY){ |
62 | // var compW = 100, | 50 | // var compW = 100, |
63 | // compH = 100, | 51 | // compH = 100, |
64 | // elementType = "div", | 52 | // |
65 | // componentContainer, | 53 | var componentEl, componentInstance; |
66 | // componentElement; | ||
67 | var componentEl; | ||
68 | 54 | ||
69 | if(componentType == "Button"){ | 55 | if(componentType == "Button"){ |
70 | componentEl = NJUtils.makeNJElement("button", componentType, "component");//, {"type": "button"}); | 56 | componentEl = NJUtils.makeNJElement("button", componentType, "component");//, {"type": "button"}); |
71 | componentEl.setAttribute("type", "button"); | 57 | componentEl.setAttribute("type", "button"); |
72 | componentEl.innerHTML = "Button"; | 58 | //componentEl.innerHTML = "Button"; |
73 | console.log(componentEl); | 59 | |
74 | // compW = 118; | 60 | componentInstance = this.application.ninja.currentDocument._window.addComponent(componentEl, {type: componentType, path: "montage/ui/button.reel", name: "Button"}); |
75 | // compH = 52; | 61 | |
62 | |||
76 | }else if(componentType == "Checkbox"){ | 63 | }else if(componentType == "Checkbox"){ |
77 | compW = 53; | 64 | compW = 53; |
78 | compH = 53; | 65 | compH = 53; |
@@ -142,12 +129,16 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component | |||
142 | 129 | ||
143 | //componentContainer.appendChild(componentElement); | 130 | //componentContainer.appendChild(componentElement); |
144 | 131 | ||
132 | this.application.ninja.currentDocument.setComponentInstance(componentInstance, componentEl); | ||
133 | |||
145 | NJevent("elementAdding", {"el": componentEl, "data":styles}); | 134 | NJevent("elementAdding", {"el": componentEl, "data":styles}); |
146 | /* | 135 | /* |
147 | var componentRef = this.application.ninja.currentDocument._window.addComponent(componentElement, componentType); | 136 | var componentRef = this.application.ninja.currentDocument._window.addComponent(componentElement, componentType); |
148 | this.application.ninja.currentDocument._userComponentSet[componentContainer.uuid] = componentRef; | 137 | |
149 | */ | 138 | */ |
150 | 139 | ||
140 | |||