diff options
Diffstat (limited to 'js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js')
-rw-r--r-- | js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js | 127 |
1 files changed, 96 insertions, 31 deletions
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js index 51822150..338e7e0d 100644 --- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js +++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js | |||
@@ -11,12 +11,74 @@ var Montage = require("montage/core/core").Montage, | |||
11 | var treeControlModule = require("js/components/tree.reel"); | 11 | var treeControlModule = require("js/components/tree.reel"); |
12 | var PIData = require("js/data/pi/pi-data").PiData; | 12 | var PIData = require("js/data/pi/pi-data").PiData; |
13 | 13 | ||
14 | String.prototype.capitalizeFirstChar = function() { | ||
15 | return this.charAt(0).toUpperCase() + this.slice(1); | ||
16 | }; | ||
17 | |||
18 | |||
14 | var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component, { | 19 | var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component, { |
15 | 20 | ||
16 | components: { | 21 | components: { |
17 | value: null | 22 | value: null |
18 | }, | 23 | }, |
19 | 24 | ||
25 | componentsToLoad: { | ||
26 | value: null | ||
27 | }, | ||
28 | |||
29 | componentsLoaded: { | ||
30 | value: 0 | ||
31 | }, | ||
32 | |||
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 | |||
20 | _testButtonJson: { | 82 | _testButtonJson: { |
21 | value: { | 83 | value: { |
22 | "component": "button", | 84 | "component": "button", |
@@ -42,14 +104,8 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component | |||
42 | 104 | ||
43 | didCreate: { | 105 | didCreate: { |
44 | value: function() { | 106 | value: function() { |
45 | this._loadComponents(); | ||
46 | 107 | ||
47 | // var req = new XMLHttpRequest(); | 108 | this._loadComponents(); |
48 | // req.identifier = "searchRequest"; | ||
49 | // req.open("GET", url); | ||
50 | // req.addEventListener("load", this, false); | ||
51 | // req.addEventListener("error", this, false); | ||
52 | // req.send(); | ||
53 | 109 | ||
54 | } | 110 | } |
55 | }, | 111 | }, |
@@ -61,6 +117,8 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component | |||
61 | {name: "Textfield", data: "node_modules/components-data/textfield.json"} | 117 | {name: "Textfield", data: "node_modules/components-data/textfield.json"} |
62 | ]; | 118 | ]; |
63 | 119 | ||
120 | this.componentsToLoad = this.components.length; | ||
121 | |||
64 | // Build the PI objects for each component | 122 | // Build the PI objects for each component |
65 | for(var i = 0, component; component = this.components[i]; i++) { | 123 | for(var i = 0, component; component = this.components[i]; i++) { |
66 | var req = new XMLHttpRequest(); | 124 | var req = new XMLHttpRequest(); |
@@ -70,39 +128,44 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component | |||
70 | req.addEventListener("error", this, false); | 128 | req.addEventListener("error", this, false); |
71 | req.send(); | 129 | req.send(); |
72 | 130 | ||
73 | /* | 131 | } |
74 | var piIdentifier = component.name + "Pi"; | 132 | |
75 | var piObj = []; | 133 | } |
76 | var section = {}; | 134 | }, |
135 | |||
136 | handleLoad: { | ||
137 | value: function(evt) { | ||
138 | var response = JSON.parse(evt.target.responseText); | ||
77 | 139 | ||
140 | var component = response.component.capitalizeFirstChar(); | ||
78 | 141 | ||
79 | section.label = component.name + " Properties"; | 142 | var piIdentifier = component + "Pi"; |
80 | section.Section = []; | 143 | var piObj = []; |
144 | var section = {}; | ||
81 | 145 | ||
82 | for(var j = 0, props; props = this._testButtonJson.properties[j]; j++) { | ||
83 | var row = {}; | ||
84 | row.type = this.getControlType(props.type); | ||
85 | row.id = props.name; | ||
86 | row.prop = props.name; | ||
87 | row.defaultValue = props["default"]; | ||
88 | row.label = props.name; | ||
89 | 146 | ||
90 | section.Section.push([row]); | 147 | section.label = component + " Properties"; |
91 | } | 148 | section.Section = []; |
92 | 149 | ||
93 | PIData[piIdentifier] = []; | 150 | for(var j = 0, props; props = response.properties[j]; j++) { |
94 | PIData[piIdentifier].push(section); | 151 | var row = {}; |
95 | */ | 152 | row.type = this.getControlType(props.type); |
153 | row.id = props.name; | ||
154 | row.prop = props.name; | ||
155 | row.defaultValue = props["default"]; | ||
156 | row.label = props.name; | ||
96 | 157 | ||
158 | section.Section.push([row]); | ||
97 | } | 159 | } |
98 | 160 | ||
99 | } | 161 | PIData[piIdentifier] = []; |
100 | }, | 162 | PIData[piIdentifier].push(section); |
101 | 163 | ||
102 | handleLoad: { | 164 | this.componentsLoaded++; |
103 | value: function(evt) { | 165 | |
104 | var response = JSON.parse(evt.target.responseText); | 166 | if(this.componentsLoaded === this.componentsToLoad) { |
105 | console.log(response); | 167 | console.log("all loaded"); |
168 | } | ||
106 | 169 | ||
107 | } | 170 | } |
108 | }, | 171 | }, |
@@ -123,6 +186,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component | |||
123 | prepareForDraw: { | 186 | prepareForDraw: { |
124 | enumerable: false, | 187 | enumerable: false, |
125 | value: function() { | 188 | value: function() { |
189 | |||
126 | var treeHolderDiv = document.getElementById("comp_tree"); | 190 | var treeHolderDiv = document.getElementById("comp_tree"); |
127 | var componentsTree = treeControlModule.Tree.create(); | 191 | var componentsTree = treeControlModule.Tree.create(); |
128 | componentsTree.element = treeHolderDiv; | 192 | componentsTree.element = treeHolderDiv; |
@@ -130,6 +194,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component | |||
130 | componentsTree.needsDraw = true; | 194 | componentsTree.needsDraw = true; |
131 | 195 | ||
132 | this.eventManager.addEventListener( "executeAddComponent", this, false); | 196 | this.eventManager.addEventListener( "executeAddComponent", this, false); |
197 | |||
133 | } | 198 | } |
134 | }, | 199 | }, |
135 | 200 | ||