☰

4chan Gallery

Adds board title, catalog, images, download, and style to the top bar.

  1. // ==UserScript==
  2. // @name          4chan Gallery
  3. // @version       2.1.30
  4. // @description   Adds board title, catalog, images, download, and style to the top bar.
  5. // @include       http://boards.4chan.org/*
  6. // @include       https://boards.4chan.org/*
  7. // @include       http*://boards.4channel.org/*
  8. // @namespace     https://greasyfork.org/users/3159
  9. // @grant         GM_getValue
  10. // @grant         GM_setValue
  11. // @run-at        document-end
  12. // ==/UserScript==
  13.  
  14. var bname = document.getElementsByClassName("boardTitle")[0].innerHTML;
  15. if (bname.indexOf("/ - ") > -1) {
  16.     bname = bname.split("/ - ")[1];
  17. }
  18. var path = document.location.pathname.split("/");
  19.  
  20. function xc(q, r) {
  21.     a = document.getElementsByClassName("boardList");
  22.     a[0].insertAdjacentHTML(q, r);
  23.     a[1].insertAdjacentHTML(q, r);
  24.     b = document.getElementsByClassName("customBoardList");
  25.     if (b[0]) {
  26.         b[0].insertAdjacentHTML(q, r);
  27.         b[1].insertAdjacentHTML(q, r);
  28.     }
  29. }
  30. xc("afterbegin", '[<a href="//boards.4chan.org/' + path[1] + '">' + bname + "</a>] ");
  31. xc("beforeend", ( path[2] == "catalog" || path[2] == "thread" ) ? "" : '[<a href="//boards.4chan.org/' + path[1] + '/catalog">Catalog</a>] ');
  32.  
  33. function xi(q) {
  34.     var b = document.getElementById(q);
  35.     return b;
  36. }
  37. var nr = '<span style="float:right">[<a class=low href=javascript:void(0)>Style</a>]&nbsp<span>';
  38. xi("navtopright").insertAdjacentHTML("afterend", nr);
  39. xi("navbotright").insertAdjacentHTML("afterend", nr);
  40.  
  41. var themes = ['Yotsuba New', 'Yotsuba B New', 'Futaba New', 'Burichan New', 'Tomorrow', 'Photon', 'myn1', 'myn2']; // with custom themes!
  42. var style = document.createElement('style');
  43.  
  44. //extention buttons css
  45. stylev = "#togglePostFormLink{font-size:1.3em;margin:.7em}#postForm{margin-top:1em;margin-bottom:1em}.ad-cnt{margin:1vh}.center{font-size:0;border:0 !important;height:100% !important}";
  46. //Gallery css
  47. stylev += ".frameImage{display:none !important}.frameX{display:block !important;max-height:calc(100% - 1.5em) !important;max-width:calc(100% - 60px) !important;position:fixed;margin:auto;top:0;bottom:1.5em;left:0;right:0;z-index:10000}";
  48.  
  49. document.getElementsByTagName('head')[0].appendChild(style);
  50. nws=document.getElementsByClassName('nws').length;
  51.  
  52. function get() {
  53.     a = nws ? GM_getValue("4cIbackupT") : GM_getValue("4cIbackupT2");
  54.     if (a) return a;
  55.     cur = 0;
  56.     if (nws && document.cookie.match(/nws_style=((\w|\s)*)/)) cur = document.cookie.match(/nws_style=((\w|\s)*)/)[1];
  57.     if (!nws && document.cookie.match(/(^|[^n])ws_style=((\w|\s)*)/)) cur = document.cookie.match(/(^|[^n])ws_style=((\w|\s)*)/)[2];
  58.     if (cur === 0) cur = 'Yotsuba New';
  59.     for (i = 0; i < themes.length; i++) {
  60.         if (themes[i] == cur) {
  61.             return i;
  62.         }
  63.     }
  64. }
  65.  
  66. function set(a) {
  67.     console.log(themes[a]);
  68.     if (themes[a].split('myn')[1]){
  69.         if (nws) GM_setValue("4cIbackupT", a);
  70.         else GM_setValue("4cIbackupT2", a);
  71.         //custom themes!
  72.         if(themes[a] == "myn1"){
  73.             a=0;
  74.             style.innerHTML = stylev + "body{background:#f4f4f4;background:url('http://i.imgur.com/MrGskEp.png')}div.reply{background-color:#FDFDFD;border-color:#D6D6D6}";
  75.         } else if (themes[a] == "myn2"){
  76.             a=4;
  77.             style.innerHTML = stylev + "body{transition: background 300ms ease-in 200ms;background:url('http://i.imgur.com/xv3RmOQ.png');color:#999}div.reply{background-color:#1b1b1b;border-color:#454546}.reply.highlight{border: 1px solid #5eaf55 !important}";
  78.         }
  79.         //end custom themes!
  80.     } else {
  81.         if (nws) GM_setValue("4cIbackupT", 0);
  82.         else GM_setValue("4cIbackupT2", 0);
  83.         style.innerHTML = stylev;
  84.     }
  85.     if (x){
  86.         if (nws){
  87.             document.cookie = "nws_style="+themes[a];
  88.         } else {
  89.             document.cookie = "ws_style="+themes[a];
  90.         }
  91.         if (path[2] == "catalog") {
  92.             location.reload();
  93.         } else {
  94.             location.href = "javascript:setActiveStyleSheet('" + themes[a] + "')";
  95.         }
  96.     }
  97. }
  98.  
  99. function cstyle() {
  100.     if (get() > (themes.length - 2)) {
  101.         set(0);
  102.     }
  103.     else {
  104.         set(get() + 1);
  105.     }
  106. }
  107.  
  108. x=0;
  109. set(get());
  110. x=1;
  111.  
  112. var low = document.getElementsByClassName("low");
  113. low[0].onclick = cstyle;
  114. low[1].onclick = cstyle;
  115.  
  116. // Gallery
  117. // in 4chan Settings (Images & Media) enable "Image expansion"
  118. // Don't want the Images button? delete everything bellow!
  119.  
  120. window.addEventListener('load', function () {
  121.     if (path[2] == "thread") {
  122.  
  123.         xc("beforeend", " [<a class=gl href=javascript:void(0)>Gallery</a>] ");
  124.         s = document.getElementsByClassName("gl");
  125.         for (i = 0; i < s.length; i++) {
  126.             s[i].onclick = trigger;
  127.         }
  128.  
  129.         function createdwn(a){
  130.             dwn = document.createElement("a");
  131.             dwn.innerText = "[⇩] ";
  132.             dwn.style.opacity = "0";
  133.             dwn.style.cursor = "pointer";
  134.             dwn.onmouseover = function (b) {
  135.                 b.target.style.opacity = "1";
  136.             };
  137.             dwn.onmouseout = function (b) {
  138.                 b.target.style.opacity = "0";
  139.             };
  140.             dwn.onclick = function () {
  141.                 var link, allLinks = [], imgs = document.querySelectorAll(".fileThumb ");
  142.                 for (var i = 0; i < imgs.length; i++) {
  143.                     if (imgs[i].getAttribute("href")) {
  144.                         link = imgs[i].getAttribute("href").split("//")[1];
  145.                         allLinks.push("curl -O <a download href='https://" + link + "'>https://" + link + "</a> && ");
  146.                     }
  147.                 }
  148.                 document.body.innerHTML = 'N=1 && while [[ -d "4curl-$N" ]] ; do N=$(($N+1)) ; done && mkdir -p 4curl-$N && cd 4curl-$N && <br /><br />';
  149.                 for (i = 0; i < allLinks.length; i++) {
  150.                     document.body.innerHTML += allLinks[i] + 'echo "' + (i+1) + '/' + allLinks.length + '" && <br />';
  151.                 }
  152.                 document.body.innerHTML += 'echo "done" <br /><br /> select all and paste into terminal, hit enter, then navigate to folder "4curl-#"';
  153.             };
  154.             a.appendChild(dwn);
  155.         }
  156.  
  157.         d1=document.getElementsByClassName('boardList');
  158.         if(d1.length){
  159.             createdwn(d1[0]);
  160.             createdwn(d1[1]);
  161.         }
  162.         d2=document.getElementsByClassName('customBoardList');
  163.         if(d2.length){
  164.             createdwn(d2[0]);
  165.             createdwn(d2[1]);
  166.         }
  167.         bonus = [];
  168.         tt = 1;
  169.         titles = [];
  170.         links = [];
  171.         fi = 0;
  172.         frameN = 0;
  173.         cln = 0;
  174.         ai = 0;
  175.         z=0;
  176.  
  177.         function endalert() {
  178.             ea = document.createElement("div");
  179.             c = ea.style;
  180.             ea.id = "theend";
  181.             for (var d = "0123456789ABCDEF".split(""), a = "#", e = 0; 6 > e; e++) {
  182.                 a += d[Math.round(15 * Math.random())];
  183.             }
  184.             c.backgroundColor = a;
  185.             c.cssText += "line-height:50px;width:200px;height:50px;position:fixed;margin:auto;left:0;right:0;top:0;bottom:0;font-size:42px;text-align:center;color:#fff;z-index:10001";
  186.             ea.innerText = "The End";
  187.             document.body.appendChild(ea);
  188.             setTimeout(function () {
  189.                 z = document.getElementById("theend");
  190.                 z.parentNode.removeChild(z);
  191.             }, 420);
  192.         }
  193.  
  194.         function change(a) {
  195.             i1 = document.getElementsByClassName('file');
  196.             if (a) {
  197.                 for (fi; fi < i1.length; fi++) {
  198.                     console.log(fi + ' ' + i1.length);
  199.                     if (i1[fi].getElementsByClassName('expanded-thumb').length) {
  200.                         cln = i1[fi].getElementsByClassName('expanded-thumb')[0];
  201.                     } else if (i1[fi].getElementsByClassName('expandedWebm').length) {
  202.                         cln = i1[fi].getElementsByClassName('expandedWebm')[0];
  203.                     } else cln = null;
  204.                     if (cln) {
  205.                         console.log('adding');
  206.                         cln.className = "frameImage";
  207.                         cln.onclick = function () {
  208.                             next(1);
  209.                         };
  210.                         cln.onerror = function (y) {
  211.                             //console.log(y.target); //reload images?
  212.                         };
  213.                         document.body.appendChild(cln);
  214.                         //add recent +?
  215.                         links[ai] = i1[fi].parentElement.id;
  216.                         if (i1[fi].parentElement.getElementsByClassName('backlink').length) {
  217.                             bonus[ai] = i1[fi].parentElement.getElementsByClassName('backlink')[0].getElementsByClassName('quotelink');
  218.                         } else bonus[ai] = "";
  219.  
  220.                         titles[ai] = i1[fi].children[0].children[0].getAttribute("title");
  221.                         if (titles[ai]) {
  222.                             titles[ai] = "[ " + i1[fi].children[0].innerText.split(", ")[1].split(")")[0] + " ][ " + titles[ai] + " ]";
  223.                         } else {
  224.                             t2 = i1[fi].children[0].innerText;
  225.                             titles[ai] = "[ " + t2.split(", ")[1].split(")")[0] + " ][ " + t2.split("File: ")[1].split(" (")[0] + " ]";
  226.                         }
  227.                         ai++;
  228.                     }
  229.                 }
  230.             } else {
  231.                 frame = document.getElementsByClassName('frameImage');
  232.                 if (frame[frameN].tagName == "VIDEO") frame[frameN].pause(); //new new
  233.                 frame[frameN].className = "frameImage";
  234.                 bg.style.display = "none";
  235.                 larw.style.display = "none";
  236.                 rarw.style.display = "none";
  237.                 li.style.display = "none";
  238.                 ri.style.display = "none";
  239.             }
  240.         }
  241.  
  242.         function i4(a){
  243.             r = document.createElement("a");
  244.             r.style.setProperty ("color", "#bababa", "important"); //add colors?
  245.             r.innerText = z ? " [ " + a.split("p")[1] + " ]" : " +";
  246.             r.onmouseover = function () {
  247.                 bb = document.getElementById(a);
  248.                 if (document.getElementsByClassName('post reply').length){
  249.                     pColor = window.getComputedStyle(document.getElementsByClassName('post reply')[0]).backgroundColor;
  250.                 } else pColor = window.getComputedStyle(document.body).backgroundColor;
  251.                 bb.style.backgroundColor = pColor;
  252.                 bb.style.cssText += "position:fixed;z-index:10001;left:50%;top:50%;transform:translate(-50%,-50%);margin:0";
  253.             };
  254.             r.onmouseout = function () {
  255.                 bb.style.cssText = "";
  256.             };
  257.             r.onclick = function () {
  258.                 bb.style.cssText = "";
  259.                 bb.scrollIntoView();
  260.                 trigger();
  261.             };
  262.             bi.appendChild(r);
  263.             z=0;
  264.         }
  265.  
  266.         function info(a) {
  267.             bi.innerHTML = "";
  268.             ii.innerText = titles[a];
  269.             i2.innerText = "[ " + (a + 1) + "/" + frame.length + " ]";
  270.             if (bonus[a].length){
  271.                 for (i=--bonus[a].length;i>-1;i--){
  272.                     i4(bonus[a][i].href.split(/#(p.*)/)[1]);
  273.                 }
  274.             }
  275.             z=1;
  276.             i4(links[a]);
  277.         }
  278.         function next(a) {
  279.             if (!tt) {
  280.                 bg.style.display = "block";
  281.                 larw.style.display = "block";
  282.                 rarw.style.display = "block";
  283.                 li.style.display = "block";
  284.                 ri.style.display = "block";
  285.                 pics = document.getElementsByClassName('fileThumb');
  286.                 aa=fi;
  287.                 while (aa < pics.length) {
  288.                     pics[aa].children[0].click();
  289.                     aa++;
  290.                 }
  291.                 change(1);
  292.  
  293.                 frame = document.getElementsByClassName('frameImage');
  294.                 console.log('next '+a+'frames'+frame.length+'N'+frameN);
  295.                 if (a == 2) {
  296.                     frame[frameN].className += " frameX";
  297.                     if (frame[frameN].tagName == "VIDEO") frame[frameN].play();
  298.                 } else if (a == 1) {
  299.                     if (frameN < --frame.length) {
  300.                         frame[frameN].className = "frameImage";
  301.                         if (frame[frameN].tagName == "VIDEO") frame[frameN].pause();
  302.                         frame[++frameN].className += " frameX";
  303.                         if (frame[frameN].tagName == "VIDEO") frame[frameN].play();
  304.                     } else {
  305.                         endalert();
  306.                     }
  307.                 } else {
  308.                     if (frameN > 0) {
  309.                         frame[frameN].className = "frameImage";
  310.                         if (frame[frameN].tagName == "VIDEO") frame[frameN].pause();
  311.                         frame[--frameN].className += " frameX";
  312.                         if (frame[frameN].tagName == "VIDEO") frame[frameN].play();
  313.                     }
  314.                 }
  315.                 info(frameN);
  316.                 //start webm, stop previous
  317.             }
  318.         }
  319.  
  320.         function trigger() {
  321.             tt = tt ? 0 : 1;
  322.             if (tt) {
  323.                 change(0);
  324.             } else {
  325.                 next(2);
  326.             }
  327.         }
  328.  
  329.         bg = document.createElement("div");
  330.         bg.style.cssText = "background: rgba(0, 0, 0, .85);position:fixed;top:0;left:0;z-index:9999;width:100%;height:100%;display:none";
  331.         bg.onclick = trigger;
  332.         document.body.appendChild(bg);
  333.  
  334.         //extra buttons
  335.         larw = document.createElement("div");
  336.         rarw = document.createElement("div");
  337.         var arw = "cursor:pointer;position:fixed;z-index:10000;top:calc(50% - 15px);border-top: 15px solid transparent;border-bottom: 15px solid transparent;display:none;border-";
  338.         larw.style.cssText = arw + "right: 20px solid #bababa;left:5px";
  339.         rarw.style.cssText = arw + "left: 20px solid #bababa;right:5px";
  340.         larw.onclick = function () {
  341.             next(0);
  342.         };
  343.         rarw.onclick = function () {
  344.             next(1);
  345.         };
  346.         document.body.appendChild(larw);
  347.         document.body.appendChild(rarw);
  348.         li = document.createElement("div");
  349.         ri = document.createElement("div");
  350.         bi = document.createElement("span");
  351.         var iv = "position:fixed;bottom:0;z-index:10000;margin:0;display:none;text-decoration:none;";
  352.         li.style.cssText = iv + "left:0";
  353.         ri.style.cssText = iv + "right:0";
  354.         ii = document.createElement("a");
  355.         ii.onclick = function () {
  356.             frame[frameN].className = "frameImage";
  357.             frameN = 0;
  358.             next(2);
  359.         };
  360.         i2 = document.createElement("a");
  361.         i2.onclick = function () {
  362.             frame[frameN].className = "frameImage";
  363.             frameN = --frame.length;
  364.             next(2);
  365.         };
  366.         document.body.appendChild(li);
  367.         ii.style.setProperty ("color", "#bababa", "important");
  368.         li.appendChild(ii);
  369.         document.body.appendChild(ri);
  370.         i2.style.setProperty ("color", "#bababa", "important");
  371.         ri.appendChild(bi);
  372.         ri.appendChild(i2);
  373.         //end buttons
  374.  
  375.         document.addEventListener("keydown", function (e) {
  376.             switch (e.which) {
  377.                 case 37:
  378.                     next(0);
  379.                     break;
  380.                 case 39:
  381.                     next(1);
  382.                     break;
  383.             }
  384.         });
  385.     }
  386. });