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.css | 3 ++ .../css-panel/declaration.reel/declaration.js | 55 ++++++++++++++++++++++ js/panels/css-panel/style.reel/style.css | 40 ++++++++++++++-- js/panels/css-panel/style.reel/style.js | 41 +++++++++++++++- 4 files changed, 135 insertions(+), 4 deletions(-) (limited to 'js/panels') 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. */ +/* ------------------------ + 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, { console.log("style - template did load"); } }, - + prepareForDraw : { + value: function() { + console.log("style's prepare for draw"); + this.element.addEventListener('dragstart', this, false); + this.element.addEventListener('drag', this, false); +// this.element.addEventListener('dragenter', this, false); +// this.element.addEventListener('dragleave', this, false); + this.element.addEventListener('dragend', this, false); + this.element.addEventListener('drop', this, false); + } + }, draw : { value : function() { //debugger; -- cgit v1.2.3