diff options
author | Armen Kesablyan | 2012-02-22 16:26:41 -0800 |
---|---|---|
committer | Armen Kesablyan | 2012-02-22 16:26:41 -0800 |
commit | 0bd1cefea2ab350fad1a891bdc926053b799aafc (patch) | |
tree | 962f559fcc02a3dfeb297d59907e40fa153453f3 /js/panels/Components/ComponentsPanelBase.reel | |
parent | 695bc5082f48dddf66ce31480a4faefc067b38bd (diff) | |
parent | 2d2b1af8b5c0d506fe6a1cf65614101fec145970 (diff) | |
download | ninja-0bd1cefea2ab350fad1a891bdc926053b799aafc.tar.gz |
Merge branch 'refs/heads/master' into new-tool-icons
Diffstat (limited to 'js/panels/Components/ComponentsPanelBase.reel')
-rwxr-xr-x[-rw-r--r--] | js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.css | 0 | ||||
-rwxr-xr-x[-rw-r--r--] | js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html | 39 | ||||
-rwxr-xr-x[-rw-r--r--] | js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js | 423 |
3 files changed, 350 insertions, 112 deletions
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.css b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.css index ac250c83..ac250c83 100644..100755 --- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.css +++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.css | |||
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html index df104ecc..6d7c8a2c 100644..100755 --- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html +++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html | |||
@@ -15,8 +15,41 @@ | |||
15 | "module": "js/panels/Components/ComponentsPanelBase.reel", | 15 | "module": "js/panels/Components/ComponentsPanelBase.reel", |
16 | "name": "ComponentsPanelBase", | 16 | "name": "ComponentsPanelBase", |
17 | "properties": { | 17 | "properties": { |
18 | "element": {"#": "components_panel"} | 18 | "element": {"#": "components_panel"}, |
19 | "controller": {"@": "componentsTree"} | ||
19 | } | 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" | ||
20 | } | 53 | } |
21 | } | 54 | } |
22 | </script> | 55 | </script> |
@@ -25,9 +58,7 @@ | |||
25 | <body> | 58 | <body> |
26 | 59 | ||
27 | <div id="components_panel" class="components_panel"> | 60 | <div id="components_panel" class="components_panel"> |
28 | <div class="treeHolder"> | 61 | <div id="componentsContainer"></div> |
29 | <ul id="comp_tree"></ul> | ||
30 | </div> | ||
31 | </div> | 62 | </div> |
32 | 63 | ||
33 | </body> | 64 | </body> |
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js index 41afefa5..b4eec771 100644..100755 --- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js +++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js | |||
@@ -4,142 +4,349 @@ 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 | ||
7 | var Montage = require("montage/core/core").Montage, | 7 | var 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 | |||
11 | var treeControlModule = require("js/components/tree.reel"); | ||
12 | var PIData = require("js/data/pi/pi-data").PiData; | ||
13 | |||
14 | String.prototype.capitalizeFirstChar = function() { | ||
15 | return this.charAt(0).toUpperCase() + this.slice(1); | ||
16 | }; | ||
10 | 17 | ||
11 | var treeControlModule = require("js/components/tree.reel"); | ||
12 | 18 | ||
13 | var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component, { | 19 | var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component, { |
14 | _hasFocus: { | 20 | |
15 | enumerable: false, | 21 | components: { |
16 | value: false | 22 | value: { |
23 | "text": "styles", | ||
24 | "children": [ | ||
25 | { | ||
26 | "text": "Montage Components", | ||
27 | "children": [ | ||
28 | { | ||
29 | "text": "Anchor", | ||
30 | "dataFile" : "node_modules/components-data/anchor.json", | ||
31 | "component": "anchor" | ||
32 | }, | ||
33 | { | ||
34 | "text": "Button", | ||
35 | "dataFile" : "node_modules/components-data/button.json", | ||
36 | "component": "button" | ||
37 | }, | ||
38 | { | ||
39 | "text": "Checkbox", | ||
40 | "dataFile" : "node_modules/components-data/checkbox.json", | ||
41 | "component": "checkbox" | ||
42 | }, | ||
43 | { | ||
44 | "text": "Image Component", | ||
45 | "dataFile" : "node_modules/components-data/image.json", | ||
46 | "component": "imageComponent" | ||
47 | }, | ||
48 | { | ||
49 | "text": "NumberInput", | ||
50 | "dataFile" : "node_modules/components-data/number-input.json", | ||
51 | "component": "numberInput" | ||
52 | }, | ||
53 | { | ||
54 | "text": "Select Input", | ||
55 | "dataFile" : "node_modules/components-data/select.json", | ||
56 | "component": "select" | ||
57 | }, | ||
58 | { | ||
59 | "text": "Radio Button", | ||
60 | "dataFile" : "node_modules/components-data/radio-button.json", | ||
61 | "component": "radioButton" | ||
62 | }, | ||
63 | { | ||
64 | "text": "Range Input", | ||
65 | "dataFile" : "node_modules/components-data/range-input.json", | ||
66 | "component": "rangeInput" | ||
67 | }, | ||
68 | { | ||
69 | "text": "TextArea", | ||
70 | "dataFile" : "node_modules/components-data/textarea.json", | ||
71 | "component": "textarea" | ||
72 | }, | ||
73 | { | ||
74 | "text": "Textfield", | ||
75 | "dataFile" : "node_modules/components-data/textfield.json", | ||
76 | "component": "textfield" | ||
77 | }, | ||
78 | { | ||
79 | "text": "Toogle Button", | ||
80 | "dataFile" : "node_modules/components-data/toggle-button.json", | ||
81 | "component": "toggleButton" | ||
82 | } | ||
83 | ] | ||
84 | } | ||
85 | ] | ||
86 | } | ||
87 | }, | ||
88 | |||
89 | componentsData: { | ||
90 | value: {} | ||
91 | }, | ||
92 | |||
93 | componentsToLoad: { | ||
94 | value: null | ||
95 | }, | ||
96 | |||
97 | componentsLoaded: { | ||
98 | value: 0 | ||
17 | }, | 99 | }, |
18 | prepareForDraw: { | ||
19 | enumerable: false, | ||
20 | value: function() { | ||
21 | var treeHolderDiv = document.getElementById("comp_tree"); | ||
22 | var componentsTree = treeControlModule.Tree.create(); | ||
23 | componentsTree.element = treeHolderDiv; | ||
24 | componentsTree.dataProvider = this._loadXMLDoc("js/panels/Components/Components.xml"); | ||
25 | componentsTree.needsDraw = true; | ||
26 | 100 | ||
27 | this.eventManager.addEventListener( "executeAddComponent", this, false); | 101 | dragComponent: { |
28 | } | 102 | value: null |
29 | }, | 103 | }, |
30 | willDraw: { | ||
31 | enumerable: false, | ||
32 | value: function() { | ||
33 | 104 | ||
34 | } | 105 | dragPosition: { |
106 | value: null | ||
35 | }, |