From f69e19f43f1a3a2aaa34bc15906ee2b861014111 Mon Sep 17 00:00:00 2001 From: Thomas Lynch Date: Wed, 15 Dec 2021 14:12:59 +1100 Subject: [PATCH] minimise button #292 --- gulp/res/css/style.css | 4 ++++ gulp/res/js/threadwatcher.js | 20 +++++++++++++++++--- gulp/res/js/watchlist.js | 18 +++++++++++++++--- views/includes/threadwatcher.pug | 2 +- views/mixins/threadwatcher.pug | 8 +++++--- 5 files changed, 42 insertions(+), 10 deletions(-) diff --git a/gulp/res/css/style.css b/gulp/res/css/style.css index 0940766f..2dda098b 100644 --- a/gulp/res/css/style.css +++ b/gulp/res/css/style.css @@ -1203,6 +1203,10 @@ input[type="file"] { flex-direction: column; } +#threadwatcher.minimised .watched-thread { + display: none; +} + .watched-thread { width: 100%; justify-content: space-between; diff --git a/gulp/res/js/threadwatcher.js b/gulp/res/js/threadwatcher.js index f1e24457..8bca416c 100644 --- a/gulp/res/js/threadwatcher.js +++ b/gulp/res/js/threadwatcher.js @@ -1,5 +1,19 @@ -function threadwatcher(locals) {var pug_html = "", pug_mixins = {}, pug_interp;pug_mixins["threadwatcher"] = pug_interp = function(){ +function pug_attr(t,e,n,r){if(!1===e||null==e||!e&&("class"===t||"style"===t))return"";if(!0===e)return" "+(r?t:t+'="'+t+'"');var f=typeof e;return"object"!==f&&"function"!==f||"function"!=typeof e.toJSON||(e=e.toJSON()),"string"==typeof e||(e=JSON.stringify(e),n||-1===e.indexOf('"'))?(n&&(e=pug_escape(e))," "+t+'="'+e+'"'):" "+t+"='"+e.replace(/'/g,"'")+"'"} +function pug_classes(s,r){return Array.isArray(s)?pug_classes_array(s,r):s&&"object"==typeof s?pug_classes_object(s):s||""} +function pug_classes_array(r,a){for(var s,e="",u="",c=Array.isArray(a),g=0;g]/;function threadwatcher(locals) {var pug_html = "", pug_mixins = {}, pug_interp;; + var locals_for_with = (locals || {}); + + (function (minimised) { + pug_mixins["threadwatcher"] = pug_interp = function(minimised){ var block = (this && this.block), attributes = (this && this.attributes) || {}; -pug_html = pug_html + "\u003Cdiv class=\"flex-center\" id=\"threadwatcher\"\u003E\u003Cdiv class=\"row noselect\" id=\"threadwatcher-dragHandle\"\u003EThread Watcher\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E"; +pug_html = pug_html + "\u003Cdiv" + (pug_attr("class", pug_classes(["flex-center",(minimised ? 'minimised' : '')], [false,true]), false, false)+" id=\"threadwatcher\"") + "\u003E\u003Cdiv class=\"row noselect\" id=\"threadwatcher-dragHandle\"\u003E\u003Cspan class=\"fw text-center\"\u003EThread Watcher \u003C\u002Fspan\u003E\u003Cspan class=\"mr-0 close\"\u003E" + (pug_escape(null == (pug_interp = minimised ? '[+]' : '[−]') ? "" : pug_interp)) + "\u003C\u002Fspan\u003E\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E"; }; -pug_mixins["threadwatcher"]();;return pug_html;} \ No newline at end of file +pug_mixins["threadwatcher"](minimised); + }.call(this, "minimised" in locals_for_with ? + locals_for_with.minimised : + typeof minimised !== 'undefined' ? minimised : undefined)); + ;;return pug_html;} \ No newline at end of file diff --git a/gulp/res/js/watchlist.js b/gulp/res/js/watchlist.js index c8c629cc..3645d856 100644 --- a/gulp/res/js/watchlist.js +++ b/gulp/res/js/watchlist.js @@ -1,8 +1,9 @@ class ThreadWatcher { init() { - //read the watchlist map from localstorage + //read the watchlist map and minimised state from localstorage this.watchListMap = new Map(JSON.parse(localStorage.getItem('watchlist'))); + this.minimised = localStorage.getItem('threadwatcher-minimise') === 'true'; //call the updatehandler when storage changes in another context window.addEventListener('storage', e => this.storageEventHandler(e)); @@ -13,7 +14,11 @@ class ThreadWatcher { this.clearButton.addEventListener('click', () => this.clear(), false); //create and insert the watchlist - this.createList(); + this.createList({minimised: this.minimised}); + + //add events for toggling minimised + this.minimiseButton = this.threadWatcher.firstChild.querySelector('.close'); + this.minimiseButton.addEventListener('click', () => this.toggleMinimise()); //check if we are in a thread, and setup events for when the tab is focused/unfocused this.isFocused = document.hasFocus(); @@ -156,6 +161,13 @@ class ThreadWatcher { this.setVisibility(); } + toggleMinimise() { + this.minimised = !this.minimised; + this.minimiseButton.textContent = this.minimised ? '[+]' : '[−]'; + this.threadWatcher.classList.toggle('minimised'); + setLocalStorage('threadwatcher-minimise', this.minimised); + } + //toggles watcher visibility setVisibility() { if (this.threadWatcher) { @@ -165,7 +177,7 @@ class ThreadWatcher { //create the actual thread watcher box and draghandle and insert it into the page createList() { - const threadWatcherHtml = threadwatcher(); + const threadWatcherHtml = threadwatcher({ minimised: this.minimised }); const footer = document.getElementById('bottom'); footer.insertAdjacentHTML('afterend', threadWatcherHtml); this.threadWatcher = document.getElementById('threadwatcher'); diff --git a/views/includes/threadwatcher.pug b/views/includes/threadwatcher.pug index 2df63cf7..015084f0 100644 --- a/views/includes/threadwatcher.pug +++ b/views/includes/threadwatcher.pug @@ -1,2 +1,2 @@ include ../mixins/threadwatcher.pug -+threadwatcher() ++threadwatcher(minimised) diff --git a/views/mixins/threadwatcher.pug b/views/mixins/threadwatcher.pug index 45f6f71b..c8e92078 100644 --- a/views/mixins/threadwatcher.pug +++ b/views/mixins/threadwatcher.pug @@ -1,3 +1,5 @@ -mixin threadwatcher() - .flex-center#threadwatcher - .row.noselect#threadwatcher-dragHandle Thread Watcher +mixin threadwatcher(minimised) + .flex-center#threadwatcher(class=(minimised ? 'minimised' : '')) + .row.noselect#threadwatcher-dragHandle + span.fw.text-center Thread Watcher + span.mr-0.close #{minimised ? '[+]' : '[−]'}