dragdrop, github

Author: ondras

css/ui.css

@@ -103,30 +103,40 @@
 	border-color: #000;
 }
 
+.ui #github {
+	position: absolute;
+	right: 160px;
+	bottom: 6px;
+}
+
+.ui #github img {
+	vertical-align: middle;
+}
+
 .ui ~ #toggle {
 	position: fixed;
-	bottom: 25px;
-	right: 75px;
-	width: 50px;
-	height: 50px;
-	line-height: 30px;
+	bottom: 6px;
+	right: 10px;
+	width: 32px;
+	height: 32px;
+	line-height: 18px;
 	margin: auto;
 	border-radius: 50%;
 	box-shadow: 0 0 2px 3px #ccf;
 }
 
 .ui ~ #toggle:after {
-	content: "◀";
+	content: "←";
 	font-weight: bold;
-	font-size: 28px;
+	font-size: 22px;
 }
 
 .ui.visible ~ #toggle {
 	box-shadow: inset 0 0 2px 3px #ccf;
 }
 
 .ui.visible ~ #toggle:after {
-	content: "▶";
+	content: "→";
 }
 
 .ui#help {

github.png

@@ -117,9 +117,11 @@ <h3>Item</h3>
 					<a data-color="#fa3" title="Orange" href="#"></a>
 				</span>
 			</p>
+
+			<a id="github" target="_blank" href="https://github.com/ondras/my-mind" title="GitHub project page"><img src="github.png" alt="GitHub project page" /></a>
 		</div>
 
-		<button id="toggle"></button>
+		<button id="toggle" title="Toggle UI"></button>
 
 		<div id="io" class="ui">
 			<h3></h3>
@@ -230,12 +232,11 @@ <h3>Help</h3>
 TODO:
   shortterm:
     - firebase auth
-    - dragdrop
+    - docka (github wiki)
   
   longterm:
     - firebase realtime
     - (custom) icons
-    - docka (github wiki)
 
   bugs:
 

index.html

@@ -46,15 +46,18 @@ MM.Action.RemoveItem.prototype.undo = function() {
 	MM.App.select(this._item);
 }
 
-MM.Action.MoveItem = function(item, newParent, newIndex) {
+MM.Action.MoveItem = function(item, newParent, newIndex, newSide) {
 	this._item = item;
 	this._newParent = newParent;
 	this._newIndex = (arguments.length < 3 ? null : newIndex);
+	this._newSide = newSide || "";
 	this._oldParent = item.getParent();
 	this._oldIndex = this._oldParent.getChildren().indexOf(item);
+	this._oldSide = item.getSide();
 }
 MM.Action.MoveItem.prototype = Object.create(MM.Action.prototype);
 MM.Action.MoveItem.prototype.perform = function() {
+	this._item.setSide(this._newSide);
 	if (this._newIndex === null) {
 		this._newParent.insertChild(this._item);
 	} else {
@@ -63,6 +66,7 @@ MM.Action.MoveItem.prototype.perform = function() {
 	MM.App.select(this._item);
 }
 MM.Action.MoveItem.prototype.undo = function() {
+	this._item.setSide(this._oldSide);
 	this._oldParent.insertChild(this._item, this._oldIndex);
 	MM.App.select(this._newParent);
 }

js/action.js

@@ -85,7 +85,6 @@ MM.App = {
 
 			case "mousedown":
 				e.preventDefault();
-				this._port.style.cursor = "move";
 				this._port.addEventListener("mousemove", this);
 				this._port.addEventListener("mouseup", this);
 				this._drag.mouse[0] = e.clientX;
@@ -94,14 +93,8 @@ MM.App = {
 				var item = this.map.getItemFor(e.target);
 				if (item && !item.isRoot()) { 
 					this._drag.item = item;
-					var content = item.getDOM().content;
-					this._drag.ghost = content.cloneNode(true);
-					this._drag.ghost.classList.add("ghost");
-					this._drag.pos[0] = content.offsetLeft;
-					this._drag.pos[1] = content.offsetTop;
-					this._drag.ghost.style.left = this._drag.pos[0] + "px";
-					this._drag.ghost.style.top = this._drag.pos[1] + "px";
-					content.parentNode.appendChild(this._drag.ghost);
+				} else {
+					this._port.style.cursor = "move";
 				}
 			break;
 
@@ -111,10 +104,22 @@ MM.App = {
 				this._drag.mouse[0] = e.clientX;
 				this._drag.mouse[1] = e.clientY;
 				if (this._drag.item) {
-					this._drag.pos[0] += dx;
-					this._drag.pos[1] += dy;
-					this._drag.ghost.style.left = this._drag.pos[0] + "px";
-					this._drag.ghost.style.top = this._drag.pos[1] + "px";
+					if (this._drag.ghost) {
+						this._drag.pos[0] += dx;
+						this._drag.pos[1] += dy;
+						this._drag.ghost.style.left = this._drag.pos[0] + "px";
+						this._drag.ghost.style.top = this._drag.pos[1] + "px";
+					} else {
+						var content = this._drag.item.getDOM().content;
+						this._drag.ghost = content.cloneNode(true);
+						this._drag.ghost.classList.add("ghost");
+						this._drag.pos[0] = content.offsetLeft + dx;
+						this._drag.pos[1] = content.offsetTop + dy;
+						this._drag.ghost.style.left = this._drag.pos[0] + "px";
+						this._drag.ghost.style.top = this._drag.pos[1] + "px";
+						content.parentNode.appendChild(this._drag.ghost);
+						this._port.style.cursor = "move";
+					}
 				} else {
 					this.map.moveBy(dx, dy);
 				}
@@ -125,16 +130,16 @@ MM.App = {
 				this._port.removeEventListener("mousemove", this);
 				this._port.removeEventListener("mouseup", this);
 
-				if (this._drag.item) {
+				if (this._drag.ghost) {
 					var rect = this._drag.ghost.getBoundingClientRect();
 					this._drag.ghost.parentNode.removeChild(this._drag.ghost);
 
 					var nearest = this.map.getClosestItem(rect.left + rect.width/2, rect.top + rect.height/2);
 					this._finishDragDrop(this._drag.item, nearest);
-
-					this._drag.item = null;
-					this._drag.ghost = null;
 				}
+
+				this._drag.item = null;
+				this._drag.ghost = null;
 			break;
 		} /* switch */
 	},
@@ -177,7 +182,7 @@ MM.App = {
 			tmp = tmp.getParent();
 		}
 
- 		var w1 = item.getDOM().content.offsetWidth;
+		var w1 = item.getDOM().content.offsetWidth;
 		var w2 = target.getDOM().content.offsetWidth;
 		var w = Math.max(w1, w2);
 		var h1 = item.getDOM().content.offsetHeight;
@@ -188,15 +193,12 @@ MM.App = {
 		} else if (Math.abs(nearest.dx) < w && Math.abs(nearest.dy) < h) { /* append here */
 			var action = new MM.Action.MoveItem(item, target);
 		} else {
-//			debugger;
 			var dir = target.getParent().getLayout().getChildDirection(target);
 			var diff = -1 * (dir == "top" || dir == "bottom" ? nearest.dx : nearest.dy);
 
 			var index = target.getParent().getChildren().indexOf(target);
 			var targetIndex = index + (diff > 0 ? 1 : 0);
-			var action = new MM.Action.MoveItem(item, target.getParent(), targetIndex);
-			/* FIXME side + side in action */
-			
+			var action = new MM.Action.MoveItem(item, target.getParent(), targetIndex, target.getSide());
 		}
 		this.action(action);