wudi
/
photopea-web


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
							
<!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;  }
			label { color:white;  font-family:sans-serif; }
			img { margin-right:4px;  cursor:pointer;  }
			#cont {
				margin-top:4px;
				overflow-y: scroll;
				/* for Firefox: */
				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 = [];
		
			function update() {
				var ikey = document.getElementById("keyws").value;
				if(document.getElementById("isolated").checked) ikey += " isolated";
				ikey = ikey.trim();
				console.log(JSON.stringify(ikey));
				//alert(keyws);
				
				var request = new XMLHttpRequest();
				var url = "https://pixabay.com/api/?image_type=photo"+(ikey==""?"":"&q="+encodeURIComponent(ikey))+"&per_page=200&page=1&key=10554583-a5eacb61c2e61105fdfb6eb88&safesearch=true"; 
				if(ikey=="") {
					if(Math.random()<0.005) url="gallery.php?url="+encodeURIComponent(url+"&safesearch=true");
					else url="gallery.json";
				}
				//console.log(url);
				request.open("GET", url, true);
				request.onload = imgsLoaded.bind(this);
				request.onerror = function(e) {  console.log(e.target.response);  }
				request.send();
			}
			function imgsLoaded(e) {
				//console.log(e.target.response);
				var iw = window.innerWidth-28, th=100;
				var cont = document.getElementById("cont");
				cont.setAttribute("style","height:"+(window.innerHeight-42)+"px;");
				while(cont.firstChild) cont.removeChild(cont.firstChild);
				cont.scrollTop = 0;
				hits = JSON.parse(e.target.response)["hits"];  imgs=[];
				var heis = [];
				for(var i=0; i<hits.length; ) {
					var totw = 0, j=i;
					while(j<hits.length) {
						var hit = hits[j];
						var w=hit["previewWidth"], h=hit["previewHeight"];
						if(j<=i+1 || totw+w*(th/h)+4 < iw) {  totw+=w*(th/h) + 4;  j++;  }
						else break;
					}
					while(i<j) {
						heis.push(th*(iw/totw));  i++;
					}
				}
				
				for(var i=0; i<hits.length; i++) {
					var hit = hits[i];
					var img = document.createElement("img");
					img.setAttribute("src",hit["previewURL"]);
					img.setAttribute("height",heis[i]+"px");
					img.addEventListener("click", imgClick);
					cont.appendChild(img);
					imgs.push(img);
				}
				console.log(hits);
			}
			function imgClick(e) {
				var ind = imgs.indexOf(e.currentTarget);
				var hit = hits[ind];  console.log(hit);
				var x = "app.open(\""+hit["largeImageURL"]+"\",null,true);";
				window.parent.postMessage(x, "*");
			}
			function msg(e) {  alert("These images come from www.PixaBay.com and are free to use for any purpose.");  }
		</script>
	</head>
	
	<body onload="update()">	
		<button onclick="msg()">?</button>
		<label>Keywords:</label> <input type="text" id="keyws" onchange="update()"></input>
		<input type="checkbox" id="isolated" style="vertical-align:middle;" onchange="update()" /> <label for="isolated">Isolated</label>
		
		
		<div id="cont"></div>
	</body>
</html>