diff options
Diffstat (limited to 'public')
| -rw-r--r-- | public/index.php | 57 | ||||
| -rwxr-xr-x | public/static/img/icons/star-gray.png | bin | 0 -> 623 bytes | |||
| -rwxr-xr-x | public/static/img/icons/star.png | bin | 0 -> 670 bytes | |||
| -rw-r--r-- | public/static/scripts/favorites.js | 93 | ||||
| -rw-r--r-- | public/static/scripts/tabs.js | 56 | ||||
| -rw-r--r-- | public/static/style.css | 6 |
6 files changed, 201 insertions, 11 deletions
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'); <section class="box"> <div class="tab row wrap gap-8"> <div class="grow"> + <div style="display: none;"> + <p id="file-id"><?= $file['id'] ?></p> + <p id="file-mime"><?= $file['mime'] ?></p> + <p id="file-extension"><?= $file['extension'] ?></p> + <p id="file-size"><?= $file['size'] ?></p> + </div> <?php if (isset($file['title'])): ?> <p><i><?= $file['title'] ?></i></p> <?php else: ?> @@ -304,7 +310,7 @@ $privacy_exists = is_file($_SERVER['DOCUMENT_ROOT'] . '/static/PRIVACY.txt'); <div class="tab"> <p>Form Upload</p> </div> - <div class="tabs" id="form-upload-tabs" style="display: none;"> + <div class="tab-category tabs" id="form-upload-tabs" style="display: none;"> <div class="form-upload-tab tab" id="form-tab-file"> <button onclick="showUploadType('file')" class="transparent"> <p>File Upload</p> @@ -421,11 +427,24 @@ $privacy_exists = is_file($_SERVER['DOCUMENT_ROOT'] . '/static/PRIVACY.txt'); </section> <section class="box column" style="display:none"> - <div class="tab"> - <p>Uploaded files<span title="Your file ownership is stored locally." style="cursor:help">*</span></p> + <div class="tab-category tabs" id="file-tabs"> + <div class="tab" id="uploaded-files-tab"> + <button class="transparent"> + <p>Uploaded files<span title="Your file ownership is stored locally." + style="cursor:help">*</span></p> + </button> + </div> + <div class="tab" id="favorite-files-tab"> + <button class="transparent"> + <p>Favorites<span title="Favorite files are stored locally." style="cursor:help">*</span> + </p> + </button> + </div> </div> <div class="content grid grid-3 gap-8" id="uploaded-files"> </div> + <div class="content grid grid-3 gap-8" id="favorite-files" style="display: none;"> + </div> </section> <?php html_footer() ?> @@ -438,6 +457,7 @@ $privacy_exists = is_file($_SERVER['DOCUMENT_ROOT'] . '/static/PRIVACY.txt'); const fileTabButtons = document.getElementById('file-tab-buttons'); fileTabButtons.innerHTML += `<button onclick="navigator.clipboard.writeText('${window.location.href}')">Copy URL</button>`; </script> + <script src="/static/scripts/favorites.js"></script> <?php endif; ?> <?php if ($file && !isset($_SESSION['is_moderator'])): ?> @@ -455,6 +475,7 @@ $privacy_exists = is_file($_SERVER['DOCUMENT_ROOT'] . '/static/PRIVACY.txt'); </script> <script src="/static/scripts/audiorecorder.js"></script> <script src="/static/scripts/options.js"></script> + <script src="/static/scripts/tabs.js"></script> <script> document.querySelectorAll(".remove-script").forEach((x) => { x.remove(); @@ -596,6 +617,9 @@ $privacy_exists = is_file($_SERVER['DOCUMENT_ROOT'] . '/static/PRIVACY.txt'); return; } + showTab('uploaded-files'); + displayTab('file-tabs', 'uploaded-files'); + uploadedFiles.innerHTML = addUploadedFile(json.data) + uploadedFiles.innerHTML; uploadedFiles.parentElement.style.display = 'flex'; textArea.value = ''; @@ -698,6 +722,14 @@ $privacy_exists = is_file($_SERVER['DOCUMENT_ROOT'] . '/static/PRIVACY.txt'); return file; } + function setFormDetailsVisiblity(show) { + formDetails.style.display = show ? 'flex' : 'none'; + formSubmitButton.style.display = show ? 'block' : 'none'; + } + </script> + <script src="/static/scripts/favorites.js"></script> + <script> + // loading already existing uploaded files function loadUploadedFiles() { let files = getUploadedFiles(); @@ -708,7 +740,19 @@ $privacy_exists = is_file($_SERVER['DOCUMENT_ROOT'] . '/static/PRIVACY.txt'); html += addUploadedFile(file); } - uploadedFiles.parentElement.style.display = html.length > 0 ? 'flex' : 'none'; + if (html.length > 0) { + showTab('uploaded-files'); + displayTab('file-tabs', 'uploaded-files'); + } else { + hideTab('uploaded-files'); + } + + if (getFavoriteFiles().length > 0 && html.length == 0) { + showTab('favorite-files'); + displayTab('file-tabs', 'favorite-files'); + } + + uploadedFiles.parentElement.style.display = html.length > 0 || getFavoriteFiles().length > 0 ? 'flex' : 'none'; uploadedFiles.innerHTML = html; } @@ -748,11 +792,6 @@ $privacy_exists = is_file($_SERVER['DOCUMENT_ROOT'] . '/static/PRIVACY.txt'); } } } - - function setFormDetailsVisiblity(show) { - formDetails.style.display = show ? 'flex' : 'none'; - formSubmitButton.style.display = show ? 'block' : 'none'; - } </script> <script src="/static/scripts/form.js"></script> <?php endif; ?> diff --git a/public/static/img/icons/star-gray.png b/public/static/img/icons/star-gray.png Binary files differnew file mode 100755 index 0000000..594bd33 --- /dev/null +++ b/public/static/img/icons/star-gray.png diff --git a/public/static/img/icons/star.png b/public/static/img/icons/star.png Binary files differnew file mode 100755 index 0000000..b88c857 --- /dev/null +++ b/public/static/img/icons/star.png 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); } |
