Merge pull request #24 from zebzhao/develop

Develop
zebzhao · Nov 19, 2016 · 0e4649f · 0e4649f
2 parents 7147027 + a90cbd8
commit 0e4649f
Show file tree

Hide file tree

Showing 9 changed files with 305 additions and 135 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -3,6 +3,12 @@ Pykit Changelog
 
 Here you can see the full list of changes between each Pykit release.
 
+Version 0.6.2
+-----------
+- added: `isOpened` to `dropdown`
+- changed: rewrote drag and drop implementation to not use native events to support touchscreen
+- fixed: file tree drag and drop works both for touch and pointer devices
+
 Version 0.6.1
 -----------
 - added: use `dropdownId` to `element` to assign dropdown id attribute

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "pykit",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "homepage": "https://github.com/zebzhao/Pykit",
   "dependencies": {
     "uikit": "uikit/uikit#^2.26.x",

diff --git a/css/almost-flat-dark/uikit.css b/css/almost-flat-dark/uikit.css
diff --git a/css/almost-flat/uikit.css b/css/almost-flat/uikit.css
diff --git a/less/util/common.less b/less/util/common.less
@@ -1,12 +1,20 @@
+@sortable-dragged-z-index:      1050;
+
 .unselectable {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
-  -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
 
+.uk-active-drag {
+  position: fixed;
+  z-index: @sortable-dragged-z-index;
+  pointer-events: none;
+  opacity: 0.7;
+}
+
 .uk-flex {
   min-height: 0;
   min-width: 0;

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Pykit",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "A JSON user interface builder based on the UIkit library.",
   "main": "",
   "private": false,

diff --git a/pykit.debug.js b/pykit.debug.js
@@ -5436,17 +5436,104 @@ pykit._ready = false;
 pykit._onload = [];
 
 
-var ready = function(){
-    pykit._ready = true;
-	document.body.setAttribute("data-uk-observe", "");
-    for (var i=0; i < pykit._onload.length; i++) {
-        pykit._onload[i]();
-    }
-};
-if (document.readyState == "complete") ready();
-else pykit.event(window, "load", ready);
+(function() {
+	var ready = function(){
+		pykit._ready = true;
+		document.body.setAttribute("data-uk-observe", "");
+		for (var i=0; i < pykit._onload.length; i++) {
+			pykit._onload[i]();
+		}
+
+		pykit._globalMouseUp = function(e) {
+			var dragged = pykit._dragged;
+			if (dragged) {
+                var display = dragged.node.style.display;
+                dragged.node.style.display = 'none';
+
+                var src = e.changedTouches ? e.changedTouches[0] : e;
+                var dropTarget = findDroppableParent(document.elementFromPoint(src.clientX, src.clientY));
+                if (dropTarget && dropTarget.master._droppable(dropTarget.config, dragged.config, dragged.node)) {
+                    // Must be before dragEnd to prevent position of elements shifting in tree
+                    // Shifted position will shift the drop target
+                    dropTarget.master.dispatch("onItemDrop", [dropTarget.config, dragged.config, dropTarget, e]);
+                }
+
+				dragged.target.dispatch("onItemDragEnd", [dragged.config, dragged.node, e]);
+				pykit.html.removeCSS(dragged.node, 'uk-active-drag');
+                dragged.node.style.top = dragged.originalPos.top;
+				dragged.node.style.left = dragged.originalPos.left;
+				dragged.node.style.display= display;
+				pykit._dragged = null;
 
 
+			}
+			pykit._selectedForDrag = null;
+		};
+
+		pykit._globalMouseMove = function(e) {
+			var selectedForDrag = pykit._selectedForDrag;
+			var src = e.touches ? e.touches[0] : e;
+			if (selectedForDrag) {
+				if (Math.abs(src.clientX - selectedForDrag.pos.x) > pykit._dragThreshold ||
+					Math.abs(src.clientY - selectedForDrag.pos.y) > pykit._dragThreshold) {
+					// Begin drag event
+					pykit._dragged = selectedForDrag;
+					pykit._selectedForDrag = null;
+					pykit.html.addCSS(selectedForDrag.node, 'uk-active-drag');
+
+					// Fire drag listener event
+					selectedForDrag.target.dispatch("onItemDragStart",
+						[selectedForDrag.config, selectedForDrag.node, selectedForDrag.event]);
+				}
+			}
+			else if (pykit._dragged) {
+				var dragged = pykit._dragged;
+                dragged.node.style.top = (src.clientY + dragged.mouseOffset.top) + 'px';
+                dragged.node.style.left = (src.clientX + dragged.mouseOffset.left) + 'px';
+
+                var dropTarget = findDroppableParent(document.elementFromPoint(src.clientX, src.clientY));
+                if (dropTarget && dropTarget.master._droppable(dropTarget.config, dragged.config, dragged.node)) {
+                    var oldDropTarget = pykit._dropTarget;
+                    if (oldDropTarget != dropTarget) {
+                        if (oldDropTarget) {
+                            oldDropTarget.master.dispatch('onItemDragLeave', [oldDropTarget.config, oldDropTarget, e]);
+                        }
+                        dropTarget.master.dispatch('onItemDragEnter', [dropTarget.config, dropTarget, e]);
+                        pykit._dropTarget = dropTarget;
+                    }
+                    else if (oldDropTarget) {
+                        oldDropTarget.master.dispatch('onItemDragOver', [oldDropTarget.config, oldDropTarget, e]);
+                    }
+                }
+            }
+		};
+
+		pykit._dragThreshold = 10;
+
+		pykit.event(window, "mouseup", pykit._globalMouseUp);
+		pykit.event(window, "mousemove", pykit._globalMouseMove);
+
+		if (UIkit.support.touch) {
+			pykit.event(window, "touchend", pykit._globalMouseUp);
+			pykit.event(window, "touchmove", pykit._globalMouseMove);
+		}
+
+        function findDroppableParent(node) {
+            // Exit after 100 tries, otherwise assume circular reference
+            for(var i=0; i<100; i++) {
+                if (!node)
+                    break;
+                else if (node.config && node.master && node.$droppable)
+                    return node;
+                else
+                    node = node.parentNode;
+            }
+        }
+	};
+	if (document.readyState == "complete") ready();
+	else pykit.event(window, "load", ready);
+}());
+
 
 pykit.PropertySetter = {
     __name__: "PropertySetter",
@@ -5983,7 +6070,7 @@ pykit.ClickEvents = {
 		config.on = config.on || {};
 		pykit.event(this._html, "click", this._onClick, this);
 		pykit.event(this._html, "contextmenu", this._onContext, this);
-		
+
 		// Optimization: these rarely get used.
 		if (config.on.onMouseDown) {
 			pykit.event(this._html, "mousedown", this._onMouseDown, this);
@@ -6005,10 +6092,11 @@ pykit.ClickEvents = {
 		this.dispatch("onMouseDown", [this._config, this._html, e]);
 	},
 	_onMouseUp: function(e){
+		this.dispatch("onMouseUp", [this._config, this._html, e]);
 		if (this._config.$preventDefault !== false) {
+			pykit._globalMouseUp(e);
 			pykit.html.preventEvent(e);
 		}
-		this.dispatch("onMouseUp", [this._config, this._html, e]);
 	},
 	_onContext: function(e) {
 		if (this._config.$preventDefault !== false) {
@@ -6153,12 +6241,14 @@ pykit.UI.button = pykit.defUI({
 			return pykit.replaceString("<span>{label}</span>", {label: config.label});
     },
 	select: function() {
+		this._config.$selected = true;
 		pykit.html.addCSS(this._html, "uk-active");
 	},
 	isSelected: function() {
-		return pykit.html.hasCSS(this._html, "uk-active");
+		return !!this._config.$selected;
 	},
 	unselect: function() {
+		this._config.$selected = false;
 		pykit.html.removeCSS(this._html, "uk-active");
 	}
 }, pykit.ClickEvents, pykit.UI.element);
@@ -6660,6 +6750,9 @@ pykit.UI.dropdown = pykit.defUI({
 	getBoundingClientRect: function() {
 		return this._html.firstChild.getBoundingClientRect();
 	},
+	isOpened: function() {
+		return pykit.html.hasCSS(this._html, 'uk-open');
+	},
 	open: function(config, node, parent, e) {
 		this.dispatch("onOpen", [config, node, this]);
 		this._inner.dispatch("onOpen", [config, node, this]);
@@ -7276,7 +7369,9 @@ pykit.UI.list = pykit.defUI({
 			if (itemConfig.$preventDefault !== false && this._config.$preventDefault !== false) {
 				pykit.html.preventEvent(e);
 			}
-			this.dispatch("onItemClick", [itemConfig, node, e]);
+            if (!pykit._dragged) {
+                this.dispatch("onItemClick", [itemConfig, node, e]);
+            }
 		}, this);
 
 		if (this.context && itemConfig.context !== false) {
@@ -7288,50 +7383,41 @@ pykit.UI.list = pykit.defUI({
 			}, this);
 		}
 
-		if (this.droppable && itemConfig.droppable !== false) {
-			pykit.event(node, "drop", function(e) {
-				if (itemConfig.$preventDefault !== false) {
-					pykit.html.preventEvent(e);
-				}
-				if (this._droppable(itemConfig, this._draggedItem))
-					this.dispatch("onItemDrop", [itemConfig, this._draggedItem, node, e]);
-				this._draggedItem = null;
-			}, this);
+		if (this.droppable && itemConfig.$droppable !== false) {
+            node.config = itemConfig;
+            node.master = this;
+            node.$droppable = true;
+		}
 
-			pykit.event(node, "dragover", function(e) {
-				if (itemConfig.$preventDefault !== false) {
-					pykit.html.preventEvent(e);
-				}
-				this.dispatch("onItemDragOver", [itemConfig, node, e]);
-			}, this);
+		if (this.draggable && itemConfig.$draggable !== false) {
+			node.setAttribute("draggable", "false");
 
-			pykit.event(node, "dragenter", function(e) {
-				if (itemConfig.$preventDefault !== false) {
-					pykit.html.preventEvent(e);
-				}
-				this.dispatch("onItemDragEnter", [itemConfig, node, e]);
-			}, this);
+            pykit.event(node, "dragstart", function(e) {
+                pykit.html.preventEvent(e);
+            }, this);
 
-			pykit.event(node, "dragleave", function(e) {
-				if (itemConfig.$preventDefault !== false) {
-					pykit.html.preventEvent(e);
+			function onMouseDown(e) {
+				if (pykit.isFunction(this.draggable) && !this.draggable(e)) {
+					return;
 				}
-				this.dispatch("onItemDragLeave", [itemConfig, node, e]);
-			}, this);
-		}
-
-		if (this.draggable && itemConfig.draggable !== false) {
-			node.setAttribute("draggable", "true");
-
-			pykit.event(node, "dragstart", function(e) {
-				this._draggedItem = itemConfig;
-				this.dispatch("onItemDragStart", [itemConfig, node, e]);
-			}, this);
+				var ev = e.touches && e.touches[0] || e;
+				var offset = node.getBoundingClientRect();
+				pykit._selectedForDrag = {
+					target: this,
+					config: itemConfig,
+					node: node,
+					originalPos: {top: node.style.top, left: node.style.left},
+					pos: {x: ev.clientX, y: ev.clientY},
+					mouseOffset: {
+						left: offset.left - ev.clientX,
+						top: offset.top - ev.clientY
+					},
+					event: e
+				};
+			}
 
-			pykit.event(node, "dragend", function(e) {
-				this._draggedItem = null;
-				this.dispatch("onItemDragEnd", [itemConfig, node, e]);
-			}, this);
+			if (UIkit.support.touch) pykit.event(node, "touchstart", onMouseDown, this);
+			pykit.event(node, "mousedown", onMouseDown, this);
 		}
 	}
 }, pykit.UI.stack);
@@ -7370,23 +7456,15 @@ pykit.UI.tree = pykit.defUI({
 	},
 	_dragStart: function(item, node, e) {
 		var $this = this;
-		e.dataTransfer.setData('text/plain', node[$this._config.dataTransfer]);
-		// Chrome bug: dragend fires immediatelly if DOM is manipulated in dragstart handler
-		// See https://groups.google.com/a/chromium.org/forum/?fromgroups=#!msg/chromium-bugs/YHs3orFC8Dc/ryT25b7J-NwJ
-		setTimeout(function() {
-			pykit.html.addCSS($this.getItemNode(item.id), "uk-hidden");
-			if (item.$branch)
-				$this._hideChildren(item);
-		}, 10);
+		if (item.$branch)
+			$this._hideChildren(item);
 	},
 	_dragEnd: function(item) {
-		pykit.html.removeCSS(this.getItemNode(item.id), "uk-hidden");
-		pykit.html.removeCSS(this.getItemNode(item.id), "uk-active");
 		if (item.$branch && !item.$closed)
 			this._showChildren(item);
 	},
 	_dragOver: function(item) {
-		if (this._droppable(item, this._draggedItem))
+		if (this._droppable(item, pykit._dragged.config, pykit._dragged.node))
 			pykit.html.addCSS(this.getItemNode(item.id), "uk-active");
 	},
 	_dragLeave: function(item) {