From fbdefa7acaa7bb0218547d1c260ce6f6eb48154d Mon Sep 17 00:00:00 2001 From: nao-pon Date: Tue, 19 Apr 2016 17:36:19 +0900 Subject: [PATCH] [cmd:quicklook] fix loss of control on fullscreen with iframe --- css/quicklook.css | 14 ++++++- js/commands/quicklook.js | 72 +++++++++++++++++++++++--------- js/commands/quicklook.plugins.js | 35 ++++++++++++++-- 3 files changed, 96 insertions(+), 25 deletions(-) diff --git a/css/quicklook.css b/css/quicklook.css index 4e69bbe20..e821755de 100644 --- a/css/quicklook.css +++ b/css/quicklook.css @@ -35,8 +35,16 @@ /* hide preview border in fullscreen mode */ .elfinder-quicklook-fullscreen .elfinder-quicklook-preview { border:0 solid ;} -.elfinder-quicklook-fullscreen iframe { - height: 99%; +/*.elfinder-quicklook-fullscreen iframe { + height: 100%; +}*/ + +.elfinder-quicklook-cover { + width: 100%; + height: 100%; + top: 0; + left: 0; + position: absolute; } /* quicklook titlebar */ @@ -150,6 +158,8 @@ padding:5px; border:1px solid #eee; background:#000; + opacity: 0.4; + filter: Alpha(Opacity=40); } /* show close icon in fullscreen mode */ diff --git a/js/commands/quicklook.js b/js/commands/quicklook.js index 86b0090ef..a78e10470 100644 --- a/js/commands/quicklook.js +++ b/js/commands/quicklook.js @@ -129,9 +129,12 @@ elFinder.prototype.commands.quicklook = function() { * @type jQuery **/ cwd, + navdrag = false, + coverEv = 'mousemove touchstart ' + ('onwheel' in document? 'wheel' : 'onmousewheel' in document? 'mousewheel' : 'DOMMouseScroll'), title = $('
'), icon = $('
'), info = $('
'),//.hide(), + cover = $('
'), fsicon = $('
') .mousedown(function(e) { var win = self.window, @@ -142,9 +145,11 @@ elFinder.prototype.commands.quicklook = function() { e.stopPropagation(); if (full) { - win.css(win.data('position')).off('mousemove touchstart'); + win.css(win.data('position')); $window.off(scroll).trigger(self.resize).off(self.resize); - navbar.off('mouseenter touchstart').off('mousemove'); + navbar.off('mouseenter'); + cover.data('tm') && clearTimeout(cover.data('tm')); + cover.hide().off(coverEv); } else { win.data('position', { left : win.css('left'), @@ -168,20 +173,37 @@ elFinder.prototype.commands.quicklook = function() { }) .trigger(scroll) .trigger(self.resize); + + cover.on(coverEv, function(e) { + if (! navdrag) { + e.stopPropagation(); + if (e.type === 'mousemove' || e.type === 'touchstart') { + navbar.stop(true, true).show().delay(3000).fadeOut('slow'); + } + if (cover.is(':visible')) { + cover.hide(); + cover.data('tm', setTimeout(function() { + cover.show(); + }, 3000)); + } + } + }).show().trigger('mousemove'); - win.on('mousemove touchstart', function(e) { - navbar.stop(true, true).show().delay(3000).fadeOut('slow'); - }) - .mousemove(); - - navbar.on('mouseenter touchstart', function() { + navbar.on('mouseenter', function() { navbar.stop(true, true).show(); - }) - .mousemove(function(e) { - e.stopPropagation(); }); } - navbar.attr('style', '').draggable(full ? 'destroy' : {}); + if (! fm.UA.Mobile) { + navbar.attr('style', '').draggable(full ? 'destroy' : { + start: function() { + cover.show(); + navdrag = true; + }, + stop: function() { + navdrag = false; + } + }); + } win.toggleClass(fullscreen); $(this).toggleClass(navicon+'-fullscreen-off'); var collection = win; @@ -189,6 +211,8 @@ elFinder.prototype.commands.quicklook = function() { collection = collection.add(parent); }; $.fn.resizable && !fm.UA.Touch && collection.resizable(full ? 'enable' : 'disable').removeClass('ui-state-disabled'); + + win.trigger('viewchange'); }), navbar = $('
') @@ -210,7 +234,6 @@ elFinder.prototype.commands.quicklook = function() { self.info.attr('style', '').hide(); icon.removeAttr('class').attr('style', ''); info.html(''); - }) // update info/icon .on('update', function(e) { @@ -245,6 +268,11 @@ elFinder.prototype.commands.quicklook = function() { .attr('src', (tmb = fm.tmb(file.hash))); } self.info.delay(100).fadeIn(10); + setTimeout(function() { + if (fm.UA.Mobile || navbar.parent().find('.elfinder-quicklook-navbar:hover').length < 1) { + cover.trigger('mousemove'); + } + }, 100); } else { e.stopImmediatePropagation(); } @@ -257,14 +285,17 @@ elFinder.prototype.commands.quicklook = function() { .click(function(e) { e.stopPropagation(); }) .append( $('
') - .append(title) - .append($('').mousedown(function(e) { + .append( + title, + $('').mousedown(function(e) { e.stopPropagation(); self.window.trigger('close'); - })) - ) - .append(this.preview.add(navbar)) - .append(self.info.hide()) + })), + this.preview, + self.info.hide(), + cover.hide(), + navbar + ) .draggable({handle : 'div.elfinder-quicklook-titlebar'}) .on('open', function(e) { var win = self.window, @@ -275,11 +306,14 @@ elFinder.prototype.commands.quicklook = function() { navbar.attr('style', ''); state = animated; node.trigger('scrolltoview'); + cover.data('tm') && clearTimeout(cover.data('tm')); + cover.hide(); win.css(closedCss(node)) .show() .animate(openedCss(), 550, function() { state = opened; self.update(1, self.value); + navbar.stop(true, true).show(); }); } }) diff --git a/js/commands/quicklook.plugins.js b/js/commands/quicklook.plugins.js index 92ce6ba83..6217f20ba 100644 --- a/js/commands/quicklook.plugins.js +++ b/js/commands/quicklook.plugins.js @@ -212,7 +212,8 @@ elFinder.prototype.commands.quicklook.plugins = [ if (file.mime == mime) { e.stopImmediatePropagation(); ql.hideinfo(); - preview.append((node = $(''))); + node = $('') + .appendTo(preview); } }); }, @@ -239,7 +240,9 @@ elFinder.prototype.commands.quicklook.plugins = [ 'audio/x-mp4' : 'm4a', 'audio/ogg' : 'ogg' }, - node; + node, + win = ql.window, + navi = win.find('.elfinder-quicklook-navbar'); preview.on('update', function(e) { var file = e.file, @@ -251,9 +254,16 @@ elFinder.prototype.commands.quicklook.plugins = [ node = $('') .appendTo(preview); autoplay && node[0].play(); + + win.on('viewchange.audio', function() { + navi.css('bottom', win.hasClass('elfinder-quicklook-fullscreen')? '50px' : ''); + }); + navi.css('bottom', win.hasClass('elfinder-quicklook-fullscreen')? '50px' : ''); } }).on('change', function() { if (node && node.parent().length) { + win.off('viewchange.audio'); + navi.css('bottom', ''); node[0].pause(); node.remove(); node= null; @@ -277,7 +287,9 @@ elFinder.prototype.commands.quicklook.plugins = [ 'application/ogg' : 'ogg', 'video/webm' : 'webm' }, - node; + node, + win = ql.window, + navi = win.find('.elfinder-quicklook-navbar'); preview.on('update', function(e) { var file = e.file, @@ -290,9 +302,15 @@ elFinder.prototype.commands.quicklook.plugins = [ node = $('').appendTo(preview); autoplay && node[0].play(); + win.on('viewchange.video', function() { + navi.css('bottom', win.hasClass('elfinder-quicklook-fullscreen')? '50px' : ''); + }); + navi.css('bottom', win.hasClass('elfinder-quicklook-fullscreen')? '50px' : ''); } }).on('change', function() { if (node && node.parent().length) { + win.off('viewchange.video'); + navi.css('bottom', ''); node[0].pause(); node.remove(); node= null; @@ -308,7 +326,9 @@ elFinder.prototype.commands.quicklook.plugins = [ function(ql) { var preview = ql.preview, mimes = [], - node; + node, + win = ql.window, + navi = win.find('.elfinder-quicklook-navbar'); $.each(navigator.plugins, function(i, plugins) { $.each(plugins, function(i, plugin) { @@ -326,9 +346,16 @@ elFinder.prototype.commands.quicklook.plugins = [ (video = mime.indexOf('video/') === 0) && ql.hideinfo(); node = $('') .appendTo(preview); + + win.on('viewchange.embed', function() { + navi.css('bottom', win.hasClass('elfinder-quicklook-fullscreen')? '50px' : ''); + }); + navi.css('bottom', win.hasClass('elfinder-quicklook-fullscreen')? '50px' : ''); } }).on('change', function() { if (node && node.parent().length) { + win.off('viewchange.embed'); + navi.css('bottom', ''); node.remove(); node= null; }