CSS Panel - Add drag and drop UI

4 files changed, 135 insertions, 4 deletions

diff --git a/js/panels/css-panel/declaration.reel/declaration.css b/js/panels/css-panel/declaration.reel/declaration.css
index 77257fec..e37d89d2 100644
--- a/js/panels/css-panel/declaration.reel/declaration.css
+++ b/js/panels/css-panel/declaration.reel/declaration.css
@@ -9,4 +9,7 @@
 }
 .treeRoot > .style-shorthand-branch > dl {
     margin-top: 4px;
+}
+.drag-over {
+    /*background-color: red;*/
 }
\ No newline at end of file
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
diff --git a/js/panels/css-panel/style.reel/style.css b/js/panels/css-panel/style.reel/style.css
index afcb7ca4..66c25fe0 100644
--- a/js/panels/css-panel/style.reel/style.css
+++ b/js/panels/css-panel/style.reel/style.css
@@ -4,8 +4,11 @@
  (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
  </copyright> */
 
+/* ------------------------
+  Style item container styles
+------------------------  */
 .style-item {
-
+    border-bottom: 1px solid rgba(0,0,0,0);
     cursor: url(/js/../images/tools/hand_down.png), default;
     display: block;
     overflow: hidden;
@@ -13,10 +16,14 @@
     text-overflow: ellipsis;
 }
 .style-item:hover {
-    background-color: #fafafa;
     border-right: 3px double #999;
-    margin-right: 1px;
+    margin-right: 3px;
 }
+
+/* ------------------------
+  Checkbox
+------------------------   */
+
 .style-item input {
     height: 10px;
     width: 10px;
@@ -29,6 +36,11 @@
 .style-item-disabled {
     opacity: .5;
 }
+
+/* ------------------------
+  Property/value styles
+------------------------   */
+
 .css-property, .css-value {
     border: 1px solid rgba(0,0,0,0);
     border-radius: 2px;
@@ -57,6 +69,11 @@
 .css-value {
     display: inline;
 }
+
+/* ------------------------
+  Editable Styles
+------------------------   */
+
 .style-item .editable {
     background-color: transparent;
     border: 1px solid #999;
@@ -73,4 +90,21 @@
     position: relative;
     margin-right: -7px;
     right: -1px;
+}
+
+/* ------------------------
+  Drag/Drop Styles
+------------------------   */
+
+.style-item.dragged {
+    background: none;
+    border-right-style: none;
+    opacity: .85;
+}
+.style-item.dragging {
+    background-color: #f2f2f2;
+    opacity: .55;
+}
+.style-item.drag-enter {
+    border-bottom: 1px solid #CCC;
 }
\ No newline at end of file
diff --git a/js/panels/css-panel/style.reel/style.js b/js/panels/css-panel/style.reel/style.js
index 6ff102b2..c3e9efdf 100644
--- a/js/panels/css-panel/style.reel/style.js
+++ b/js/panels/css-panel/style.reel/style.js
@@ -28,7 +28,36 @@ exports.Style = Montage.create(TreeNode, {
             this.needsDraw = true;
         }
     },
+    handleEvent : {
+        value: function(e) {
+            console.log(e);
+        }
+    },
+
+    handleDragstart : {
+        value: function(e) {
+            e.dataTransfer.effectAllowed = 'move';
+            e.dataTransfer.setData('Text', 'my styles, baby!');
+            this.element.classList.add("dragged");
+        }
+    },
 
+    handleDragend : {
+        value: function(e) {
+            this.element.classList.remove("dragging");
+            this.element.classList.remove("dragged");
+        }
+    },
+    handleDrag : {
+        value: function(e) {
+            this.element.classList.add("dragging");
+        }
+    },
+    handleDrop : {
+        value: function(e) {
+            this.element.classList.remove("drag-enter");
+        }
+    },
     handleSourceObjectSet: {
         value: function() {
             //debugger;
@@ -41,7 +70,17 @@ exports.Style = Montage.create(TreeNode, {