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'; diff --git a/js/gallery-view.js b/js/gallery-view.js new file mode 100644 index 00000000..2d7d85b4 --- /dev/null +++ b/js/gallery-view.js @@ -0,0 +1,165 @@ +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); + + $('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); + }; + + 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 [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, video').fadeOut(200, function() { $(this).remove(); }); + + 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 = $('