aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Materials/materials-library-panel.reel
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Materials/materials-library-panel.reel')
-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
2 files changed, 31 insertions, 98 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 }
204 } 133 }
205}); \ No newline at end of file 134}); \ No newline at end of file