aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Materials
diff options
context:
space:
mode:
authormqg7342012-02-21 16:49:11 -0800
committermqg7342012-02-21 16:49:11 -0800
commitd2f4d5e5f6742d53b6324d585a700566f73c992a (patch)
tree8a3de8de6dc5ac5f6f3f0795d00a7d2d788374d7 /js/panels/Materials
parentabf78e2d7a97d295ce5a1c425fd359d47379137e (diff)
downloadninja-d2f4d5e5f6742d53b6324d585a700566f73c992a.tar.gz
Updated Materials Library and Materials Editor Popup to work with latest version of Montage.
We had to change our css to not use id's. Also, updated the popup to use Montage's Popup component. It looks like bump material has a bug. So loading that material results in a runtime error.
Diffstat (limited to 'js/panels/Materials')
-rwxr-xr-xjs/panels/Materials/materials-library-panel.reel/materials-library-panel.html8
-rwxr-xr-xjs/panels/Materials/materials-library-panel.reel/materials-library-panel.js121
-rwxr-xr-xjs/panels/Materials/materials-popup.reel/materials-popup.css131
-rwxr-xr-xjs/panels/Materials/materials-popup.reel/materials-popup.html18
-rwxr-xr-xjs/panels/Materials/materials-popup.reel/materials-popup.js47
5 files changed, 80 insertions, 245 deletions
diff --git a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html
index eede02bd..6ba4ac75 100755
--- a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html
+++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.html
@@ -10,14 +10,18 @@
10 <link rel="stylesheet" type="text/css" href="materials-library-panel.css"> 10 <link rel="stylesheet" type="text/css" href="materials-library-panel.css">
11 <script type="text/montage-serialization"> 11 <script type="text/montage-serialization">
12 { 12 {
13 "materialInfo": {
14 "module": "js/panels/Materials/materials-popup.reel",
15 "name": "MaterialsPopup"
16 },
13 "owner": { 17 "owner": {
14 "module": "js/panels/Materials/materials-library-panel.reel", 18 "module": "js/panels/Materials/materials-library-panel.reel",
15 "name": "MaterialsLibraryPanels", 19 "name": "MaterialsLibraryPanels",
16 "properties": { 20 "properties": {
17 "element": {"#": "materials_library_panel"} 21 "element": {"#": "materials_library_panel"},
22 "_materialInfo": {"@": "materialInfo"}
18 } 23 }
19 } 24 }
20
21 } 25 }
22 </script> 26 </script>
23 27
diff --git a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js
index f97e1a27..b16c4376 100755
--- a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js
+++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js
@@ -7,7 +7,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
7var Tree = require("js/components/tree.reel").Tree, 7var Tree = require("js/components/tree.reel").Tree,
8 Button = require("js/components/button.reel").Button, 8 Button = require("js/components/button.reel").Button,
9 MaterialsPopup = require("js/panels/Materials/materials-popup.reel").MaterialsPopup, 9 MaterialsPopup = require("js/panels/Materials/materials-popup.reel").MaterialsPopup,
10 PopupMananger = require("js/components/popup-manager.reel").PopupMananger; 10 PopupMananger = require("js/components/popup-manager.reel").PopupMananger,
11 Popup = require("montage/ui/popup/popup.reel").Popup;
11 12
12exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(require("montage/ui/component").Component, { 13exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(require("montage/ui/component").Component, {
13 14
@@ -92,20 +93,7 @@ exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(re
92 captureChange: { 93 captureChange: {
93 value:function(e) { 94 value:function(e) {
94 var tNode = e._event.treeNode; 95 var tNode = e._event.treeNode;
95 var left, top; 96 this._showMaterialPopup(tNode.id);
96 //TODO: Figure out if this is the best way to detect where user clicked
97 var mouseEvent = e._event.mouseEvent;
98 if (mouseEvent.clientX && mouseEvent.clientY) {
99 if (mouseEvent.clientX > (parseInt(document.width)/2)) {
100 left = mouseEvent.clientX - mouseEvent.offsetX-2;
101 top = mouseEvent.currentTarget.clientHeight/2+mouseEvent.clientY - mouseEvent.offsetY;
102 } else {
103 left = mouseEvent.clientX - mouseEvent.offsetX+parseInt(mouseEvent.currentTarget.clientWidth);
104 top = mouseEvent.clientY - mouseEvent.offsetY;
105 }
106 }
107
108 this._showMaterialPopup(left + 'px', top + 'px', 'right', 'top', tNode.id);
109 } 97 }
110 }, 98 },
111 99
@@ -113,93 +101,34 @@ exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(re
113 enumerable:true, 101 enumerable:true,
114 value:null 102 value:null
115 }, 103 },
104
105 _materialInfo: {
106 enumerable:true
107 },
116 108
117 _showMaterialPopup: { 109 _showMaterialPopup: {
118 enumerable: false, 110 enumerable: false,
119 value: function (x, y, side, align, materialID) { 111 value: function (materialID) {
120 if (this._materialPopup && this._materialPopup.opened) { 112
121 if (this._materialPopup.popup.position.x === x && this._materialPopup.popup.position.y === y) { 113 if(!this._materialPopup)
122 this._hideMaterialPopup(); 114 {
123 } else { 115 this._materialPopup = Popup.create();
124 this._materialPopup.popup.position = {x: x, y: y}; 116 this._materialPopup.content = this._materialInfo;
125 this._materialPopup.popup.tooltip = {side: side, align: align}; 117 this._materialPopup.modal = false;
126 this._materialPopup.popup.base.loadMaterials(materialID); 118 this.eventManager.addEventListener("hideMaterialPopup", this, false);
127 //TODO: Tooltip needs to be fixed to allow aligning to change on fly 119 this._materialPopup.addEventListener("show", this, false);
128 //this._materialPopup.popup.drawTooltip(); 120 }
129 } 121 this._materialPopup.show();
130 } else { 122 this._materialInfo.loadMaterials(materialID);
131 ////////////////////////////////////////////////////
132 //Creating popup from m-js component
133 var popup = document.createElement('div');
134 var content = document.createElement('div');
135 var popupBase = MaterialsPopup.create();
136
137
138 //TODO: Check to see if this HACK is needed
139 //(elements needs to be on DOM to be drawn)
140 document.body.appendChild(popup);
141 popupBase.element = popup;
142 popupBase.needsDraw = true;
143 document.body.removeChild(popup);
144 //Adding drawn element to container
145 content.appendChild(popupBase.element);
146
147 //Creating an instance of the popup and sending in created material popup content
148 this._materialPopup = {};
149 this._materialPopup.popup = PopupMananger.createPopup(content, {x: x, y: y}, {side: side, align: align});
150 this._materialPopup.popup.element.style.opacity = 0;
151 this._materialPopup.popup.base = popupBase;
152 popupBase._material = MaterialsLibrary.getMaterial( materialID );
153 popupBase._materialName = materialID;
154 //TODO: Fix this animation/draw HACK (Move to didDraw callback)
155 setTimeout(function () {
156 this._materialPopup.popup.element.style.opacity = 1;
157 this._materialPopup.popup.base.loadMaterials(materialID);
158 }.bind(this), 150);
159
160
161
162 //Popup was added, so it's opened
163 this._materialPopup.opened = true;
164 //TODO: Fix this HACK, it listens to this canvas to be clicked to close popup
165 document.getElementById('stageAndScenesContainer').addEventListener('click', this, false);
166 }
167 }
168 },
169 ////////////////////////////////////////////////////////////////////
170 //
171 handleClick: {
172 enumerable: true,
173 value: function (e) {
174 //TODO: Fix this HACK
175 if (e._event.target.id === 'stageCanvas' && this._materialPopup.opened) {
176 this._handleDocumentClick(e);
177 }
178 }
179 },
180 ////////////////////////////////////////////////////////////////////
181 //
182 _handleDocumentClick: {
183 enumerable: false,
184 value: function (e) {
185 this._hideMaterialPopup();
186 //TODO: Fix this HACK
187 document.getElementById('stageAndScenesContainer').removeEventListener ('click', this, false);
188 } 123 }
189 }, 124 },
190 //////////////////////////////////////////////////////////////////// 125
191 // 126 handleHideMaterialPopup: {
192 _hideMaterialPopup: {
193 enumerable: false, 127 enumerable: false,
194 value: function () { 128 value: function (event) {
195 if (this._materialPopup.opened) { 129 if(this._materialPopup){
196 // 130 this._materialPopup.hide();
197 PopupMananger.removePopup(this._materialPopup.popup.element); 131 }
198 this._materialPopup.opened = false;
199 //TODO: Fix HACK of removing popup
200 this._materialPopup.popup.base.destroy();
201 this._materialPopup.popup = null;
202 }
203 } 132 }