From 4c746f0a6b7aa9d22b480eb60e584cc148922667 Mon Sep 17 00:00:00 2001 From: nao-pon Date: Fri, 21 Feb 2020 13:35:08 +0900 Subject: [PATCH] [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 | 25 +++++++++++++ css/dialog.css | 54 +++++++++++++++++++++++++++- css/theme.css | 14 ++++++++ js/commands/info.js | 10 ++++-- js/commands/search.js | 6 ++-- js/elFinder.js | 80 +++++++++++++++++++++++++++++++++--------- js/elFinder.options.js | 2 +- js/ui/dialog.js | 19 +++++++--- 8 files changed, 183 insertions(+), 27 deletions(-) diff --git a/css/common.css b/css/common.css index e5e528b4f..3842d197e 100644 --- a/css/common.css +++ b/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; +} \ No newline at end of file diff --git a/css/dialog.css b/css/dialog.css index 4a4f139c3..b2240a32f 100644 --- a/css/dialog.css +++ b/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, diff --git a/css/theme.css b/css/theme.css index a48e85f34..dde053595 100644 --- a/css/theme.css +++ b/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; +} \ No newline at end of file diff --git a/js/commands/info.js b/js/commands/info.js index ed53db4ba..9e1a7c303 100644 --- a/js/commands/info.js +++ b/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(); } diff --git a/js/commands/search.js b/js/commands/search.js index 691502697..3867e161f 100644 --- a/js/commands/search.js +++ b/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 })); diff --git a/js/elFinder.js b/js/elFinder.js index bea0696d2..719539f20 100644 --- a/js/elFinder.js +++ b/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 : $('
').appendTo(node).elfinderworkzone(self), - // container for folders tree / places + // contaainer for folders tree / places navbar : $('
').appendTo(node).elfindernavbar(self, self.options.uiOptions.navbar || {}), // container for for preview etc at below the navbar navdock : $('
').appendTo(node).elfindernavdock(self, self.options.uiOptions.navdock || {}), @@ -5260,19 +5260,22 @@ var elFinder = function(elm, opts, bootCallback) { cwd : $('
').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 : ' ', width : self.options.notifyDialog.width? parseInt(self.options.notifyDialog.width) : null, - minHeight : null + minHeight : null, + minimize : function() { self.ui.notify.trigger('minimize'); } }), statusbar : $('
').hide().appendTo(node), toast : $('
').appendTo(node), - bottomtray : $('
').appendTo(node) + bottomtray : $('
').appendTo(node), + 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('
'); + // 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 = '
{msg}
', - 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 = $('') .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(); }); } diff --git a/js/elFinder.options.js b/js/elFinder.options.js index bc7e8ca00..9af08b6f1 100644 --- a/js/elFinder.options.js +++ b/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 diff --git a/js/ui/dialog.js b/js/ui/dialog.js index e2e58126e..46b96f601 100644 --- a/js/ui/dialog.js +++ b/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 = $('
').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', '')