[js:ui] toast swipe start erea when toolbar/navbar swipe close

ref. Mobile friendly Studio-42#1373

css/navbar.css

@@ -167,3 +167,30 @@
 	/*border:1px solid #8cafed;*/
 }
 
+/* navbar swipe handle */
+.elfinder-navbar-swipe-handle {
+	position: absolute;
+	top: 0px;
+	height: 100%;
+	width: 50px;
+	display: none;
+	pointer-events: none;
+}
+.elfinder-ltr .elfinder-navbar-swipe-handle {
+	left: 0px;
+	background: linear-gradient(to right,
+		rgba(221,228,235,1) 0,
+		rgba(221,228,235,0.8) 5px,
+		rgba(216,223,230,0.3) 8px,
+		rgba(0,0,0,0.1) 95%,
+		rgba(0,0,0,0) 100%);
+}
+.elfinder-rtl .elfinder-navbar-swipe-handle {
+	right: 0px;
+	background: linear-gradient(to left,
+		rgba(221,228,235,1) 0,
+		rgba(221,228,235,0.8) 5px,
+		rgba(216,223,230,0.3) 8px,
+		rgba(0,0,0,0.1) 95%,
+		rgba(0,0,0,0) 100%);
+}

css/toolbar.css

@@ -268,8 +268,20 @@
 .elfinder-ltr .elfinder-button-search .ui-icon-close { right:0;}
 .elfinder-rtl .elfinder-button-search .ui-icon-close { left:0;}
 
-
-
-
-
+/* toolbar swipe handle */
+.elfinder-toolbar-swipe-handle {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	height: 50px;
+	width: 100%;
+	display: none;
+	pointer-events: none;
+	background: linear-gradient(to bottom,
+		rgba(221,228,235,1) 0,
+		rgba(221,228,235,0.8) 2px,
+		rgba(216,223,230,0.3) 5px,
+		rgba(0,0,0,0.1) 95%,
+		rgba(0,0,0,0) 100%);
+}
 

js/elFinder.js

@@ -2635,7 +2635,8 @@ window.elFinder = function(node, opts) {
 				},
 				moveOff = function() {
 					$(document).off('touchmove', moveOn);
-				};
+				},
+				handleW, handleH = 50;
 
 			node.on('touchstart touchmove touchend', function(e) {
 				if (e.type === 'touchstart' && e.originalEvent.touches.length > 1) {
@@ -2655,17 +2656,18 @@ window.elFinder = function(node, opts) {
 					if (navbar) {
 						lastX = false;
 						if (navbar.is(':hidden')) {
-							if ((self.direction === 'ltr'? (x - nodeOffset.left) : (node.width() + nodeOffset.left - x)) < 50) {
+							if ((self.direction === 'ltr'? (x - nodeOffset.left) : (node.width() + nodeOffset.left - x)) < handleW) {
 								lastX = x;
 							}
 						} else {
+							handleW = Math.max(50, node.width() / 10);
 							lastX = x;
 						}
 					}
 					if (toolbar) {
 						toolbarH = toolbar.height();
 						nodeTop = nodeOffset.top;
-						if (y - nodeTop < ((toolbar.is(':hidden')? 20 : toolbarH) + 30)) {
+						if (y - nodeTop < (toolbar.is(':hidden')? handleH : (toolbarH + 30))) {
 							lastY = y;
 							$(document).on('touchmove.' + namespace, moveOn);
 							setTimeout(function() {
@@ -2684,7 +2686,7 @@ window.elFinder = function(node, opts) {
 						navbarMode = (self.direction === 'ltr'? (lastX > x) : (lastX < x))? 'hide' : 'show';
 						if (Math.abs(lastX - x) > Math.min((navbarMode === 'hide'? 200 : 45), (node.width() * .5))) {
 							self.getUI('navbar').stop(true, true)[navbarMode]('fast', function() {
-								self.trigger('navbar' + navbarMode);
+								self.trigger('navbar' + navbarMode, {handleW: handleW});
 								self.getUI('cwd').trigger('resize');
 							});
 							lastX = false;
@@ -2695,7 +2697,7 @@ window.elFinder = function(node, opts) {
 							var mode = (lastY > y)? 'slideUp' : 'slideDown';
 
 							if (toolbar.is(mode === 'slideDown' ? ':hidden' : ':visible')) {
-								toolbar.stop(true, true).trigger('toggle', {duration: 100});
+								toolbar.stop(true, true).trigger('toggle', {duration: 100, handleH: handleH});
 								moveOff();
 							}
 							lastY = false;

js/elFinder.resources.js

@@ -248,5 +248,11 @@ elFinder.prototype.resources = {
 			return dfrd;
 
 		}
+	},
+	blink: function(elm, mode) {
+		mode = mode || 'slowonce';
+		if (mode === 'slowonce') {
+			elm.stop(true, true).delay(250).fadeIn(750).delay(500).fadeOut(3500);
+		}
 	}
 };

js/ui/navbar.js

@@ -11,12 +11,31 @@ $.fn.elfindernavbar = function(fm, opts) {
 			wz     = parent.children('.elfinder-workzone').append(nav),
 			delta  = nav.outerHeight() - nav.height(),
 			ltr    = fm.direction == 'ltr',
-			handle;
+			handle, swipeHandle;
 
 		fm.bind('resize', function() {
 			nav.height(wz.height() - delta);
 		});
 
+		if (fm.UA.Touch) {
+			fm.bind('load', function() {
+				swipeHandle = $('<div class="elfinder-navbar-swipe-handle"/>').appendTo(wz);
+				if (swipeHandle.css('pointer-events') !== 'none') {
+					swipeHandle.remove();
+					swipeHandle = null;
+				}
+			})
+			.bind('navbarshow', function() {
+				swipeHandle && swipeHandle.stop(true, true).hide();
+			})
+			.bind('navbarhide', function(e) {
+				if (swipeHandle) {
+					swipeHandle.width(e.data.handleW? e.data.handleW : '');
+					fm.resources.blink(swipeHandle, 'slowonce');
+				}
+			});
+		}
+
 		if ($.fn.resizable && ! fm.UA.Mobile) {
 			handle = nav.resizable({
 					handles : ltr ? 'e' : 'w',

js/ui/toolbar.js

@@ -24,7 +24,7 @@ $.fn.elfindertoolbar = function(fm, opts) {
 			panels   = filter(opts || []),
 			dispre   = null,
 			uiCmdMapPrev = '',
-			l, i, cmd, panel, button;
+			l, i, cmd, panel, button, swipeHandle;
 
 		self.prev().length && self.parent().prepend(this);
 
@@ -90,10 +90,15 @@ $.fn.elfindertoolbar = function(fm, opts) {
 					}
 				});
 			}
-
-		});
-
-		fm.one('open', function() {
+		})
+		.bind('load', function() {
+			swipeHandle = $('<div class="elfinder-toolbar-swipe-handle"/>').appendTo(fm.getUI());
+			if (swipeHandle.css('pointer-events') !== 'none') {
+				swipeHandle.remove();
+				swipeHandle = null;
+			}
+		})
+		.one('open', function() {
 			if (options.autoHideUA) {
 				if ($.map(options.autoHideUA, function(v){ return fm.UA[v]? true : null; }).length) {
 					setTimeout(function() {
@@ -104,19 +109,27 @@ $.fn.elfindertoolbar = function(fm, opts) {
 		});
 		self.on('toggle', function(e, data) {
 			var wz    = fm.getUI('workzone'),
-				show  = self.is(':hidden'),
+				toshow= self.is(':hidden'),
 				wzh   = wz.height(),
 				h     = self.height(),
 				tbh   = self.outerHeight(true),
 				delta = tbh - h,
 				opt   = $.extend({
 					step: function(now) {
-						wz.height(wzh + (show? (now + delta) * -1 : h - now));
+						wz.height(wzh + (toshow? (now + delta) * -1 : h - now));
 						fm.trigger('resize');
 					},
 					always: function() {
-						wz.height(wzh + (show? self.outerHeight(true) * -1 : tbh));
+						wz.height(wzh + (toshow? self.outerHeight(true) * -1 : tbh));
 						fm.trigger('resize');
+						if (swipeHandle) {
+							if (toshow) {
+								swipeHandle.stop(true, true).hide();
+							} else {
+								swipeHandle.height(data.handleH? data.handleH : '');
+								fm.resources.blink(swipeHandle, 'slowonce');
+							}
+						}
 					}
 				}, data);
 			self.animate({height : 'toggle'}, opt);