From 53197a8e4c4dd53759e13739466420df97633cfe Mon Sep 17 00:00:00 2001 From: czaks Date: Thu, 23 Apr 2015 07:41:36 +0200 Subject: [PATCH 1/6] gallery-view.js: initial commit --- js/gallery-view.js | 124 ++++++++++++++++++++++++++++++++++++++++++ stylesheets/style.css | 55 +++++++++++++++++++ 2 files changed, 179 insertions(+) create mode 100644 js/gallery-view.js diff --git a/js/gallery-view.js b/js/gallery-view.js new file mode 100644 index 00000000..efe1b3b1 --- /dev/null +++ b/js/gallery-view.js @@ -0,0 +1,124 @@ +if (active_page == 'index' || active_page == 'thread') +$(function(){ + + var gallery_view = false; + + $('hr:first').before(''); + $('#gallery-view a').html(gallery_view ? _("Disable gallery mode") : _("Enable gallery mode")).click(function() { + gallery_view = !gallery_view; + $(this).html(gallery_view ? _("Disable gallery mode") : _("Enable gallery mode")); + toggle_gview(document); + }); + + var toggle_gview = function(elem) { + if (gallery_view) { + $(elem).find('img.post-image').parent().each(function() { + this.oldonclick = this.onclick; + this.onclick = handle_click; + $(this).attr('data-galid', Math.random()); + }); + } + else { + $(elem).find('img.post-image').parent().each(function() { + if (this.onclick == handle_click) this.onclick = this.oldonclick; + }); + } + }; + + $(document).on('new_post', toggle_gview); + + var gallery_opened = false; + + var handle_click = function(e) { + e.stopPropagation(); + e.preventDefault(); + + if (!gallery_opened) open_gallery(); + + gallery_setimage($(this).attr('data-galid')); + }; + + var handler, images, active, toolbar; + + var open_gallery = function() { + $('body').css('overflow', 'hidden'); + + gallery_opened = true; + + handler = $("
").hide().appendTo('body').css('text-align', 'left'); + + $("
").click(close_gallery).appendTo(handler); + + images = $("").appendTo(handler); + toolbar = $("").appendTo(handler); + active = $("").appendTo(handler); + + active.on('click', function() { + close_gallery(); + }); + + $('img.post-image').parent().each(function() { + var thumb = $(this).find('img').attr('src'); + + var i = $('').appendTo(images); + i.attr('src', thumb); + i.attr('data-galid-th', $(this).attr('data-galid')); + + i.on('click', function(e) { + gallery_setimage($(this).attr('data-galid-th')); + }); + }); + + $("") + .click(close_gallery).appendTo(toolbar); + + handler.fadeIn(400); + }; + + var gallery_setimage = function(a) { + if (a == +1 || a == -1) { + var meth = (a == -1) ? 'prev' : 'next'; + a = $('#gallery_images img.active')[meth]().attr('data-galid-th'); + if (!a) return; + } + + $('#gallery_images img.active').removeClass('active'); + + var thumb = $('#gallery_images img[data-galid-th="'+a+'"]'); + var elem = $('a[data-galid="'+a+'"]'); + + thumb.addClass('active'); + + var topscroll = thumb.position().top + images.scrollTop(); + topscroll -= images.height() / 2; + topscroll += thumb.height() / 2; + images.animate({'scrollTop': topscroll}, 300); + + var img = elem.attr('href'); + + active.find('img').fadeOut(200, function() { $(this).remove(); }); + + var i = $(''); + i.attr('src', img); + i.appendTo(active); + i.hide(); + + i.on('load', function() { + i.css('left', 'calc(50% - '+i.width()+'px / 2)'); + i.css('top', 'calc(50% - '+i.height()+'px / 2)'); + i.fadeIn(200); + }).on('click', function(e) { + e.stopPropagation(); + gallery_setimage(+1); + }); + }; + + var close_gallery = function() { + $('body').css('overflow', 'auto'); + + gallery_opened = false; + + handler.fadeOut(400, function() { handler.remove(); }); + }; + +}); diff --git a/stylesheets/style.css b/stylesheets/style.css index 0cf9b2a3..4b442a07 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -1649,3 +1649,58 @@ td.board-tags a.tag-link { #post-moderation-fields { display: none; } + +/* Gallery view */ +#gallery_images { + position: absolute; + right: 0px; + bottom: 0px; + top: 0px; + width: 15%; + background-color: rgba(0, 0, 0, 0.4); + overflow: auto; +} +#gallery_toolbar { + position: absolute; + right: 15%; + left: 0px; + bottom: 0px; + height: 32px; + background-color: rgba(0, 0, 0, 0.4); + text-align: right; +} +#gallery_images img { + width: 100%; +} +#gallery_toolbar a { + font-size: 28px; + padding-right: 5px; +} +#gallery_main { + position: absolute; + left: 0px; + right: 15%; + bottom: 32px; + top: 0px; + padding: 10px; +} + +#gallery_images img { + opacity: 0.6; + -webkit-transition: all 0.5s; + transition: all 0.5s; +} +#gallery_images img:hover, #gallery_images img.active { + opacity: 1; +} +#gallery_images img.active { + -webkit-box-shadow: 0px 0px 29px 2px rgba(255,255,255,1); + -moz-box-shadow: 0px 0px 29px 2px rgba(255,255,255,1); + box-shadow: 0px 0px 29px 2px rgba(255,255,255,1); + z-index: 1; +} +#gallery_main img { + max-width: 100%; + max-height: 100%; + position: absolute; +} From 9f61cf838c4e2db1157ef2a4e6232077f3755406 Mon Sep 17 00:00:00 2001 From: czaks Date: Thu, 23 Apr 2015 07:56:04 +0200 Subject: [PATCH 2/6] gallery-view/8chan: enable in instance-config --- inc/instance-config.php | 1 + 1 file changed, 1 insertion(+) diff --git a/inc/instance-config.php b/inc/instance-config.php index a212d323..068055b7 100644 --- a/inc/instance-config.php +++ b/inc/instance-config.php @@ -141,6 +141,7 @@ $config['additional_javascript'][] = 'js/auto-scroll.js'; $config['additional_javascript'][] = 'js/twemoji/twemoji.js'; $config['additional_javascript'][] = 'js/file-selector.js'; + $config['additional_javascript'][] = 'js/gallery-view.js'; $config['additional_javascript'][] = 'js/board-directory.js'; // Oekaki (now depends on config.oekaki so can be in all scripts) $config['additional_javascript'][] = 'js/jquery-ui.custom.min.js'; From e7ba7696112a8a8c1ec15a5db5b613e3996404ab Mon Sep 17 00:00:00 2001 From: czaks Date: Thu, 23 Apr 2015 08:45:39 +0200 Subject: [PATCH 3/6] gallery-view: support key events (up/down/left/right) --- js/gallery-view.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/js/gallery-view.js b/js/gallery-view.js index efe1b3b1..65a1e967 100644 --- a/js/gallery-view.js +++ b/js/gallery-view.js @@ -72,6 +72,17 @@ $(function(){ $("") .click(close_gallery).appendTo(toolbar); + $('body').on('keydown.gview', function(e) { + if (e.which == 39 || e.which == 40) { // right or down arrow + gallery_setimage(+1); + e.preventDefault(); + } + else if (e.which == 37 || e.which == 38) { // left or up arrow + gallery_setimage(-1); + e.preventDefault(); + } + }); + handler.fadeIn(400); }; @@ -103,6 +114,8 @@ $(function(){ i.appendTo(active); i.hide(); + // Let's actually preload the next few images + i.on('load', function() { i.css('left', 'calc(50% - '+i.width()+'px / 2)'); i.css('top', 'calc(50% - '+i.height()+'px / 2)'); @@ -118,6 +131,8 @@ $(function(){ gallery_opened = false; + $('body').off('keydown.gview'); + handler.fadeOut(400, function() { handler.remove(); }); }; From 64014ec1b0a7bfb089b1174a163c6571561ac86e Mon Sep 17 00:00:00 2001 From: czaks Date: Thu, 23 Apr 2015 09:20:34 +0200 Subject: [PATCH 4/6] gallery-view: preloading images, webm support --- js/gallery-view.js | 40 +++++++++++++++++++++++++++++++++------- 1 file changed, 33 insertions(+), 7 deletions(-) diff --git a/js/gallery-view.js b/js/gallery-view.js index 65a1e967..2d7d85b4 100644 --- a/js/gallery-view.js +++ b/js/gallery-view.js @@ -95,7 +95,7 @@ $(function(){ $('#gallery_images img.active').removeClass('active'); - var thumb = $('#gallery_images img[data-galid-th="'+a+'"]'); + var thumb = $('#gallery_images [data-galid-th="'+a+'"]'); var elem = $('a[data-galid="'+a+'"]'); thumb.addClass('active'); @@ -107,16 +107,42 @@ $(function(){ var img = elem.attr('href'); - active.find('img').fadeOut(200, function() { $(this).remove(); }); + active.find('img, video').fadeOut(200, function() { $(this).remove(); }); - var i = $(''); - i.attr('src', img); - i.appendTo(active); - i.hide(); + var i; + if (img.match(/player\.php/)) { + img = img.replace(/.*player\.php\?v=|&t=.*/g, ''); + } + if (img.match(/\.webm$|\.mp4$|\.ogv$/i)) { // We are handling video nao + i = $('