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/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 @@ +/* +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; +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 From 4e35725e6c9044c37bef28b8c8d36f4b5c89bfd9 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Mon, 5 Mar 2012 23:18:31 -0800 Subject: Adding drag and drop Signed-off-by: Valerio Virgillito --- js/panels/drag-drop-composer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/drag-drop-composer.js') diff --git a/js/panels/drag-drop-composer.js b/js/panels/drag-drop-composer.js index e09f601d..b36c8334 100644 --- a/js/panels/drag-drop-composer.js +++ b/js/panels/drag-drop-composer.js @@ -10,7 +10,7 @@ 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 + value: true }, droppable: { -- cgit v1.2.3