Merged lainchan with vichan master at 25/9/2016 a4b619ae5eaab5755dc215a496854dee8f7ce395 @czaks czaks committed on GitHub 2 days ago

1 files changed, 170 insertions, 34 deletions

diff --git a/js/inline-expanding.js b/js/inline-expanding.js
index 4d0cb03d..5db95c09 100644
--- a/js/inline-expanding.js
+++ b/js/inline-expanding.js
@@ -7,65 +7,201 @@
  * Copyright (c) 2013-2014 Marcin Łabanowski <marcin@6irc.net>
  *
  * Usage:
- *   // $config['additional_javascript'][] = 'js/jquery.min.js';
+ *   $config['additional_javascript'][] = 'js/jquery.min.js';
  *   $config['additional_javascript'][] = 'js/inline-expanding.js';
  *
  */
 
-onready(function(){
+$(document).ready(function(){
+	'use strict';
+
+	var DEFAULT_MAX = 5;  // default maximum image loads
 	var inline_expand_post = function() {
 		var link = this.getElementsByTagName('a');
 
+		var loadingQueue = (function () {
+			var MAX_IMAGES = localStorage.inline_expand_max || DEFAULT_MAX;   // maximum number of images to load concurrently, 0 to disable
+			var loading = 0;                                                  // number of images that is currently loading
+			var waiting = [];                                                 // waiting queue
+
+			var enqueue = function (ele) {
+				waiting.push(ele);
+			};
+			var dequeue = function () {
+				return waiting.shift();
+			};
+			var update = function() {
+				var ele;
+				while (loading < MAX_IMAGES || MAX_IMAGES === 0) {
+					ele = dequeue();
+					if (ele) {
+						++loading;
+						ele.deferred.resolve();
+					} else {
+						return;
+					}
+				}
+			};
+			return {
+				remove: function (ele) {
+					var i = waiting.indexOf(ele);
+					if (i > -1) {
+						waiting.splice(i, 1);
+					}
+					if ($(ele).data('imageLoading') === 'true') {
+						$(ele).data('imageLoading', 'false');
+						clearTimeout(ele.timeout);
+						--loading;
+					}
+				},
+				add: function (ele) {
+					ele.deferred = $.Deferred();
+					ele.deferred.done(function () {
+						var $loadstart = $.Deferred();
+						var thumb = ele.childNodes[0];
+						var img = ele.childNodes[1];
+
+						var onLoadStart = function (img) {
+							if (img.naturalWidth) {
+								$loadstart.resolve(img, thumb);
+							} else {
+								return (ele.timeout = setTimeout(onLoadStart, 30, img));
+							}
+						};
+
+						$(img).one('load', function () {
+							$.when($loadstart).done(function () {
+								//  once fully loaded, update the waiting queue
+								--loading;
+								$(ele).data('imageLoading', 'false');
+								update();
+							});
+						});
+						$loadstart.done(function (img, thumb) {
+							thumb.style.display = 'none';
+							img.style.display = '';
+						});
+
+						img.setAttribute('src', ele.href);
+						$(ele).data('imageLoading', 'true');
+						ele.timeout = onLoadStart(img);
+					});
+
+					if (loading < MAX_IMAGES || MAX_IMAGES === 0) {
+						++loading;
+						ele.deferred.resolve();
+					} else {
+						enqueue(ele);
+					}
+
+				}
+			};
+		})();
+
 		for (var i = 0; i < link.length; i++) {
-			if (typeof link[i] == "object" && link[i].childNodes && typeof link[i].childNodes[0] !== 'undefined' && link[i].childNodes[0].src && link[i].childNodes[0].className.match(/post-image/) && !link[i].className.match(/file/)) {
-				link[i].childNodes[0].style.maxWidth = '98%';
+			if (typeof link[i] == "object" && link[i].childNodes && typeof link[i].childNodes[0] !== 'undefined' &&
+					link[i].childNodes[0].src && link[i].childNodes[0].className.match(/post-image/) && !link[i].className.match(/file/)) {
 				link[i].onclick = function(e) {
-					if (this.childNodes[0].className == 'hidden')
+					var img, post_body, still_open, canvas, scroll;
+					var thumb = this.childNodes[0];
+					var padding = 5;
+					var boardlist = $('.boardlist')[0];
+					
+
+					if (thumb.className == 'hidden')
 						return false;
-					if (e.which == 2 || e.metaKey)
+					if (e.which == 2 || e.ctrlKey) //  open in new tab
 						return true;
-					if (!this.dataset.src) {
+					if (!$(this).data('expanded')) {
+
+						if (~this.parentNode.className.indexOf('multifile'))
+							$(this).data('width', this.parentNode.style.width);
+
 						this.parentNode.removeAttribute('style');
-						this.dataset.expanded = 'true';
+						$(this).data('expanded', 'true');
 
-						if (this.childNodes[0].tagName === 'CANVAS') {
-							this.removeChild(this.childNodes[0]);
-							this.childNodes[0].style.display = 'block';
+						if (thumb.tagName === 'CANVAS') {
+							canvas = thumb;
+							thumb = thumb.nextSibling;
+							this.removeChild(canvas);
+							canvas.style.display = 'block';
 						}
 
-						this.dataset.src= this.childNodes[0].src;
-						this.dataset.width = this.childNodes[0].style.width;
-						this.dataset.height = this.childNodes[0].style.height;
-						
+						thumb.style.opacity = '0.4';
+						thumb.style.filter = 'alpha(opacity=40)';
 
-						this.childNodes[0].src = this.href;
-						this.childNodes[0].style.width = 'auto';
-						this.childNodes[0].style.height = 'auto';
-						this.childNodes[0].style.opacity = '0.4';
-						this.childNodes[0].style.filter = 'alpha(opacity=40)';
-						this.childNodes[0].onload = function() {
-							this.style.opacity = '';
-							delete this.style.filter;
-						}
+						img = document.createElement('img');
+						img.className = 'full-image';
+						img.style.display = 'none';
+						img.setAttribute('alt', 'Fullsized image');
+						this.appendChild(img);
+
+						loadingQueue.add(this);
 					} else {
+						loadingQueue.remove(this);
+
+						scroll = false;
+
+						//  scroll to thumb if not triggered by 'shrink all image'
+						if (e.target.className == 'full-image') {
+							scroll = true;
+						}
+
 						if (~this.parentNode.className.indexOf('multifile'))
-							this.parentNode.style.width = (parseInt(this.dataset.width)+40)+'px';
-						this.childNodes[0].src = this.dataset.src;
-						this.childNodes[0].style.width = this.dataset.width;
-						this.childNodes[0].style.height = this.dataset.height;
-						delete this.dataset.expanded;
-						delete this.dataset.src;
-						delete this.childNodes[0].style.opacity;
-						delete this.childNodes[0].style.filter;
+							this.parentNode.style.width = $(this).data('width');
+
+						thumb.style.opacity = '';
+						thumb.style.display = '';
+						if (thumb.nextSibling) this.removeChild(thumb.nextSibling);  //full image loaded or loading
+						$(this).removeData('expanded');
+						delete thumb.style.filter;
+
+						//  do the scrolling after page reflow
+						if (scroll) {
+							post_body = $(thumb).parentsUntil('form > div').last();
+
+							//  on multifile posts, determin how many other images are still expanded
+							still_open = post_body.find('.post-image').filter(function(){
+								return $(this).parent().data('expanded') == 'true';
+							}).length;
+
+							//  deal with differnt boards' menu styles
+							if ($(boardlist).css('position') == 'fixed')
+								padding += boardlist.getBoundingClientRect().height;
+
+							if (still_open > 0) {
+								if (thumb.getBoundingClientRect().top - padding < 0)
+									$(document).scrollTop($(thumb).parent().parent().offset().top - padding);
+							} else {
+								if (post_body[0].getBoundingClientRect().top - padding < 0)
+									$(document).scrollTop(post_body.offset().top - padding);
+							}
+						}
 
 						if (localStorage.no_animated_gif === 'true' && typeof unanimate_gif === 'function') {
-							unanimate_gif(this.childNodes[0]);
+							unanimate_gif(thumb);
 						}
 					}
 					return false;
-				}
+				};
 			}
 		}
+	};
+
+	//  setting up user option
+	if (window.Options && Options.get_tab('general')) {
+		Options.extend_tab('general', '<span id="inline-expand-max">'+ _('Number of simultaneous image downloads (0 to disable): ') + 
+										'<input type="number" step="1" min="0" size="4"></span>');
+		$('#inline-expand-max input')
+			.css('width', '50px')
+			.val(localStorage.inline_expand_max || DEFAULT_MAX)
+			.on('change', function (e) {
+				// validation in case some fucktard tries to enter a negative floating point number
+				var n = parseInt(e.target.value);
+				var val = (n<0) ? 0 : n;
+
+				localStorage.inline_expand_max = val;
+			});
 	}
 
 	if (window.jQuery) {