From e33282db99ccf8a2b2d6aadb71430e42799de6fb Mon Sep 17 00:00:00 2001 From: fatchan Date: Sun, 2 Feb 2020 11:51:24 +1100 Subject: [PATCH] option to hide replies when OP hidden --- gulp/res/js/expand.js | 24 ------------ gulp/res/js/hide.js | 85 ++++++++++++++++++++++++++++++++++++++---- gulp/res/js/modal.js | 2 +- views/mixins/modal.pug | 4 ++ 4 files changed, 83 insertions(+), 32 deletions(-) diff --git a/gulp/res/js/expand.js b/gulp/res/js/expand.js index 3f77bbdb..b4025673 100644 --- a/gulp/res/js/expand.js +++ b/gulp/res/js/expand.js @@ -12,30 +12,6 @@ window.addEventListener('DOMContentLoaded', (event) => { } } - const crispSetting = document.getElementById('crispimages-setting'); - let crispEnabled = localStorage.getItem('crispimages') == 'true'; - const normCss = 'img{image-rendering:auto}'; - const crispCss = `img{ - image-rendering: crisp-edges; - image-rendering: pixelated; - image-rendering: -webkit-optimize-contrast; - -ms-interpolation-mode: nearest-neighbor; - }`; - const mainSheet = document.querySelector('link[rel="stylesheet"]').sheet; - const insertImgCss = () => { - mainSheet.insertRule(crispEnabled ? crispCss : normCss); - } - insertImgCss(); - const changeCrispSetting = (change) => { - crispEnabled = crispSetting.checked; - mainSheet.removeRule(0); - insertImgCss(); - console.log('setting images crisp', crispEnabled); - setLocalStorage('crispimages', crispEnabled); - } - crispSetting.checked = crispEnabled; - crispSetting.addEventListener('change', changeCrispSetting, false); - const volumeSetting = document.getElementById('volume-setting'); let volumeLevel = localStorage.getItem('volume'); const changeVolume = (change) => { diff --git a/gulp/res/js/hide.js b/gulp/res/js/hide.js index f2111b04..98e8c67b 100644 --- a/gulp/res/js/hide.js +++ b/gulp/res/js/hide.js @@ -1,8 +1,15 @@ +/* +setDefaultLocalStorage('hidestubs', false); +let hideStubsEnabled = localStorage.getItem('hidestubs') == 'true'; +*/ +setDefaultLocalStorage('hiderecursive', false); +let hideRecursiveEnabled = localStorage.getItem('hiderecursive') == 'true'; +setDefaultLocalStorage('hideimages', false); +let hideImagesEnabled = localStorage.getItem('hideimages') == 'true'; + const fileInput = document.getElementById('file'); fileInput ? fileInput.style.display = 'none' : void 0; - let hidden; - const loadHiddenStorage = () => { try { const loaded = localStorage.getItem('hidden') @@ -17,7 +24,6 @@ const loadHiddenStorage = () => { setLocalStorage('hidden', '[]'); hidden = new Set(); } - loadHiddenStorage(); const setHidden = (posts, hide) => { @@ -98,8 +104,6 @@ for (let elem of hidden) { setHidden(posts, true); } -setDefaultLocalStorage('hideimages', false); -let hideImagesEnabled = localStorage.getItem('hideimages') == 'true'; const hideImages = () => { const postThumbs = document.getElementsByClassName('file-thumb'); for (thumb of postThumbs) { @@ -110,17 +114,84 @@ if (hideImagesEnabled) { hideImages(); } + window.addEventListener('settingsReady', function(event) { + const mainStyleSheet = document.querySelector('link[rel="stylesheet"]').sheet; + const replaceCssRule = (selectorText, css) => { + const rulesKey = mainStyleSheet.rules != null ? 'rules' : 'cssRules'; + for (let i = 0; i < mainStyleSheet[rulesKey].length; i++) { + const rule = mainStyleSheet[rulesKey][i]; + if(rule.selectorText == selectorText) { + mainStyleSheet.removeRule(i); + return; + } + } + mainStyleSheet.insertRule(css); + return; + } + + const hideRecursiveCss = `.op.hidden ~ .anchor, .op.hidden ~ .post-container { + display: none; + }`; + const hideRecursiveSetting = document.getElementById('hiderecursive-setting'); + hideRecursiveSetting.checked = hideRecursiveEnabled; + hideRecursiveEnabled && replaceCssRule('.post-container.hidden, .catalog-tile.hidden', hideRecursiveCss); + const toggleHideRecursive = () => { + hideRecursiveEnabled = !hideRecursiveEnabled; + replaceCssRule('.op.hidden ~ .anchor, .op.hidden ~ .post-container', hideRecursiveCss); + console.log('toggling recursive hide', hideRecursiveEnabled); + setLocalStorage('hiderecursive', hideRecursiveEnabled); + } + hideRecursiveSetting.addEventListener('change', toggleHideRecursive, false); + +/* + const hideStubsCss = `.post-container.hidden, .catalog-tile.hidden { + visibility: hidden; + margin-top: -1.5em; + height: 0; + }`; + const hideStubsSetting = document.getElementById('hidestubs-setting'); + hideStubsSetting.checked = hideStubsEnabled; + hideStubsEnabled && replaceCssRule('.post-container.hidden, .catalog-tile.hidden', hideStubsCss); + const toggleHideStubs = () => { + hideStubsEnabled = !hideStubsEnabled; + replaceCssRule('.post-container.hidden, .catalog-tile.hidden', hideStubsCss); + console.log('toggling hiding stubs', hideStubsEnabled); + setLocalStorage('hidestubs', hideStubsEnabled); + } + hideStubsSetting.addEventListener('change', toggleHideStubs, false); +*/ + + const crispSetting = document.getElementById('crispimages-setting'); + let crispEnabled = localStorage.getItem('crispimages') == 'true'; + const normCss = 'img{image-rendering:auto}'; + const crispCss = `img{ + image-rendering: crisp-edges; + image-rendering: pixelated; + image-rendering: -webkit-optimize-contrast; + -ms-interpolation-mode: nearest-neighbor; + }`; + replaceCssRule('img', crispEnabled ? crispCss : normCss); + const changeCrispSetting = (change) => { + crispEnabled = crispSetting.checked; + replaceCssRule('img', crispEnabled ? crispCss : normCss); + console.log('setting images crisp', crispEnabled); + setLocalStorage('crispimages', crispEnabled); + } + crispSetting.checked = crispEnabled; + crispSetting.addEventListener('change', changeCrispSetting, false); + //todo: option here and in modal for clearing hide list and unhide all hidden posts - const hideImagesSetting = document.getElementById('hideimages-setting'); + const hideImagesSetting = document.getElementById('hideimages-setting'); hideImagesSetting.checked = hideImagesEnabled; const toggleHideImages = () => { hideImagesEnabled = !hideImagesEnabled setLocalStorage('hideimages', hideImagesEnabled); hideImages(); } - hideImagesSetting.addEventListener('change', toggleHideImages, false); + hideImagesSetting.addEventListener('change', toggleHideImages, false); + }); window.addEventListener('addPost', function(e) { diff --git a/gulp/res/js/modal.js b/gulp/res/js/modal.js index 848c513d..caa556db 100644 --- a/gulp/res/js/modal.js +++ b/gulp/res/js/modal.js @@ -95,7 +95,7 @@ pug_html = pug_html + "\u003Coption" + (pug_attr("value", theme, true, false)) + } }).call(this); -pug_html = pug_html + "\u003C\u002Fselect\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003ELive posts\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"live-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003ENotifications\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"notification-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003EScroll to new posts\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"scroll-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003ELocal time\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"localtime-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003E24h time\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"24hour-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003EShow relative time\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"relative-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003EHide Thumbnails\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"hideimages-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003EVideo\u002FAudio Volume\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"volume-setting\" type=\"range\" min=\"0\" max=\"100\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003ELoop audio\u002Fvideo\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"loop-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003ELimit expand height\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"heightlimit-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003ECrisp image rendering\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"crispimages-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003ECustom CSS\u003C\u002Fdiv\u003E\u003Ctextarea id=\"customcss-setting\"\u003E\u003C\u002Ftextarea\u003E\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E"; +pug_html = pug_html + "\u003C\u002Fselect\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003ELive posts\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"live-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003ENotifications\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"notification-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003EScroll to new posts\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"scroll-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003ELocal time\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"localtime-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003E24h time\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"24hour-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003EShow relative time\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"relative-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003EHide Thumbnails\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"hideimages-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003ERecursive Post Hide\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"hiderecursive-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003EVideo\u002FAudio Volume\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"volume-setting\" type=\"range\" min=\"0\" max=\"100\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003ELoop audio\u002Fvideo\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"loop-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003ELimit expand height\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"heightlimit-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003ECrisp image rendering\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"crispimages-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003ECustom CSS\u003C\u002Fdiv\u003E\u003Ctextarea id=\"customcss-setting\"\u003E\u003C\u002Ftextarea\u003E\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E"; } pug_html = pug_html + "\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E"; }; diff --git a/views/mixins/modal.pug b/views/mixins/modal.pug index ee6db8b4..ddc53d46 100644 --- a/views/mixins/modal.pug +++ b/views/mixins/modal.pug @@ -59,6 +59,10 @@ mixin modal(data) .label Hide Thumbnails label.postform-style.ph-5 input#hideimages-setting(type='checkbox') + .row + .label Recursive Post Hide + label.postform-style.ph-5 + input#hiderecursive-setting(type='checkbox') .row .label Video/Audio Volume label.postform-style.ph-5