diff options
Diffstat (limited to 'js/panels/Components/ComponentsPanelBase.reel')
-rw-r--r-- | js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html | 19 | ||||
-rw-r--r-- | js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js | 172 |
2 files changed, 63 insertions, 128 deletions
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html index a9dda673..6d7c8a2c 100644 --- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html +++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html | |||
@@ -11,22 +11,12 @@ | |||
11 | 11 | ||
12 | <script type="text/montage-serialization"> | 12 | <script type="text/montage-serialization"> |
13 | { | 13 | { |
14 | "componentControllerArrayTemp": { | ||
15 | "module": "montage/ui/controller/array-controller", | ||
16 | "name": "ArrayController", | ||
17 | "bindings": { | ||
18 | "content": { | ||
19 | "boundObject": {"@": "owner"}, | ||
20 | "boundObjectPropertyPath": "components" | ||
21 | } | ||
22 | } | ||
23 | }, | ||
24 | |||
25 | "owner": { | 14 | "owner": { |
26 | "module": "js/panels/Components/ComponentsPanelBase.reel", | 15 | "module": "js/panels/Components/ComponentsPanelBase.reel", |
27 | "name": "ComponentsPanelBase", | 16 | "name": "ComponentsPanelBase", |
28 | "properties": { | 17 | "properties": { |
29 | "element": {"#": "components_panel"} | 18 | "element": {"#": "components_panel"}, |
19 | "controller": {"@": "componentsTree"} | ||
30 | } | 20 | } |
31 | }, | 21 | }, |
32 | 22 | ||
@@ -41,7 +31,7 @@ | |||
41 | "bindings": { | 31 | "bindings": { |
42 | "content": { | 32 | "content": { |
43 | "boundObject": {"@": "owner"}, | 33 | "boundObject": {"@": "owner"}, |
44 | "boundObjectPropertyPath": "data2" | 34 | "boundObjectPropertyPath": "components" |
45 | } | 35 | } |
46 | } | 36 | } |
47 | }, | 37 | }, |
@@ -68,9 +58,6 @@ | |||
68 | <body> | 58 | <body> |
69 | 59 | ||
70 | <div id="components_panel" class="components_panel"> | 60 | <div id="components_panel" class="components_panel"> |
71 | <div class="treeHolder"> | ||
72 | <ul id="comp_tree"></ul> | ||
73 | </div> | ||
74 | <div id="componentsContainer"></div> | 61 | <div id="componentsContainer"></div> |
75 | </div> | 62 | </div> |
76 | 63 | ||
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js index 338e7e0d..4828839b 100644 --- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js +++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js | |||
@@ -19,7 +19,30 @@ String.prototype.capitalizeFirstChar = function() { | |||
19 | var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component, { | 19 | var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component, { |
20 | 20 | ||
21 | components: { | 21 | components: { |
22 | value: null | 22 | value: { |
23 | "text": "styles", | ||
24 | "children": [ | ||
25 | { | ||
26 | "text": "Montage Components", | ||
27 | "children": [ | ||
28 | { | ||
29 | "text": "Button", | ||
30 | "dataFile" : "node_modules/components-data/button.json", | ||
31 | "component": "button" | ||
32 | }, | ||
33 | { | ||
34 | "text": "Text Field", | ||
35 | "dataFile" : "node_modules/components-data/textfield.json", | ||
36 | "component": "textfield" | ||
37 | } | ||
38 | ] | ||
39 | } | ||
40 | ] | ||
41 | } | ||
42 | }, | ||
43 | |||
44 | componentsData: { | ||
45 | value: {} | ||
23 | }, | 46 | }, |
24 | 47 | ||
25 | componentsToLoad: { | 48 | componentsToLoad: { |
@@ -30,81 +53,9 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component | |||
30 | value: 0 | 53 | value: 0 |
31 | }, | 54 | }, |
32 | 55 | ||
33 | data2: { | ||
34 | value: { | ||
35 | "text": "styles", | ||
36 | "children": [{ | ||
37 | "text": "Box Styles", | ||
38 | "children": [ | ||
39 | { | ||
40 | "text": "Border-Radius", | ||
41 | "classNameBase" : "border-radius", | ||
42 | "styles" : { | ||
43 | "border-radius": "100px", | ||
44 | "border" : "1px solid #333" | ||
45 | } | ||
46 | }, | ||
47 | { | ||
48 | "text": "Drop Shadow", | ||
49 | "classNameBase" : "drop-shadow", | ||
50 | "styles" : { | ||
51 | "box-shadow": "2px 2px 50px rgba(0,0,0,0.5)", | ||
52 | "border" : "1px solid #CCC" | ||
53 | } | ||
54 | }, | ||
55 | { | ||
56 | "text": "Fancy Box", | ||
57 | "classNameBase" : "fancy-box", | ||
58 | "styles" : { | ||
59 | "box-shadow": "inset 0 0 0 1px #666, inset 0 0 0 2px rgba(225, 225, 225, 0.4), 0 0 20px -10px #333", | ||
60 | "border" : "1px solid #FFF", | ||
61 | "border-radius": "30px", | ||
62 | "background-color": "#7db9e8", | ||
63 | "background-image": "-webkit-linear-gradient(top, rgba(255,255,255,0.74) 0%,rgba(255,255,255,0) 100%)" | ||
64 | } | ||
65 | }] | ||
66 | }, { | ||
67 | "text": "Text Styles", | ||
68 | "children": [ | ||
69 | { "text": "Italic" }, | ||
70 | { "text": "Text Shadow" }, | ||
71 | { "text": "Text Color" } ] | ||
72 | }, { | ||
73 | "text": "Color Styles", | ||
74 | "children": [ | ||
75 | { "text": "Background Gradient" }, | ||
76 | { "text": "Background Color" }, | ||
77 | { "text": "Text Highlight" } ] | ||
78 | }] | ||
79 | } | ||
80 | }, | ||
81 | |||
82 | _testButtonJson: { | ||
83 | value: { | ||
84 | "component": "button", | ||
85 | |||
86 | "module": "montage/ui/button.reel", | ||
87 | |||
88 | "name": "Button", | ||
89 | |||
90 | "properties": [ | ||
91 | { | ||
92 | "name": "label", | ||
93 | "type": "string", | ||
94 | "default": "Button" | ||
95 | }, | ||
96 | { | ||
97 | "name": "enabled", | ||
98 | "type": "boolean", | ||
99 | "default": "true" | ||
100 | } | ||
101 | ] | ||
102 | } | ||
103 | }, | ||
104 | |||
105 | didCreate: { | 56 | didCreate: { |
106 | value: function() { | 57 | value: function() { |
107 | 58 | // Loop through the component and load the JSON data for them | |
108 | this._loadComponents(); | 59 | this._loadComponents(); |
109 | 60 | ||
110 | } | 61 | } |
@@ -112,32 +63,30 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component | |||
112 | 63 | ||
113 | _loadComponents: { | 64 | _loadComponents: { |
114 | value: function() { | 65 | value: function() { |
115 | this.components = [ | ||
116 | {name: "Button", data: "node_modules/components-data/button.json"}, | ||
117 | {name: "Textfield", data: "node_modules/components-data/textfield.json"} | ||
118 | ]; | ||
119 | 66 | ||
120 | this.componentsToLoad = this.components.length; | 67 | this.componentsToLoad = this.components.children[0].children.length; |
121 | 68 | ||
122 | // Build the PI objects for each component | 69 | // Build the PI objects for each component |
123 | for(var i = 0, component; component = this.components[i]; i++) { | 70 | for(var i = 0, component; component = this.components.children[0].children[i]; i++) { |
124 | var req = new XMLHttpRequest(); | 71 | var req = new XMLHttpRequest(); |
125 | //req.identifier = "searchRequest"; | 72 | //req.identifier = "searchRequest"; |
126 | req.open("GET", component.data); | 73 | req.open("GET", component.dataFile); |
127 | req.addEventListener("load", this, false); | 74 | req.addEventListener("load", this, false); |
128 | req.addEventListener("error", this, false); | 75 | req.addEventListener("error", this, false); |
129 | req.send(); |