From 3af4598fc90a6d06f09a70adfd720576e06a7253 Mon Sep 17 00:00:00 2001 From: Cohee Date: Mon, 17 Jul 2023 14:54:40 +0300 Subject: [PATCH] Renamable backgrounds --- public/index.html | 11 +++++++- public/script.js | 68 +++++++++++++++++++++++++++++++++++------------ public/style.css | 22 +++++++++++---- server.js | 21 +++++++++++++++ 4 files changed, 99 insertions(+), 23 deletions(-) diff --git a/public/index.html b/public/index.html index 790bbf883..458c9c8a1 100644 --- a/public/index.html +++ b/public/index.html @@ -3107,6 +3107,15 @@ +
+
+
+
+
+
+
+
+
@@ -3847,4 +3856,4 @@ - \ No newline at end of file + diff --git a/public/script.js b/public/script.js index 88949952c..c6b546ce4 100644 --- a/public/script.js +++ b/public/script.js @@ -966,22 +966,25 @@ async function getBackgrounds() { const getData = await response.json(); //background = getData; //console.log(getData.length); + $("#bg_menu_content").empty(); for (const bg of getData) { - const thumbPath = getThumbnailUrl('bg', bg); - $("#bg_menu_content").append( - `
-
-
- ${bg - .replace('.png', '') - .replace('.jpg', '') - .replace('.webp', '')} -
-
` - ); + const template = getBackgroundFromTemplate(bg); + $("#bg_menu_content").append(template); } } } + +function getBackgroundFromTemplate(bg) { + const thumbPath = getThumbnailUrl('bg', bg); + const template = $('#background_template .bg_example').clone(); + template.attr('bgfile', bg); + template.attr('title', bg); + template.find('.bg_button').attr('bgfile', bg); + template.css('background-image', `url('${thumbPath}')`); + template.find('.BGSampleTitle').text(bg.slice(0, bg.lastIndexOf('.'))); + return template; +} + async function isColab() { is_checked_colab = true; const response = await fetch("/iscolab", { @@ -5673,11 +5676,7 @@ function read_bg_load(input) { "background-image", `url("${e.target.result}")` ); - $("#form_bg_download").after( - `
-
-
` - ); + $("#form_bg_download").after(getBackgroundFromTemplate(html)); }, error: function (jqXHR, exception) { console.log(exception); @@ -7074,6 +7073,41 @@ $(document).ready(function () { }); }); + + $(document).on('click', '.bg_example_edit', async function (e) { + e.stopPropagation(); + const old_bg = $(this).attr('bgfile'); + + if (!old_bg) { + console.debug('no bgfile'); + return; + } + + const fileExtension = old_bg.split('.').pop(); + const old_bg_extensionless = old_bg.replace(`.${fileExtension}`, ''); + const new_bg_extensionless = await callPopup('

Enter new background name:

', 'input', old_bg_extensionless); + const new_bg = `${new_bg_extensionless}.${fileExtension}`; + + if (old_bg_extensionless === new_bg_extensionless) { + console.debug('new_bg === old_bg'); + return; + } + + const data = { old_bg, new_bg }; + const response = await fetch('/renamebackground', { + method: 'POST', + headers:getRequestHeaders(), + body: JSON.stringify(data), + cache: 'no-cache', + }); + + if (response.ok) { + await getBackgrounds(); + } else { + toastr.warning('Failed to rename background'); + } + }); + $(document).on("click", ".bg_example_cross", function (e) { e.stopPropagation(); bg_file_for_del = $(this); diff --git a/public/style.css b/public/style.css index 4f9556170..fef8a876c 100644 --- a/public/style.css +++ b/public/style.css @@ -1626,6 +1626,7 @@ body.big-avatars .ch_description { cursor: pointer; aspect-ratio: 16/9; justify-content: flex-end; + position: relative; } .BGSampleTitle { @@ -1642,12 +1643,10 @@ body.big-avatars .ch_description { font-size: calc(var(--fontScale) * 0.9em); } -.bg_example_cross { +.bg_button { width: 15px; height: 15px; - position: relative; - /* float: right; */ - right: 10px; + position: absolute; top: 5px; cursor: pointer; opacity: 0.7; @@ -1658,6 +1657,19 @@ body.big-avatars .ch_description { padding: 0; margin: 0; filter: drop-shadow(0px 0px 3px white); + transition: opacity 0.2s ease-in-out; +} + +.bg_button:hover { + opacity: 1; +} + +.bg_example_cross { + right: 10px; +} + +.bg_example_edit { + left: 10px; } .no-border { @@ -5383,4 +5395,4 @@ body.waifuMode .zoomed_avatar { background-color: var(--SmartThemeBlurTintColor); text-align: center; line-height: 14px; -} \ No newline at end of file +} diff --git a/server.js b/server.js index e6e79cba8..96c34bbda 100644 --- a/server.js +++ b/server.js @@ -1338,6 +1338,27 @@ app.post("/delchat", jsonParser, function (request, response) { return response.send('ok'); }); +app.post('/renamebackground', jsonParser, function (request, response) { + if (!request.body) return response.sendStatus(400); + + const oldFileName = path.join('public/backgrounds/', sanitize(request.body.old_bg)); + const newFileName = path.join('public/backgrounds/', sanitize(request.body.new_bg)); + + if (!fs.existsSync(oldFileName)) { + console.log('BG file not found'); + return response.sendStatus(400); + } + + if (fs.existsSync(newFileName)) { + console.log('New BG file already exists'); + return response.sendStatus(400); + } + + fs.renameSync(oldFileName, newFileName); + invalidateThumbnail('bg', request.body.old_bg); + return response.send('ok'); +}); + app.post("/downloadbackground", urlencodedParser, function (request, response) { response_dw_bg = response; if (!request.body || !request.file) return response.sendStatus(400);