aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html37
-rw-r--r--js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js127
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,
11var treeControlModule = require("js/components/tree.reel"); 11var treeControlModule = require("js/components/tree.reel");
12var PIData = require("js/data/pi/pi-data").PiData; 12var PIData = require("js/data/pi/pi-data").PiData;
13 13
14String.prototype.capitalizeFirstChar = function() {
15 return this.charAt(0).toUpperCase() + this.slice(1);
16};
17
18
14var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component, { 19var 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