From 40b7193cc109d6c6de9bc2dfb64f60f836424ba6 Mon Sep 17 00:00:00 2001 From: Markerov Date: Mon, 27 Oct 2014 16:49:17 +0800 Subject: [PATCH 1/5] Display inline image when it starts loading, Rewrote inline-expanding.js to display full image as soon as it starts loading. Modified expand-all-images.js to work with the new change Moved max-width to style.css --- js/expand-all-images.js | 2 +- js/inline-expanding.js | 51 +++++++++++++++++++++++------------------ stylesheets/style.css | 4 ++++ 3 files changed, 34 insertions(+), 23 deletions(-) diff --git a/js/expand-all-images.js b/js/expand-all-images.js index 5545045c..82ea6340 100644 --- a/js/expand-all-images.js +++ b/js/expand-all-images.js @@ -34,7 +34,7 @@ onready(function(){ $('div#shrink-all-images a') .text(_('Shrink all images')) .click(function(){ - $('a img.post-image').each(function() { + $('a img.full-image').each(function() { if ($(this).parent()[0].dataset.expanded) $(this).parent().click(); }); diff --git a/js/inline-expanding.js b/js/inline-expanding.js index 4d0cb03d..6692e8a1 100644 --- a/js/inline-expanding.js +++ b/js/inline-expanding.js @@ -18,13 +18,23 @@ onready(function(){ 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%'; link[i].onclick = function(e) { + var img; + 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 (this.childNodes[0].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.dataset.expanded) { this.parentNode.removeAttribute('style'); this.dataset.expanded = 'true'; @@ -33,29 +43,26 @@ onready(function(){ this.childNodes[0].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; - - - 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.setAttribute('src', this.href); + img.setAttribute('alt', 'Fullsized image'); + img.style.display = 'none'; + this.appendChild(img); + + this.timeout = loadImage(img, this.childNodes[0]); } else { + clearTimeout(this.timeout); 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; + + this.childNodes[0].style.opacity = ''; + this.childNodes[0].style.display = ''; + this.removeChild(this.childNodes[1]); delete this.dataset.expanded; - delete this.dataset.src; - delete this.childNodes[0].style.opacity; delete this.childNodes[0].style.filter; if (localStorage.no_animated_gif === 'true' && typeof unanimate_gif === 'function') { @@ -63,10 +70,10 @@ onready(function(){ } } return false; - } + }; } } - } + }; if (window.jQuery) { $('div[id^="thread_"]').each(inline_expand_post); diff --git a/stylesheets/style.css b/stylesheets/style.css index f1aee1a1..b595954b 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -190,6 +190,10 @@ img.banner,img.board_image { border: none; } +.full-image { + max-width: 98%; +} + div.post .post-image { padding: 5px; margin: 0 20px 0 0; From ba0878a88d22a743aa62cd1754f89688f693678d Mon Sep 17 00:00:00 2001 From: Markerov Date: Mon, 27 Oct 2014 16:57:03 +0800 Subject: [PATCH 2/5] renamed 'this.childNodes[0]' to thumb --- js/inline-expanding.js | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/js/inline-expanding.js b/js/inline-expanding.js index 6692e8a1..c19937ed 100644 --- a/js/inline-expanding.js +++ b/js/inline-expanding.js @@ -20,6 +20,7 @@ onready(function(){ 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; + var thumb = this.childNodes[0]; var loadImage = function(img, thumb) { if (img.naturalWidth) { thumb.style.display = 'none'; @@ -30,7 +31,7 @@ onready(function(){ } }; - if (this.childNodes[0].className == 'hidden') + if (thumb.className == 'hidden') return false; if (e.which == 2 || e.ctrlKey) //open in new tab return true; @@ -38,13 +39,13 @@ onready(function(){ this.parentNode.removeAttribute('style'); this.dataset.expanded = 'true'; - if (this.childNodes[0].tagName === 'CANVAS') { - this.removeChild(this.childNodes[0]); - this.childNodes[0].style.display = 'block'; + if (thumb.tagName === 'CANVAS') { + this.removeChild(thumb); + thumb.style.display = 'block'; } - this.childNodes[0].style.opacity = '0.4'; - this.childNodes[0].style.filter = 'alpha(opacity=40)'; + thumb.style.opacity = '0.4'; + thumb.style.filter = 'alpha(opacity=40)'; img = document.createElement('img'); img.className = 'full-image'; @@ -53,20 +54,20 @@ onready(function(){ img.style.display = 'none'; this.appendChild(img); - this.timeout = loadImage(img, this.childNodes[0]); + this.timeout = loadImage(img, thumb); } else { clearTimeout(this.timeout); if (~this.parentNode.className.indexOf('multifile')) this.parentNode.style.width = (parseInt(this.dataset.width)+40)+'px'; - this.childNodes[0].style.opacity = ''; - this.childNodes[0].style.display = ''; - this.removeChild(this.childNodes[1]); + thumb.style.opacity = ''; + thumb.style.display = ''; + this.removeChild(thumb.nextSibling); delete this.dataset.expanded; - delete this.childNodes[0].style.filter; + delete thumb.style.filter; if (localStorage.no_animated_gif === 'true' && typeof unanimate_gif === 'function') { - unanimate_gif(this.childNodes[0]); + unanimate_gif(thumb); } } return false; From c8cb173e27cd05c3d48d0e4216a89d2397622d15 Mon Sep 17 00:00:00 2001 From: Markerov Date: Tue, 28 Oct 2014 23:35:58 +0800 Subject: [PATCH 3/5] scroll to thumb scroll up to image if its top is out of view when shrunk. Requires jQuery --- js/inline-expanding.js | 26 ++++++++++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/js/inline-expanding.js b/js/inline-expanding.js index c19937ed..cf8cab81 100644 --- a/js/inline-expanding.js +++ b/js/inline-expanding.js @@ -7,7 +7,7 @@ * Copyright (c) 2013-2014 Marcin Łabanowski * * Usage: - * // $config['additional_javascript'][] = 'js/jquery.min.js'; + * $config['additional_javascript'][] = 'js/jquery.min.js'; * $config['additional_javascript'][] = 'js/inline-expanding.js'; * */ @@ -19,8 +19,11 @@ onready(function(){ 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].onclick = function(e) { - var img; + var img, post_body, still_open; var thumb = this.childNodes[0]; + var padding = 5; + var boardlist = $('.boardlist')[0]; + var loadImage = function(img, thumb) { if (img.naturalWidth) { thumb.style.display = 'none'; @@ -57,6 +60,25 @@ onready(function(){ this.timeout = loadImage(img, thumb); } else { clearTimeout(this.timeout); + + //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) + $('body').scrollTop($(e.target).parent().parent().offset().top - padding); + } else { + if (post_body[0].getBoundingClientRect().top - padding < 0) + $('body').scrollTop(post_body.offset().top - padding); + } + } + if (~this.parentNode.className.indexOf('multifile')) this.parentNode.style.width = (parseInt(this.dataset.width)+40)+'px'; From 58ce3895ebe3f779ff9fe6a6723e2dc2bfdd6bf8 Mon Sep 17 00:00:00 2001 From: Markerov Date: Wed, 29 Oct 2014 00:19:32 +0800 Subject: [PATCH 4/5] css tweak --- stylesheets/style.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/stylesheets/style.css b/stylesheets/style.css index b595954b..c483a5ae 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -191,6 +191,8 @@ img.banner,img.board_image { } .full-image { + padding: 5px; + margin: 0 20px 0 0; max-width: 98%; } From d09107d9e745193ee1ff7121c77acceebc3969f4 Mon Sep 17 00:00:00 2001 From: Markerov Date: Wed, 29 Oct 2014 00:22:43 +0800 Subject: [PATCH 5/5] missed a line --- stylesheets/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/stylesheets/style.css b/stylesheets/style.css index c483a5ae..962d27d9 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -191,6 +191,7 @@ img.banner,img.board_image { } .full-image { + float: left; padding: 5px; margin: 0 20px 0 0; max-width: 98%;