From 13f5dbfa5b808299775d8f8a9abf0ef0ef8cbfb6 Mon Sep 17 00:00:00 2001 From: Thomas Lynch Date: Fri, 25 Dec 2020 12:42:35 +0000 Subject: [PATCH] merry christmas, individual image hiding --- gulp/res/css/style.css | 4 ++- gulp/res/js/hideimages.js | 53 +++++++++++++++++++++++++++++++++++++++ gulp/res/js/yous.js | 8 +++--- gulpfile.js | 2 ++ views/mixins/modal.pug | 4 +++ views/mixins/post.pug | 6 ++++- 6 files changed, 71 insertions(+), 6 deletions(-) create mode 100644 gulp/res/js/hideimages.js diff --git a/gulp/res/css/style.css b/gulp/res/css/style.css index ec35023a..9274ce5b 100644 --- a/gulp/res/css/style.css +++ b/gulp/res/css/style.css @@ -188,7 +188,9 @@ pre { .pv-5 { padding: 5px 0; } - +.vh { + visibility: hidden!important; +} #settings, .dummy-link { cursor: pointer; } diff --git a/gulp/res/js/hideimages.js b/gulp/res/js/hideimages.js new file mode 100644 index 00000000..dc81983c --- /dev/null +++ b/gulp/res/js/hideimages.js @@ -0,0 +1,53 @@ +let imageSources = new Set(JSON.parse(localStorage.getItem('hiddenimages'))); + +const toggleAllHidden = (state) => imageSources.forEach(i => toggleSource(i, state)); + +const toggleSource = (source, state) => { + const images = document.querySelectorAll(`img.file-thumb[src="${source}"]`); + images.forEach(i => i.classList[state?'add':'remove']('vh')); +} + +toggleAllHidden(true); + +const toggleHandler = (e) => { + const thumbSource = e.target.dataset.src + const hidden = imageSources.has(thumbSource); + imageSources[hidden?'delete':'add'](thumbSource); + setLocalStorage('hiddenimages', JSON.stringify([...imageSources])); + toggleSource(thumbSource, !hidden); +} + +document.querySelectorAll('.hide-image').forEach(el => { + el.addEventListener('click', toggleHandler, false); +}); + +const handleHiddenImages = (e) => { + //hide any images from this post that should already be hidden + const hasHiddenImages = e.detail.json.files.forEach(f => { + if (imageSources.has(f.filename)) { + toggleSource(f.filename, true); + } + }); + //add the hide toggle link and event listener + if (!e.detail.hover) { + e.detail.post.querySelector('.hide-image').addEventListener('click', toggleHandler, false); + } +} + +window.addEventListener('addPost', handleHiddenImages, false); + +window.addEventListener('settingsReady', () => { + + imageSourcesList = document.getElementById('hiddenimages-setting'); + imageSourcesList.value = [...imageSources]; + const imageSourcesListClearButton = document.getElementById('hiddenimages-clear'); + const clearImageSources = () => { + toggleAllHidden(false); + imageSources = new Set(); + imageSourcesList.value = ''; + setLocalStorage('hiddenimages', '[]'); + console.log('cleared hidden images list'); + } + imageSourcesListClearButton.addEventListener('click', clearImageSources, false); + +}); diff --git a/gulp/res/js/yous.js b/gulp/res/js/yous.js index bc42f84c..9b868d3c 100644 --- a/gulp/res/js/yous.js +++ b/gulp/res/js/yous.js @@ -4,7 +4,7 @@ let yousEnabled = localStorage.getItem('yous-setting') == 'true'; let savedYous = new Set(JSON.parse(localStorage.getItem('yous'))); let yousList; -const toggleAll = (state) => savedYous.forEach(y => toggleOne(y, state)); +const toggleAllYous = (state) => savedYous.forEach(y => toggleOne(y, state)); const toggleQuotes = (quotes, state) => { quotes.forEach(q => { @@ -28,7 +28,7 @@ const toggleOne = (you, state) => { } if (yousEnabled) { - toggleAll(yousEnabled); + toggleAllYous(yousEnabled); } const handleNewYous = (e) => { @@ -89,7 +89,7 @@ window.addEventListener('settingsReady', () => { const yousListClearButton = document.getElementById('youslist-clear'); const clearYousList = () => { if (yousEnabled) { - toggleAll(false); + toggleAllYous(false); } savedYous = new Set(); yousList.value = ''; @@ -102,7 +102,7 @@ window.addEventListener('settingsReady', () => { const toggleYousSetting = () => { yousEnabled = !yousEnabled; setLocalStorage('yous-setting', yousEnabled); - toggleAll(yousEnabled); + toggleAllYous(yousEnabled); console.log('toggling yous', yousEnabled); } yousSetting.checked = yousEnabled; diff --git a/gulpfile.js b/gulpfile.js index 4a15e122..6e4982aa 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -311,6 +311,7 @@ const settings = ${JSON.stringify(configs.frontendScriptDefault)}; `!${paths.scripts.src}/hidefileinput.js`, `!${paths.scripts.src}/dragable.js`, `!${paths.scripts.src}/filters.js`, + `!${paths.scripts.src}/hideimages.js`, `!${paths.scripts.src}/yous.js`, `!${paths.scripts.src}/catalog.js`, `!${paths.scripts.src}/time.js`, @@ -323,6 +324,7 @@ const settings = ${JSON.stringify(configs.frontendScriptDefault)}; return gulp.src([ `${paths.scripts.src}/hidefileinput.js`, `${paths.scripts.src}/dragable.js`, + `${paths.scripts.src}/hideimages.js`, `${paths.scripts.src}/yous.js`, `${paths.scripts.src}/filters.js`, `${paths.scripts.src}/catalog.js`, diff --git a/views/mixins/modal.pug b/views/mixins/modal.pug index 5d7a3270..c042f09c 100644 --- a/views/mixins/modal.pug +++ b/views/mixins/modal.pug @@ -113,6 +113,10 @@ mixin modal(data) .label (You)s input.mr-1#youslist-setting(type='text' readonly) input#youslist-clear(type='button' value='Clear') + .row + .label Hidden images + input.mr-1#hiddenimages-setting(type='text' readonly) + input#hiddenimages-clear(type='button' value='Clear') .row .label Cache input.mr-1#hovercachelist-setting(type='text' readonly) diff --git a/views/mixins/post.pug b/views/mixins/post.pug index 3a9f2ebc..c62a68dc 100644 --- a/views/mixins/post.pug +++ b/views/mixins/post.pug @@ -72,8 +72,12 @@ mixin post(post, truncate, manage=false, globalmanage=false, ban=false, overboar span.post-file-info span: a(href='/file/'+file.filename title='Download '+file.originalFilename download=file.originalFilename) #{post.spoiler || file.spoiler ? 'Spoiler File' : file.originalFilename} br + span.jsonly + b [ + a.dummy-link.hide-image(data-src=`/file/thumb-${file.hash}${file.thumbextension}`) Hide + b ] span - | (#{file.sizeString} + | (#{file.sizeString} if file.geometryString | , #{file.geometryString} if file.durationString