aboutsummaryrefslogtreecommitdiff
path: root/js/panels
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels')
-rw-r--r--js/panels/Components/Components.xml22
-rw-r--r--js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html46
-rw-r--r--js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js300
3 files changed, 310 insertions, 58 deletions
diff --git a/js/panels/Components/Components.xml b/js/panels/Components/Components.xml
index b3056330..e076602e 100644
--- a/js/panels/Components/Components.xml
+++ b/js/panels/Components/Components.xml
@@ -2,27 +2,5 @@
2<tree id="Components"> 2<tree id="Components">
3 <folder id="montageComponents" label="Montage Components"> 3 <folder id="montageComponents" label="Montage Components">
4 <leaf id="Button" label="Button" /> 4 <leaf id="Button" label="Button" />
5 <leaf id="Checkbox" label="Checkbox" />
6 <leaf id="DynamicText" label="Dynamic Text" />
7 <leaf id="FlowController" label="FlowController" />
8 <leaf id="HotText" label="HotText" />
9 <leaf id="HotTextUnit" label="HotTextUnit" />
10 <leaf id="ImageContainer" label="Image Container" />
11 <leaf id="Progress" label="Progress" />
12 <leaf id="Scrollview" label="Scrollview" />
13 <leaf id="Slider" label="Slider" />
14 <leaf id="TextArea" label="TextArea" />
15 <leaf id="Textfield" label="Textfield" />
16 <leaf id="Toggle" label="Toggle" />
17 </folder>
18 <folder id="metaComponents" label="Meta Components">
19 <leaf id="Condition" label="Condition" />
20 <leaf id="Repetition" label="Repetition" />
21 <leaf id="Slot" label="Slot" />
22 <leaf id="Substitution" label="Substitution" />
23 </folder>
24 <folder id="htmlPresets" label="HTML Components">
25 <leaf id="html_button" label="Button" />
26 <leaf id="html_input" label="Text Input" />
27 </folder> 5 </folder>
28</tree> \ No newline at end of file 6</tree> \ No newline at end of file
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
index df104ecc..a9dda673 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html
@@ -11,12 +11,55 @@
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
14 "owner": { 25 "owner": {
15 "module": "js/panels/Components/ComponentsPanelBase.reel", 26 "module": "js/panels/Components/ComponentsPanelBase.reel",
16 "name": "ComponentsPanelBase", 27 "name": "ComponentsPanelBase",
17 "properties": { 28 "properties": {
18 "element": {"#": "components_panel"} 29 "element": {"#": "components_panel"}
19 } 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"
20 } 63 }
21 } 64 }
22 </script> 65 </script>
@@ -26,8 +69,9 @@
26 69
27 <div id="components_panel" class="components_panel"> 70 <div id="components_panel" class="components_panel">
28 <div class="treeHolder"> 71 <div class="treeHolder">
29 <ul id="comp_tree"></ul> 72 <ul id="comp_tree"></ul>
30 </div> 73 </div>
74 <div id="componentsContainer"></div>
31 </div> 75 </div>
32 76
33 </body> 77 </body>
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index 41afefa5..338e7e0d 100644
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -4,20 +4,189 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
4(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. 4(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5</copyright> */ 5</copyright> */
6 6
7var Montage = require("montage/core/core").Montage, 7var Montage = require("montage/core/core").Montage,
8 Component = require("montage/ui/component").Component, 8 Component = require("montage/ui/component").Component,
9 NJUtils = require("js/lib/NJUtils").NJUtils; 9 NJUtils = require("js/lib/NJUtils").NJUtils;
10
11var treeControlModule = require("js/components/tree.reel");
12var PIData = require("js/data/pi/pi-data").PiData;
13
14String.prototype.capitalizeFirstChar = function() {
15 return this.charAt(0).toUpperCase() + this.slice(1);
16};
10 17
11var treeControlModule = require("js/components/tree.reel");
12 18
13var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component, { 19var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component, {
14 _hasFocus: { 20
15 enumerable: false, 21 components: {
16 value: false 22 value: null
23 },
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
82 _testButtonJson: {
83 value: {
84 "component": "button",
85