improved insert behaviour during list dran&drop ...

... and fixed a swipe-area click-through bug for long-press

Author: fquirin

www/scripts/sepiaFW.ui.dragDrop.js

@@ -59,6 +59,7 @@ function sepiaFW_build_ui_drag_and_drop(){
 		}
 		refreshDragContainers();
 		var activeDummy;
+		var lastDummyPosition; //top, left relative to viewport
 		var lastHoverElement;
 		var $newNeighbourElement;
 		var $dropZone; 				//currently we only need this if the drop-zone has no children
@@ -124,16 +125,22 @@ function sepiaFW_build_ui_drag_and_drop(){
 			}, 500);
 		}
 		//move element
-		this.moveTo = function($neighbour, $dropzone, doAnimate){
+		this.moveTo = function($neighbour, $dropzone, doAnimate, referencePosition){
 			var targetAndObjectSame = ($neighbour && $neighbour[0].isSameNode($dragObject[0]));
 			var moved = false;
 			if (($dropzone || $neighbour) && !targetAndObjectSame){
 				//detach
 				$dragObject.detach();
 				//insert after neighbour
 				if ($neighbour){
-					//TODO: choose between insert-after and insert-before
-					$dragObject.insertAfter($neighbour);
+					//TODO: this only works for vertical list logic ... what if we want icons like drag and drop (e.g homescreen)?
+					//choose between insert-after and insert-before:
+					var isAbove = (referencePosition.top - $neighbour.get(0).getBoundingClientRect().top) < 0;
+					if (isAbove){
+						$dragObject.insertBefore($neighbour);
+					}else{
+						$dragObject.insertAfter($neighbour);
+					}
 				}else{
 					$dragObject.appendTo($dropzone);
 				}
@@ -298,6 +305,7 @@ function sepiaFW_build_ui_drag_and_drop(){
 			//console.log(e.type);
 
 			//clean-up some
+			lastDummyPosition = activeDummy.getBoundingClientRect();
 			$(activeDummy).remove();
 			activeDummy = undefined;
 			lastHoverElement = undefined;
@@ -307,7 +315,7 @@ function sepiaFW_build_ui_drag_and_drop(){
 			//move (if makes sense)
 			var doAnimate = true;
 			var dragOriginContainer = $dragObjectContainerOwner.get(0); 	//store this before it gets refreshed
-			var positionChanged = self.moveTo($newNeighbourElement, $dropZone, doAnimate);
+			var positionChanged = self.moveTo($newNeighbourElement, $dropZone, doAnimate, lastDummyPosition);
 
 			//auto-disable drag afterwards?
 			if (options.autoDisableAfterDrop){
@@ -324,6 +332,7 @@ function sepiaFW_build_ui_drag_and_drop(){
 			$dragObject.removeClass('dragging');
 			$newNeighbourElement = undefined;
 			$dropZone = undefined;
+			lastDummyPosition = undefined;
 		});
 	}
 

www/scripts/sepiaFW.ui.js

@@ -765,6 +765,9 @@ function sepiaFW_build_ui(){
 	var lastDomEventTS = new Date().getTime();
 	//listener
 	UI.trackIdleTime = function(){
+		function resetTimer() {
+			lastDomEventTS = new Date().getTime();
+		}
 		//DOM Events
 		document.addEventListener("keypress", resetTimer);
 		document.addEventListener("mousemove", resetTimer);
@@ -775,9 +778,6 @@ function sepiaFW_build_ui(){
 		document.onload = resetTimer;
 		document.onscroll = resetTimer;    // scrolling with arrow keys
 		*/
-		function resetTimer() {
-			lastDomEventTS = new Date().getTime();
-		}
 	}
 	//state
 	UI.getIdleTime = function(){
@@ -1143,12 +1143,16 @@ function sepiaFW_build_ui(){
 		var xDown = 0;			var xUp = 0;
 		var yDown = 0;			var yUp = 0;
 		var timeDown = 0;
+		var longPressTime = 625;
+		var timeDownTimer;
+		var resetTimer;
 		$swipeArea.mouseup(function(event){			up(this, event);
 			}).mousedown(function(event){			down(this, event);
 			//}).on('touchstart', function(event){	console.log('touchstart'); down(this, event);
 			//}).on('touchend', function(event){	console.log('touchend'); up(this, event);
 			});
 		function down(that, ev){
+			//console.log('down');
 			if (!didDown){
 				didDown = true;
 				didUp = false;
@@ -1157,24 +1161,32 @@ function sepiaFW_build_ui(){
 				$(that).addClass('sepiaFW-fullSize');
 				timeDown = new Date().getTime();
 				//console.log(ev);
+				timeDownTimer = setTimeout(function(){
+					up(that, ev); 		//note: ev will not be up-to-date here
+				}, longPressTime);
 			}
 		}
 		function up(that, ev){
+			//console.log('up');
+			if (timeDownTimer) clearTimeout(timeDownTimer);
 			if (!didUp){
 				didUp = true;
-				xUp = (ev.center)? ev.center.x : ev.clientX;
-				yUp = (ev.center)? ev.center.y : ev.clientY;
 				$(that).removeClass('sepiaFW-fullSize');
-				var moved = (xDown-xUp)*(xDown-xUp) + (yDown-yUp)*(yDown-yUp);
-				//console.log(moved);
-				if (moved < 100){
-					click(ev);
-				}
+				checkClick(ev);
 				resetTimer = setTimeout(function(){
 					didDown = false;
 				}, 500);
 			}
 		}
+		function checkClick(ev){
+			xUp = (ev.center)? ev.center.x : ev.clientX;
+			yUp = (ev.center)? ev.center.y : ev.clientY;
+			var moved = (xDown-xUp)*(xDown-xUp) + (yDown-yUp)*(yDown-yUp);
+			//console.log(moved);
+			if (moved < 100){
+				click(ev);
+			}
+		}
 		function click(ev){
 			if (onClickCallback){
 				onClickCallback(ev);
@@ -1191,7 +1203,7 @@ function sepiaFW_build_ui(){
 			//supports sepiaFW-events?
 			if (UI.elementSupportsCustomTriggers(elementMouseIsOver)){
 				var durationDown = new Date().getTime() - timeDown;
-				if (timeDown && (durationDown > 625)){
+				if (timeDown && (durationDown > longPressTime)){
 					$(elementMouseIsOver).trigger('sepiaFW-events', { name: 'longpress'});
 				}else{
 					$(elementMouseIsOver).trigger('sepiaFW-events', { name: 'shortpress'});