| |
| <!DOCTYPE html> |
|
|
| <html> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" /> |
| |
| <style> |
| body { background-color:#474747; overflow:hidden; } |
| label { color:white; font-family:sans-serif; font-size:0.8em; } |
| img { margin-right:4px; cursor:pointer; } |
| button { padding:0 4px; } |
| #cont { |
| margin-top:4px; |
| overflow-y: scroll; |
| |
| scrollbar-color: #222222 rgba(0,0,0, 0.2 ); |
| scrollbar-width: thin; |
| } |
| #cont::-webkit-scrollbar { |
| width: 10px; |
| background: rgba(0,0,0,0.2); |
| } |
| #cont::-webkit-scrollbar-thumb { |
| background: #222222; |
| margin:2px; |
| } |
| </style> |
| <script> |
| var imgs = [], hits = [], done=0; |
| |
| var UNS = location.href.indexOf("uns")!=-1, PAGE=1, sTop=-1, cont, keyws; |
| |
| function update(page) { |
| cont = document.getElementById("cont"); |
| keyws = document.getElementById("keyws"); |
| if(page==null) { PAGE=1; hits=[]; sTop=-1; } |
| else { PAGE = page; sTop=cont.scrollTop; } |
| |
| var ikey = keyws.value; |
| if(document.getElementById("isolated").checked) ikey += " isolated"; |
| ikey = ikey.trim(); |
| console.log(JSON.stringify(ikey)); |
| |
| var url; |
| if(!UNS) { |
| url = "https://pixabay.com/api/?image_type=photo"+(ikey==""?"":"&q="+encodeURIComponent(ikey))+"&per_page="+100+"&page="+PAGE+"&key=10554583-a5eacb61c2e61105fdfb6eb88&safesearch=true"; |
| } |
| else { |
| |
| url = "https://api.unsplash.com/search/photos?per_page="+30+"&query="+encodeURIComponent(ikey)+"&page="+PAGE; |
| } |
| var fnam = "gallery"+(UNS?"1":""); |
| if(ikey=="") { |
| if(!UNS && Math.random()<0.005) url="gallery.php?url="+encodeURIComponent(url)+"&fnam="+fnam; |
| else url=fnam+".json"; |
| } |
| console.log(url); |
| |
| |
| var req = new XMLHttpRequest(); |
| req.open("GET", url, true); |
| if(UNS) req.setRequestHeader("Authorization", "Client-ID 3twt3nS_LYzp4nViMBB3tmWU0F-wyHUpgfrG1nIuiYs"); |
| req.onload = imgsLoaded.bind(this); |
| req.onerror = function(e) { console.log(e.target.response); } |
| req.send(); |
| } |
| function imgsLoaded(e) { |
| |
| var obj = JSON.parse(e.target.response); |
| var list = obj["hits"]?obj["hits"]:obj["results"]; |
| |
| hits = hits.concat(list); |
| |
| var iw = window.innerWidth-29, th=100; |
| cont.setAttribute("style","height:"+(window.innerHeight-42)+"px;"); |
| while(cont.firstChild) cont.removeChild(cont.firstChild); |
| cont.scrollTop = 0; |
| |
| |
| var heis = []; |
| for(var i=0; i<hits.length; ) { |
| var totw = 0, j=i; |
| while(j<hits.length) { |
| var hit = hits[j], w=hit["previewWidth"], h=hit["previewHeight"]; |
| if(w==null) { w=hit["width"]; h=hit["height"]; } |
| |
| var nw=w*(th/h); |
| if(j<=i+1 || totw+nw < iw) { totw+=nw; j++; } |
| else break; |
| } |
| var num = j-i; |
| while(i<j) { |
| heis.push(Math.min(th*2,th*((iw-num*4)/totw))); i++; |
| } |
| } |
| |
| imgs=[]; |
| |
| for(var i=0; i<hits.length; i++) { |
| var hit = hits[i]; |
| var img = document.createElement("img"); |
| img.setAttribute("src",hit["previewURL"]?hit["previewURL"]:hit["urls"]["thumb"]); |
| img.setAttribute("height",heis[i]+"px"); |
| img.addEventListener("click", imgClick); |
| cont.appendChild(img); |
| imgs.push(img); |
| } |
| if(sTop!=-1) cont.scrollTop=sTop; |
| |
| cont.appendChild(document.createElement("br")); |
| var more = document.createElement("button"); |
| more.onclick = function(e) { update(PAGE+1); } |
| more.textContent="Load More"; |
| if(keyws.value!="") cont.appendChild(more); |
| |
| console.log(hits); |
| } |
| function imgClick(e) { |
| var ind = imgs.indexOf(e.currentTarget); |
| var hit = hits[ind]; console.log(hit); |
| var url = hit["largeImageURL"]; if(url==null) url = hit["urls"]["full"]; |
| var x = "app.open(\""+url+"\",null,true);"; |
| window.parent.postMessage(x, "*"); |
| } |
| function msg(e) { alert("These images come from www."+(UNS?"Unsplash":"PixaBay")+".com and are free to use for any purpose."); } |
| |
| window.onresize = update; |
| </script> |
| </head> |
| |
| <body onload="update()"> |
| <div style="height:22px; overflow:hidden;"> |
| <button onclick="msg()">?</button> |
| <label>Keywords:</label> <input type="text" id="keyws" onchange="update()" value=""></input> |
| <input type="checkbox" id="isolated" style="vertical-align:middle;" onchange="update()" /> <label for="isolated">Isolated</label> |
| </div> |
| |
| <div id="cont"></div> |
| </body> |
| </html> |
|
|
