From 3f029853802308ca51cc979bc01074bcbc3e9fc9 Mon Sep 17 00:00:00 2001
From: czaks <marcin@6irc.net>
Date: Thu, 23 Apr 2015 07:41:36 +0200
Subject: gallery-view.js: initial commit

---
 js/gallery-view.js | 124 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 124 insertions(+)
 create mode 100644 js/gallery-view.js

(limited to '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('<div id="gallery-view" style="text-align:right"><a class="unimportant" href="javascript:void(0)">-</a></div>');
+  $('#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 = $("<div id='alert_handler'></div>").hide().appendTo('body').css('text-align', 'left');
+
+    $("<div id='alert_background'></div>").click(close_gallery).appendTo(handler);
+
+    images = $("<div id='gallery_images'></div>").appendTo(handler);
+    toolbar = $("<div id='gallery_toolbar'></div>").appendTo(handler);
+    active = $("<div id='gallery_main'></div>").appendTo(handler);
+
+    active.on('click', function() {
+      close_gallery();
+    });
+
+    $('img.post-image').parent().each(function() {
+      var thumb = $(this).find('img').attr('src');
+
+      var i = $('<img>').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'));
+      });
+    });
+
+    $("<a href='javascript:void(0)'><i class='fa fa-times'></i></div>")
+    .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 = $('<img>');
+    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(); });
+  };
+
+});
-- 
cgit v1.3


From 163a4e699c75cfa0b658e7c1e39153c2f603c483 Mon Sep 17 00:00:00 2001
From: czaks <marcin@6irc.net>
Date: Thu, 23 Apr 2015 08:45:39 +0200
Subject: gallery-view: support key events (up/down/left/right)

---
 js/gallery-view.js | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

(limited to 'js/gallery-view.js')

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(){
     $("<a href='javascript:void(0)'><i class='fa fa-times'></i></div>")
     .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(); });
   };
 
-- 
cgit v1.3


From 099e347e15f87ca757f206c20f77b1fdeb8e887f Mon Sep 17 00:00:00 2001
From: czaks <marcin@6irc.net>
Date: Thu, 23 Apr 2015 09:20:34 +0200
Subject: gallery-view: preloading images, webm support

---
 js/gallery-view.js | 40 +++++++++++++++++++++++++++++++++-------
 1 file changed, 33 insertions(+), 7 deletions(-)

(limited to 'js/gallery-view.js')

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 = $('<img>');
-    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 = $('<video>');
+      i.attr('src', img);
+      i.attr('autoplay', true);
+      i.attr('controls', true);
+      i.appendTo(active);
+      i.hide();
+    }
+    else { // Just a plain image
+      i = $('<img>');
+      i.attr('src', img);
+      i.appendTo(active);
+      i.hide();
+    }
 
     // Let's actually preload the next few images
+    var nextimg = $('#gallery_images active');
+    for (var j = 0; j < 3; j++) { 
+      nextimg = nextimg.next();
+      var attr;
+      if (attr = nextimg.attr('data-gaild-th')) {
+        var href = $('a[data-galid="'+attr+'"]').attr('href');
+        if (href.match(/\.webm|\.mp4|\.ogv/i)) { j--; continue; }
+        if ($('[data-galid-preload="'+attr+'"]').length) continue;
+        var img = $('<img>').attr('src', href).attr('data-galid-preload', attr).hide().appendTo('body').on('load', function() { $(this).remove(); });
+      }
+      else break;
+    }
 
-    i.on('load', function() {
+    i.one('load canplay', function() {
       i.css('left', 'calc(50% - '+i.width()+'px / 2)');
       i.css('top', 'calc(50% - '+i.height()+'px / 2)');
       i.fadeIn(200);
-- 
cgit v1.3