diff options
Diffstat (limited to 'js/panels/Components/ComponentsPanelBase.reel')
3 files changed, 190 insertions, 0 deletions
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.css b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.css new file mode 100644 index 00000000..ac250c83 --- /dev/null +++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.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/ComponentsPanelBase.reel/ComponentsPanelBase.html b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html new file mode 100644 index 00000000..df104ecc --- /dev/null +++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.html | |||
@@ -0,0 +1,34 @@ | |||
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="ComponentsPanelBase.css"> | ||
11 | |||
12 | <script type="text/montage-serialization"> | ||
13 | { | ||
14 | "owner": { | ||
15 | "module": "js/panels/Components/ComponentsPanelBase.reel", | ||
16 | "name": "ComponentsPanelBase", | ||
17 | "properties": { | ||
18 | "element": {"#": "components_panel"} | ||
19 | } | ||
20 | } | ||
21 | } | ||
22 | </script> | ||
23 | |||
24 | </head> | ||
25 | <body> | ||
26 | |||
27 | <div id="components_panel" class="components_panel"> | ||
28 | <div class="treeHolder"> | ||
29 | <ul id="comp_tree"></ul> | ||
30 | </div> | ||
31 | </div> | ||
32 | |||
33 | </body> | ||
34 | </html> \ No newline at end of file | ||
diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js new file mode 100644 index 00000000..41afefa5 --- /dev/null +++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js | |||
@@ -0,0 +1,145 @@ | |||
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 | var Montage = require("montage/core/core").Montage, | ||
8 | Component = require("montage/ui/component").Component, | ||
9 | NJUtils = require("js/lib/NJUtils").NJUtils; | ||
10 | |||
11 | var treeControlModule = require("js/components/tree.reel"); | ||
12 | |||
13 | var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component, { | ||
14 | _hasFocus: { | ||
15 | enumerable: false, | ||
16 | value: false | ||
17 | }, | ||
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 | |||
27 | this.eventManager.addEventListener( "executeAddComponent", this, false); | ||
28 | } | ||
29 | }, | ||
30 | willDraw: { | ||
31 | enumerable: false, | ||
32 | value: function() { | ||
33 | |||
34 | } | ||
35 | }, | ||
36 | draw: { | ||
37 | enumerable: false, | ||
38 | value: function() { | ||
39 | |||
40 | } | ||
41 | }, | ||
42 | |||
43 | _loadXMLDoc: { | ||
44 | value:function(dname) { | ||
45 | if (window.XMLHttpRequest) { | ||
46 | xhttp = new XMLHttpRequest(); | ||
47 | } | ||
48 | xhttp.open("GET", dname, false); | ||
49 | xhttp.send(); | ||
50 | return xhttp.responseXML; | ||
51 | } | ||
52 | }, | ||
53 | |||
54 | handleExecuteAddComponent: { | ||
55 | value: function(evt) { | ||
56 | this.addComponentToStage(evt.detail.component, evt.detail.dropX, evt.detail.dropY) | ||
57 | } | ||
58 | }, | ||
59 | |||
60 | addComponentToStage:{ | ||
61 | value:function(componentType, dropX, dropY){ | ||
62 | var compW = 100, | ||
63 | compH = 100, | ||
64 | elementType = "div", | ||
65 | componentContainer, | ||
66 | componentElement; | ||
67 | |||
68 | if(componentType == "Button"){ | ||
69 | compW = 118; | ||
70 | compH = 52; | ||
71 | }else if(componentType == "Checkbox"){ | ||
72 | compW = 53; | ||
73 | compH = 53; | ||
74 | // elementType = "input"; | ||
75 | }else if(componentType == "DynamicText"){ | ||
76 | compW = 100; | ||
77 | compH = 20; | ||
78 | }else if(componentType == "FlowController"){ | ||
79 | compW = 800; | ||
80 | compH = 320; | ||
81 | }else if(componentType == "HotText"){ | ||
82 | compW = 50; | ||
83 | compH = 18; | ||
84 | // elementType = "input"; | ||
85 | }else if(componentType == "HotTextUnit"){ | ||
86 | compW = 45; | ||
87 | compH = 18; | ||
88 | }else if(componentType == "ImageContainer"){ | ||
89 | compW = 285; | ||
90 | compH = 232; | ||
91 | }else if(componentType == "Progress"){ | ||
92 | compW = 300; | ||
93 | compH = 9; | ||
94 | }else if(componentType == "Scrollview"){ | ||
95 | compW = 200; | ||
96 | compH = 200; | ||
97 | }else if(componentType == "Slider"){ | ||
98 | compW = 200; | ||
99 | compH = 55; | ||
100 | }else if(componentType == "TextArea"){ | ||
101 | compW = 312; | ||
102 | compH = 112; | ||
103 | elementType = "textarea"; | ||
104 | }else if(componentType == "Textfield"){ | ||
105 | compW = 312; | ||
106 | compH = 34; | ||
107 | elementType = "input"; | ||
108 | }else if(componentType == "Toggle"){ | ||
109 | compW = 60; | ||
110 | compH = 22; | ||
111 | elementType = "span"; | ||
112 | }else if(componentType == "ToggleButton"){ | ||
113 | compW = 118; | ||
114 | compH = 52; | ||
115 | }else{ | ||
116 | compW = 100; | ||
117 | compH = 25; | ||
118 | } | ||
119 | |||
120 | componentContainer = NJUtils.makeNJElement("div", componentType, "component"); | ||
121 | componentContainer.elementModel.isComponent = true; | ||
122 | |||
123 | var styles = { | ||
124 | 'position': 'absolute', | ||
125 | 'top' : dropY + 'px', | ||
126 | 'left' : dropX + 'px', | ||
127 | 'width' : compW + 'px', | ||
128 | 'height' : compH + 'px', | ||
129 | '-webkit-transform-style' : 'preserve-3d', | ||
130 | '-webkit-transform' : 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' | ||
131 | }; | ||
132 | |||
133 | |||
134 | componentElement = NJUtils.makeNJElement(elementType, "ComponentDiv", "block"); | ||
135 | |||
136 | componentContainer.appendChild(componentElement); | ||
137 | |||
138 | NJevent("elementAdding", {"el": componentContainer, "data":styles}); | ||
139 | |||
140 | var componentRef = this.application.ninja.currentDocument._window.addComponent(componentElement, componentType); | ||
141 | this.application.ninja.currentDocument._userComponentSet[componentContainer.uuid] = componentRef; | ||
142 | |||
143 | } | ||
144 | } | ||
145 | }); \ No newline at end of file | ||