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 From bb9adf8a3162a5bbed5a4a8f0d63deeb75f76e61 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Mon, 5 Mar 2012 22:27:19 -0800 Subject: removing repetition from the panel container and using a static list of panels. - Fixing the bugs associated with the repetition of component and PI problems. Signed-off-by: Valerio Virgillito --- js/panels/Panel.reel/Panel.js | 101 +++++++++++++++++++++++++----------------- 1 file changed, 61 insertions(+), 40 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 e0bf3f18..be03d019 100755 --- a/js/panels/Panel.reel/Panel.js +++ b/js/panels/Panel.reel/Panel.js @@ -9,31 +9,52 @@ var Component = require("montage/ui/component").Component; exports.Panel = Montage.create(Component, { - 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(val) { - if (val !== null && val !== this._contentComponent) { - this.panelContent.content = val; - this.panelContent.needsDraw = true; - this._contentComponent = val; - } - } + name: { + value: "Panel" + }, + + _collapsed: { + value: false + }, + + _height: { + value: 200 + }, + + minHeight: { + value: 200 + }, + + maxHeight: { + value: null + }, + + flexible: { + value: true + }, + + _locked: { + value: false + }, + + isResizing: { + value: false + }, + + _resizedHeight: { + value: 0 + }, + + resizer: { + value: null + }, + + modulePath: { + value: null + }, + + moduleName: { + value: null }, collapsed: { @@ -63,10 +84,6 @@ exports.Panel = Montage.create(Component, { } }, - _resizedHeight: { - value: 0 - }, - locked: { get: function() { return this._locked; @@ -94,17 +111,21 @@ exports.Panel = Montage.create(Component, { prepareForDraw: { value: function() { - //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(); + if(this.name === "Color") { + this.application.ninja.colorController.colorView = this.application.ninja.colorController.colorPanelBase.create(); + } + + if(this.modulePath && this.moduleName) { + console.log("load content"); + // Load the slot content + var that = this; + require.async(this.modulePath) + .then(function(panelContent) { + var componentRequire = panelContent[that.moduleName]; + that.panelContent.content = componentRequire.create(); + }) + .end(); + } } }, -- cgit v1.2.3 From 4c16cf1d8085c70e1ed8fb2098954311bc22f81f Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Mon, 5 Mar 2012 22:33:51 -0800 Subject: remove console log Signed-off-by: Valerio Virgillito --- js/panels/Panel.reel/Panel.js | 1 - 1 file changed, 1 deletion(-) (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 be03d019..2b308258 100755 --- a/js/panels/Panel.reel/Panel.js +++ b/js/panels/Panel.reel/Panel.js @@ -116,7 +116,6 @@ exports.Panel = Montage.create(Component, { } if(this.modulePath && this.moduleName) { - console.log("load content"); // Load the slot content var that = this; require.async(this.modulePath) -- cgit v1.2.3 From 84931583f1da8da29784074978f146b281b8efa3 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Wed, 7 Mar 2012 16:08:36 -0800 Subject: Disabled state for panels Signed-off-by: Armen Kesablyan --- js/panels/Panel.reel/Panel.js | 4 ++++ 1 file changed, 4 insertions(+) (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 2b308258..33f9b3a7 100755 --- a/js/panels/Panel.reel/Panel.js +++ b/js/panels/Panel.reel/Panel.js @@ -57,6 +57,10 @@ exports.Panel = Montage.create(Component, { value: null }, + disabled: { + value:false + }, + collapsed: { get: function() { return this._collapsed; -- cgit v1.2.3