aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js')
-rw-r--r--js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js172
1 files changed, 60 insertions, 112 deletions
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() {
19var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component, { 19var 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(); 76 req.send();
130 77
131 } 78 }
132 79
80
133 } 81 }
134 }, 82 },
135 83
136 handleLoad: { 84 handleLoad: {
137 value: function(evt) { 85 value: function(evt) {
138 var response = JSON.parse(evt.target.responseText); 86 var componentData = JSON.parse(evt.target.responseText);
139 87
140 var component = response.component.capitalizeFirstChar(); 88 //var component = response.component.capitalizeFirstChar();
89 var component = componentData.name;
141 90
142 var piIdentifier = component + "Pi"; 91 var piIdentifier = component + "Pi";
143 var piObj = []; 92 var piObj = [];
@@ -147,7 +96,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
147 section.label = component + " Properties"; 96 section.label = component + " Properties";
148 section.Section = []; 97 section.Section = [];
149 98
150 for(var j = 0, props; props = response.properties[j]; j++) { 99 for(var j = 0, props; props = componentData.properties[j]; j++) {
151 var row = {}; 100 var row = {};
152 row.type = this.getControlType(props.type); 101 row.type = this.getControlType(props.type);
153 row.id = props.name; 102 row.id = props.name;
@@ -161,6 +110,9 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
161 PIData[piIdentifier] = []; 110 PIData[piIdentifier] = [];
162 PIData[piIdentifier].push(section); 111 PIData[piIdentifier].push(section);
163 112
113 // Setup the componentsData
114 this.componentsData[componentData.component] = componentData;
115
164 this.componentsLoaded++; 116 this.componentsLoaded++;
165 117
166 if(this.componentsLoaded === this.componentsToLoad) { 118 if(this.componentsLoaded === this.componentsToLoad) {
@@ -183,29 +135,14 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
183 } 135 }
184 }, 136 },
185 137
<