Advertisement
jcunews

Image Thumbnail List bookmarklet

Apr 23rd, 2022
1,841
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. javascript:/*ImageThumbList*/
  2. ((o, p, u, i, v, e) => {
  3.   function imgLoad() {
  4.     this.width && (this.par.nextSibling.dataset.dim = this.width + "x" + this.height) || (this.par.nextSibling.className = "error")
  5.   }
  6.   if (window.itl_ujs) return itl_ujs.remove();
  7.   o = Array.from(document.styleSheets).filter((s, z) => {
  8.     try {
  9.       return Array.from(s.cssRules).some(r => r.symbols)
  10.     } catch(z) {}
  11.   });
  12.   p = "background-image,border-image-source,content,cursor,filter,list-style-image,mask-image,offset-path".split(",");
  13.   u = new Set;
  14.   Array.from(document.all).forEach((e, y) => {
  15.     switch (e.tagName) {
  16.       case "IMG":
  17.         e.src && u.add(e.src);
  18.         break;
  19.       default:
  20.         y = getComputedStyle(e);
  21.         p.forEach(k => (k = y[k].match(/\burl\(['"]?(.*?)['"]?\)/)) && u.add(k[1]));
  22.     }
  23.   });
  24.   (o = document.body.appendChild(p = document.createElement("DIV")).attachShadow({mode: "open"})).innerHTML = `<style>
  25. #veil{position:fixed;left:0;top:0;width:100vw;height:100vh;background:#0008;cursor:pointer}
  26. #list{position:fixed;left:50%;top:50%;transform:translate(-50%, -50%);box-sizing:border-box;border:.2em solid #007;border-radius:.5em;padding:.3em;max-width:80vw;max-height:95vh;width:100%;height:100%;overflow-y:scroll;background:#fff;cursor:auto;--len:calc(calc(80vw - 2.1em) / 5)}
  27. #list a{display:inline-block;position:relative;padding:.5em;box-sizing:border-box;padding:.1em;width:var(--len);height:calc(var(--len) + 2.6em);text-align:center;text-decoration:none;color:unset}
  28. #list a:hover{background:#ddf}
  29. #list img{margin:0 auto;width:calc(var(--len) - .6em);height:calc(var(--len) - .6em);object-fit:scale-down}
  30. #list img:hover{object-fit:none}
  31. #list div{box-sizing:border-box;padding:0 .1em;width:calc(var(--len) - .6em);height:2.6em;overflow:hidden;text-align:center;word-break:break-all}
  32. #list div:not(.err):before{display:inline-block;position:absolute;right:.3em;transform:translateY(-100%);padding:0 .2em;background:#000;color:#fff;font-size:9pt;content:attr(data-dim)}
  33. #list div.error:before{display:inline-block;position:absolute;right:.3em;transform:translateY(-100%);padding:0 .2em;background:#000;color:#c00;font-size:9pt;content:attr(class)}
  34. </style><div id="veil"><div id="list"></div></div>`;
  35.   p.id = "itl_ujs";
  36.   p = o.lastChild.lastChild;
  37.   i = u.values();
  38.   while ((v = i.next()) && !v.done) {
  39.     p.appendChild(e = document.createElement("A")).innerHTML = '<img /><div></div>';
  40.     e.rel = "noopener noreferrer";
  41.     (e.firstChild.img = new Image()).par = e.firstChild;
  42.     e.firstChild.img.onload = imgLoad;
  43.     e.href = e.firstChild.img.src = e.firstChild.src = e.lastChild.textContent = v.value;
  44.   }
  45.   o.lastChild.onclick = function(ev) {
  46.     (ev.target === this) && o.host.remove()
  47.   };
  48.   p.focus()
  49. })()
  50.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement