mirror of
https://gitflic.ru/project/photopea-v2/photopea-v-2.git
synced 2026-05-19 16:20:37 +00:00
Updated it again-- no big changes, just pulled any new changes from Photopea
This commit is contained in:
DUOLabs333
@@ -0,0 +1,122 @@
|
||||
|
||||
<!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" />
|
||||
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
|
||||
<link rel="stylesheet" href="templates.css" />
|
||||
|
||||
<script src="templates.js"></script>
|
||||
<script>
|
||||
|
||||
var tpls;
|
||||
var ccat = -1, citm = -1, ordr = 0, cscr = 0; // current scroll
|
||||
var cont, cats, search, back, itms, kwds;
|
||||
function clearNode(node) { while(node.firstChild) node.removeChild(node.firstChild); }
|
||||
function isDisplayed(nd) { while(true) { if(nd==document) return true; if(nd==null) return false; nd=nd.parentNode; } }
|
||||
|
||||
function go() {
|
||||
cont = document.getElementById("cont");
|
||||
cats = document.getElementById("cats");
|
||||
kwds = document.getElementById("kwds");
|
||||
search = document.getElementById("search");
|
||||
back = document.getElementById("back"); cont.removeChild(back);
|
||||
itms = document.getElementById("itms");
|
||||
window.addEventListener("resize",onResize,false); onResize();
|
||||
|
||||
var request = new XMLHttpRequest();
|
||||
request.open("GET", "../../papi/tpls.json?t="+Date.now(), true);
|
||||
request.onload = imgsLoaded.bind(this);
|
||||
request.onerror = function(e) { console.log(e.target.response); }
|
||||
request.send();
|
||||
}
|
||||
function onResize() {
|
||||
if(tpls) updateView();
|
||||
}
|
||||
|
||||
function imgsLoaded(e) {
|
||||
tpls = JSON.parse(e.target.response);
|
||||
//for(var i=0; i<tpls.list.length; i++) {console.log(tpls.list[i]); console.log(cost(tpls.list[i]));}
|
||||
updateView();
|
||||
//makeStatic();
|
||||
}
|
||||
|
||||
function updateView() {
|
||||
var w = window.innerWidth, h=window.innerHeight;
|
||||
itms.style.height=(h-90)+"px";
|
||||
|
||||
var comp;
|
||||
if(ordr==0) comp=function(a,b) {return cost0(b)-cost0(a);}
|
||||
if(ordr==1) comp=function(a,b) {return cost1(b)-cost1(a);}
|
||||
if(ordr==2) comp=function(a,b) {return cost2(b)-cost2(a);}
|
||||
tpls.list.sort(comp);
|
||||
|
||||
|
||||
if(citm==-1 && !isDisplayed(search)) { clearNode(cont); cont.appendChild(search); cont.appendChild(itms); }
|
||||
if(citm!=-1) { clearNode(cont); cont.appendChild(back); cont.appendChild(itms); }
|
||||
clearNode(itms);
|
||||
|
||||
var twds = kwds.value.trim().toLowerCase(), wds=twds.split(/[ ,]+/);
|
||||
var out = [];
|
||||
makeView(tpls,out,twds,wds,ccat,citm);
|
||||
|
||||
itms.innerHTML=out.join("\n");
|
||||
|
||||
var out = [];
|
||||
getCats(tpls,ccat,out);
|
||||
cats.innerHTML = out.join("\n");
|
||||
}
|
||||
|
||||
function backClicked(e) {
|
||||
citm = -1;
|
||||
updateView();
|
||||
itms.scrollTo(0,cscr);
|
||||
}
|
||||
function itemClicked(nitm) {
|
||||
if(citm!=-1) {
|
||||
window.parent.postMessage("--ot "+tpls.list[citm][2]);
|
||||
if(window.location.href.indexOf("openSep")!=-1) window.open("//www.Photopea.com#t"+tempID(tpls.list[citm]));
|
||||
return;
|
||||
}
|
||||
cscr = itms.scrollTop;
|
||||
citm = nitm;
|
||||
updateView();
|
||||
itms.scrollTo(0,0);
|
||||
}
|
||||
function catClicked(nc) {
|
||||
if(nc==ccat) ccat=-1;
|
||||
else ccat=nc;
|
||||
updateView();
|
||||
}
|
||||
function setOrder(ord) {
|
||||
ordr=ord;
|
||||
var ords = document.getElementsByClassName("order");
|
||||
for(var i=0; i<3; i++) ords[i].setAttribute("class", "order"+(i==ordr ? " blue":""));
|
||||
updateView();
|
||||
itms.scrollTo(0,0);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="go()" class="flexrow">
|
||||
|
||||
<div id="cats">
|
||||
</div>
|
||||
|
||||
<div id="cont">
|
||||
<div id="search">
|
||||
<label>Search:</label> <input type="text" id="kwds" oninput="updateView()"></input>
|
||||
<span onclick="setOrder(0)" class="order blue">Hot</span>
|
||||
<span onclick="setOrder(1)" class="order">New</span>
|
||||
<span onclick="setOrder(2)" class="order">Top</span>
|
||||
</div>
|
||||
<div id="back">
|
||||
<span class="back" onclick="backClicked()">< Back</span>
|
||||
</div>
|
||||
<div id="itms" class="scrollable"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,47 @@
|
||||
|
||||
|
||||
body { background-color:#333333; font-family:"Open Sans"; color:#a5a5a5; padding:0; margin:0; font-size:14px; }
|
||||
|
||||
#cont { background-color:#1d1d1d; padding: 30px 0 0 30px; width:100%; }
|
||||
|
||||
a { /*text-decoration: inherit;*/ color: inherit; }
|
||||
|
||||
.title { display:block; color:white; }
|
||||
.item { position:relative; display:inline-block; margin:0 20px 20px 0; }
|
||||
.item img { height: 100%; width: 100%; object-fit: contain; }
|
||||
.cat { margin-left:30px; margin:16px; padding:2px 0px; cursor:pointer; }
|
||||
.top { margin-left: 7px; }
|
||||
.clickable: { cursor:pointer; }
|
||||
.blue, .clickable:hover { border-bottom: 3px solid #00eeff; margin-bottom:-3px; }
|
||||
.back { display:inline-block; background-color:rgba(0,0,0,0.5); cursor:pointer; padding:6px 1em; margin: 0.2em 0 0.6em 0; font-size:1.5em; }
|
||||
.count { float:right; }
|
||||
.cat_title {font-size:1.6em; display:inline-block; margin:1.2em 0 1.2em 0;}
|
||||
.t1 {font-size:2em; margin-bottom:0.4em; }
|
||||
.t2 {font-size:1.2em;}
|
||||
#cats { padding:10px 24px; min-width:180px; color:white; }
|
||||
#search { font-size:1.3em; margin-bottom: 30px; }
|
||||
#kwds { font-size:1.0em; background-color: black; border:none; color:white; padding:3px; margin-left:1em; }
|
||||
|
||||
.order { margin-left:1.5em; cursor:pointer; }
|
||||
|
||||
.post_big { padding:24px; }
|
||||
|
||||
.scrollable {
|
||||
overflow-y: scroll;
|
||||
/* for Firefox: */
|
||||
scrollbar-color: #222222 #1d1d1d;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
.scrollable::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
background: #1d1d1d;
|
||||
}
|
||||
.scrollable::-webkit-scrollbar-thumb {
|
||||
background: rgba(255,255,255,0.5);
|
||||
border-radius: 6px;
|
||||
margin:4px;
|
||||
}
|
||||
.flexrow {
|
||||
display:flex;
|
||||
flex-flow:row;
|
||||
}
|
||||
@@ -0,0 +1,172 @@
|
||||
|
||||
function makeView(tps,out,twds,wds,curc,cit) {
|
||||
var list = tps.list, cts=tps.categories;
|
||||
if(cit==-1) {
|
||||
for(var i=0; i<list.length; i++) {
|
||||
var tpl = list[i], cat=tpl[4], pcat=cat-(cat%10);
|
||||
if(curc!=-1) {
|
||||
if((curc%10)==0) { if(pcat!=curc) continue; }
|
||||
else if(curc!=cat) continue;
|
||||
}
|
||||
if(twds!="") {
|
||||
var occ=0, tot=(tpl[7] + " " + tpl[8] + " " + tps.authors[tpl[0]] + " " + cts["c"+tpl[4]]).toLowerCase();
|
||||
for(var j=0; j<wds.length; j++) {
|
||||
if(tot.indexOf(wds[j])!=-1) occ++;
|
||||
}
|
||||
if(occ==0) continue;
|
||||
}
|
||||
makeItem(tps,i, cts,out, false);
|
||||
}
|
||||
}
|
||||
else {
|
||||
//out.push("<div id=\"back\"><span class=\"back\" onclick=\"backClicked()\">< Back</span></div>");
|
||||
var tpl = list[cit];
|
||||
makeItem(tps,cit,cts,out, true);
|
||||
out.push("<iframe src=\"comments.html#"+tempID(tpl)+"\" frameborder=\"0\" style=\"border:none; max-width:800px; width:calc(100% - 20px); height:800px; background-color:white;\"></iframe>");
|
||||
/*
|
||||
out.push("<iframe src=\"https://www.facebook.com/plugins/comments.php?href=https://photopea.com/templates\" scrolling=\"yes\" frameborder=\"0\" style=\"border:none; width:calc(100% - 20px); height:600px; background-color:white;\"></iframe>"); */
|
||||
/*
|
||||
out.push("<div id=\"fb-root\"></div> <script async defer crossorigin=\"anonymous\" src=\"https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v10.0&appId=1709573295939738&autoLogAppEvents=1\" nonce=\"wZ5o5487\"></script>");
|
||||
out.push("<div class=\"fb-comments\" data-href=\"https://photopea.com/templates\" data-width=\"600\" data-numposts=\"5\"></div>");
|
||||
*/
|
||||
}
|
||||
}
|
||||
|
||||
function shorten(str, lim) {
|
||||
return (str.length<lim) ?str:str.slice(0,lim-3)+"...";
|
||||
}
|
||||
function toID(str) { return str.toLowerCase().replace(/\s+/g, "-")+".html"; }
|
||||
function makeItem(tps, ind,cts,lst, big) {
|
||||
var tpl = tps.list[ind];
|
||||
var rst = window.innerWidth-(245+30); //console.log(iw);
|
||||
var num = 1; while(rst/num>300) num++;
|
||||
var cc = Math.floor(rst/num); //console.log(cc);
|
||||
var isz = cc-26; //console.log(isz);
|
||||
|
||||
var tit = tpl[7];
|
||||
var lim = ~~(isz/9); //console.log(tpl);
|
||||
|
||||
if(big) lst.push("<div class=\"item flexrow\" >");
|
||||
else lst.push("<div class=\"item\" onclick=\"itemClicked("+ind+")\" style=\"cursor:pointer\">");
|
||||
|
||||
var iurl = tpl[3]; //(Math.random()<0.5?"wide.png":"tall.png"); // tpl[3]
|
||||
var aurl = "//www.Photopea.com#t"+tempID(tpl);
|
||||
//*
|
||||
if(big) isz=rst/2;
|
||||
var wi = (isz+"px");
|
||||
var hi = ((isz*0.67)+"px");
|
||||
|
||||
lst.push("<div style=\"width:"+wi+"; min-width:"+wi+"; height:"+hi+"\">"); // ict
|
||||
lst.push("<img src=\""+iurl+"\" "+(big ? "onclick=\"itemClicked("+ind+")\"" : "")+" style=\""+(big?"cursor:pointer":"")+"\" loading=\"lazy\" />");
|
||||
lst.push("</div>"); // ict
|
||||
lst.push("<div class=\""+"post"+(big?"_big":"")+"\">"); // cmt
|
||||
|
||||
lst.push("<span class=\"title "+(big?"t1":"t2")+"\">" + escapeHtml(big?tit:shorten(tit,lim)) + "</span>");
|
||||
|
||||
var au = tps.authors[tpl[0]];
|
||||
lst.push("<span>"+"By "+(big?au:shorten(au,~~(lim*0.7))) + " in " + cts["c"+tpl[4]]+"</span>");
|
||||
|
||||
if(big) {
|
||||
lst.push("<p>"+findLinks(escapeHtml(tpl[8]))+"</p>");
|
||||
lst.push("<p style=\"font-size:1.5em; margin-bottom: 0em;\" title=\""+((0.001*Date.now()-tpl[1])/(60*60*24)).toFixed(2)+" days ago\">");
|
||||
var dstr = printDate(tpl[1]);
|
||||
//lst.push("<b class=\"clickable\" onclick=\"itemClicked("+ind+")\">Open</b>");
|
||||
//lst.push(" <a href=\""+aurl+"\" target=\"_blank\" class=\"clickable\" ><b>Open Separately</b></a>");
|
||||
|
||||
lst.push(printNum(tpl[5])+" views • "+printNum(tpl[6])+" uses • "+dstr);// lst.push("<br/>");
|
||||
|
||||
|
||||
|
||||
//lst.push("<br/>"); lst.push(tpl[6]+" uses");
|
||||
lst.push("</p>");
|
||||
lst.push("<p style=\"font-size:1.2em; margin-top:0.5em;\">");
|
||||
lst.push("<a href=\""+aurl+"\" target=\"_blank\" class=\"clickable\" >photopea.com#t"+tempID(tpl)+"</a>"); lst.push("<br/>");
|
||||
lst.push("</p>");
|
||||
}
|
||||
else {
|
||||
//var p = makeNode("span"); p.textContent = tpl[5]+"/"+tpl[6]; //ict.appendChild(p);
|
||||
//p.setAttribute("style","display:inline-block; right:4px; bottom:8px; padding:0px 4px; position:absolute; background:white;");
|
||||
}
|
||||
lst.push("</div>"); // cmt
|
||||
lst.push("</div>");
|
||||
}
|
||||
|
||||
function printDate(d) {
|
||||
var dt = new Date(d*1000);
|
||||
var mon = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sept","Oct","Nov","Dec"][dt.getMonth()];
|
||||
return mon+" "+(dt.getDate()+1)+", "+dt.getFullYear();
|
||||
}
|
||||
function printNum(f) { return f.toLocaleString('en-US', {maximumFractionDigits:2}); }
|
||||
function tempID(tpl) { return tpl[2].split("").reverse().join(""); }
|
||||
function isWhite(c) { return c==" " || c=="\n" || c=="\t"; }
|
||||
|
||||
function findLinks(str) {
|
||||
//return str;
|
||||
var iod = -1;
|
||||
for(var i=0; i<str.length-1; i++) if(str[i]=="." && !isWhite(str[i+1])) iod=i;
|
||||
if(iod!=-1) {
|
||||
var i0=iod, i1=iod;
|
||||
while(i0>0 && !isWhite(str[i0])) i0--;
|
||||
while(i1<str.length-1 && !isWhite(str[i1])) i1++;
|
||||
if(str[i0]==" ") i0++; if(str[i1]==" ") i1--;
|
||||
var mid = str.slice(i0,i1+1), url=mid;
|
||||
if(url.indexOf("//")==-1) url="//"+url;
|
||||
str = str.slice(0,i0)+"<a href=\""+url+"\" target=\"_blank\">"+mid+"</a>"+str.slice(i1+1);
|
||||
}
|
||||
return str//.replaceAll("\n","<br/>");
|
||||
}
|
||||
|
||||
function escapeHtml(unsafe) {
|
||||
return unsafe
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
|
||||
function getCatCounts(tps) {
|
||||
var list = tps.list, cts=tps.categories;
|
||||
var ccnt = JSON.parse(JSON.stringify(cts));
|
||||
for(var cat in ccnt) ccnt[cat]=0;
|
||||
for(var i=0; i<list.length; i++) {
|
||||
var tpl = list[i], cat=tpl[4], pcat=cat-(cat%10);
|
||||
ccnt["c"+cat]++; if(cat!=pcat) ccnt["c"+pcat]++;
|
||||
}
|
||||
return ccnt;
|
||||
}
|
||||
|
||||
function getCats(tps, curr,out) {
|
||||
var cts=tps.categories, ccnt = getCatCounts(tps);
|
||||
out.push("<span class=\"cat_title\">CATEGORIES</span>");
|
||||
for(var cat in cts) {
|
||||
if(ccnt[cat]==0) continue;
|
||||
var cw = parseInt(cat.slice(1)), isTop = (cw%10)==0; //console.log(cw);
|
||||
out.push("<div class=\"cat"+(isTop?" top":"") + (cw==curr?" blue":"")+" clickable\" onclick=\"catClicked("+cw+")\">");
|
||||
out.push(cts[cat]);
|
||||
out.push("<span class=\"count\">"+ccnt[cat]+"</span>");
|
||||
out.push("</div>");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function cost0(v) {
|
||||
var age = (Date.now()*0.001 - v[1]) / (60*60*24); // age in days
|
||||
var cst = v[6] / age; // usages per day
|
||||
var ext = 20*Math.pow(Math.PI,-age*0.5);
|
||||
//console.log(age,cst,ext)
|
||||
|
||||
return cst+ext;
|
||||
/*
|
||||
var ts = Math.max(0, v[1]-1134028003);
|
||||
var x = v[6];
|
||||
var y = 1;
|
||||
var z = Math.max(1,Math.abs(x));
|
||||
return getBaseLog(10, z) + (y*ts/45000); // 45000
|
||||
*/
|
||||
}
|
||||
function cost1(v) { return v[1]; }
|
||||
function cost2(v) { return v[6]; }
|
||||
//function getBaseLog(x, y) { return Math.log(y) / Math.log(x); }
|
||||
|
||||
|
||||
Reference in New Issue
Block a user