From b89a7ee8b956c96a1dcee995ea840feddc5d4b27 Mon Sep 17 00:00:00 2001 From: Pierre Frisch Date: Thu, 22 Dec 2011 07:25:50 -0800 Subject: First commit of Ninja to ninja-internal Signed-off-by: Valerio Virgillito --- .../materials-library-panel.js | 205 +++++++++++++++++++++ 1 file changed, 205 insertions(+) create mode 100644 js/panels/Materials/materials-library-panel.reel/materials-library-panel.js (limited to 'js/panels/Materials/materials-library-panel.reel/materials-library-panel.js') 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 new file mode 100644 index 00000000..f97e1a27 --- /dev/null +++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js @@ -0,0 +1,205 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +var Tree = require("js/components/tree.reel").Tree, + Button = require("js/components/button.reel").Button, + MaterialsPopup = require("js/panels/Materials/materials-popup.reel").MaterialsPopup, + PopupMananger = require("js/components/popup-manager.reel").PopupMananger; + +exports.MaterialsLibraryPanel = (require("montage/core/core").Montage).create(require("montage/ui/component").Component, { + + _hasFocus: { + enumerable: false, + value: false + }, + + prepareForDraw: { + enumerable: false, + value: function() { + var treeHolderDiv = document.getElementById("materials_library_tree"); + var materialsTree = Tree.create(); + materialsTree.element = treeHolderDiv; + materialsTree.dataProvider = this._loadXMLDoc("js/panels/Materials/Materials.xml"); + materialsTree.needsDraw = true; + + materialsTree.addEventListener("change", this, true); + + var addButton = Button.create(); + addButton.element = document.getElementById("ml_add_btn"); + addButton.label = "Add"; + addButton.needsDraw = true; + addButton.addEventListener("action", this, true); + + var copyButton = Button.create(); + copyButton.element = document.getElementById("ml_copy_btn"); + copyButton.label = "Copy"; + copyButton.needsDraw = true; + copyButton.addEventListener("action", this, true); + + var deleteButton = Button.create(); + deleteButton.element = document.getElementById("ml_delete_btn"); + deleteButton.label = "Delete"; + deleteButton.needsDraw = true; + deleteButton.addEventListener("action", this, true); + } + }, + + willDraw: { + enumerable: false, + value: function() { + + } + }, + + draw: { + enumerable: false, + value: function() { + + } + }, + + _loadXMLDoc: { + value:function(dname) { + if (window.XMLHttpRequest) { + xhttp = new XMLHttpRequest(); + } + xhttp.open("GET", dname, false); + xhttp.send(); + return xhttp.responseXML; + } + }, + + captureAction: { + value:function(event) { + switch(event._currentTarget.label) + { + case "Add": + console.log("Add new material"); + break; + case "Copy": + console.log("Copy selected material"); + break; + case "Delete": + console.log("Delete selected material"); + break; + } + } + }, + + captureChange: { + value:function(e) { + var tNode = e._event.treeNode; + var left, top; + //TODO: Figure out if this is the best way to detect where user clicked + var mouseEvent = e._event.mouseEvent; + if (mouseEvent.clientX && mouseEvent.clientY) { + if (mouseEvent.clientX > (parseInt(document.width)/2)) { + left = mouseEvent.clientX - mouseEvent.offsetX-2; + top = mouseEvent.currentTarget.clientHeight/2+mouseEvent.clientY - mouseEvent.offsetY; + } else { + left = mouseEvent.clientX - mouseEvent.offsetX+parseInt(mouseEvent.currentTarget.clientWidth); + top = mouseEvent.clientY - mouseEvent.offsetY; + } + } + + this._showMaterialPopup(left + 'px', top + 'px', 'right', 'top', tNode.id); + } + }, + + _materialPopup: { + enumerable:true, + value:null + }, + + _showMaterialPopup: { + enumerable: false, + value: function (x, y, side, align, materialID) { + if (this._materialPopup && this._materialPopup.opened) { + if (this._materialPopup.popup.position.x === x && this._materialPopup.popup.position.y === y) { + this._hideMaterialPopup(); + } else { + this._materialPopup.popup.position = {x: x, y: y}; + this._materialPopup.popup.tooltip = {side: side, align: align}; + this._materialPopup.popup.base.loadMaterials(materialID); + //TODO: Tooltip needs to be fixed to allow aligning to change on fly + //this._materialPopup.popup.drawTooltip(); + } + } else { + //////////////////////////////////////////////////// + //Creating popup from m-js component + var popup = document.createElement('div'); + var content = document.createElement('div'); + var popupBase = MaterialsPopup.create(); + + + //TODO: Check to see if this HACK is needed + //(elements needs to be on DOM to be drawn) + document.body.appendChild(popup); + popupBase.element = popup; + popupBase.needsDraw = true; + document.body.removeChild(popup); + //Adding drawn element to container + content.appendChild(popupBase.element); + + //Creating an instance of the popup and sending in created material popup content + this._materialPopup = {}; + this._materialPopup.popup = PopupMananger.createPopup(content, {x: x, y: y}, {side: side, align: align}); + this._materialPopup.popup.element.style.opacity = 0; + this._materialPopup.popup.base = popupBase; + popupBase._material = MaterialsLibrary.getMaterial( materialID ); + popupBase._materialName = materialID; + //TODO: Fix this animation/draw HACK (Move to didDraw callback) + setTimeout(function () { + this._materialPopup.popup.element.style.opacity = 1; + this._materialPopup.popup.base.loadMaterials(materialID); + }.bind(this), 150); + + + + //Popup was added, so it's opened + this._materialPopup.opened = true; + //TODO: Fix this HACK, it listens to this canvas to be clicked to close popup + document.getElementById('stageAndScenesContainer').addEventListener('click', this, false); + } + } + }, + //////////////////////////////////////////////////////////////////// + // + handleClick: { + enumerable: true, + value: function (e) { + //TODO: Fix this HACK + if (e._event.target.id === 'stageCanvas' && this._materialPopup.opened) { + this._handleDocumentClick(e); + } + } + }, + //////////////////////////////////////////////////////////////////// + // + _handleDocumentClick: { + enumerable: false, + value: function (e) { + this._hideMaterialPopup(); + //TODO: Fix this HACK + document.getElementById('stageAndScenesContainer').removeEventListener ('click', this, false); + } + }, + //////////////////////////////////////////////////////////////////// + // + _hideMaterialPopup: { + enumerable: false, + value: function () { + if (this._materialPopup.opened) { + // + PopupMananger.removePopup(this._materialPopup.popup.element); + this._materialPopup.opened = false; + //TODO: Fix HACK of removing popup + this._materialPopup.popup.base.destroy(); + this._materialPopup.popup = null; + } + } + } +}); \ No newline at end of file -- cgit v1.2.3