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 --- js/panels/Panel.reel/Panel.js | 233 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 233 insertions(+) create mode 100644 js/panels/Panel.reel/Panel.js (limited to 'js/panels/Panel.reel/Panel.js') diff --git a/js/panels/Panel.reel/Panel.js b/js/panels/Panel.reel/Panel.js new file mode 100644 index 00000000..efa287c5 --- /dev/null +++ b/js/panels/Panel.reel/Panel.js @@ -0,0 +1,233 @@ +/* +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 Montage = require("montage/core/core").Montage; +var Component = require("montage/ui/component").Component; + +exports.Panel = Montage.create(Component, { + + + reelDidLoad: { + value: function() { + } + }, + + collapsedHeight: { + value:26 + }, + + _isFirstDraw: { + value:false + }, + + _panelBase: { + value: null + }, + + panelBase: { + get: function() + { + return this._panelBase; + }, + set: function(value) + { + this._panelBase = value; + this.needsDraw = true; + } + }, + + _panelContent: { + value: null + }, + + panelContent: { + get: function() + { + return this._panelContent; + }, + set: function(value) + { + if (this._panelContent === value) { + return; + } + this._panelContent = value; + this.needsDraw = true; + } + }, + + collapseToggle: { + value: function() { + if (this.panelBase.forcedCollapse) { + this.panelBase.forcedCollapse = false; + this.panelBase.collapsed = false; + this.needsDraw = true; + + } else { + this.panelBase.collapsed = !this.panelBase.collapsed; + this.needsDraw = true; + } + NJevent("panelCollapsed", this); + } +}, + + closePanel: { + value: function() { + NJevent("panelClose", this); + } + }, + + handleMouseover: { + value: function() { + this.element.draggable = true; + } + }, + + handleMouseout: { + value: function() { + this.element.draggable = false; + } + }, + + _resizer: { + value: null + }, + + resizer: { + get: function() { + return this._resizer; + }, + set: function(val) { + this._resizer = val; + } + }, + + + resized: { + value: function() { + this.panelBase.contentHeight = parseInt(this.element.style.height); + this.needsDraw = true; + } + }, + + //TODO: Find out why without This following function drop event wont fire ??? + handleEvent: { + value:function(e) { + e.preventDefault(); + e.stopImmediatePropagation(); + + } + }, + + captureDragover: { + value:function(e) { + e.preventDefault(); + e.stopImmediatePropagation(); + this.element.style.backgroundColor = "#917B56"; + } + }, + + captureDragleave: { + value: function() { + this.element.style.backgroundColor = ""; + } + }, + + handleDrop: { + value:function(e) { + e.stopPropagation(); // Stops some browsers from redirecting. + e.preventDefault(); + this.element.style.backgroundColor = ""; + NJevent("panelOrderChanged", this); + } + }, + + handleDragstart: { + value:function(e) { + e.dataTransfer.effectAllowed = 'move'; + e.dataTransfer.setData('text/html', this.element.innerHTML); + NJevent("panelSelected", this); + } + }, + + handleDragEnter: { + value: function(e) { + this.element.classList.add("over"); + } + }, + + handleDragend: { + value:function() { + + } + }, + + + prepareForDraw: { + value:function() { + if (!this._isFirstDraw) { + this._isFirstDraw = true; + + // Initialize Panel + // Drag Drop Functions + this.element.addEventListener("drop", this, false); + this.element.addEventListener("dragover", this, true); + this.element.addEventListener("dragleave", this, true); + this.element.addEventListener("dragenter", this, false); + this.element.addEventListener("dragstart", this, false); + + // Handle Functionality + this.element.getElementsByClassName("panelTitle")[0].addEventListener("mouseover", this, false); + this.element.getElementsByClassName("panelTitle")[0].addEventListener("mouseout", this, false); + // Arrow Collapse Button Initiate + this.element.getElementsByClassName("arrowIcon")[0].addEventListener("click", this.collapseToggle.bind(this), false); + // Close Button + this.element.getElementsByClassName("closeBtn")[0].addEventListener("click", this.closePanel.bind(this), false); + //Resized Event + if(typeof this.resizer.value == "number") this.panelBase.contentHeight = this.resizer.value; + this.resizer.element.addEventListener("mouseup",this.resized.bind(this),false); + } + } + }, + + draw: { + value: function() { + //If the panel is set not to be visible. We dont bother doing anything else to it. till the next draw cycle that its set visible true + // Actually thinking about it now. this might not work. + if (!this.panelBase.visible) this.element.style.display = "none"; + else this.element.style.display = null; + + //Draw if collapsed or not + if(this.panelBase.collapsed || this.panelBase.forcedCollapse) { + this.element.classList.add("collapsed"); + this.element.style.height = this.panelBase.collapsedHeight + "px"; + } + else { + this.element.classList.remove("collapsed"); + this.element.style.height = this.panelBase.contentHeight + "px"; + } + + var pContentDiv = this.element.getElementsByClassName("panelObjects")[0]; + + //Figure out Heights (min, max, and current) + if (this.panelBase.isStatic || this.panelBase.isLocked) { + this.element.style.minHeight = this.panelBase.contentHeight + "px"; + this.element.style.maxHeight = this.panelBase.contentHeight + "px"; + this.resizer.element.style.cursor = "default"; + } else { + this.element.style.minHeight = this.panelBase.minHeight + "px"; + this.element.style.maxHeight = ""; + this.resizer.element.style.cursor = null; + } + + if (this.panelBase.scrollable) pContentDiv.style.overflow = "auto"; + else pContentDiv.style.overflow = "hidden"; + this.element.getElementsByClassName("panelTitle")[0].innerHTML = this.panelBase.panelName; + //pContentDiv.appendChild(this.panelBase.content); + this.panelContent.content = this.panelBase.content; + + } + } +}); \ No newline at end of file -- cgit v1.2.3