// ==UserScript==// @name         5ch image thumbnails&gallery// @name:ja      5ch 画像サムネとガレリー追加// @name:fr      5ch thumbnails&gallerie// @namespace    http://tampermonkey.net/// @version      1.0// @description  facilitate image browsing in 5ch threads// @description:ja  5chの画像閲覧支援// @description:fr  faciliter la vue d'images sur 5ch// @author       You// @match        http://*.5ch.net/*// @match        https://*.5ch.net/*// @grant        none// ==/UserScript==var disablelog = true;var oldconsolelog = console.log;var emptyfunction = function() {};console.log = !disablelog ? oldconsolelog : emptyfunction;//create thumbnailsvar it0 = performance.now();var t0 = performance.now();var links = [];var posts = document.querySelectorAll('div.post');for (let i = posts.length-1; i>-1;i--){var as = posts[i].querySelectorAll('a');for (let i = as.length-1; i>-1; i--){links.push(as[i]);}}console.log({links});var t1 = performance.now();console.log("generating link array took " + (t1 - t0) + " milliseconds.");links.forEach(function(element, index) {//    var address = element.textContent;var href = links[index].href; //skip 5ch jump pagevar find = "jump.5ch.net/?";var position = href.indexOf(find);if (position != -1){var newhref = href.substr(position + find.length);links[index].href = newhref;href=newhref;}var ext = href.substr(href.length-3);if(ext=="jpg" || ext=="png" || ext=="gif" || ext=="bmp"){element.className = 'thumblink';var newimg = document.createElement("img");newimg.src = href;newimg.className = 'bigthumb';newimg.width = 400;newimg.addEventListener("click",function(){resize(this);});element.insertAdjacentElement('afterend', newimg);}});function resize(img){console.log(img);var stylewidth = img.style.width;console.log("oldstylewidth: " + stylewidth);console.log('shiftkey: ' + event.shiftKey);if (!event.shiftKey) {switch(stylewidth){case "":largesize(img);break;case "100%":truesize(img);break;case "auto":smallsize(img);break;}} else {switch(stylewidth){case "":truesize(img);break;case "100%":smallsize(img);break;case "auto":largesize(img);break;}}}// misc featuresvar inittime0 = performance.now();var postarray = [];var thumbarray = [];var bigthumbarray = [];makebutton("myButtonhide",buttonhide,"H","5%","0px");makebutton("myButtonwarp",buttonwarp,"W","10%","0px");makebutton("myButtonup",buttonup,"↑","32.5%","0px");makebutton("myButtondown",buttondown,"↓","30%","0px");makebutton("myButtoncurrent",buttoncurrent,"c","25%","0px");//makebutton("myButtoncheck",buttoncheck,"check","20%","0px");makebutton("myButtonfirst",buttonfirst,"f","22.5%","0px");makebutton("myButtonlast",buttonlast,"l","20%","0px");makebutton("myButtonresizeall0",buttonresizeall0,"0","60%","0px");makebutton("myButtonsizeall1",buttonresizeall1,"1","62.5%","0px");makebutton("myButtonsizeall2",buttonresizeall2,"2","65%","0px");makebutton("myButtonlightbox",buttonlightbox,"G","90%","0px");//buttons for debug purposes/*makebutton("myButtonrebuild",buttonrebuild,"R","95%","0px"); //re-initialize gallery contentsmakebutton("myButtonlog",buttonlog,"log","97.5%","97.5%");*/ //toggle console log displayvar hidden = false;function buttonhide (){if(!hidden){collapse();} else {uncollapse();}hidden = !hidden;var button = document.getElementById("myButtonhide");button.style.color = hidden ? "red" : "";}var warp = false;function buttonwarp (){warp = !warp;var button = document.getElementById("myButtonwarp");button.style.color = warp ? "red" : "";}function buttonup(){moveelement(-1);}function buttondown(){moveelement(1);}function buttoncurrent(){moveelement(0);}function buttoncheck(){var posts = document.querySelectorAll("img.thumb_i");var current = getcurrent(posts);}function buttonlast(){if(thumbarray.length == 0) {initarrays()};var current = getcurrent(bigthumbarray);console.log("go to last: last: " + (thumbarray.length-1) + " current: " + current +" move: " +(thumbarray.length-1-current));moveelement(thumbarray.length-1-current);}function buttonfirst(){if(thumbarray.length == 0) {initarrays()};var current = getcurrent(bigthumbarray);console.log("go to first: current: " + current +" move: " + -current);moveelement(-current);}function buttonresizeall0(){resizeall(0);}function buttonresizeall1(){resizeall(1);}function buttonresizeall2(){resizeall(2);}function buttonlightbox(){var hide = lightbox.style.display == 'none';initlightbox();lightbox.style.display = hide ? '' : 'none';dimlight.style.display = lightbox.style.display;document.getElementById('myButtonlightbox').style.color = hide ? 'red' : '';var activeelement = document.activeElement;}function buttonrebuild(){thumbarray = [];bigthumbarray = [];initarrays();}function buttonlog(){disablelog = !disablelog;console.log = !disablelog ? oldconsolelog : function(){};document.getElementById('myButtonlog').style.color = !disablelog ? 'blue' : 'black';}function togglelightboxview(){var hide = lightboxview.style.display == 'none';lightboxview.style.display = hide ? '' : 'none';dimdimlight.style.display = lightboxview.style.display;var LBVnext = document.getElementById('myButtonLBVnext');var LBVprev = document.getElementById('myButtonLBVprev');if(LBVnext)LBVnext.style.display = hide ? '' : 'none';if(LBVprev)LBVprev.style.display = hide ? '' : 'none';}function initarrays(){var t0 = performance.now();var thumbs = document.querySelectorAll('a.thumblink');var bigthumbs = document.querySelectorAll("img.bigthumb");thumbarray = Array.from(thumbs);bigthumbarray = Array.from(bigthumbs);removetreeview(thumbarray,bigthumbarray);var t1 = performance.now();console.log('initarrays took ' + (t1-t0) + ' miliseconds');console.log({thumbarray},{bigthumbarray});}function moveelement(change){var navoffset = document.getElementsByClassName("navbar-fixed-top search-header")[0].getBoundingClientRect().height;if(thumbarray.length == 0) {initarrays()};var current = getcurrent(bigthumbarray);var target = current+change;if (!warp){target = Math.min(Math.max(target, 0), thumbarray.length-1); //cap to 0 and last;} else{target %= (thumbarray.length);if(target<0)target=thumbarray.length-1;}thumbarray[target].scrollIntoView();console.log("change: "+change);console.log("target: "+target);console.log(thumbarray[target]);window.scrollBy(0, -navoffset);}function collapse(){if(postarray.length == 0) {var d = document;var posts = d.getElementsByClassName("post");postarray = Array.from(posts);}for (let i = postarray.length-1; i > -1; i--){var post = postarray[i];var message = post.getElementsByClassName("message")[0];var content = message.innerText;if (content.indexOf("ttp") == -1){console.log(post.id + "hide");post.style.display = "none";post.className = "posthidden";} else {console.log(post.id + "show");}}}function uncollapse(){var d = document;var posts = d.getElementsByClassName("posthidden");for (let i = posts.length-1; i > -1; i--){var post = posts[i];post.style.display = "";post.className = 'post';}}function getcurrent(coll){console.log('getcurrent of' ,{coll});var navoffset = document.getElementsByClassName("navbar-fixed-top search-header")[0].getBoundingClientRect().height;console.log("navoffset: " + navoffset);for (let i = 0, run = coll.length; i<run;i++){var rect = coll[i].getBoundingClientRect();console.log("rectbottom check of " +i +"th: " + rect.bottom);if (rect.bottom > (navoffset+1)){console.log("getcurrent r###lt: " + i);return i;}}console.log("getcurrent r###lt: " + (coll.length-1));return coll.length-1;}function collection2array(coll,array){for (let i = 0, run = coll.length; i < run; i++){array[i] = coll[i];}}function removetreeview(array,bigarray){bigarray = bigarray || [];var oriarraylength = array.length;var oribigarraylength = bigarray.length;for (let i = array.length-1; i > -1; i--){var istreeview = array[i].closest(".treeView");var isposthover = array[i].closest('.post_hover');if (istreeview || isposthover){array.splice(i,1);}}for (let i = bigarray.length-1; i > -1; i--){var istreeview = bigarray[i].closest(".treeView");var isposthover = bigarray[i].closest('.post_hover');if (istreeview || isposthover){bigarray.splice(i,1);}}var newarraylength = array.lengthvar newbigarraylength = bigarray.length}function resizeall(size){console.log({size});if(thumbarray.length == 0) {initarrays()};var current = getcurrent(bigthumbarray);var rescrolloffset = bigthumbarray[current].getBoundingClientRect().top;console.log({current},{rescrolloffset});var arrayoffunctions = [smallsize, largesize, truesize];bigthumbarray.forEach(function(element,index){arrayoffunctions[size](element);});bigthumbarray[current].scrollIntoView();window.scrollBy(0,-rescrolloffset);}function smallsize(element){if(!element)return;console.log('transform: smallsize');element.style.maxHeight = "";element.style.maxWidth = "";element.style.width = "";element.style.border="";}function largesize(element, maxheight, widthmod, border){if(!element)return;console.log('transform: largesize');maxheight = maxheight || 80;widthmod = (widthmod || 100)/100;widthmod = 1;border = border == undefined ? true : border;var ratio = element.height / element.width;element.style.maxHeight = maxheight +"vh";element.style.maxWidth = (maxheight / ratio * widthmod) +"vh";element.style.width = "100%";element.style.height = "auto";console.log({maxheight},{border});if (border)element.style.border='2px solid yellow';}function truesize(element){if(!element)return;console.log('transform: truesize');element.style.maxHeight = "";element.style.maxWidth = "";element.style.width = "auto";element.style.border='2px solid green';}// LIGHT BOX STARTvar lightbox = document.createElement("div");lightbox.className = 'lightbox';lightbox.style.position = 'fixed';lightbox.style.zIndex = 9998;lightbox.style.width = '100%';lightbox.style.height = '100%';lightbox.style.overflow = 'auto';lightbox.style.top = 0;lightbox.style.display = 'none';lightbox.style.paddingTop = '2.5%';lightbox.addEventListener('click',lightboxclick);function lightboxclick(e){var cond1 = (event.target.tagName !='IMG');var cond2 = (dimdimlight.style.display == 'none');var ddl = dimdimlight.style.display;console.log({cond1},{cond2});if(cond1){if(cond2){buttonlightbox();} else {togglelightboxview();}}}var lightboxcontent = document.createElement('div');lightboxcontent.className = 'lightboxcontent';lightboxcontent.style.position = 'absolute';lightboxcontent.style.zIndex = 10005;lightboxcontent.style.margin = 'auto';lightboxcontent.style.padding = '2.5%';lightboxcontent.style.width = '100%';lightboxcontent.style.maxWidth = '1300px';lightbox.appendChild(lightboxcontent);var dimlight = lightbox.cloneNode();dimlight.className = 'dimlight';dimlight.style.width = '100%';dimlight.style.left = 0;dimlight.style.zIndex = 9997;dimlight.style.backgroundColor = 'rgba(0, 0, 0, 0.6)';dimlight.style.pointerEvents = 'none';var lightboxready = false;var dimdimlight = dimlight.cloneNode();dimdimlight.className = 'dimdimlight';dimdimlight.style.zIndex = 10100;dimdimlight.style.pointerEvents = '';var lightboxview = lightboxcontent.cloneNode();lightboxview.className = 'lightboxview';lightboxview.padding = '';lightboxview.style.zIndex = 11111;lightboxview.style.position = 'fixed';lightboxview.style.display = 'none';lightboxview.style.maxWidth = '';lightboxview.style.height = '100%';var lightboxviewimg = document.createElement('img');lightboxviewimg.style.zIndex = 33333;lightboxviewimg.style.position = 'absolute';lightboxviewimg.style.marginLeft ='auto';lightboxviewimg.style.marginRight = 'auto';lightboxviewimg.style.left = 0;lightboxviewimg.style.right = 0;lightboxviewimg.style.width = '1px';lightboxviewimg.style.marginTop = '-2.5vw';lightboxview.appendChild(lightboxviewimg);lightbox.appendChild(lightboxview);function initlightbox(){if(lightboxready)return;if(thumbarray.length == 0) {initarrays()};console.log({bigthumbarray});bigthumbarray.forEach(function(element,index){var newimg = document.createElement('img');newimg.src=element.src;newimg.height = 225;newimg.addEventListener('click',function(){scroll2me(thumbarray[index]);});newimg.addEventListener('mousedown',function(click){lbimgclick(click,index);});newimg.style.maxHeight = '80pv';newimg.style.maxWidth = '';lightboxcontent.appendChild(newimg);});document.body.appendChild(lightbox);lightbox.appendChild(dimlight);lightbox.appendChild(dimdimlight);makebutton("myButtonLBVnext",buttonLBVnext,"next","1%","52.5%");makebutton("myButtonLBVprev",buttonLBVprev,"prev","1%","47.5%");document.getElementById('myButtonLBVnext').style.display = 'none';document.getElementById('myButtonLBVprev').style.display = 'none';console.log({lightbox});lightboxready = true;}function buttonLBVnext(){moveLBV(+1);}function buttonLBVprev(){moveLBV(-1);}var currentLBV = 0;function lbimgclick(click,index){console.log('middleclicked on lightbox img');switch (click.which){case 2:click.preventDefault();currentLBV = index;lightboxviewimg.src = bigthumbarray[currentLBV].src;largesize(lightboxviewimg,'92.5','95',false);togglelightboxview();}}function scroll2me(element){element.scrollIntoView();var navoffset = document.getElementsByClassName("navbar-fixed-top search-header")[0].getBoundingClientRect().height;window.scrollBy(0, -navoffset);}function moveLBV(change){currentLBV = maptorange(currentLBV+change,bigthumbarray.length-1,0,true);lightboxviewimg.src = bigthumbarray[currentLBV].src;smallsize(lightboxviewimg);largesize(lightboxviewimg,'92.5','95',false);}function makebutton(buttonname,event,text,bottom,left){text = text || "";bottom = bottom || "0";left = left || "0";var tempbutton = document.createElement("input");tempbutton.type = "button";tempbutton.id = buttonname;tempbutton.value = text;tempbutton.style.position = "fixed";tempbutton.style.bottom = bottom;tempbutton.style.left = left;tempbutton.addEventListener("click",event);tempbutton.style.zIndex = 9999;document.body.appendChild(tempbutton);}function maptorange(value,max,min,wrap){value = value || 0;max = max || 0;min = min || 0;wrap = wrap || true;console.log("maptorange: ",{wrap},{value},{max},{min});if (!wrap) return Math.min(Math.max(value, min), max);value = value % (max+1);if (value < min) value += max - min + 1;return value;}var inittime1 = performance.now();console.log((inittime1-inittime0) + ' miliseconds taken by script');