aboutsummaryrefslogtreecommitdiff
path: root/js/panels/components-panel.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/components-panel.reel')
-rwxr-xr-xjs/panels/components-panel.reel/components-panel.css11
-rwxr-xr-xjs/panels/components-panel.reel/components-panel.html65
-rwxr-xr-xjs/panels/components-panel.reel/components-panel.js421
3 files changed, 497 insertions, 0 deletions
diff --git a/js/panels/components-panel.reel/components-panel.css b/js/panels/components-panel.reel/components-panel.css
new file mode 100755
index 00000000..ac250c83
--- /dev/null
+++ b/js/panels/components-panel.reel/components-panel.css
@@ -0,0 +1,11 @@
1/* <copyright>
2 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */
6
7.treeHolder{
8 width: 227px;
9 background: red;
10 padding-left: 13px;
11}
diff --git a/js/panels/components-panel.reel/components-panel.html b/js/panels/components-panel.reel/components-panel.html
new file mode 100755
index 00000000..f598a1ee
--- /dev/null
+++ b/js/panels/components-panel.reel/components-panel.html
@@ -0,0 +1,65 @@
1<!DOCTYPE html>
2<!-- <copyright>
3 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
4 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
5 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
6 </copyright> -->
7<html lang="en">
8 <head>
9 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
10 <link rel="stylesheet" type="text/css" href="components-panel.css">
11
12 <script type="text/montage-serialization">
13 {
14 "owner": {
15 "module": "js/panels/components-panel.reel",
16 "name": "ComponentsPanel",
17 "properties": {
18 "element": {"#": "components_panel"},
19 "controller": {"@": "componentsTree"}
20 }
21 },
22
23 "componentsController" : {
24 "module": "js/components/controllers/tree-controller",
25 "name": "TreeController",
26 "properties" : {
27 "branchKey" : "children",
28 "labelKey" : "text",
29 "delegate": {"@": "owner" }
30 },
31 "bindings": {
32 "content": {
33 "boundObject": {"@": "owner"},
34 "boundObjectPropertyPath": "components"
35 }
36 }
37 },
38
39 "componentsTree" : {
40 "module" : "js/components/treeview/treeview.reel",
41 "name" : "Treeview",
42 "properties" : {
43 "element" : {"#": "componentsContainer"},
44 "branchComponent" : {"@": "branch" },
45 "contentController": {"@": "componentsController"},
46 "showRoot" : false
47 }
48 },
49
50 "branch" : {
51 "module" : "js/components/treeview/ninja-branch.reel",
52 "name" : "Branch"
53 }
54 }
55 </script>
56
57 </head>
58 <body>
59
60 <div id="components_panel" class="components_panel">
61 <div id="componentsContainer"></div>
62 </div>
63
64 </body>
65</html> \ No newline at end of file
diff --git a/js/panels/components-panel.reel/components-panel.js b/js/panels/components-panel.reel/components-panel.js
new file mode 100755
index 00000000..cfacd461
--- /dev/null
+++ b/js/panels/components-panel.reel/components-panel.js
@@ -0,0 +1,421 @@
1/* <copyright>
2This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5</copyright> */
6
7var Montage = require("montage/core/core").Montage,
8 Component = require("montage/ui/component").Component,
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};
17
18
19exports.ComponentsPanel = Montage.create(Component, {
20
21 components: {
22 value: {
23 "text": "styles",
24 "children": [
25 {
26 "text": "Widgets",
27 "children": [
28 {
29 "text": "Feed Reader",
30 "dataFile" : "node_modules/components-data/feed-reader.json",
31 "component": "feedreader"
32 },
33 {
34 "text": "Map",
35 "dataFile" : "node_modules/components-data/map.json",
36 "component": "map"
37 },
38 {
39 "text": "Picasa Carousel",
40 "dataFile" : "node_modules/components-data/picasa-carousel.json",
41 "component": "picasa-carousel"
42 },
43 {
44 "text": "Search Bar",
45 "dataFile" : "node_modules/components-data/searchfield.json",
46 "component": "searchfield"
47 },
48 {
49 "text": "Youtube Channel",
50 "dataFile" : "node_modules/components-data/youtube-channel.json",
51 "component": "youtube-channel"
52 }
53 ]
54 },
55 {
56 "text": "Montage Components",
57 "children": [
58 {
59 "text": "Anchor",
60 "dataFile" : "node_modules/components-data/anchor.json",
61 "component": "anchor"
62 },
63 {
64 "text": "Button",
65 "dataFile" : "node_modules/components-data/button.json",
66 "component": "button"
67 },
68 {
69 "text": "Checkbox",
70 "dataFile" : "node_modules/components-data/checkbox.json",
71 "component": "checkbox"
72 },
73 {
74 "text": "Image Component",
75 "dataFile" : "node_modules/components-data/image.json",
76 "component": "imageComponent"
77 },
78 {
79 "text": "NumberInput",
80 "dataFile" : "node_modules/components-data/number-input.json",
81 "component": "numberInput"
82 },
83 {
84 "text": "Radio Button",
85 "dataFile" : "node_modules/components-data/radio-button.json",
86 "component": "radioButton"
87 },
88 {
89 "text": "Range Input",
90 "dataFile" : "node_modules/components-data/range-input.json",
91 "component": "rangeInput"
92 },
93 {
94 "text": "Select Input",
95 "dataFile" : "node_modules/components-data/select.json",
96 "component": "select"
97 },
98 {
99 "text": "TextArea",
100 "dataFile" : "node_modules/components-data/textarea.json",
101 "component": "textarea"
102 },
103 {
104 "text": "Textfield",
105 "dataFile" : "node_modules/components-data/textfield.json",
106 "component": "textfield"
107 },
108 {
109 "text": "Toggle Button",
110 "dataFile" : "node_modules/components-data/toggle-button.json",
111 "component": "toggleButton"
112 }
113 ]
114 }
115 ]
116 }
117 },
118
119 componentsData: {
120 value: {}
121 },
122
123 componentsToLoad: {
124 value: null
125 },
126
127 componentsLoaded: {
128 value: 0
129 },
130
131 dragComponent: {
132 value: null
133 },