mirrors/photopea-v2
1
0
Fork 0
mirror of https://gitflic.ru/project/photopea-v2/photopea-v-2.git synced 2025-08-16 00:16:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update, and fix "port-lock" workaround to work again and (hopefully) be a little more future-proof.

Browse Source
This commit is contained in:
DUOLabs333 2025-07-24 23:37:43 -04:00
parent 760805ada5
commit 43f90f0ae5
14 changed files with 23977 additions and 21481 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
Updater.py
View File

@ -165,38 +165,40 @@ if '--templates' in sys.argv:
print('Removing ' + tpl) print('Removing ' + tpl)
os.remove(tpl) os.remove(tpl)
def find_and_replace(file,find,replace): def find_and_replace(file,find,replace, regex=False):
with open(os.path.join(root,file),'r', encoding="utf-8") as pp: with open(os.path.join(root,file),'r', encoding="utf-8") as pp:
file1=pp.read() file1=pp.read()
file1=file1.replace(find,replace) if regex:
file1=re.sub(find, replace, file1, flags=re.MULTILINE)
else:
file1=file1.replace(find,replace)
with open(os.path.join(root,file),'w', encoding="utf-8") as pp: with open(os.path.join(root,file),'w', encoding="utf-8") as pp:
pp.write(file1) pp.write(file1)
if (not True): #Allow any port to be used
#Allow any port to be used find_and_replace(PP,r'==(\s*)\"\"(\s*)\)(\s*)return 0(\s*);(\s*)if(\s*)\(', '|| true) return 2; if(', regex=True)
find_and_replace(PP,'"\'$!|"))','"\'$!|"))||true')
#Don't load Google Analytics #Don't load Google Analytics
find_and_replace('index.html','//www.google-analytics.com/analytics.js','') find_and_replace('index.html','//www.google-analytics.com/analytics.js','')
find_and_replace('index.html', '//www.googletagmanager.com', '#') find_and_replace('index.html', '//www.googletagmanager.com', '#')
#Allow the import of pictures of URLs (bypassing mirror.php) #Allow the import of pictures of URLs (bypassing mirror.php)
find_and_replace(PP,'"mirror.php?url="+encodeURIComponent','') find_and_replace(PP,'"mirror.php?url="+encodeURIComponent','')
#Allow Dropbox to load from dropboxStorage.html #Allow Dropbox to load from dropboxStorage.html
find_and_replace('code/storages/dropboxStorage.html', 'var redirectUri = window.location.href;', 'var redirectUri = "https://www.photopea.com/code/storages/dropboxStorage.html";') find_and_replace('code/storages/dropboxStorage.html', 'var redirectUri = window.location.href;', 'var redirectUri = "https://www.photopea.com/code/storages/dropboxStorage.html";')
#Remove Facebook Pixel Domains #Remove Facebook Pixel Domains
find_and_replace('index.html','https://connect.facebook.net','') find_and_replace('index.html','https://connect.facebook.net','')
find_and_replace('index.html','https://www.facebook.com','') find_and_replace('index.html','https://www.facebook.com','')
#Redirect dynamic pages to static equivalent #Redirect dynamic pages to static equivalent
find_and_replace(PP,'"&rsrc="','""') find_and_replace(PP,'"&rsrc="','""')
find_and_replace(PP,'"templates/?type="','"templates/index.html?type="') find_and_replace(PP,'"templates/?type="','"templates/index.html?type="')
find_and_replace(PP,'"https://f000.backblazeb2.com/file/"', '"templates/file/"') find_and_replace(PP,'"https://f000.backblazeb2.com/file/"', '"templates/file/"')
#Force enable Remove BG, and any other options that are disabled on self-hosted instances (much more brittle to changes than the other replacements) #Force enable Remove BG, and any other options that are disabled on self-hosted instances (much more brittle to changes than the other replacements)
find_and_replace(PP,'("~yy")','("~yy")||true') find_and_replace(PP,'("~yy")','("~yy")||true')
# Having ? in static sites doesn't really work # Having ? in static sites doesn't really work
#find_and_replace("templates/index.html",'sch.split("?");','sch.split("#");') #find_and_replace("templates/index.html",'sch.split("?");','sch.split("#");')

111
www.photopea.com/code/dbs/DBS1727686859.js → www.photopea.com/code/dbs/DBS1751979998.js
View File

File diff suppressed because one or more lines are too long

5428
www.photopea.com/code/ext/ext1727353186.js → www.photopea.com/code/ext/ext1753387088.js
View File

File diff suppressed because one or more lines are too long

16836
www.photopea.com/code/pp/pp1728070986.js
View File

File diff suppressed because one or more lines are too long

17412
www.photopea.com/code/pp/pp1753360222.js Normal file
View File

File diff suppressed because one or more lines are too long

8
www.photopea.com/code/storages/dropboxStorage.html
View File

@ -3,6 +3,7 @@
<html> <html>
<head> <head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/dropbox@10.9.0/dist/Dropbox-sdk.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/dropbox@10.9.0/dist/Dropbox-sdk.min.js"></script>
<!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dropbox.js/10.9.0/Dropbox-sdk.min.js"></script>-->
</head> </head>
<body onload="go()"> <body onload="go()">
@ -33,10 +34,10 @@
}, 100); }, 100);
} }
else else
{ {
dbx.auth.accessToken = localStorage.getItem('dropboxAccessToken'); dbx.auth.accessToken = localStorage.getItem('dropboxAccessToken');
window.addEventListener("message", onMessage,false); window.addEventListener("message", onMessage,false);
doAction(checkUser); doAction(checkUser);
} }
} }
@ -91,6 +92,8 @@
else if(sentFalse) { authenticate(action,prms); } else if(sentFalse) { authenticate(action,prms); }
else if(dbx.auth.accessToken) else if(dbx.auth.accessToken)
{ {
action(prms);
/*
dbx.checkUser({"query": ""}) dbx.checkUser({"query": ""})
.then(function(e) { .then(function(e) {
action(prms); action(prms);
@ -99,6 +102,7 @@
{ {
handleError(e); handleError(e);
}); });
*/
} }
else { handleError("No Access Token present."); } else { handleError("No Access Token present."); }
} }

67
www.photopea.com/code/storages/googledriveStorage.html
View File

@ -181,6 +181,7 @@
if(path.length == 0 || path[0] == '') if(path.length == 0 || path[0] == '')
{ {
if(action == listDir) if(action == listDir)
{ {
var query = "'" + id + "' in parents"; var query = "'" + id + "' in parents";
@ -213,8 +214,8 @@
'q': query, 'q': query,
'pageToken' : pageToken, 'pageToken' : pageToken,
'pageSize': 1000, 'pageSize': 1000,
'fields': "nextPageToken, files(id, name, size, modifiedTime, kind, mimeType, trashed)",}; 'fields': "nextPageToken, files(id, name, size, modifiedTime, kind, mimeType, trashed, shortcutDetails)",};
if(mode == 1) if(mode == 1 || query != "'root' in parents")
{ {
req['supportsAllDrives'] = true; req['supportsAllDrives'] = true;
req['includeItemsFromAllDrives'] = true; req['includeItemsFromAllDrives'] = true;
@ -223,7 +224,7 @@
{ {
req['spaces'] = "appDataFolder"; req['spaces'] = "appDataFolder";
} }
else if(mode == 4 && req["q"] == "'sharedWithMe' in parents") if(mode == 4 && req["q"] == "'sharedWithMe' in parents")
{ {
req['q'] = "sharedWithMe"; req['q'] = "sharedWithMe";
} }
@ -239,6 +240,7 @@
{ {
found = true; found = true;
if(newFile && action == renameFile) { renameFile(files[i].id, newFile); return; } if(newFile && action == renameFile) { renameFile(files[i].id, newFile); return; }
else if(files[i].shortcutDetails) { findFile(action, path.slice(1), files[i].shortcutDetails.targetId, null, buffer); return; }
else { findFile(action, path.slice(1), files[i].id, null, buffer); return; } else { findFile(action, path.slice(1), files[i].id, null, buffer); return; }
} }
} }
@ -276,8 +278,8 @@
'q': query, 'q': query,
'pageToken' : pageToken, 'pageToken' : pageToken,
'pageSize': 1000, 'pageSize': 1000,
'fields': "nextPageToken, files(id, name, size, modifiedTime, kind, mimeType, thumbnailLink, trashed)",}; 'fields': "nextPageToken, files(id, name, size, modifiedTime, kind, mimeType, thumbnailLink, trashed, shortcutDetails)",};
if(mode == 1) if(mode == 1 || query != "'root' in parents")
{ {
req['supportsAllDrives'] = true; req['supportsAllDrives'] = true;
req['includeItemsFromAllDrives'] = true; req['includeItemsFromAllDrives'] = true;
@ -286,9 +288,9 @@
{ {
req['spaces'] = "appDataFolder"; req['spaces'] = "appDataFolder";
} }
else if(mode == 4 && req["q"] == "'sharedWithMe' in parents") if(mode == 4 && req['q'] == "'sharedWithMe' in parents")
{ {
req["q"] = "sharedWithMe"; req['q'] = "sharedWithMe";
} }
gapi.client.drive.files.list(req) gapi.client.drive.files.list(req)
.then(function(response) { .then(function(response) {
@ -298,10 +300,23 @@
{ {
if(files[i].trashed) continue; if(files[i].trashed) continue;
else if(files[i].mimeType == "application/vnd.google-apps.folder") { out.push([files[i].name, -1, Math.round(Date.parse(files[i].modifiedTime)/1000)]); } else if(files[i].mimeType == "application/vnd.google-apps.folder") { out.push([files[i].name, -1, Math.round(Date.parse(files[i].modifiedTime)/1000)]); }
else if(files[i].mimeType.includes("application/vnd.google-apps.")) { } else if(files[i].mimeType == "application/vnd.google-apps.shortcut")
{
//console.log(files[i]);
if(files[i].shortcutDetails.targetMimeType == "application/vnd.google-apps.folder")
{ out.push([files[i].name, -1, Math.round(Date.parse(files[i].modifiedTime)/1000)]); }
else if(files[i].shortcutDetails.targetMimeType == "application/vnd.google-apps") {}
else else
{ {
if(files[i].thumbnailLink) { out.push([files[i].name,files[i].size ? parseInt(files[i].size) : 0, Math.round(Date.parse(files[i].modifiedTime)/1000), files[i].thumbnailLink]); } if(files[i].thumbnailLink) { out.push([files[i].name, 0, Math.round(Date.parse(files[i].modifiedTime)/1000), files[i].thumbnailLink]); }
//but maybe we should only show thumbnail to files which Photopea can open - Gdrive also makes thumbnails for spreadsheets etc.
else { out.push([files[i].name,0, Math.round(Date.parse(files[i].modifiedTime)/1000)]); }
}
}
else if(files[i].mimeType.includes("application/vnd.google-apps.")) { }
else
{
if(files[i].thumbnailLink) { out.push([files[i].name,files[i].size ? parseInt(files[i].size) : 0, Math.round(Date.parse(files[i].modifiedTime)/1000), files[i].thumbnailLink]); }
//but maybe we should only show thumbnail to files which Photopea can open - Gdrive also makes thumbnails for spreadsheets etc. //but maybe we should only show thumbnail to files which Photopea can open - Gdrive also makes thumbnails for spreadsheets etc.
else { out.push([files[i].name,parseInt(files[i].size), Math.round(Date.parse(files[i].modifiedTime)/1000)]); } else { out.push([files[i].name,parseInt(files[i].size), Math.round(Date.parse(files[i].modifiedTime)/1000)]); }
} }
@ -315,8 +330,9 @@
function downloadFile(fileId) function downloadFile(fileId)
{ {
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
var shared = ""; //var shared = "";
if(mode == 1) shared = "&supportsAllDrives=true"; //if(mode == 1) shared = "&supportsAllDrives=true";
var shared = "&supportsAllDrives=true";
xhr.open('GET', "https://www.googleapis.com/drive/v3/files/" + fileId + "?alt=media" + shared); xhr.open('GET', "https://www.googleapis.com/drive/v3/files/" + fileId + "?alt=media" + shared);
xhr.responseType = "arraybuffer"; xhr.responseType = "arraybuffer";
xhr.setRequestHeader('Authorization', 'Bearer ' + gapi.client.getToken().access_token); xhr.setRequestHeader('Authorization', 'Bearer ' + gapi.client.getToken().access_token);
@ -328,8 +344,9 @@
function downloadThumbnail(fileId) function downloadThumbnail(fileId)
{ {
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
var shared = ""; //var shared = "";
if(mode == 1) shared = "&supportsAllDrives=true"; //if(mode == 1) shared = "&supportsAllDrives=true";
var shared = "&supportsAllDrives=true";
xhr.open('GET', "https://www.googleapis.com/drive/v3/files/" + fileId + "?fields=thumbnailLink" + shared); xhr.open('GET', "https://www.googleapis.com/drive/v3/files/" + fileId + "?fields=thumbnailLink" + shared);
xhr.setRequestHeader('Authorization', 'Bearer ' + gapi.client.getToken().access_token); xhr.setRequestHeader('Authorization', 'Bearer ' + gapi.client.getToken().access_token);
xhr.onload = function(e) xhr.onload = function(e)
@ -422,7 +439,8 @@
'name' : newName, 'name' : newName,
} }
}; };
if(mode == 1) req['supportsAllDrives'] = true; //if(mode == 1) req['supportsAllDrives'] = true;
req['supportsAllDrives'] = true;
gapi.client.drive.files.update(req) gapi.client.drive.files.update(req)
.then(function(response) { .then(function(response) {
send(0,""); send(0,"");
@ -442,7 +460,7 @@
'q': query, 'q': query,
'pageToken' : pageToken, 'pageToken' : pageToken,
'pageSize': 1000, 'pageSize': 1000,
'fields': "nextPageToken, files(id, name, trashed)",}; 'fields': "nextPageToken, files(id, name, trashed, mimeType, shortcutDetails)",};
if(mode == 1) if(mode == 1)
{ {
req['supportsAllDrives'] = true; req['supportsAllDrives'] = true;
@ -463,10 +481,15 @@
if(files[i].name == name) if(files[i].name == name)
{ {
found = true; found = true;
if(buffer) { uploadFile(files[i].id,parentId,name,buffer); } var fid = files[i].id;
if(files[i].mimeType == "application/vnd.google-apps.shortcut")
{
fid = files[i].shortcutDetails.targetId;
}
if(buffer) { uploadFile(fid,parentId,name,buffer); }
else else
{ {
query = "'" + files[i].id + "' in parents"; query = "'" + fid + "' in parents";
listDir(null, query, []); listDir(null, query, []);
} }
return; return;
@ -491,8 +514,9 @@
metadata['mimeType'] = contentType; metadata['mimeType'] = contentType;
metadata['Content-Type'] = contentType; metadata['Content-Type'] = contentType;
metadata['Content-Length'] = file.size; metadata['Content-Length'] = file.size;
var shared = ""; //var shared = "";
if(mode == 1) shared = "&supportsAllDrives=true"; //if(mode == 1) shared = "&supportsAllDrives=true";
var shared = "&supportsAllDrives=true";
if(!fileId) xhr.open("POST", "https://www.googleapis.com/upload/drive/v3/files?uploadType=resumable" + shared); if(!fileId) xhr.open("POST", "https://www.googleapis.com/upload/drive/v3/files?uploadType=resumable" + shared);
else xhr.open("PATCH", "https://www.googleapis.com/upload/drive/v3/files/" + fileId + "?uploadType=resumable" + shared); else xhr.open("PATCH", "https://www.googleapis.com/upload/drive/v3/files/" + fileId + "?uploadType=resumable" + shared);
xhr.setRequestHeader('Authorization', 'Bearer ' + gapi.client.getToken().access_token); xhr.setRequestHeader('Authorization', 'Bearer ' + gapi.client.getToken().access_token);
@ -529,8 +553,9 @@
var form = new FormData(); var form = new FormData();
form.append('metadata', new Blob([JSON.stringify(metadata)], { type: 'application/json' })); form.append('metadata', new Blob([JSON.stringify(metadata)], { type: 'application/json' }));
form.append('file', file); form.append('file', file);
var shared = ""; //var shared = "";
if(mode == 1) shared = "&supportsAllDrives=true"; //if(mode == 1) shared = "&supportsAllDrives=true";
var shared = "&supportsAllDrives=true";
if(!fileId) xhr.open('POST', 'https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart&fields=id' + shared); if(!fileId) xhr.open('POST', 'https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart&fields=id' + shared);
else xhr.open('PATCH', 'https://www.googleapis.com/upload/drive/v3/files/' + fileId + '?uploadType=multipart&fields=id' + shared); else xhr.open('PATCH', 'https://www.googleapis.com/upload/drive/v3/files/' + fileId + '?uploadType=multipart&fields=id' + shared);
xhr.setRequestHeader('Authorization', 'Bearer ' + gapi.client.getToken().access_token); xhr.setRequestHeader('Authorization', 'Bearer ' + gapi.client.getToken().access_token);

12
www.photopea.com/index.html
View File

@ -187,12 +187,16 @@
if(added) return; added=true; console.log("adding"); if(added) return; added=true; console.log("adding");
var fls = [ var fls = [
"style/all09.css", "style/all09.css",
"code/ext/ext1727353186.js", "code/ext/ext1753387088.js",
"code/dbs/DBS1727686859.js", "code/dbs/DBS1751979998.js",
"code/pp/pp1728070986.js" "code/pp/pp1753360222.js"
]; ];
var fromCDN = window.location.host=="www.photopea.com" && !window.location.href.endsWith("nocdn");
var ao = window.location.ancestorOrigins;
if(ao) for(var i=0; i<ao.length; i++) if(ao[i].indexOf("figma.com")!=-1) fromCDN=false;
for(var i=0; i<fls.length; i++) { for(var i=0; i<fls.length; i++) {
var url = (window.location.host=="www.photopea.com"?"//vecpea.com/":"")+fls[i], isJS = url.endsWith(".js"); var url = (fromCDN?"//vecpea.com/":"")+fls[i], isJS = url.endsWith(".js");
var el = document.createElement(isJS ? "script" : "link"); var el = document.createElement(isJS ? "script" : "link");
el.setAttribute(isJS ? "src" : "href",url); el.setAttribute(isJS ? "src" : "href",url);
if(!isJS) el.setAttribute("rel","stylesheet"); if(!isJS) el.setAttribute("rel","stylesheet");

5418
www.photopea.com/papi/tpls.json
View File

File diff suppressed because one or more lines are too long

2
www.photopea.com/plugins/gallery.json
View File

File diff suppressed because one or more lines are too long

BIN
www.photopea.com/rsrc/basic/basic.zip
View File

Binary file not shown.

47
www.photopea.com/templates/index.html
View File

@ -19,7 +19,7 @@
var tpls, IFR=false, TYPE=0, RSRC=[], OTPLS; var tpls, IFR=false, TYPE=0, RSRC=[], OTPLS;
var ccat = -1, caut = -1, citm = -1, ordr = 0, cscr = 0; // current scroll var ccat = -1, caut = -1, citm = -1, ordr = 0, cscr = 0; // current scroll
var lo=localStorage.getItem("ordr"); if(lo) lo=JSON.parse(lo); if(lo && lo[1]>Date.now()-30000) ordr=lo[0]; var lo=localStorage.getItem("ordr"); if(lo) lo=JSON.parse(lo); if(lo && lo[1]>Date.now()-30000) ordr=lo[0];
var cont, cats, search, back, itms, kwds, add_link; var cont, cats, search, back, itms, kwds, add_link, menubtn;
function clearNode(node) { while(node.firstChild) node.removeChild(node.firstChild); } 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 isDisplayed(nd) { while(true) { if(nd==document) return true; if(nd==null) return false; nd=nd.parentNode; } }
@ -31,10 +31,11 @@
back = document.getElementById("back"); cont.removeChild(back); back = document.getElementById("back"); cont.removeChild(back);
itms = document.getElementById("itms"); itms = document.getElementById("itms");
add_link = document.getElementById("add_link"); add_link = document.getElementById("add_link");
menubtn = document.getElementsByClassName("order")[0];
window.addEventListener("resize",onResize,false); onResize(); window.addEventListener("resize",onResize,false); onResize();
var request = new XMLHttpRequest(); var request = new XMLHttpRequest();
request.open("GET", "../papi/tpls.json?r="+Date.now(), true); request.open("GET", "../papi/tpls.json", true);
request.onload = imgsLoaded; request.onload = imgsLoaded;
request.onerror = function(e) { console.log(e.target.response); } request.onerror = function(e) { console.log(e.target.response); }
request.send(); request.send();
@ -128,12 +129,21 @@
function updateView() { function updateView() {
var w = window.innerWidth, h=window.innerHeight; var w = window.innerWidth, h=window.innerHeight;
var sh = 90; if(w<1000) sh=130; if(w<800) sh=160;
itms.style.height=(h-sh)+"px";
cats.style.height=(h- 1)+"px";
add_link.style.display=(false?"none":"inline-block"); var tiny = w<560;
add_link.textContent = TYPE==0 ? "Add your own template!" : (TYPE==1 ? "Add your own plugin!":"");
cats.setAttribute("style", tiny ? "display:none; position:fixed; top:56px; left:12px; background-color:#333333; z-index:2;" : "");
cont.setAttribute("style", tiny ? "padding: 10px 0 0 12px;" : "padding: 20px 0 0 30px;");
menubtn.style.display=(!tiny)?"none":"";
kwds.style.width=(w-(tiny?326:526))+"px";
var sh = tiny?63:72;
itms.style.height=(h-sh)+"px";
cats.style.height=(h- 1-(tiny?56:0))+"px";
add_link.setAttribute("href", add_link.setAttribute("href",
TYPE==0 ? "//www.photopea.com/tuts/publish-your-psd-templates-in-photopea/" : "//www.photopea.com/api/plugins"); TYPE==0 ? "//www.photopea.com/tuts/publish-your-psd-templates-in-photopea/" : "//www.photopea.com/api/plugins");
@ -153,7 +163,8 @@
var out = []; var out = [];
if (caut==-2) printAuthors (tpls, out); if (caut==-2) printAuthors (tpls, out);
else if(caut==-3) printInstalled(tpls, out); else if(caut==-3) printInstalled(tpls, out);
else makeView(tpls,out,twds,wds,ccat,caut,citm); else makeView(tpls,out,twds,wds,ccat,caut,citm, w-(tiny ? 2*12 : 210+2*30));
itms.innerHTML=out.join("\n"); itms.innerHTML=out.join("\n");
@ -163,9 +174,13 @@
if(citm==-1) { if(citm==-1) {
var ords = document.getElementsByClassName("order"); var ords = document.getElementsByClassName("order");
for(var i=0; i<3; i++) ords[i].setAttribute("class", "order"+(i==ordr ? " blue":"")); for(var i=0; i<3; i++) ords[i+1].setAttribute("class", "order"+(i==ordr ? " blue":""));
} }
} }
function showMenu() {
var non = cats.style.display=="none";
cats.style.display=non?"":"none";
}
function backClicked(e) { function backClicked(e) {
if(IFR) rebuild(""); if(IFR) rebuild("");
@ -218,13 +233,19 @@
<div id="cont"> <div id="cont">
<div id="search"> <div id="search">
<span onclick="showMenu() " class="order">☰</span>
<span onclick="setOrder(0)" class="order blue">Hot</span> <span onclick="setOrder(0)" class="order blue">Hot</span>
<span onclick="setOrder(1)" class="order">New</span> <span onclick="setOrder(1)" class="order">New</span>
<span onclick="setOrder(2)" class="order" style="margin-right:2em">Top</span> <span onclick="setOrder(2)" class="order" style="margin-right:1.7em">Top</span>
<span style="display:inline-block"> <span style="display:inline-block">
<label>Search:</label> <input type="text" id="kwds" oninput="updateView()" style="margin-right:1.5em;"></input> <svg width="20px" height="20px" viewBox="0 0 24 24" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" style="vertical-align:middle;"><defs><style>.cls-1{fill:none;stroke:#a5a5a5;stroke-miterlimit:10;stroke-width:2.2px;}</style></defs><circle class="cls-1" cx="9.14" cy="9.14" r="7.64"/><line class="cls-1" x1="22.5" y1="22.5" x2="14.39" y2="14.39"/></svg>
<input type="text" id="kwds" oninput="updateView()" style="margin-right:0.5em;" size="10"></input>
</span> </span>
<a id="add_link" href="//www.photopea.com/tuts/publish-your-psd-templates-in-photopea/" target="_blank">Add your own template!</a> <a id="add_link" href="//www.photopea.com/tuts/publish-your-psd-templates-in-photopea/" target="_blank">
<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="vertical-align:middle;">
<path d="M15 12H12M12 12H9M12 12V9M12 12V15M17 21H7C4.79086 21 3 19.2091 3 17V7C3 4.79086 4.79086 3 7 3H17C19.2091 3 21 4.79086 21 7V17C21 19.2091 19.2091 21 17 21Z" stroke="#a5a5a5" stroke-width="2" stroke-linecap="round"/>
</svg>
</a>
</div> </div>
<div id="back"> <div id="back">
<span class="back" onclick="backClicked()">&lt; Back</span> <span class="back" onclick="backClicked()">&lt; Back</span>

28
www.photopea.com/templates/templates.css
View File

@ -2,20 +2,20 @@
body { background-color:#333333; font-family:"Open Sans"; color:#a5a5a5; padding:0; margin:0; font-size:14px; } body { background-color:#333333; font-family:"Open Sans"; color:#a5a5a5; padding:0; margin:0; font-size:14px; }
#cont { background-color:#1d1d1d; padding: 26px 0 0 30px; width:100%; } #cont { background-color:#1d1d1d; width:100%; }
a { /*text-decoration: inherit;*/ color: inherit; } a { /*text-decoration: inherit;*/ color: inherit; }
.title { display:block; color:white; } .title { display:block; color:white; }
.item { position:relative; display:inline-block; margin:0 14px 20px 0; overflow:hidden; } .item { position:relative; display:inline-block; margin:0 14px 24px 0; overflow:hidden; }
.item img { height: 100%; width: 100%; object-fit: contain; cursor:pointer; } .item img { height: 100%; width: 100%; object-fit: contain; cursor:pointer; border-radius:12px; background-color:#333333; }
.item img:hover { object-fit: cover; } .item img:hover { object-fit: cover; }
.cat { margin:9px; padding:2px 0px; cursor:pointer; } .cat { margin:9px; padding:2px 0px; cursor:pointer; }
.top { margin-left: 0px; } .top { margin-left: 0px; }
.clickable: { cursor:pointer; } .clickable: { cursor:pointer; }
.blue { border-bottom: 3px solid #00eeff; margin-bottom:-3px; } .blue { border-bottom: 3px solid #00eeff; margin-bottom:-3px; }
.clickable:hover {color:#00eeff;} .clickable:hover {color:#00eeff;}
.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; } .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.2em; border-radius:6px; }
.count { float:right; } .count { float:right; }
.cat_title {font-size:1.6em; display:inline-block; margin:4px 0 10px 0;} .cat_title {font-size:1.6em; display:inline-block; margin:4px 0 10px 0;}
.t2 {font-size:1.2em; } .t2 {font-size:1.2em; }
@ -25,31 +25,21 @@
h1 {font-size:2em; margin-top:0; margin-bottom:0.4em; font-weight:normal; } h1 {font-size:2em; margin-top:0; margin-bottom:0.4em; font-weight:normal; }
#cats { padding:0px 20px; min-width:180px; color:white; } #cats { padding:0px 20px; min-width:180px; color:white; }
#cats a { text-decoration:none; } #cats a { text-decoration:none; }
#search { font-size:1.3em; margin-bottom: 24px; line-height:2em; } #search { font-size:1.2em; margin-bottom: 1em; line-height:2em; user-select:none; }
#kwds { font-size:1.0em; background-color: black; border:none; color:white; padding:3px; margin-left:0.5em; } #kwds { font-size:1.0em; background-color: black; border:none; color:white; padding:3px; margin-left:0.5em; border-radius:6px; border:1.5px solid rgba(255,255,255,0.25); }
.order { margin-right:1.5em; cursor:pointer; } .order { margin-right:1.3em; cursor:pointer; }
.post {min-width:1000px; margin-top:4px;}
.post_big { padding:24px; }
.clc { text-decoration:none; } .clc { text-decoration:none; }
.clc:hover { color:#00eeff; } .clc:hover { color:#00eeff; }
.scrollable { .scrollable {
overflow-y: scroll; overflow-y: scroll;
/* for Firefox: */ /* for Firefox: */
scrollbar-color: #222222 #1d1d1d; scrollbar-color: rgba(255,255,255,0.15) rgba(0,0,0,0);
scrollbar-width: thin; 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 { .flexrow {
display:flex; display:flex;
flex-flow:row; flex-flow:row;

41
www.photopea.com/templates/templates.js
View File

@ -62,7 +62,7 @@
out.push("</table>"); out.push("</table>");
} }
function makeView(tps,out,twds,wds,curc,caut,cit) { function makeView(tps,out,twds,wds,curc,caut,cit, w) {
var list = tps.list, cts=tps.categories; var list = tps.list, cts=tps.categories;
if(cit==-1) { if(cit==-1) {
if(caut!=-1) out.push("<h1 style=\"font-size:2.4em\"><a "+OC("-a")+" class=\"clc\">×</a> <b>"+escapeHtml(tps.authors[caut][1])+"</b></h1>"); if(caut!=-1) out.push("<h1 style=\"font-size:2.4em\"><a "+OC("-a")+" class=\"clc\">×</a> <b>"+escapeHtml(tps.authors[caut][1])+"</b></h1>");
@ -82,15 +82,29 @@
} }
if(occ==0) continue; if(occ==0) continue;
} }
makeItem(tps,i, cts,out, false); if(N<300) makeItem(tps,i, cts,out, false, w);
N++; U+=tpl[7]; S+=tpl[8]; N++; U+=tpl[7]; S+=tpl[8];
} }
if(caut!=-1) out[oi]="<p>"+N+" Templates • "+printNum(U)+" "+uses()+" • "+printBytes(S)+"</p>"; if(caut!=-1) out[oi]="<p>"+N+" Templates • "+printNum(U)+" "+uses()+" • "+printBytes(S)+"</p>";
} }
else { else {
var tpl = list[cit]; var tpl = list[cit];
makeItem(tps,cit,cts,out, true); makeItem(tps,cit,cts,out, true, w);
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>"); var scr = document.createElement("script");
var ats = { "async":"","defer":"","crossorigin":"anonymous",
"src":"https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v22.0&appId=423117247858550" };
for(var at in ats) scr.setAttribute(at, ats[at]);
document.body.appendChild(scr);
var url = "https://www.photopea.com/templates#"+tempID(tpl);//, href = window.location.href, ioh=href.indexOf("#");
//var out = [];
out.push("<div id=\"fb-root\"></div>");
out.push("<div style=\"background-color:white; max-width:1000px; margin-right:16px;\"><div class=\"fb-comments\" data-href=\""+url+"\" data-width=\"100%\" data-order-by=\"reverse_time\" data-numposts=\"5\"></div></div>");
//var div = document.createElement("div");
//div.innerHTML = out.join("\n");
//document.body.appendChild(div);
//out.push("<iframe src=\"comments.html#"+tempID(tpl)+"\" frameborder=\"0\" data-order-by=\"time\" style=\"border:none; max-width:800px; width:calc(100% - 20px); height:800px; background-color:white;\"></iframe>");
} }
} }
@ -108,21 +122,22 @@
t.setAttribute("style", "object-position: 50% 50%;"); t.setAttribute("style", "object-position: 50% 50%;");
} }
function toID(str) { return str.toLowerCase().replace(/\s+/g, "-")+".html"; } function toID(str) { return str.toLowerCase().replace(/\s+/g, "-")+".html"; }
function makeItem(tps, ind,cts,lst, big) { function makeItem(tps, ind,cts,lst, big, rst) {
var tall = window.innerWidth*0.8<window.innerHeight;
var tpl = tps.list[ind], gotR = RSRC.indexOf(tpl[3])!=-1; var tpl = tps.list[ind], gotR = RSRC.indexOf(tpl[3])!=-1;
var rst = window.innerWidth-(245+30)-2; //console.log(iw); //console.log(iw);
var num = 1; while(rst/num>300) num++; var num = 1; while(rst/num>340) num++;
var cc = Math.floor(rst/num); //console.log(cc); var cc = Math.floor(rst/num); //console.log(cc);
var isz = cc-16; //console.log(isz); var isz = cc-16; //console.log(isz);
var tit = escapeHtml(tpl[9]); var tit = escapeHtml(tpl[9]);
var lim = ~~(isz/9); //console.log(tpl); var lim = ~~(isz/9); //console.log(tpl);
if(big) isz=rst/2; if(big) isz=tall ? rst-14 : rst/2;
var wi = (isz+"px"); var wi = (isz+"px");
var hi = ((isz*9.3/16)+"px"); var hi = ((isz*9/16)+"px");
lst.push("<div class=\"item "+(big?"flexrow":"tiny")+"\" "+(big?"":"style=\"width:"+wi+";\" ")+">"); lst.push("<div class=\"item "+(big?(tall?"":"flexrow"):"tiny")+"\" "+(big?"":"style=\"width:"+wi+";\" ")+">");
var iurl = tpl[4]; //(Math.random()<0.5?"wide.png":"tall.png"); // tpl[3] var iurl = tpl[4]; //(Math.random()<0.5?"wide.png":"tall.png"); // tpl[3]
//* //*
@ -135,7 +150,7 @@
//if(big) lst.push("<div class=\"openimg\" style=\"width:"+wi+"; height:"+hi+";\" "+(big ? "onclick=\"itemClicked("+ind+")\" title=\"Open &quot;"+tit+"&quot;\"" : "")+"><br/><br/>Open</div>"); //if(big) lst.push("<div class=\"openimg\" style=\"width:"+wi+"; height:"+hi+";\" "+(big ? "onclick=\"itemClicked("+ind+")\" title=\"Open &quot;"+tit+"&quot;\"" : "")+"><br/><br/>Open</div>");
if(!big) lst.push("</a>"); if(!big) lst.push("</a>");
lst.push("</div>"); // ict lst.push("</div>"); // ict
lst.push("<div class=\""+"post"+(big?"_big":"")+"\">"); // cmt lst.push("<div style=\""+(big?(tall?"padding-top:20px;":"padding:24px;"):"margin-top:16px;min-width:1000px;")+"\">"); // cmt
if(!big) lst.push("<a class=\"clc\" "+OC("t-"+tempID(tpl))+" title=\""+tit+"\">"); if(!big) lst.push("<a class=\"clc\" "+OC("t-"+tempID(tpl))+" title=\""+tit+"\">");
var tag = big?"h1":"span"; var tag = big?"h1":"span";
@ -152,7 +167,7 @@
if(big) { if(big) {
lst.push("<p style=\"white-space: pre-line;\">"+findLinks(escapeHtml(tpl[10]))+"</p>"); lst.push("<p style=\"white-space: pre-line;\">"+findLinks(escapeHtml(tpl[10]))+"</p>");
lst.push("<p style=\"font-size:1.5em; margin-bottom: 0em;\">"); lst.push("<p style=\"font-size:1.3em; margin-bottom: 0em;\">");
var dstr = printDate(tpl[2]); var dstr = printDate(tpl[2]);
lst.push("<span title=\""+printNum(tpl[6])+" views"+"\">"+printNum(tpl[7])+" "+uses()+"</span>") lst.push("<span title=\""+printNum(tpl[6])+" views"+"\">"+printNum(tpl[7])+" "+uses()+"</span>")
@ -273,7 +288,7 @@
function getCats(tps, curr,out) { function getCats(tps, curr,out) {
var cts=tps.categories, ccnt = getCatCounts(tps); var cts=tps.categories, ccnt = getCatCounts(tps);
out.push("<br/>"); out.push("<br/>");
out.push("<span class=\"cat top clickable\"><a "+OC("authors")+">AUTHORS</a></span>"); out.push("<span class=\"cat top clickable\"><a "+OC("authors")+">AUTHORS</a></span><br/>");
out.push("<span class=\"cat_title\">CATEGORIES</span>"); out.push("<span class=\"cat_title\">CATEGORIES</span>");
for(var cat in cts) { for(var cat in cts) {
if(ccnt[cat]==0) continue; if(ccnt[cat]==0) continue;