/
galNum.js
22 lines (11 loc) · 4.96 KB
/
galNum.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* - This is a javascript snippet to be used with
http://mcdlr.com/js-inject/ - */
/* - galNum - *\
|* - Create numbered sequence of images based on current one - *|
|*- To know more check http://mcdlr.com/galNum-galFly/ - *|
\* - v3.0 - */
var html = '<!doctype html><html><head><title>galNum</title><meta charset="utf-8"><style>body{font-family:sans-serif;margin:0}header{background-color:#eee}.vessel{max-width:40em;margin:0 auto;padding:1em 0}#hb{font-size:1.2em}#hb span{color:gray}#hb b{color:#444;cursor:pointer}#hb.done b{color:gray;cursor:auto;font-weight:400}#hb b.s{color:#444;cursor:auto;font-weight:700}form{display:none;margin-top:1em}.v{display:block}#move,main{text-align:center}#gal{padding:1em;margin:0;list-style-type:none}#gal li{min-height:'+innerHeight+'px;padding:4em 0}#gal img{display:block;max-width:100%;margin:0 auto;font-size:3em;color:#ccc}#gal a{display:inline-block;padding:1em;text-decoration:none;color:#ccc}#gal a:hover{color:gray;text-decoration:underline}#light,#move{position:fixed;margin:0;font-size:1.4em;color:#888;-webkit-user-select:none;-moz-user-select:none;user-select:none}#move{width:5em;padding:0;bottom:0;left:0;list-style-type:none}#move li{float:left;width:2.75em;height:2em;line-height:2em;cursor:pointer}#move li:hover{color:#444}#down,#up{text-indent:.5em}#down{clear:left}#move #zoom{width:2em;text-indent:-.5em}#light{padding:.5em .7em;top:0;right:0;cursor:pointer}#more{padding:1em;font-size:1.5em;font-weight:700;background-color:#eee;color:#888;cursor:pointer}#more:hover{background-color:#ddd;color:#777}</style></head><body><header><div class="vessel"><div id="hb"></div><form><label>start <input type="number" id="start"></label> <label>shift <input type="number" id="shift"></label>  <button type="submit">go</button></form></div></header><main></main><ol id="move"><li id="up">▲</li><li id="down">▼</li><li id="zoom">🔍</li></ol><b id="light">💡</b><script>var href = "'+location.href+'"</script><script>!function(a,b){var c,d=function(b){return a.querySelector(b)},e=function(a){return parseInt(a,10)},f=function(){return{defaultShift:25,currentImage:0,minImage:0,maxImage:this.defaultShift,init:function(b){var c=this;c.galWidth=parseInt(getComputedStyle(b).getPropertyValue("width"),10),onkeypress=function(a){106==a.charCode?c.goToImage(!0):107==a.charCode?c.goToImage(!1):108==a.charCode&&c.zoom(d("#a"+c.currentImage))},d("#down").addEventListener("click",function(){c.goToImage(!0)}),d("#up").addEventListener("click",function(){c.goToImage(!1)}),d("#zoom").addEventListener("click",function(){c.zoom(d("#a"+c.currentImage))}),d("#light").addEventListener("click",function(){switch(this.count=this.count?(this.count+1)%3:1,this.count){case 0:var b="#fff";break;case 1:var b="#808080";break;case 2:var b="#000"}a.body.style.backgroundColor=b})},goToImage:function(b){b?this.currentImage+1>=this.maxImage?scrollTo(0,a.body.scrollHeight):scrollTo(0,d("#a"+ ++this.currentImage).offsetTop-5):this.currentImage-1>=this.minImage&&scrollTo(0,d("#a"+--this.currentImage).offsetTop-5)},zoom:function(a){var b=a.currentTarget||a,c=b.naturalWidth*(b.ct+1);c<=this.galWidth?(b.ct++,b.setAttribute("style","width:"+c+"px;height:"+b.naturalHeight*b.ct+"px")):(b.ct=0,b.setAttribute("style","width:100%"))},bindResize:function(a){for(var b=0;b<a.length;b++){var c=a.item(b);c.ct=1,c.addEventListener("click",this.zoom.bind(this))}}}}(),g=d("#hb"),h=d("#start"),i=d("#shift"),j=d("form"),k=d("main"),l="",m=b.split(/(\\d+)/).map(function(a){return{prt:a,isN:/^\\d+$/.test(a),isS:!1}}),n=function(a){var b=["",""],c=0;for(chunk in a)a[chunk].isS?c=1:b[c]+=a[chunk].prt;return b},o=function(a,b){for(var c=a.toString();c.length<b;)c="0"+c;return c},p=function(b,g){k.innerHTML="";var i=\'<ul id="gal">\',j=/^0*/.test(b),l=f.maxImage=e(b)+e(g);f.currentImage=f.minImage=e(b);for(var m=e(b);l>m;m++){var n=j?o(m,b.length):m,q=c[0]+n+c[1];i+=\'<li><img id="a\'+m+\'" src="\'+q+\'" alt="\'+n+\'"><a href="\'+q+\'">\'+q+"</a></li>"}i+="</ul>",k.innerHTML=i,k.insertAdjacentHTML("beforeEnd",\'<div id="more">Load more</div>\'),d("#more").addEventListener("click",function(){scrollTo(0,0);var a=j?o(l,b.length):l;h.value=a,p(a,g)}),f.bindResize(a.querySelectorAll("img"))};for(part in m){var q=m[part];l+=q.isN?\'<b data-position="\'+part+\'">\'+q.prt+"</b>":"<span>"+q.prt+"</span>"}g.innerHTML=l;for(var r=a.querySelectorAll("#hb b"),s=0;s<r.length;s++){var q=r.item(s);q.addEventListener("click",function(){j.classList.add("v"),g.classList.add("done"),this.classList.add("s"),m[this.getAttribute("data-position")].isS=!0,c=n(m),h.value=this.textContent,i.value=f.defaultShift})}j.addEventListener("submit",function(a){a.preventDefault(),p(h.value,i.value),f.init(k)})}(document,href);</script></body></html>';
window.open('data:text/html,' + encodeURIComponent(html));
// document.write(html);
// document.close();
/* - /galNum - */