From 7b50348c8c0366f0ae83ffcf9a0caea9c2b0498a Mon Sep 17 00:00:00 2001 From: ilotterytea Date: Mon, 23 Jun 2025 19:34:35 +0500 Subject: feat: favorite button --- public/index.php | 57 +++++++++++++++++---- public/static/img/icons/star-gray.png | Bin 0 -> 623 bytes public/static/img/icons/star.png | Bin 0 -> 670 bytes public/static/scripts/favorites.js | 93 ++++++++++++++++++++++++++++++++++ public/static/scripts/tabs.js | 56 ++++++++++++++++++++ public/static/style.css | 6 ++- 6 files changed, 201 insertions(+), 11 deletions(-) create mode 100755 public/static/img/icons/star-gray.png create mode 100755 public/static/img/icons/star.png create mode 100644 public/static/scripts/favorites.js create mode 100644 public/static/scripts/tabs.js (limited to 'public') diff --git a/public/index.php b/public/index.php index 73b4d18..ea4bde7 100644 --- a/public/index.php +++ b/public/index.php @@ -196,6 +196,12 @@ $privacy_exists = is_file($_SERVER['DOCUMENT_ROOT'] . '/static/PRIVACY.txt');
+
+

+

+

+

+

@@ -304,7 +310,7 @@ $privacy_exists = is_file($_SERVER['DOCUMENT_ROOT'] . '/static/PRIVACY.txt');

Form Upload

-
@@ -438,6 +457,7 @@ $privacy_exists = is_file($_SERVER['DOCUMENT_ROOT'] . '/static/PRIVACY.txt'); const fileTabButtons = document.getElementById('file-tab-buttons'); fileTabButtons.innerHTML += ``; + @@ -455,6 +475,7 @@ $privacy_exists = is_file($_SERVER['DOCUMENT_ROOT'] . '/static/PRIVACY.txt'); + + + diff --git a/public/static/img/icons/star-gray.png b/public/static/img/icons/star-gray.png new file mode 100755 index 0000000..594bd33 Binary files /dev/null and b/public/static/img/icons/star-gray.png differ diff --git a/public/static/img/icons/star.png b/public/static/img/icons/star.png new file mode 100755 index 0000000..b88c857 Binary files /dev/null and b/public/static/img/icons/star.png differ diff --git a/public/static/scripts/favorites.js b/public/static/scripts/favorites.js new file mode 100644 index 0000000..0986d63 --- /dev/null +++ b/public/static/scripts/favorites.js @@ -0,0 +1,93 @@ +function saveFavoriteFiles(files) { + localStorage.setItem('favorite-files', JSON.stringify(files)); +} + +function getFavoriteFiles() { + const files = JSON.parse(localStorage.getItem('favorite-files') ?? '[]'); + return files; +} + +function addFavoriteFile(f) { + if (isFavoriteFile(f)) { + return; + } + + const files = getFavoriteFiles(); + files.push(f); + saveFavoriteFiles(files); +} + +function removeFavoriteFile(f) { + if (!isFavoriteFile(f)) { + return; + } + + let files = getFavoriteFiles(); + files = files.filter((x) => x.id != f.id); + saveFavoriteFiles(files); +} + +function isFavoriteFile(f) { + const files = getFavoriteFiles(); + return files.find((x) => x.id == f.id) != undefined; +} + +window.addEventListener('load', () => { + const tabs = document.getElementById('file-tab-buttons'); + if (tabs != null) { + const addIcon = document.createElement('img'); + addIcon.src = '/static/img/icons/star-gray.png'; + addIcon.alt = 'Favorite'; + + const delIcon = document.createElement('img'); + delIcon.src = '/static/img/icons/star.png'; + delIcon.alt = 'Unfavorite'; + + const btn = document.createElement('button'); + + const file = { + id: document.getElementById('file-id').innerText, + mime: document.getElementById('file-mime').innerText, + extension: document.getElementById('file-extension').innerText, + size: document.getElementById('file-size').innerText + }; + + btn.addEventListener('click', (e) => { + if (isFavoriteFile(file)) { + removeFavoriteFile(file); + } else { + addFavoriteFile(file); + } + + btn.innerHTML = ''; + + const isf = isFavoriteFile(file); + + btn.appendChild(isf ? delIcon : addIcon); + btn.title = isf ? 'Unfavorite this file' : 'Favorite file'; + }); + + const isf = isFavoriteFile(file); + + btn.appendChild(isf ? delIcon : addIcon); + btn.title = isf ? 'Unfavorite this file' : 'Favorite file'; + + tabs.appendChild(btn); + } + + const files = document.getElementById('favorite-files'); + if (files != null) { + const data = getFavoriteFiles(); + if (data.length > 0) { + files.parentElement.style.display = 'flex'; + files.innerHTML = ''; + enableTab('favorite-files'); + } else { + disableTab('favorite-files'); + } + data.forEach((x) => { + const html = addUploadedFile(x); + files.innerHTML += html; + }); + } +}); \ No newline at end of file diff --git a/public/static/scripts/tabs.js b/public/static/scripts/tabs.js new file mode 100644 index 0000000..fb8d598 --- /dev/null +++ b/public/static/scripts/tabs.js @@ -0,0 +1,56 @@ +function displayTab(category, id) { + const tabs = document.querySelectorAll(`#${category} .tab`); + tabs.forEach((tab) => { + let tabId = tab.getAttribute('id'); + tabId = tabId.substring(0, tabId.length - 4); + + tab.setAttribute('show-disabled', tabId != id); + + const content = document.getElementById(tabId); + if (content) { + let display = 'flex'; + if (content.classList.contains('grid')) { + display = 'grid'; + } + content.style.display = tabId == id ? display : 'none'; + } + }); +} + +function enableTab(id) { + document.getElementById(`${id}-tab`).style.display = 'flex'; +} + +function disableTab(id) { + document.getElementById(`${id}-tab`).style.display = 'none'; +} + +function hideTab(id) { + disableTab(id); + document.getElementById(id).style.display = 'none'; +} + +function showTab(id) { + enableTab(id); + const content = document.getElementById(id); + if (content) { + content.style.display = content.classList.contains('grid') ? 'grid' : 'flex'; + } +} + +window.addEventListener('load', () => { + const categories = document.querySelectorAll('.tab-category'); + + categories.forEach((c) => { + const category = c.getAttribute('id'); + const tabs = document.querySelectorAll(`#${category} .tab>button`); + tabs.forEach((tab) => { + let id = tab.parentElement.getAttribute('id'); + id = id.substring(0, id.length - 4); + + tab.addEventListener('click', () => displayTab(category, id)); + + console.log(id); + }); + }); +}); \ No newline at end of file diff --git a/public/static/style.css b/public/static/style.css index fbf33cf..51377a4 100644 --- a/public/static/style.css +++ b/public/static/style.css @@ -209,13 +209,15 @@ button[type=submit].fancy:hover { font-weight: bold; } -.tabs>.tab.disabled { +.tabs>.tab.disabled, +.tabs>.tab[show-disabled='true'] { background: var(--box-tab-background-dark); padding: 4px 8px; margin-bottom: -8px; } -.tabs>.tab.disabled:hover { +.tabs>.tab.disabled:hover, +.tabs>.tab[show-disabled='true']:hover { background: var(--box-tab-background-light); } -- cgit v1.2.3