From db9d44fea7856a8fba9e9e306dafa8777f1eb015 Mon Sep 17 00:00:00 2001
From: Eric Guzman
Date: Fri, 13 Apr 2012 01:45:31 -0700
Subject: CSS Panel - Add drag and drop UI

---
 .../css-panel/declaration.reel/declaration.js      | 55 ++++++++++++++++++++++
 1 file changed, 55 insertions(+)

(limited to 'js/panels/css-panel/declaration.reel/declaration.js')

diff --git a/js/panels/css-panel/declaration.reel/declaration.js b/js/panels/css-panel/declaration.reel/declaration.js
index 34819df5..0cc98951 100644
--- a/js/panels/css-panel/declaration.reel/declaration.js
+++ b/js/panels/css-panel/declaration.reel/declaration.js
@@ -14,6 +14,14 @@ exports.Declaration = Montage.create(Component, {
             console.log("declaration - template did load");
         }
     },
+    prepareForDraw : {
+        value: function(e) {
+            console.log("Declaration :: prepare for draw");
+            this._element.addEventListener('drop', this, false);
+            this.element.addEventListener('dragenter', this, false);
+            this.element.addEventListener('dragleave', this, false);
+        }
+    },
     _declaration: {
         value: null
     },
@@ -95,11 +103,58 @@ exports.Declaration = Montage.create(Component, {
         },
         distinct: true
     },
+
+    /* drag/drop events */
+    handleDrop : {
+        value: function(e) {
+            console.log('dropped');
+        }
+    },
+    handleDragenter : {
+        value: function(e) {
+            console.log("dec - drag enter");
+            this.element.classList.add("drag-over");
+        }
+    },
+    handleDragleave : {
+        value: function(e) {
+            if(this.element === e._event.toElement || this._containsElement(e._event.toElement)) {
+                //// Dragged-over element is inside of component element
+                //// I.e. it's not really a "drag leave"
+                e.stopPropagation();
+                e.preventDefault();
+                return false;
+            }
+
+            console.log("DECLARATION - ELEMENT NOT IN DEC", e._event.toElement);
+
+            //console.log("dec - drag leave");
+            this.element.classList.remove("drag-over");
+        }
+    },
+
     draw: {
         value: function() {
             if(this._declaration) {
 
             }
         }
+    },
+
+    _containsElement : {
+        value: function(innerElement) {
+            var isInComponent = false,
+                parent = innerElement.parentNode;
+
+            while (parent !== document) {
+                if(parent === this.element) {
+                    isInComponent = true;
+                    break;
+                }
+                parent = parent.parentNode;
+            }
+
+            return isInComponent;
+        }
     }
 });
\ No newline at end of file
-- 
cgit v1.2.3