|
|
|
|
|
<!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> |
|
|
|
