Cool_Tools/vichan
1
0
Fork 0
mirror of https://github.com/vichan-devel/vichan.git synced 2024-11-23 23:20:57 +01:00
Code Releases Wiki Activity

image throttler

Browse Source 
initial commit
This commit is contained in:
Markerov 2015-01-12 11:41:54 +08:00 committed by czaks
parent 63491b0b9a
commit c3146e1794
1 changed files with 132 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

164
js/inline-expanding.js
View File

@ -13,30 +13,104 @@
*/
onready(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.dataset.imageLoading === 'true') {
ele.dataset.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.dataset.imageLoading = 'false';
update();
});
});
$loadstart.done(function (img, thumb) {
thumb.style.display = 'none';
img.style.display = '';
});
img.setAttribute('src', ele.href);
ele.dataset.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/)) {
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) {
var img, post_body, still_open, canvas;
var img, post_body, still_open, canvas, scroll;
var thumb = this.childNodes[0];
var padding = 5;
var boardlist = $('.boardlist')[0];
var loadImage = function(img, thumb) {
if (img.naturalWidth) {
thumb.style.display = 'none';
img.style.display = '';
}
else {
return thumb.parentNode.timeout = setTimeout(loadImage, 30, img, thumb);
}
};
if (thumb.className == 'hidden')
return false;
if (e.which == 2 || e.ctrlKey) //open in new tab
if (e.which == 2 || e.ctrlKey) // open in new tab
return true;
if (!this.dataset.expanded) {
this.parentNode.removeAttribute('style');
@ -54,31 +128,19 @@ onready(function(){
img = document.createElement('img');
img.className = 'full-image';
img.setAttribute('src', this.href);
img.setAttribute('alt', 'Fullsized image');
img.style.display = 'none';
img.setAttribute('alt', 'Fullsized image');
this.appendChild(img);
this.timeout = loadImage(img, thumb);
loadingQueue.add(this);
} else {
clearTimeout(this.timeout);
loadingQueue.remove(this);
//scroll to thumb if not triggered by 'shrink all image'
scroll = false;
// scroll to thumb if not triggered by 'shrink all image'
if (e.target.className == 'full-image') {
post_body = $(e.target).parentsUntil('form > div').last();
still_open = post_body.find('.post-image').filter(function(){return $(this).parent().attr('data-expanded') == 'true'}).length;
//deal with differnt boards' menu styles
if ($(boardlist).css('position') == 'fixed')
padding += boardlist.getBoundingClientRect().height;
if (still_open > 1) {
if (e.target.getBoundingClientRect().top - padding < 0)
$(document).scrollTop($(e.target).parent().parent().offset().top - padding);
} else {
if (post_body[0].getBoundingClientRect().top - padding < 0)
$(document).scrollTop(post_body.offset().top - padding);
}
scroll = true;
}
if (~this.parentNode.className.indexOf('multifile'))
@ -86,10 +148,32 @@ onready(function(){
thumb.style.opacity = '';
thumb.style.display = '';
this.removeChild(thumb.nextSibling);
if (thumb.nextSibling) this.removeChild(thumb.nextSibling); //full image loaded or loading
delete this.dataset.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().attr('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(thumb);
}
@ -100,6 +184,22 @@ onready(function(){
}
};
// 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) {
$('div[id^="thread_"]').each(inline_expand_post);