1 files changed, 233 insertions, 0 deletions

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