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/drag-drop-composer.js | 136 ++++++++++++++++++++++++++++++++++++++++
1 file changed, 136 insertions(+)
create mode 100644 js/panels/drag-drop-composer.js
(limited to 'js/panels/drag-drop-composer.js')
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
--
cgit v1.2.3