diff options
-rw-r--r-- | js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html | 37 | ||||
-rw-r--r-- | js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js | 127 |
2 files changed, 131 insertions, 33 deletions
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html index 1e040e35..a9dda673 100644 --- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html +++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html | |||
@@ -11,7 +11,7 @@ | |||
11 | 11 | ||
12 | <script type="text/montage-serialization"> | 12 | <script type="text/montage-serialization"> |
13 | { | 13 | { |
14 | "componentController": { | 14 | "componentControllerArrayTemp": { |
15 | "module": "montage/ui/controller/array-controller", | 15 | "module": "montage/ui/controller/array-controller", |
16 | "name": "ArrayController", | 16 | "name": "ArrayController", |
17 | "bindings": { | 17 | "bindings": { |
@@ -28,6 +28,38 @@ | |||
28 | "properties": { | 28 | "properties": { |
29 | "element": {"#": "components_panel"} | 29 | "element": {"#": "components_panel"} |
30 | } | 30 | } |
31 | }, | ||
32 | |||
33 | "componentsController" : { | ||
34 | "module": "js/components/controllers/tree-controller", | ||
35 | "name": "TreeController", | ||
36 | "properties" : { | ||
37 | "branchKey" : "children", | ||
38 | "labelKey" : "text", | ||
39 | "delegate": {"@": "owner" } | ||
40 | }, | ||
41 | "bindings": { | ||
42 | "content": { | ||
43 | "boundObject": {"@": "owner"}, | ||
44 | "boundObjectPropertyPath": "data2" | ||
45 | } | ||
46 | } | ||
47 | }, | ||
48 | |||
49 | "componentsTree" : { | ||
50 | "module" : "js/components/treeview/treeview.reel", | ||
51 | "name" : "Treeview", | ||
52 | "properties" : { | ||
53 | "element" : {"#": "componentsContainer"}, | ||
54 | "branchComponent" : {"@": "branch" }, | ||
55 | "contentController": {"@": "componentsController"}, | ||
56 | "showRoot" : false | ||
57 | } | ||
58 | }, | ||
59 | |||
60 | "branch" : { | ||
61 | "module" : "js/components/treeview/ninja-branch.reel", | ||
62 | "name" : "Branch" | ||
31 | } | 63 | } |
32 | } | 64 | } |
33 | </script> | 65 | </script> |
@@ -37,8 +69,9 @@ | |||
37 | 69 | ||
38 | <div id="components_panel" class="components_panel"> | 70 | <div id="components_panel" class="components_panel"> |
39 | <div class="treeHolder"> | 71 | <div class="treeHolder"> |
40 | <ul id="comp_tree"></ul> | 72 | <ul id="comp_tree"></ul> |
41 | </div> | 73 | </div> |
74 | <div id="componentsContainer"></div> | ||
42 | </div> | 75 | </div> |
43 | 76 | ||
44 | </body> | 77 | </body> |
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++) { |