[js:core:notify] fix #3111 add minimize, close(option) button into notify dialog

- add ui option notifyDialog.canClose (default: false)
- add ui option notifyDialog.hiddens (default: ['open'])
- add total progress bar to top of workzone
- adjustment of CSS of notify dialg
- reopen closed notify dialog at exec the info command

css/common.css

@@ -247,6 +247,12 @@ div.elfinder {
     opacity: .8;
 }
 
+.elfinder div.elfinder-bottomtray > div {
+    top: initial;
+    right: initial;
+    left: initial;
+}
+
 .elfinder.elfinder-ltr div.elfinder-bottomtray {
     left: 0;
 }
@@ -261,3 +267,22 @@ div.elfinder {
     font-size: 14px;
     padding: 2px 4px;
 }
+
+/* progressbar */
+.elfinder-ui-progressbar {
+    pointer-events: none;
+    position: absolute;
+    width: 0;
+    height: 2px;
+    top: 0px;
+    border-radius: 2px;
+    filter: blur(1px);
+}
+
+.elfinder-ltr .elfinder-ui-progressbar {
+    left: 0;
+}
+
+.elfinder-rtl .elfinder-ui-progressbar {
+    right: 0;
+}

css/dialog.css

@@ -284,12 +284,48 @@
 
 .elfinder-dialog-notify .ui-dialog-titlebar {
     height: 5px;
+    overflow: hidden;
 }
 
-.elfinder-dialog-notify .ui-dialog-titlebar-close {
+.elfinder.elfinder-touch > .elfinder-dialog-notify .ui-dialog-titlebar {
+    height: 10px;
+}
+
+.elfinder > .elfinder-dialog-notify .ui-dialog-titlebar .elfinder-titlebar-button {
+    top: 2px;
+}
+
+.elfinder.elfinder-touch > .elfinder-dialog-notify .ui-dialog-titlebar .elfinder-titlebar-button {
+    top: 4px;
+}
+
+.elfinder > .elfinder-dialog-notify .ui-dialog-titlebar .elfinder-titlebar-button {
+    left: -18px;
+    right: 18px;
+}
+
+.elfinder > .elfinder-dialog-notify .ui-dialog-titlebar .elfinder-titlebar-button.elfinder-titlebar-button-right {
+    left: 18px;
+    right: -18px;
+}
+
+.ui-dialog-titlebar .elfinder-ui-progressbar {
+    position: absolute;
+    top: 17px;
+}
+
+.elfinder-touch .ui-dialog-titlebar .elfinder-ui-progressbar {
+    top: 26px;
+}
+
+.elfinder-dialog-notify.elfinder-titlebar-button-hide .ui-dialog-titlebar-close {
     display: none;
 }
 
+.elfinder-dialog-notify.elfinder-dialog-minimized.elfinder-titlebar-button-hide .ui-dialog-titlebar span.elfinder-dialog-title {
+    max-width: initial;
+}
+
 .elfinder-dialog-notify .ui-dialog-content {
     padding: 0;
 }
@@ -338,6 +374,22 @@
     border-radius: 2px;
 }
 
+.elfinder-notify-cancel {
+    position: relative;
+    top: -18px;
+    right: calc(-50% + 15px);
+}
+
+.elfinder-notify-cancel .ui-icon-close {
+    background-position: -80px -128px;
+    width: 18px;
+    height: 18px;
+    border-radius: 9px;
+    border: none;
+    background-position: -80px -128px;
+    cursor: pointer;
+}
+
 /* icons */
 .elfinder-dialog-icon-open,
 .elfinder-dialog-icon-readdir,

css/theme.css

@@ -400,6 +400,15 @@
     background-color: inherit;
 }
 
+.elfinder-notify-cancel .elfinder-notify-button {
+    background-color: #707070;
+    background-image: url("../img/ui-icons_ffffff_256x240.png");
+}
+
+.elfinder-notify-cancel .elfinder-notify-button.ui-state-hover {
+    background-color: #aaa;
+}
+
 /* edit dialog */
 .elfinder-dialog-edit select.elfinder-edit-changed {
     border-bottom: 2px solid #13ae10;
@@ -414,3 +423,8 @@
 .elfinder .elfinder-ui-tooltip.ui-widget-shadow {
     box-shadow: 2px 6px 4px -4px #cecdcd;
 }
+
+/* progressbar */
+.elfinder-ui-progressbar {
+    background-color: #419bf3;
+}

js/commands/info.js

@@ -111,8 +111,14 @@
 			customActions = [],
 			style = '',
 			hashClass = 'elfinder-font-mono elfinder-info-hash',
-			size, tmb, file, title, dcnt, rdcnt, path, getHashAlgorisms, hideItems, hashProg;
-			
+			getHashAlgorisms = [],
+			ndialog  = fm.ui.notify,
+			size, tmb, file, title, dcnt, rdcnt, path, hideItems, hashProg;
+
+		if (ndialog.is(':hidden') && ndialog.children('.elfinder-notify').length) {
+			ndialog.elfinderdialog('open').height('auto');
+		}
+
 		if (!cnt) {
 			return $.Deferred().reject();
 		}

js/commands/search.js

@@ -38,7 +38,8 @@ elFinder.prototype.commands.search = function() {
 					data.type = sType;
 				}
 				return data;
-			};
+			},
+			rootCnt;
 		
 		if (typeof q == 'string' && q) {
 			if (typeof target == 'object') {
@@ -64,10 +65,11 @@ elFinder.prototype.commands.search = function() {
 			
 			if (! onlyMimes.length || mime.length) {
 				if (target === '' && fm.api >= 2.1) {
+					rootCnt = Object.keys(fm.roots).length;
 					$.each(fm.roots, function(id, hash) {
 						reqDef.push(fm.request({
 							data   : setType({cmd : 'search', q : q, target : hash, mimes : mime}),
-							notify : {type : 'search', cnt : 1, hideCnt : (reqDef.length? false : true)},
+							notify : {type : 'search', cnt : 1, hideCnt : (rootCnt > 1? false : true)},
 							cancel : true,
 							preventDone : true
 						}));

js/elFinder.js

@@ -2340,7 +2340,7 @@ var elFinder = function(elm, opts, bootCallback) {
 						} catch(e) {}
 					} else {
 						if (hasNotify && notify.type) {
-							p = p * notify.cnt
+							p = p * notify.cnt;
 							if (prog < p) {
 								self.notify({
 									type: notify.type,
@@ -5245,7 +5245,7 @@ var elFinder = function(elm, opts, bootCallback) {
 		self.ui = {
 			// container for nav panel and current folder container
 			workzone : $('<div/>').appendTo(node).elfinderworkzone(self),
-			// container for folders tree / places
+			// contaainer for folders tree / places
 			navbar : $('<div/>').appendTo(node).elfindernavbar(self, self.options.uiOptions.navbar || {}),
 			// container for for preview etc at below the navbar
 			navdock : $('<div/>').appendTo(node).elfindernavdock(self, self.options.uiOptions.navdock || {}),
@@ -5260,19 +5260,22 @@ var elFinder = function(elm, opts, bootCallback) {
 			cwd : $('<div/>').appendTo(node).elfindercwd(self, self.options.uiOptions.cwd || {}),
 			// notification dialog window
 			notify : self.dialog('', {
-				cssClass      : 'elfinder-dialog-notify',
+				cssClass      : 'elfinder-dialog-notify' + (self.options.notifyDialog.canClose? '' : ' elfinder-titlebar-button-hide'),
 				position      : self.options.notifyDialog.position,
 				absolute      : true,
 				resizable     : false,
 				autoOpen      : false,
-				closeOnEscape : false,
+				allowMinimize : true,
+				closeOnEscape : self.options.notifyDialog.canClose? true : false,
 				title         : '&nbsp;',
 				width         : self.options.notifyDialog.width? parseInt(self.options.notifyDialog.width) : null,
-				minHeight     : null
+				minHeight     : null,
+				minimize      : function() { self.ui.notify.trigger('minimize'); }
 			}),
 			statusbar : $('<div class="ui-widget-header ui-helper-clearfix ui-corner-bottom elfinder-statusbar"/>').hide().appendTo(node),
 			toast : $('<div class="elfinder-toast"/>').appendTo(node),
-			bottomtray : $('<div class="elfinder-bottomtray">').appendTo(node)
+			bottomtray : $('<div class="elfinder-bottomtray">').appendTo(node),
+			progressbar : $('<div class="elfinder-ui-progressbar">').appendTo(node)
 		};
 
 		self.trigger('uiready');
@@ -5288,7 +5291,10 @@ var elFinder = function(elm, opts, bootCallback) {
 				self.ui[ui][name](self, opts);
 			}
 		});
-		
+
+		self.ui.progressbar.appendTo(self.ui.workzone);
+		self.ui.notify.prev('.ui-dialog-titlebar').append('<div class="elfinder-ui-progressbar"></div>');
+
 		// update size	
 		self.resize(width, height);
 		
@@ -8448,14 +8454,17 @@ elFinder.prototype = {
 	 * @return elFinder
 	 */
 	notify : function(opts) {
-		var type     = opts.type,
+		var self     = this,
+			type     = opts.type,
 			id       = opts.id? 'elfinder-notify-'+opts.id : '',
 			msg      = this.i18n((typeof opts.msg !== 'undefined')? opts.msg : (this.messages['ntf'+type] ? 'ntf'+type : 'ntfsmth')),
+			hiddens  = this.arrayFlip(this.options.notifyDialog.hiddens || []),
 			ndialog  = this.ui.notify,
+			dialog   = ndialog.closest('.ui-dialog'),
 			notify   = ndialog.children('.elfinder-notify-'+type+(id? ('.'+id) : '')),
 			button   = notify.children('div.elfinder-notify-cancel').children('button'),
 			ntpl     = '<div class="elfinder-notify elfinder-notify-{type}'+(id? (' '+id) : '')+'"><span class="elfinder-dialog-icon elfinder-dialog-icon-{type}"/><span class="elfinder-notify-msg">{msg}</span> <span class="elfinder-notify-cnt"/><div class="elfinder-notify-progressbar"><div class="elfinder-notify-progress"/></div><div class="elfinder-notify-cancel"/></div>',
-			delta    = opts.cnt,
+			delta    = opts.cnt + 0,
 			size     = (typeof opts.size != 'undefined')? parseInt(opts.size) : null,
 			progress = (typeof opts.progress != 'undefined' && opts.progress >= 0) ? opts.progress : null,
 			fakeint  = opts.fakeinterval || 200,
@@ -8465,7 +8474,14 @@ elFinder.prototype = {
 				var prog = notify.find('.elfinder-notify-progress'),
 					rm = function() {
 						notify.remove();
-						!ndialog.children().length && ndialog.elfinderdialog('close');
+						if (!ndialog.children(dialog.data('minimized')? void(0) : ':visible').length) {
+							if (dialog.data('minimized')) {
+								dialog.data('minimized').hide();
+							} else {
+								ndialog.elfinderdialog('close');
+							}
+						}
+						setProgressbar();
 					};
 				notify._esc && $(document).off('keydown', notify._esc);
 				if (notify.data('cur') < 100) {
@@ -8480,15 +8496,32 @@ elFinder.prototype = {
 				var cur;
 				if (notify.length) {
 					cur = notify.data('cur') + 1;
-					if (cur < 90) {
+					if (cur <= 98) {
 						notify.find('.elfinder-notify-progress').width(cur + '%');
 						notify.data('cur', cur);
+						setProgressbar();
 						setTimeout(function() {
-							fakeUp(interval + 10);
+							interval *= 1.05; 
+							fakeUp(interval);
 						}, interval);
 					}
 				}
 			},
+			setProgressbar = function() {
+				var cnt = 0,
+					val = 0,
+					w;
+				ndialog.children('.elfinder-notify').each(function() {
+					cnt++;
+					val += Math.min($(this).data('cur'), 100);
+				});
+				w = cnt? Math.floor(val / (cnt * 100) * 100) + '%' : 0;
+				self.ui.progressbar.width(w);
+				if (dialog.data('minimized')) {
+					dialog.data('minimized').title(w);
+					dialog.data('minimized').dialog().children('.ui-dialog-titlebar').children('.elfinder-ui-progressbar').width(w);
+				}
+			},
 			cnt, total, prc;
 
 		if (!type) {
@@ -8496,9 +8529,15 @@ elFinder.prototype = {
 		}
 		
 		if (!notify.length) {
-			notify = $(ntpl.replace(/\{type\}/g, type).replace(/\{msg\}/g, msg))
-				.appendTo(ndialog)
-				.data('cnt', 0);
+			notify = $(ntpl.replace(/\{type\}/g, type).replace(/\{msg\}/g, msg));
+			if (hiddens[type]) {
+				notify.hide();
+			} else {
+				ndialog.on('minimize', function(e) {
+					dialog.data('minimized') && setProgressbar();
+				});
+			}
+			notify.appendTo(ndialog).data('cnt', 0);
 
 			if (progress != null) {
 				notify.data({progress : 0, total : 0, cur : 0});
@@ -8508,7 +8547,7 @@ elFinder.prototype = {
 			}
 
 			if (cancel) {
-				button = $('<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"><span class="ui-button-text">'+this.i18n('btnCancel')+'</span></button>')
+				button = $('<span class="elfinder-notify-button ui-icon ui-icon-close" title="'+this.i18n('btnCancel')+'"/>')
 					.on('mouseenter mouseleave', function(e) { 
 						$(this).toggleClass(clhover, e.type === 'mouseenter');
 					});
@@ -8545,7 +8584,13 @@ elFinder.prototype = {
 			}
 			
 			!opts.hideCnt && notify.children('.elfinder-notify-cnt').text('('+cnt+')');
-			ndialog.is(':hidden') && ndialog.elfinderdialog('open', this).height('auto');
+			if (delta > 0 && ndialog.is(':hidden') && !hiddens[type]) {
+				if (dialog.data('minimized')) {
+					dialog.data('minimized').show();
+				} else {
+					ndialog.elfinderdialog('open', this).height('auto');
+				}
+			}
 			notify.data('cnt', cnt);
 			
 			if ((progress != null)
@@ -8567,6 +8612,7 @@ elFinder.prototype = {
 						width : (progress < 100 ? progress : 100)+'%'
 					}, 20, function() {
 						notify.data('cur', progress);
+						setProgressbar();
 					});
 			}
 			

js/elFinder.options.js

@@ -1146,7 +1146,7 @@ elFinder.prototype._options = {
 	 * @default {position: {}, width : null} - Apply CSS definition
 	 * position: CSS object | null (null: position center & middle)
 	 */
-	notifyDialog : {position: {}, width : null},
+	notifyDialog : {position : {}, width : null, canClose : false, hiddens : ['open']},
 	
 	/**
 	 * Dialog contained in the elFinder node

js/ui/dialog.js

@@ -69,6 +69,8 @@ $.fn.elfinderdialog = function(opts, fm) {
 				if (opts === 'destroy') {
 					dialog.remove();
 					fm.trigger('dialogremoved', {dialog: dialog});
+				} else if (dialog.data('minimized')) {
+					dialog.data('minimized').close();
 				}
 			} else if (opts === 'toTop') {
 				dialog.trigger('totop');
@@ -251,13 +253,24 @@ $.fn.elfinderdialog = function(opts, fm) {
 									tray = fm.getUI('bottomtray'),
 									dumStyle = { width: 70, height: 24 },
 									dum = $('<div/>').css(dumStyle).addClass(dialog.get(0).className + ' elfinder-dialog-minimized'),
+									close = function() {
+										mnode.remove();
+										dialog.removeData('minimized').show();
+										self.elfinderdialog('close');
+									},
 									pos = {};
 								
 								e.preventDefault();
 								e.stopPropagation();
 								if (!dialog.data('minimized')) {
 									// minimize
-									doffset = dialog.data('minimized', true).position();
+									doffset = dialog.data('minimized', {
+										dialog : function() { return mnode; },
+										show : function() { mnode.show(); },
+										hide : function() { mnode.hide(); },
+										close : close,
+										title : function(v) { mnode.children('.ui-dialog-titlebar').children('.elfinder-dialog-title').text(v); }
+									}).position();
 									mnode = dialog.clone().on('mousedown', function() {
 										$this.trigger('mousedown');
 									}).removeClass('ui-draggable ui-resizable elfinder-frontmost');
@@ -271,9 +284,7 @@ $.fn.elfinderdialog = function(opts, fm) {
 									mnode.find('.ui-dialog-titlebar-close').on('mousedown', function(e) {
 										e.stopPropagation();
 										e.preventDefault();
-										mnode.remove();
-										dialog.show();
-										self.elfinderdialog('close');
+										close();
 									});
 									mnode.animate(pos, function() {
 										mnode.attr('style', '')