From 42d78d11764dca5df6c7d01f3221f398bee17152 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 1 Mar 2012 15:00:48 -0800 Subject: Squashed commit of the workspace-bugs - Panels fixes. Signed-off-by: Valerio Virgillito --- js/panels/Panel.reel/Panel.js | 279 +++++++++++++++++------------------------- 1 file changed, 113 insertions(+), 166 deletions(-) (limited to 'js/panels/Panel.reel/Panel.js') diff --git a/js/panels/Panel.reel/Panel.js b/js/panels/Panel.reel/Panel.js index c8dd0456..e0bf3f18 100755 --- a/js/panels/Panel.reel/Panel.js +++ b/js/panels/Panel.reel/Panel.js @@ -9,227 +9,174 @@ 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; + name: { value: "Panel" }, + collapsedHeight: {value: 26}, + _collapsed: {value: false}, + _height: { value: 200 }, + minHeight: {value: 200 }, + maxHeight: { value: null}, + flexible: {value: true}, + _locked: { value: false}, + isResizing: {value: false }, + resizer: {value: null }, + modulePath: {value: null}, + moduleName: {value: null}, + _contentComponent: {value: null}, + + contentComponent: { + get: function() { + return this._contentComponent; }, - set: function(value) - { - this._panelBase = value; - this.needsDraw = true; + set: function(val) { + if (val !== null && val !== this._contentComponent) { + this.panelContent.content = val; + this.panelContent.needsDraw = true; + this._contentComponent = val; + } } }, - _panelContent: { - value: null - }, - - panelContent: { - get: function() - { - return this._panelContent; + collapsed: { + get: function() { + return this._collapsed; }, - set: function(value) - { - if (this._panelContent === value) { - return; + set: function(val) { + if (this._collapsed !== val) { + this._collapsed = val; + this.needsDraw = true; } - 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; + height: { + get: function() { + if (this._height < this.minHeight) { + this._height = this.minHeight; + } + return this._height; + }, + set: function(val) { + if(this._height !== val) { + this._height = val; 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 + _resizedHeight: { + value: 0 }, - resizer: { + locked: { get: function() { - return this._resizer; + return this._locked; }, set: function(val) { - this._resizer = val; + if (this.flexible) { + this._locked = val; + this.needsDraw = true; + } } }, - - resized: { + handleBtnCollapseAction: { value: function() { - this.panelBase.contentHeight = parseInt(this.element.style.height); + this.collapsed = !this.collapsed; 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"; + handleBtnCloseAction: { + value: function() { + this.panelContent.content = null; } }, - captureDragleave: { + prepareForDraw: { value: function() { - this.element.style.backgroundColor = ""; + //TODO: This line should not be here this line hits each time a panel is loaded. Will Need to move to instance call; + this.application.ninja.colorController.colorView = this.application.ninja.colorController.colorPanelBase.create(); + var myContent; + var that = this; + + myContent = require.async(this.modulePath) + .then(function(panelContent) { + var componentRequire = panelContent[that.moduleName]; + that.contentComponent = componentRequire.create(); + }) + .end(); } }, - handleDrop: { + handleResizeStart: { value:function(e) { - e.stopPropagation(); // Stops some browsers from redirecting. - e.preventDefault(); - this.element.style.backgroundColor = ""; - NJevent("panelOrderChanged", this); + this.isResizing = true; + this.needsDraw = true; } }, - handleDragstart: { + handleResizeMove: { value:function(e) { - e.dataTransfer.effectAllowed = 'move'; - e.dataTransfer.setData('text/html', this.element.innerHTML); - NJevent("panelSelected", this); + this._resizedHeight = e._event.dY; + this.needsDraw = true; } }, - handleDragEnter: { + handleResizeEnd: { 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); - - this.panelContent.content = this.panelBase.content; - } + this.height += this._resizedHeight; + this._resizedHeight = 0; + this.isResizing = false; + this.needsDraw = true; } }, 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; + if(this.isResizing) { + this.element.style.webkitBoxFlex = "0.1"; + } else if (this.locked) { + this.element.style.webkitBoxFlex = "0"; + } else { + this.element.style.webkitBoxFlex = null; + } - //Draw if collapsed or not - if(this.panelBase.collapsed || this.panelBase.forcedCollapse) { + if (this.collapsed) { this.element.classList.add("collapsed"); - this.element.style.height = this.panelBase.collapsedHeight + "px"; - } - else { + } else if (!this.flexible) { + this.resizer.enabled = false; 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"; + this.element.style.minHeight = this.height + "px"; + this.element.style.maxHeight = this.height + "px"; + this.element.style.height = this.height + "px"; + this.panelContent.element.style.overflowY = "hidden"; } else { - this.element.style.minHeight = this.panelBase.minHeight + "px"; - this.element.style.maxHeight = ""; - this.resizer.element.style.cursor = null; + this.panelContent.element.style.overflowY = "auto"; + this.resizer.enabled = true; + this.element.classList.remove("collapsed"); + this.element.style.minHeight = this.minHeight + "px"; + this.element.style.height = (this.height + this._resizedHeight) + "px"; + if (this.maxHeight !== null) { + this.element.style.maxHeight = this.maxHeight + "px"; + } else { + this.element.style.maxHeight = 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; + didDraw: { + value: function() { + if(this.flexible && !this.isResizing) { + this.height = this.element.offsetHeight; + } + if (this.isResizing) { + var actionEvent = document.createEvent("CustomEvent"); + actionEvent.initCustomEvent("panelResizing", true, true, null); + actionEvent.type = "panelResizing"; + this.dispatchEvent(actionEvent); + } } } }); \ No newline at end of file -- cgit v1.2.3