From 0a500496236bedbdd9fbbcb3d841a195b3e5fc0f Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Thu, 1 Mar 2012 13:38:44 -0800
Subject: stage and elements fixes
- Resizing the iframe container when resizing the stage
- Removing 3d rules from elements when adding them
- Adding a name property in the pi
Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
js/panels/properties/content.reel/content.html | 21 +++++++++++++++++
js/panels/properties/content.reel/content.js | 31 +++++++++++++++++++++-----
2 files changed, 47 insertions(+), 5 deletions(-)
(limited to 'js/panels')
diff --git a/js/panels/properties/content.reel/content.html b/js/panels/properties/content.reel/content.html
index ab485323..bf11e215 100755
--- a/js/panels/properties/content.reel/content.html
+++ b/js/panels/properties/content.reel/content.html
@@ -58,6 +58,22 @@
}
},
+ "elementNameAttribute": {
+ "module": "montage/ui/textfield.reel",
+ "name": "Textfield",
+ "properties": {
+ "element": {"#": "elementNameAttribute"},
+ "readOnly": false
+ },
+ "bindings": {
+ "value": {
+ "boundObject": {"@": "owner"},
+ "boundObjectPropertyPath": "nameAttribute",
+ "oneway": false
+ }
+ }
+ },
+
"PosSizeSection": {
"module": "js/panels/properties/section.reel",
@@ -128,6 +144,7 @@
"element": {"#": "propertiesPanel"},
"elementNameInput": {"@": "elementNameInput1"},
"elementId": {"@": "elementID"},
+ "elementNameAttribute": {"@": "elementNameAttribute"},
"positionSize": {"@": "PosSize"},
"threeD": {"@": "threeDProperties"}
}
@@ -150,6 +167,10 @@
<label id="lblClass">Class:</label>
<article class="fieldRow"><input type="text" id="elementClassName" class="nj-skinned" /></article>
</section>
+ <section class="fieldCol">
+ <label id="lblName">Name:</label>
+ <article class="fieldRow"><input type="text" id="elementNameAttribute" class="nj-skinned" /></article>
+ </section>
</section>
<section id="PosSize"></section>
<section id="customSections">
diff --git a/js/panels/properties/content.reel/content.js b/js/panels/properties/content.reel/content.js
index 72c02ffd..d4b0edc4 100755
--- a/js/panels/properties/content.reel/content.js
+++ b/js/panels/properties/content.reel/content.js
@@ -25,6 +25,10 @@ exports.Content = Montage.create(Component, {
value: null
},
+ nameAttribute: {
+ value: null
+ },
+
customSections: {
value: []
},
@@ -72,6 +76,9 @@ exports.Content = Montage.create(Component, {
this.elementId.element.addEventListener("blur", this, false);
this.elementId.element.addEventListener("keyup", this, false);
+
+ this.elementNameAttribute.element.addEventListener("blur", this, false);
+ this.elementNameAttribute.element.addEventListener("keyup", this, false);
}
},
@@ -95,10 +102,18 @@ exports.Content = Montage.create(Component, {
*/
handleBlur: {
value: function(event) {
- if(this.application.ninja.selectedElements.length) {
- ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "id", this.elementId.value, "Change", "pi");
- } else {
- ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "id", this.elementId.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.id);
+ console.log(event.target);
+ if(event.target.id === "elementID") {
+ if(this.application.ninja.selectedElements.length) {
+ ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "id", this.elementId.value, "Change", "pi");
+ } else {
+ ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "id", this.elementId.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.id);
+ }
+ } else if(event.target.id === "elementNameAttribute") {
+ if(this.application.ninja.selectedElements.length) {
+ //ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "name", this.elementNameAttribute.value, "Change", "pi");
+ this.application.ninja.selectedElements[0]._element.setAttribute("name", this.elementNameAttribute.value);
+ }
}
}
},
@@ -106,7 +121,11 @@ exports.Content = Montage.create(Component, {
handleKeyup: {
value: function(event) {
if(event.keyCode === 13) {
- this.elementId.element.blur();
+ if(event.target === "elementID") {
+ this.elementId.element.blur();
+ } else if(event.target === "elementNameAttribute") {
+ this.elementNameAttribute.element.blur();
+ }
}
}
},
@@ -164,6 +183,7 @@ exports.Content = Montage.create(Component, {
this.elementName = "Stage";
this.elementId.value = stage.elementModel.id;
this.elementClassName = "";
+ this.nameAttribute = "";
this.positionSize.disablePosition = true;
this.threeD.disableTranslation = true;
@@ -226,6 +246,7 @@ exports.Content = Montage.create(Component, {
this.elementName = el.elementModel.selection;
this.elementId.value = el.getAttribute("id") || "";
this.elementClassName = el.getAttribute("class");
+ this.nameAttribute = el.getAttribute("name") || "";
this.positionSize.disablePosition = false;
this.threeD.disableTranslation = false;
--
cgit v1.2.3
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 <valerio@motorola.com>
---
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 ++++++
47 files changed, 3439 insertions(+), 3286 deletions(-)
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
(limited to 'js/panels')
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 @@
<head>
<script type="text/montage-serialization">
{
- "resizer1": {
- "module": "js/panels/Resizer",
- "name": "Resizer",
+ "Resizer": {
+ "module": "js/panels/resize-composer",
+ "name": "ResizeComposer",
"properties": {
"element": {"#": "resizeBar"},
- "panel": {"#": "panel"},
- "isVertical": true,
- "willSave": false
+ "component": {"@": "owner"}
},
- "bindings": {
- "ownerId": {
- "boundObject": {"@": "owner"},
- "boundObjectPropertyPath": "panelBase.panelName",
- "oneway": true
+ "listeners": [
+ {
+ "type": "resizeStart",
+ "listener": {"@": "owner"}
+ },
+ {
+ "type": "resizeMove",
+ "listener": {"@": "owner"}
+ },
+ {
+ "type": "resizeEnd",
+ "listener": {"@": "owner"}
}
- }
+ ]
+ },
+
+ "DragDrop": {
+ "module": "js/panels/drag-drop-composer",
+ "name": "DragDropComposer",
+ "properties": {
+ "element": {"@": "panelTitle"},
+ "component": {"@": "owner"}
+ },
+ "listeners": [
+ {
+ "type": "dragStart",
+ "listener": {"@": "owner"}
+ },
+ {
+ "type": "dropHover",
+ "listener": {"@": "owner"}
+ },
+ {
+ "type": "dropped",
+ "listener": {"@": "owner"}
+ },
+ {
+ "type": "dropEnd",
+ "listener": {"@": "owner"}
+ }
+ ]
+ },
+
+ "btnCollapse": {
+ "module": "montage/ui/toggle-button.reel",
+ "name": "ToggleButton",
+ "properties": {
+ "element": {"#": "btnCollapse"},
+ "pressedClass": "hide",
+ "identifier": "btnCollapse"
+ },
+ "listeners": [
+ {
+ "type": "action",
+ "listener": {"@": "owner"}
+ }
+ ]
+ },
+
+ "btnClose": {
+ "module": "montage/ui/button.reel",
+ "name": "Button",
+ "properties": {
+ "element": {"#": "btnClose"},
+ "pressedClass": "hide",
+ "identifier": "btnClose"
+ },
+ "listeners": [
+ {
+ "type": "action",
+ "listener": {"@": "owner"}
+ }
+ ]
},
"slot1": {
@@ -34,14 +98,28 @@
}
},
+ "panelTitle": {
+ "module": "montage/ui/dynamic-text.reel",
+ "name": "DynamicText",
+ "properties": {
+ "element": {"#": "panelTitle"}
+ },
+ "bindings": {
+ "value": {
+ "boundObject": {"@": "owner"},
+ "boundObjectPropertyPath": "name",
+ "oneway": true
+ }
+ }
+ },
+
"owner": {
"module": "js/panels/Panel.reel",
"name": "Panel",
"properties": {
"element": {"#": "panel"},
- "resizer": {"@": "resizer1"},
+ "resizer": {"@": "Resizer"},
"panelContent": {"@": "slot1"}
-
}
}
}
@@ -50,11 +128,11 @@
</head>
<body>
-<article id="panel">
+<article id="panel" class="panel" draggable="draggable">
<div id="head" class="head">
- <span class="arrowIcon"></span>
- <span class="panelTitle">Panel</span>
- <span class="closeBtn"></span>
+ <span id="btnCollapse" class="arrowIcon"></span>
+ <span id="panelTitle" class="panelTitle">Panel</span>
+ <span id="btnClose" class="closeBtn"></span>
</div>
<div class="panelBody">
<div class="panelBodyContent">
@@ -63,7 +141,7 @@
</div>
</div>
</div>
- <div data-montage-id="resizeBar" class="resizeBar"></div>
+ <div id="resizeBar" class="resizeBar"></div>
</article>
</body>
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
diff --git a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.html b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.html
index 5c6ac227..76f6b9c4 100755
--- a/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.html
+++ b/js/panels/PanelContainer/PanelContainer.reel/PanelContainer.html
@@ -9,35 +9,103 @@
<script type="text/montage-serialization">
{
- "panel": {
- "module": "js/panels/Panel.reel",
- "name": "Panel",
+ "panelData": {
+ "module": "js/data/panels-data",
+ "name": "PanelsData"
+ },
+
+ "PanelController": {
+ "module": "montage/ui/controller/array-controller",
+ "name" : "ArrayController",
"properties": {
- "element": {"#": "panel"}
+ "automaticallyOrganizeObjects": true
},
"bindings": {
- "panelBase": {
- "boundObject": {"@": "repetition1"},
- "boundObjectPropertyPath": "objectAtCurrentIteration",
+ "content": {
+ "boundObject": {"@": "owner"},
+ "boundObjectPropertyPath": "panels",
"oneway": true
}
}
},
-
"repetition1": {
"module": "montage/ui/repetition.reel",
"name": "Repetition",
"properties": {
- "element": {"#": "panels"}
+ "element": {"#": "panels"},
+ "contentController": {"@" : "PanelController"}
+ }
+ },
+
+ "panel": {
+ "module": "js/panels/Panel.reel",
+ "name": "Panel",
+ "properties": {
+ "element": {"#": "panel"},
+ "identifier" : "panels"
},
"bindings": {
- "objects": {
- "boundObject": {"@": "owner"},
- "boundObjectPropertyPath": "_panels",
+ "name": {
+ "boundObject": {"@": "repetition1"},
+ "boundObjectPropertyPath": "objectAtCurrentIteration.name",
+ "oneway": true
+ },
+ "height": {
+ "boundObject": {"@": "repetition1"},
+ "boundObjectPropertyPath": "objectAtCurrentIteration.height",
+ "oneway": false
+ },
+ "minHeight": {
+ "boundObject": {"@": "repetition1"},
+ "boundObjectPropertyPath": "objectAtCurrentIteration.minHeight",
+ "oneway": true
+ },
+ "maxHeight": {
+ "boundObject": {"@": "repetition1"},
+ "boundObjectPropertyPath": "objectAtCurrentIteration.maxHeight",
+ "oneway": true
+ },
+ "flexible": {
+ "boundObject": {"@": "repetition1"},
+ "boundObjectPropertyPath": "objectAtCurrentIteration.flexible",
+ "oneway": true
+ },
+ "collapsed": {
+ "boundObject": {"@": "repetition1"},
+ "boundObjectPropertyPath": "objectAtCurrentIteration.collapsed",
+ "oneway": false
+ },
+ "modulePath": {
+ "boundObject": {"@": "repetition1"},
+ "boundObjectPropertyPath": "objectAtCurrentIteration.modulePath",
"oneway": true
+ },
+ "moduleName": {
+ "boundObject": {"@": "repetition1"},
+ "boundObjectPropertyPath": "objectAtCurrentIteration.moduleName",
+ "oneway": true
+ },
+ "contentComponent": {
+ "boundObject": {"@": "repetition1"},
+ "boundObjectPropertyPath": "objectAtCurrentIteration.contentComponent",
+ "oneway": false
}
- }
+ },
+ "listeners": [
+ {
+ "type": "resizeStart",
+ "listener": {"@": "owner"}
+ },
+ {
+ "type": "resizeMove",
+ "listener": {"@": "owner"}
+ },
+ {
+ "type": "resizeEnd",
+ "listener": {"@": "owner"}
+ }
+ ]
},
"owner": {
@@ -45,8 +113,24 @@
"name": "PanelContainer",
"properties": {
"element": {"#": "panelContainer"},
- "repeater": {"@": "repetition1"}
- }
+ "repeater": {"@": "repetition1"},
+ "panelData": {"@": "panelData" },
+ "panelController" : {"@" : "PanelController"}
+ },
+ "listeners": [
+ {
+ "type": "panelResizing",
+ "listener": {"@": "owner"}
+ },
+ {
+ "type": "action",
+ "listener": {"@": "owner"}
+ },
+ {
+ "type": "dropped",
+ "listener": {"@": "owner"}
+ }
+ ]
}
}
</script>
@@ -55,7 +139,7 @@
<body>
<section id="panelContainer">
<article id="panels" class="panels">
- <article id="panel" class="panel"></article>
+ <article id="panel"></article>
</article>
</section>
</body>
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.<br/>
No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
</copyright> */
-
+
/*
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;
- selected = null;
- for(var i=0; i < this._panels.length; i++) {
- if (e._event.detail.panelBase._uuid == this._panels[i]._uuid) {
- overed = i;
- }
- if (this._panelSelected.panelBase._uuid == this._panels[i]._uuid) {
- selected = i;
- }
- }
- if (overed != selected) {
- var panelRemoved = this._panels.splice(selected,1);
- this._panels.splice(overed,0, panelRemoved[0]);
- var panelOrderRemoved = this.panelOrder.splice(selected,1);
- this.panelOrder.splice(overed,0, panelOrderRemoved[0]);
-
- //this.application.ninja.settings.setSetting(this.element.id, "panelOrder", this.panelOrder);
- }
- }
- },
-
- prepareForDraw: {
- value: function() {
- //console.log("drawing:" + this._panels.length);
- if (!this._isFirstDraw) {
- this._isFirstDraw = true;
- this.eventManager.addEventListener("panelOrderChanged", this, false);
- this.eventManager.addEventListener("panelClose", this, false);
- this.eventManager.addEventListener("panelCollapsed", this, false);
- this.eventManager.addEventListener("panelSelected", this, false);
-
- this.eventManager.addEventListener("panelResizing", this, false);
- this.eventManager.addEventListener("panelResizedStart", this, false);
- this.eventManager.addEventListener("panelResizedEnd", this, false);
- window.addEventListener("resize", this.handlePanelResized.bind(this), false);
+ var unlockPanels = true;
+ var afterPanel = false;
+ var panelName = e.target.parentComponent.name;
+ switch(e.target.identifier) {
+ case "btnCollapse":
+ this.currentPanelState[e.target.parentComponent.name].collapsed = e.target.parentComponent.collapsed;
+ this.application.localStorage.setItem("panels", this.currentPanelState);
+ this._setPanelsSizes(e.target.parentComponent);
+ this._redrawPanels(e.target.parentComponent, unlockPanels);
+ break;
+ case "btnClose":
+ this.panelController.content.forEach(function(obj) {
+ if(afterPanel) {
+ if(obj.flexible) {
+ unlockPanels = false;
+ }
+ }
+ if (obj.name === panelName) {
+ afterPanel = true;
+ this.panelController.removeObjects(obj);
+ }
+ });
+ this._redrawPanels(e.target.parentComponent, unlockPanels);
+ break;
}
}
- },
-
- didDraw: {
- value: function() {
- this.handlePanelResized();
- }
- },
- //External Objects
- _repeater: {
- value:null
- },
- repeater: {
- get: function() {
- return this._repeater;
- },
- set: function(val) {
- this._repeater = val;
- }
- },
- _panelSplitter: {
- value:null
- },
- panelSplitter: {
- get: function() {
- return this._panelSplitter;
- },
- set: function(val) {
- this._panelSplitter = val;
- }
}
-
+
});
\ No newline at end of file
diff --git a/js/panels/Resizer.js b/js/panels/Resizer.js
index ca6ed062..0252c4fb 100755
--- a/js/panels/Resizer.js
+++ b/js/panels/Resizer.js
@@ -90,16 +90,22 @@ exports.Resizer = Montage.create(Component, {
return this._panel;
},
set: function(val) {
- this._panel = val
+ this._panel = val;
+ if(val._element) this._panel = val._element;
}
},
+
+ height: {
+ value: null
+ },
handleClick: {
value: function() {
}
},
-
+
+
handleMousedown: {
value: function(e) {
e.preventDefault();
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index d50360e6..e3897bbf 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -491,7 +491,7 @@ var Layer = exports.Layer = Montage.create(Component, {
},
draw: {
value: function() {
-
+
// Coordinate the collapsers
if (this.mainCollapser.isCollapsed !== this.isMainCollapsed) {
this.mainCollapser.bypassAnimation = true;
diff --git a/js/panels/drag-drop-composer.js b/js/panels/drag-drop-composer.js
new file mode 100644
index 00000000..e09f601d
--- /dev/null
+++ b/js/panels/drag-drop-composer.js
@@ -0,0 +1,136 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
+</copyright> */
+
+var Montage = require("montage/core/core").Montage;
+var Composer = require("montage/ui/composer/composer").Composer;
+
+exports.DragDropComposer = Montage.create(Composer, {
+
+ draggable: {
+ value: false // TODO: Turning this off until color Panel bug fixes are in
+ },
+
+ droppable: {
+ value: true
+ },
+
+ identifier: {
+ value: "generic"
+ },
+
+ _dragover: {
+ value: false
+ },
+
+ load: {
+ value: function() {
+ //TODO: to make this work even better check to see if this is a component or not
+ //right now it does not support data-montage id's
+ this.element.element.addEventListener("mouseover", this, true);
+ this.element.element.addEventListener("mouseout", this, true);
+ this.component.element.addEventListener("dragenter", this, true);
+ this.component.element.addEventListener("dragleave", this, true);
+ this.component.element.addEventListener("dragend", this, true);
+ this.component.element.addEventListener("drop", this, true);
+ this.component.element.addEventListener("dragover", this, true);
+ this.component.element.addEventListener("dragstart", this, true);
+ }
+ },
+
+ unload: {
+ value: function() {
+ this.element.element.removeEventListener("mouseover", this, true);
+ this.element.element.removeEventListener("mouseout", this, true);
+ this.component.element.removeEventListener("dragenter", this, true);
+ this.component.element.removeEventListener("dragleave", this, true);
+ this.component.element.removeEventListener("dragend", this, true);
+ this.component.element.removeEventListener("drop", this, true);
+ this.component.element.removeEventListener("dragover", this, true);
+ this.component.element.removeEventListener("dragstart", this, true);
+ }
+ },
+
+ captureMouseover: {
+ value: function(e) {
+ if(this.draggable) {
+ this.component.element.draggable = true;
+ }
+ }
+ },
+
+ captureMouseout: {
+ value: function(e) {
+ this.component.element.draggable = false;
+ }
+ },
+
+ /* ------ Drag Drop Events ------- */
+
+ // This Function will determine what is being moved
+ captureDragstart: {
+ value:function(e) {
+ e.dataTransfer.effectAllowed = 'move';
+ e.dataTransfer.setData('Text', this.identifier);
+ this.component.element.classList.add("dragging");
+ this.component.application.ninja.componentBeingDragged = this.component;
+ }
+ },
+
+ captureDragenter: {
+ value: function(e) {
+
+ }
+ },
+
+ captureDragover: {
+ value:function(e) {
+ e.preventDefault();
+ e.stopImmediatePropagation();
+ if (!this._dragover) {
+ this._dragover = true;
+ this.component.element.classList.add("dragOver");
+ }
+ }
+ },
+
+ captureDragleave: {
+ value: function(e) {
+ if (this._dragover) {
+ this._dragover = false;
+ this.component.element.classList.remove("dragOver");
+ }
+ }
+ },
+
+ captureDrop: {
+ value:function(e) {
+ e.stopPropagation(); // Stops some browsers from redirecting.
+ e.preventDefault();
+ if (this._dragover) {
+ this._dragover = false;
+ this.component.element.classList.remove("dragOver");
+ if (this.identifier === e.dataTransfer.getData("Text")) {
+ if(this.component.application.ninja.componentBeingDragged !== this.component) {
+ dropEvent = document.createEvent("CustomEvent");
+ dropEvent.initCustomEvent("dropped", true, false, null);
+ dropEvent.draggedComponent = this.component.application.ninja.componentBeingDragged;
+ dropEvent.droppedComponent = this.component;
+ this.component.dispatchEvent(dropEvent);
+ }
+ }
+ this.component.application.ninja.componentBeingDragged = null;
+ }
+
+ }
+ },
+
+ captureDragend: {
+ value:function(e) {
+ this.component.element.classList.remove("dragging");
+ }
+ }
+
+});
\ No newline at end of file
diff --git a/js/panels/properties.reel/properties.css b/js/panels/properties.reel/properties.css
new file mode 100755
index 00000000..f8d37984
--- /dev/null
+++ b/js/panels/properties.reel/properties.css
@@ -0,0 +1,299 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
+ </copyright> */
+
+.propertiesPanel {
+ color:#FFF;
+ overflow-x: hidden;
+}
+
+.propertiesPanel .fieldCol {
+ display: -webkit-box;
+ -webkit-box-orient:horizontal;
+ position:relative;
+}
+
+.propertiesPanel .fieldCol > label {
+ -webkit-box-flex:0;
+ text-align: right;
+ width:46px;
+ display:block;
+ padding: 4px 2px 4px 5px;
+ height:16px;
+ line-height: 1