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 --- css/ninja.css | 19 +- js/data/panels-data.js | 141 +++++++ js/ninja.reel/ninja.html | 4 +- js/panels/Color/colorpanel.js | 11 +- .../Color/colorpanelbase.reel/colorpanelbase.js | 13 + js/panels/Panel.reel/Panel.html | 116 +++++- js/panels/Panel.reel/Panel.js | 279 ++++++------- .../PanelContainer.reel/PanelContainer.html | 116 +++++- .../PanelContainer.reel/PanelContainer.js | 432 ++++++--------------- js/panels/Resizer.js | 10 +- js/panels/Timeline/Layer.reel/Layer.js | 2 +- js/panels/drag-drop-composer.js | 136 +++++++ js/panels/properties.reel/properties.css | 299 ++++++++++++++ js/panels/properties.reel/properties.html | 161 ++++++++ js/panels/properties.reel/properties.js | 394 +++++++++++++++++++ .../properties.reel/section.reel/section.html | 50 +++ js/panels/properties.reel/section.reel/section.js | 30 ++ .../color-select.reel/color-select.html | 53 +++ .../custom-rows/color-select.reel/color-select.js | 83 ++++ .../custom-rows/dual-row.reel/dual-row.html | 67 ++++ .../sections/custom-rows/dual-row.reel/dual-row.js | 53 +++ .../custom-rows/single-row.reel/single-row.html | 47 +++ .../custom-rows/single-row.reel/single-row.js | 50 +++ .../sections/custom.reel/custom.html | 61 +++ .../properties.reel/sections/custom.reel/custom.js | 356 +++++++++++++++++ .../position-and-size.reel/position-and-size.css | 14 + .../position-and-size.reel/position-and-size.html | 142 +++++++ .../position-and-size.reel/position-and-size.js | 264 +++++++++++++ .../sections/three-d-view.reel/three-d-view.html | 348 +++++++++++++++++ .../sections/three-d-view.reel/three-d-view.js | 265 +++++++++++++ js/panels/properties/content.reel/content.css | 299 -------------- js/panels/properties/content.reel/content.html | 161 -------- js/panels/properties/content.reel/content.js | 394 ------------------- js/panels/properties/properties-panel.js | 15 - js/panels/properties/section.reel/section.html | 50 --- js/panels/properties/section.reel/section.js | 30 -- .../color-select.reel/color-select.html | 53 --- .../custom-rows/color-select.reel/color-select.js | 83 ---- .../custom-rows/dual-row.reel/dual-row.html | 67 ---- .../sections/custom-rows/dual-row.reel/dual-row.js | 53 --- .../custom-rows/single-row.reel/single-row.html | 47 --- .../custom-rows/single-row.reel/single-row.js | 50 --- .../properties/sections/custom.reel/custom.html | 61 --- .../properties/sections/custom.reel/custom.js | 356 ----------------- .../position-and-size.reel/position-and-size.css | 14 - .../position-and-size.reel/position-and-size.html | 142 ------- .../position-and-size.reel/position-and-size.js | 264 ------------- .../sections/three-d-view.reel/three-d-view.html | 348 ----------------- .../sections/three-d-view.reel/three-d-view.js | 265 ------------- js/panels/resize-composer.js | 121 ++++++ scss/imports/scss/_PanelUI.scss | 32 +- 51 files changed, 3610 insertions(+), 3311 deletions(-) create mode 100644 js/data/panels-data.js create mode 100644 js/panels/drag-drop-composer.js create mode 100755 js/panels/properties.reel/properties.css create mode 100755 js/panels/properties.reel/properties.html create mode 100755 js/panels/properties.reel/properties.js create mode 100755 js/panels/properties.reel/section.reel/section.html create mode 100755 js/panels/properties.reel/section.reel/section.js create mode 100755 js/panels/properties.reel/sections/custom-rows/color-select.reel/color-select.html create mode 100755 js/panels/properties.reel/sections/custom-rows/color-select.reel/color-select.js create mode 100755 js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.html create mode 100755 js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js create mode 100755 js/panels/properties.reel/sections/custom-rows/single-row.reel/single-row.html create mode 100755 js/panels/properties.reel/sections/custom-rows/single-row.reel/single-row.js create mode 100755 js/panels/properties.reel/sections/custom.reel/custom.html create mode 100755 js/panels/properties.reel/sections/custom.reel/custom.js create mode 100755 js/panels/properties.reel/sections/position-and-size.reel/position-and-size.css create mode 100755 js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html create mode 100755 js/panels/properties.reel/sections/position-and-size.reel/position-and-size.js create mode 100755 js/panels/properties.reel/sections/three-d-view.reel/three-d-view.html create mode 100755 js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js delete mode 100755 js/panels/properties/content.reel/content.css delete mode 100755 js/panels/properties/content.reel/content.html delete mode 100755 js/panels/properties/content.reel/content.js delete mode 100755 js/panels/properties/properties-panel.js delete mode 100755 js/panels/properties/section.reel/section.html delete mode 100755 js/panels/properties/section.reel/section.js delete mode 100755 js/panels/properties/sections/custom-rows/color-select.reel/color-select.html delete mode 100755 js/panels/properties/sections/custom-rows/color-select.reel/color-select.js delete mode 100755 js/panels/properties/sections/custom-rows/dual-row.reel/dual-row.html delete mode 100755 js/panels/properties/sections/custom-rows/dual-row.reel/dual-row.js delete mode 100755 js/panels/properties/sections/custom-rows/single-row.reel/single-row.html delete mode 100755 js/panels/properties/sections/custom-rows/single-row.reel/single-row.js delete mode 100755 js/panels/properties/sections/custom.reel/custom.html delete mode 100755 js/panels/properties/sections/custom.reel/custom.js delete mode 100755 js/panels/properties/sections/position-and-size.reel/position-and-size.css delete mode 100755 js/panels/properties/sections/position-and-size.reel/position-and-size.html delete mode 100755 js/panels/properties/sections/position-and-size.reel/position-and-size.js delete mode 100755 js/panels/properties/sections/three-d-view.reel/three-d-view.html delete mode 100755 js/panels/properties/sections/three-d-view.reel/three-d-view.js create mode 100644 js/panels/resize-composer.js diff --git a/css/ninja.css b/css/ninja.css index 7baf4204..f139c3b9 100755 --- a/css/ninja.css +++ b/css/ninja.css @@ -216,8 +216,6 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co .montage-editor { padding: 0px; word-wrap: normal; } -.panelContainer { margin: 0px; padding: 0px 0px; position: relative; overflow: auto; } - .panelDisclosureIcon { background-image: url("../images/panels/panelDisclosureIcon.png"); background-repeat: no-repeat; width: 16px; height: 16px; float: left; -webkit-transition-property: rotate; -webkit-transition-duration: 0.2s; -webkit-transition-timing-function: linear; padding-right: 2px; } .panelBackground { color: white; background: #292929; } @@ -606,13 +604,13 @@ button.panel-button { -webkit-appearance: none; font-size: 9px; color: white; ba .pp_filllabel { border-width: none; margin: -1px 8px 0px 34px; } -.panels { display: -webkit-box; position: absolute; -webkit-box-orient: vertical; -webkit-box-align: stretch; height: 100%; width: 100%; } +.panels { display: -webkit-box; position: absolute; -webkit-box-orient: vertical; -webkit-box-align: stretch; height: 100%; width: 100%; overflow: hidden; } .panel .resizeBar { height: 4px; cursor: row-resize; } .panels .panel { min-height: 25px; -webkit-box-flex: 0; display: -webkit-box; -webkit-box-orient: vertical; background: #282828; height: 200px; padding: 0px 2px; -webkit-box-sizing: border-box; } -.panels .panel .panelBody { -webkit-box-flex: 1; -webkit-box-sizing: border-box; -webkit-box-orient: vertical; -webkit-box-align: stretch; position: relative; resize: vertical; overflow: auto; height: 200px; } +.panels .panel .panelBody { -webkit-box-flex: 1; -webkit-box-sizing: border-box; -webkit-box-orient: vertical; -webkit-box-align: stretch; position: relative; overflow: auto; height: 200px; } .panel .panelBodyContent { -webkit-box-sizing: border-box; -webkit-box-align: stretch; position: absolute; height: 100%; width: 100%; } @@ -628,11 +626,11 @@ button.panel-button { -webkit-appearance: none; font-size: 9px; color: white; ba .panel .head.collapsed .arrowIcon { -webkit-transform: rotate(-90deg); } -.panel .head .closeBtn { background: url("data:image/png;base64,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") center center no-repeat; width: 25px; opacity: 0.4; cursor: pointer; } +.panel .head .closeBtn { background: url("data:image/png;base64,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") center center no-repeat; width: 25px; opacity: 0.4; cursor: pointer; display: none; } .panel .head .closeBtn:hover { opacity: 1; } -.panel .panelBody { border-right: 1px solid #3a3a3a; border-bottom: 1px solid #3a3a3a; -webkit-transition: all 0.1s linear; overflow: hidden; } +.panel .panelBody { border-right: 1px solid #3a3a3a; border-bottom: 1px solid #3a3a3a; overflow: hidden; } .panel .panelBodyContent { border: 1px solid #000; background: #474747; } @@ -642,15 +640,20 @@ button.panel-button { -webkit-appearance: none; font-size: 9px; color: white; ba .panel.collapsed .panelBody { overflow: hidden; height: 0px; } +.rightPanelContainer { -webkit-box-orient: vertical; display: -webkit-box; } + #rightPanelContainer .panel.collapsed { height: 26px !important; min-height: 26px !important; max-height: 26px !important; -webkit-box-flex: 0.01; overflow: hidden; } .panel.collapsed .arrowIcon { -webkit-transform: rotate(-90deg); } -#rightPanelContent { position: absolute; height: 100%; width: 100%; } +.rightPanelContent { position: absolute; height: 100%; width: 100%; } #rightPanelContainer .panel { -webkit-box-flex: 100; } -.over { border-top: 1px solid #0000FF; } +/* Drag & Drop Code TODO: Most likely need to be somewhere else */ +body section .dragging { opacity: 0.4; } + +body .main .dragOver:not(.dragging) { background-color: #917B56; } .menuBar { width: 100%; border-style: solid; border-width: 1px; height: 22px; color: white; background: #474747; border-color: black; } diff --git a/js/data/panels-data.js b/js/data/panels-data.js new file mode 100644 index 00000000..aa5057a2 --- /dev/null +++ b/js/data/panels-data.js @@ -0,0 +1,141 @@ +/* +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; + +exports.PanelsData = Montage.create(Montage, { + + panels: { + value: [ + { + name: "Color", + height: 200, + minHeight: 200, + maxHeight: null, + flexible: false, + scrollable: false, + collapsed: false, + open: true, + contentComponent: null, + modulePath: "js/panels/Color/colorpanelbase.reel", + moduleName: "ColorPanelBase" + }, + { + name: "Properties", + minHeight: 200, + height: 200, + maxHeight: null, + flexible: true, + scrollable: true, + collapsed: false, + open: true, + contentComponent: null, + modulePath: "js/panels/properties.reel", + moduleName: "Properties" + }, + { + name: "Materials", + minHeight: 100, + height: 100, + maxHeight: null, + flexible: true, + collapsed: true, + scrollable: true, + open: true, + contentComponent: null, + modulePath: "js/panels/Materials/materials-library-panel.reel", + moduleName: "MaterialsLibraryPanel" + }, + { + name: "Components", + minHeight: 100, + height: 200, + maxHeight: null, + flexible: true, + scrollable: true, + collapsed: true, + open: true, + contentComponent: null, + modulePath: "js/panels/Components/ComponentsPanelBase.reel", + moduleName: "ComponentsPanelBase" + }, +// { +// name: "Project/Assets", +// minHeight: 250, +// height: 250, +// maxHeight: null, +// flexible: true, +// scrollable: true, +// collapsed: false, +// open: true, +// content: null, +// modulePath: "js/panels/Project/projectpanelbase.reel", +// moduleName: "ProjectPanelBase" +// }, + { + name: "CSS", + minHeight: 195, + height: 195, + maxHeight: null, + flexible: true, + scrollable: true, + collapsed: true, + open: true, + contentComponent: null, + modulePath: "js/panels/CSSPanel/CSSPanelBase.reel", + moduleName: "CSSPanelBase" + }, + { + name: "Presets", + minHeight: 100, + height: 100, + maxHeight: null, + flexible: true, + collapsed: true, + scrollable: true, + open: true, + contentComponent: null, + modulePath: "js/panels/presets/content.reel", + moduleName: "content" + } + ] + } + + + /* + _panelOrder: { + value: ["Properties","Color","Components","Project/Assets", "CSS","Materials"] + }, + + panelOrder: { + get: function() { + return this._panelOrder; + }, + set: function(val) { + this._panelOrder = val; + } + } + + + panels: { + get: function() { + var filtered = this._panels.filter(function(item) { + return item.open; + }); + + filtered.sort(function(a,b) { + a.name + }); + + return filtered; + }, + set : function() { + + } + } + */ + +}); \ No newline at end of file diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html index a20a6090..112f844e 100755 --- a/js/ninja.reel/ninja.html +++ b/js/ninja.reel/ninja.html @@ -389,8 +389,8 @@
-
-
+
+
diff --git a/js/panels/Color/colorpanel.js b/js/panels/Color/colorpanel.js index 4858be68..3a603e98 100755 --- a/js/panels/Color/colorpanel.js +++ b/js/panels/Color/colorpanel.js @@ -38,7 +38,7 @@ exports.ColorPanel = Montage.create(PanelBase, { //////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////// //TODO: Remove and add via toolbar draw loop - this.application.ninja.colorController.createToolbar(); + //////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////// @@ -47,14 +47,7 @@ exports.ColorPanel = Montage.create(PanelBase, { }, //////////////////////////////////////////////////////////////////// //Applying default colors only on first draw - handleFirstDraw: { - enumerable: true, - value: function (e) { - // - this.content.applyDefaultColors(); - this.content.removeEventListener('firstDraw', this, false); - } - } + //////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////// }); \ No newline at end of file diff --git a/js/panels/Color/colorpanelbase.reel/colorpanelbase.js b/js/panels/Color/colorpanelbase.reel/colorpanelbase.js index ff738bbe..af62dd07 100755 --- a/js/panels/Color/colorpanelbase.reel/colorpanelbase.js +++ b/js/panels/Color/colorpanelbase.reel/colorpanelbase.js @@ -117,10 +117,23 @@ exports.ColorPanelBase = Montage.create(Component, { enumerable: false, value: function() { //TODO: Remove temporary hack, color history should be initilized + this.addEventListener('firstDraw', this, false); + this.application.ninja.colorController.colorView = this; this.colorManager.colorHistory.fill = [{m: 'nocolor', c: {}, a: 1}]; this.colorManager.colorHistory.stroke = [{m: 'nocolor', c: {}, a: 1}]; } }, + + handleFirstDraw: { + enumerable: true, + value: function (e) { + // + this.application.ninja.colorController.createToolbar(); + this.applyDefaultColors(); + this.removeEventListener('firstDraw', this, false); + } + }, + //////////////////////////////////////////////////////////////////// //Assigning values and binding willDraw: { diff --git a/js/panels/Panel.reel/Panel.html b/js/panels/Panel.reel/Panel.html index 7556952c..04e2930a 100755 --- a/js/panels/Panel.reel/Panel.html +++ b/js/panels/Panel.reel/Panel.html @@ -8,22 +8,86 @@ @@ -55,7 +139,7 @@
-
+
diff --git a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js index 003724bb..3a141b05 100755 --- a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js +++ b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.js @@ -3,388 +3,178 @@ 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. */ - + /* Panel Container - A container for other panels */ var Montage = require("montage/core/core").Montage; var Component = require("montage/ui/component").Component; -var PropertiesPanel = require("js/panels/Properties/properties-panel").PropertiesPanel; -var ColorPanel = require("js/panels/Color/ColorPanel").ColorPanel; -var CSSPanel = require("js/panels/CSSPanel/CSSPanel").CSSPanel; -var ComponentsPanel = require("js/panels/Components/ComponentsPanel").ComponentsPanel; -var ProjectPanel = require("js/panels/Project/ProjectPanel").ProjectPanel; -var MaterialsPanel = require("js/panels/Materials/MaterialsPanel").MaterialsPanel; -var PresetsPanel = require("js/panels/presets/presets-panel").PresetsPanel; - + exports.PanelContainer = Montage.create(Component, { - lastOffset: { - value:null - }, - _collapsedHeight: { - value: 26 - }, - _isFirstAdjustableNonCollapsed: { - value:true - }, - _spaceAvailable: { - value:null - }, - _panelSelected : { - value: null - }, - _isFirstDraw: { - value: false - }, - _panels: { - value: [] - }, - skipPanelIndex: { + panelData: { value: null }, - initPanelOrder: { - value: ['ColorPanel', 'PropertiesPanel','ComponentsPanel','ProjectPanel','CSSPanel','MaterialsPanel','PresetsPanel'] - }, - - panelOrder: { + panels: { value: [] }, - deserializedFromTemplate : { - value: function() { - this.eventManager.addEventListener( "appLoaded", this, false); + panelController: { + value: null + }, - } + currentPanelState: { + value: {} }, - handleAppLoaded: { + templateDidLoad: { value: function() { - //Panels Loading - this.lastOffset = this.element.offsetHeight; - - /* Old Settings - if( this.application.ninja.settings.getSetting(this.element.id, "panelOrder") != null) { - this.initPanelOrder = this.application.ninja.settings.getSetting(this.element.id, "panelOrder") - } - */ + var pLen, storedData; - // if Panels already loaded no need to load again. - for(var i = 0; i < this.initPanelOrder.length; i++) { - this.addPanel(eval(this.initPanelOrder[i])); - this.panelOrder.push(this.initPanelOrder[i]); + // Loop through the panels to add to the repetition and get the saved state + pLen = this.panelData.panels.length; -// this.application.ninja.settings.setSetting(this.element.id, "panelOrder", this.panelOrder); - } - - var hideSplitter = true; + // Get the saved panel state + storedData = this.application.localStorage.getItem("panels"); - var that = this; - this._panels.forEach(function(obj) { + for(var i = 0; i < pLen; i++) { - var panelMenuName = obj.panelName.substring(0, obj.panelName.indexOf('/') !== -1 ? obj.panelName.indexOf('/'): obj.panelName.length) + "Panel"; + var p = this.panelData.panels[i]; - that.application.ninja.appModel[panelMenuName] = obj.visible; + this.currentPanelState[p.name] = {}; + this.currentPanelState.version = "1.0"; - if (obj.visible) { - hideSplitter = false; + if(storedData && storedData[p.name]) { + p.collapsed = storedData[p.name].collapsed; } - }); - if (hideSplitter) { - this.panelSplitter.toggle(); - this.panelSplitter.disabled = true; - } + this.currentPanelState[p.name].collapsed = p.collapsed; -// this.needsDraw = true; + this.panels.push(p); + } - this.addEventListener("change@appModel.PropertiesPanel", this, false); - this.addEventListener("change@appModel.ProjectPanel", this, false); - this.addEventListener("change@appModel.ColorPanel", this, false); - this.addEventListener("change@appModel.ComponentsPanel", this, false); - this.addEventListener("change@appModel.CSSPanel", this, false); - this.addEventListener("change@appModel.MaterialsPanel", this, false); - this.addEventListener("change@appModel.PresetsPanel", this, false); + this.application.localStorage.setItem("panels", this.currentPanelState); } }, - - handleEvent: { - value: function(e) { - this.togglePanel(e.propertyName); + + prepareForDraw: { + value: function() { + window.addEventListener("resize", this, false); } }, - - addPanel: { - value: function(panel) { - if (panel.init) { - panel.init(); - } - this._panels.push(panel); - if (this.panelSplitter.disabled) { - this.panelSplitter.disabled = false; - this.panelSplitter.toggle(); - } + + handlePanelResizing: { + value: function(e) { + this._setPanelsSizes(e.target); } }, - handlePanelCollapsed: { + + handleResize: { value: function(e) { - - for(var i=0; i < this._panels.length; i++) { - if (e._event.detail.panelBase._uuid == this._panels[i]._uuid) { - this.skipPanelIndex = i; - this.handlePanelResized(i, true); + this._setPanelsSizes(null); } - } - } }, - - handlePanelResizedStart : { + + handleDropped: { value: function(e) { - for (var i = 0; i < this._panels.length; i++) { - if ( e._event.detail.element.parentNode.uuid == this.repeater.childComponents[i].element.uuid) { - this.handlePanelResized(i); + var draggedIndex, droppedIndex = 0; + for(var i = 0; i< this.repeater.childComponents.length; i++ ) { + if (this.repeater.childComponents[i] === e._event.draggedComponent) { + draggedIndex = i; } - } - } - }, - handlePanelResizedEnd : { - value: function(e) { - for (var i = 0; i < this._panels.length; i++) { - if ( e._event.detail.element.parentNode.uuid == this.repeater.childComponents[i].element.uuid) { - this.handlePanelResized(); + if (this.repeater.childComponents[i] === e._event.droppedComponent) { + droppedIndex = i; } } + + var panelRemoved = this.panelController.content.splice(draggedIndex,1); + this.panelController.content.splice(droppedIndex,0, panelRemoved[0]); + //console.log(draggedIndex, droppedIndex); + this._setPanelsSizes(null); } }, + + _setPanelsSizes: { + value: function(panelActivated) { + var setLocked = true; + this.repeater.childComponents.forEach(function(obj) { + if (obj === panelActivated || panelActivated === null) { + setLocked = false; + } - handlePanelResizing: { - value:function(e) { - this.resizedRedraw(); + obj.locked = setLocked; + obj.needsDraw = true; + }); } }, - canFlex: { - value: function(panel) { - if (panel.isStatic) { - return false; + _redrawPanels: { + value: function(panelActivated, unlockPanels) { + var maxHeight = this.element.offsetHeight; + var setLocked = true; + if(unlockPanels === true) { + setLocked = false; } - return !(panel.collapsed || panel.forcedCollapse); + var childrensMinHeights = ((this.repeater.childComponents.length - 1) * 26) + panelActivated.minHeight; - } - }, - - handlePanelResized: { - value: function(selectedPanelIndex, collapsing) { - minHeights = 0; - needsLocks = true; - - if (collapsing) { - if (this._panels.length -1 == selectedPanelIndex) { - needsLocks = false; - } else { - needsLocks = false; - for (var i = 0; i < this._panels.length; i++) { - if ( i > selectedPanelIndex) { - if (this.canFlex(this._panels[i])) { - needsLocks = true; - } - } - } - } - } - for (var i = 0; i < this._panels.length; i++) { - if (this._panels[i].collapsed || this._panels[i].forcedCollapse) { - minHeights += this._collapsedHeight; + this.repeater.childComponents.forEach(function(obj) { + if(obj === panelActivated) { + setLocked = false; + } else if(obj.collapsed) { + //Collapsed Ignore the rest of the code } else { - if (i < selectedPanelIndex && needsLocks) { - this._panels[i].isLocked = true; - this.repeater.childComponents[i].needsDraw = true; - minHeights += this.repeater.childComponents[i].element.offsetHeight; + if (setLocked) { + if((maxHeight - childrensMinHeights) - obj.height > 0 ) { + childrensMinHeights += obj.height - 26; } else { - this._panels[i].isLocked = false; - if(this.repeater.childComponents[i]) this.repeater.childComponents[i].needsDraw = true; - minHeights += this._panels[i].minHeight; + this.currentPanelState[obj.name].collapsed = obj.collapsed = true; + this.application.localStorage.setItem("panels", this.currentPanelState); } - } - } - // Theres got to be a better way to do this. Look into initiating a redraw when flex box is done redrawing its element sizes. Set them as offset height - // Look into new css possibilities as flex box gets better integrated. - - setTimeout(this.resizedRedraw.bind(this), 300); - while( minHeights > this.element.children[0].offsetHeight) { - var panelCount = this._panels.length; - var lastPanel = null; - for( var i = 0; i < panelCount; i++ ) { - if (i != this.skipPanelIndex) { - if (!this._panels[i].forcedCollapse && !this._panels[i].collapsed) { - lastPanel = i; - } - } - } - minHeights -= this._panels[lastPanel].minHeight - this._collapsedHeight; - this._panels[lastPanel].collapsed = true; - //this.repeater.childComponents[lastPanel].needsDraw = true; - - - } - this.skipPanelIndex = null; - } - }, - - resizedRedrawTimer: { - value: null - }, - - resizedRedraw: { - value:function() { - for (var i = 0; i < this._panels.length; i++) { - var rptEl = this.repeater.childComponents[i].element; - var offset = rptEl.offsetHeight; - this._panels[i].contentHeight = offset; - rptEl.style.height = offset; - this.repeater.childComponents[i].needsDraw = true; - } - } - }, - - togglePanel: { - value: function(e) { - var panelName = e._event ? e._event.detail : e; - for(var i=0; i < this.panelOrder.length; i++) { - if (this.panelOrder[i] == panelName) { - if(this._panels[i].visible) { - this.hidePanel(i); } else { - this._panels[i].visible = true; - this.repeater.childComponents[i].needsDraw = true; -// NJevent("panelAdded",this._panels[i]); - if (this.panelSplitter.disabled) { - this.panelSplitter.disabled = false; - this.panelSplitter.toggle(); + if ((maxHeight - childrensMinHeights) - obj.minHeight > 0 ) { + childrensMinHeights += obj.minHeight - 26; + } else { + this.currentPanelState[obj.name].collapsed = obj.collapsed = true; + this.application.localStorage.setItem("panels", this.currentPanelState); } } } - } - this.handlePanelResized(); + obj.locked = setLocked; + }, this); } }, - - handlePanelSelected: { + + handleAction: { value: function(e) { - this._panelSelected = e._event.detail; - } - }, - - handlePanelClose: { - value:function(e) { - if( e._event.detail != null) { - for(var i=0; i < this._panels.length; i++) { - if (e._event.detail._panelBase._uuid == this._panels[i]._uuid) { - var panelMenuName = this._panels[i].panelName.substring(0, this._panels[i].panelName.indexOf('/') !== -1 ? this._panels[i].panelName.indexOf('/'): this._panels[i].panelName.length) + "Panel"; - this.application.ninja.appModel[panelMenuName] = false; - this.hidePanel(i); - } - } - } - } - }, - - hidePanel: { - value: function(panelIndex) { - var panel = this._panels[panelIndex]; - distHeight = 0; - if (panel.collapsed || panel.forcedCollapse) distHeight = this._collapsedHeight; - else distHeight = panel.contentHeight; - this._spaceAvailable += distHeight; -// NJevent("panelClosed", panel.panelName); - panel.visible = false; - this.repeater.childComponents[panelIndex].needsDraw = true; - - //Validate all panels are closed - var hideSplitter = true; - this._panels.forEach(function(obj) { - if (obj.visible) { - hideSplitter = false; - } - }) - if (hideSplitter) { - this.panelSplitter.toggle(); - this.panelSplitter.disabled = true; - } - } - }, - - handlePanelOrderChanged: { - value:function(e) { - overed = null; -