From 5402f856d41f481dfb74f5b7e65838ad8db961b4 Mon Sep 17 00:00:00 2001 From: Thomas Lynch Date: Thu, 9 Dec 2021 03:15:52 +1100 Subject: [PATCH] #292 --- gulp/res/css/style.css | 2 +- gulp/res/js/filters.js | 5 +++ gulp/res/js/watchedthread.js | 4 +-- gulp/res/js/watchlist.js | 66 +++++++++++++++++++++------------- gulpfile.js | 2 +- views/mixins/post.pug | 2 ++ views/mixins/watchedthread.pug | 5 +-- 7 files changed, 56 insertions(+), 30 deletions(-) diff --git a/gulp/res/css/style.css b/gulp/res/css/style.css index 4bc9a92c..fd907ae7 100644 --- a/gulp/res/css/style.css +++ b/gulp/res/css/style.css @@ -1209,7 +1209,7 @@ input[type="file"] { } .watched-thread a { - width: unset + width: unset; margin-right: 5px; } diff --git a/gulp/res/js/filters.js b/gulp/res/js/filters.js index 10c50508..f848614b 100644 --- a/gulp/res/js/filters.js +++ b/gulp/res/js/filters.js @@ -261,6 +261,11 @@ const postMenuChange = function(e) { break; case 'moderate': return moderatePost(postContainer); + case 'watch': + if (postContainer.classList.contains('op')) { + threadWatcher.add(postDataset.board, postDataset.postId, postDataset.subject); + } + return; } toggleFilter(filterType, filterData, hiding); }; diff --git a/gulp/res/js/watchedthread.js b/gulp/res/js/watchedthread.js index 3d30c9a5..91faf54d 100644 --- a/gulp/res/js/watchedthread.js +++ b/gulp/res/js/watchedthread.js @@ -6,9 +6,9 @@ var pug_match_html=/["&<>]/;function watchedthread(locals) {var pug_html = "", p (function (watchedthread) { pug_mixins["watchedthread"] = pug_interp = function(thread){ var block = (this && this.block), attributes = (this && this.attributes) || {}; -pug_html = pug_html + "\u003Cdiv class=\"row watched-thread\"\u003E\u003Ca class=\"close\"\u003EX\u003C\u002Fa\u003E"; +pug_html = pug_html + "\u003Cdiv" + (" class=\"row watched-thread\""+pug_attr("data-id", `${thread.board}-${thread.postId}`, true, false)) + "\u003E\u003Ca class=\"close\"\u003EX\u003C\u002Fa\u003E"; const watchedThreadLink = `/${thread.board}/thread/${thread.postId}.html`; -pug_html = pug_html + "\u003Ca" + (pug_attr("href", watchedThreadLink, true, false)) + "\u003E\u002F" + (pug_escape(null == (pug_interp = thread.board) ? "" : pug_interp)) + "\u002F - " + (pug_escape(null == (pug_interp = thread.subject) ? "" : pug_interp)) + "\u003C\u002Fa\u003E\u003Ca" + (pug_attr("href", `${watchedThreadLink}#bottom`, true, false)) + "\u003E[▼]\u003C\u002Fa\u003E\u003C\u002Fdiv\u003E"; +pug_html = pug_html + "\u003Ca" + (pug_attr("href", watchedThreadLink, true, false)) + "\u003E\u002F" + (pug_escape(null == (pug_interp = thread.board) ? "" : pug_interp)) + "\u002F - " + (pug_escape(null == (pug_interp = thread.subject || 'No subject') ? "" : pug_interp)) + "\u003C\u002Fa\u003E\u003Ca" + (pug_attr("href", `${watchedThreadLink}#bottom`, true, false)) + "\u003E[▼]\u003C\u002Fa\u003E\u003C\u002Fdiv\u003E"; }; pug_mixins["watchedthread"](watchedthread); }.call(this, "watchedthread" in locals_for_with ? diff --git a/gulp/res/js/watchlist.js b/gulp/res/js/watchlist.js index ee17ad87..b1f8bfe7 100644 --- a/gulp/res/js/watchlist.js +++ b/gulp/res/js/watchlist.js @@ -1,68 +1,86 @@ class ThreadWatcher { - constructor() { - this.watchListSet = new Set(JSON.parse(localStorage.getItem('watchlist'))); + init() { + this.watchListMap = new Map(JSON.parse(localStorage.getItem('watchlist'))); this.settingsInput = document.getElementById('watchlist-setting'); - this.settingsInput.value = [...this.watchListSet]; this.clearButton = document.getElementById('watchlist-clear'); - this.clearButton.addEventListener('click', this.clear, false); + this.clear = this.clear.bind(this); + this.clearButton.addEventListener('click', this.clear, false) this.createListHtml(); - this.threadWatcher = document.getElementById('threadwatcher'); - //show this time in draghandle? could also add .spin (same as captcha refresh) when updating this.refreshInterval = setInterval(this.refresh, 60 * 1000); this.refresh(); - - this.add() } refresh() { console.log('refreshing thread watcher'); - // } //pause() { } //resume() { } + updateSettingsList() { + const mapSpread = [...this.watchListMap]; + setLocalStorage('watchlist', JSON.stringify(mapSpread)); + this.settingsInput.value = mapSpread; + } + createListHtml() { const threadWatcherHtml = threadwatcher(); const footer = document.getElementById('bottom'); footer.insertAdjacentHTML('afterend', threadWatcherHtml); + this.threadWatcher = document.getElementById('threadwatcher'); new Dragable('#threadwatcher-dragHandle', '#threadwatcher'); - //todo: add() all ones saved in storage + for (let t of this.watchListMap.entries()) { + console.log(t) + const [board, postId] = t[0].split('-'); + const subject = t[1]; + this.add(board, postId, subject, true); + } } - //fetchThread() {} + fetchThread() { + //todo: if 404, remove() + } - add(board, thread) { - console.log('add'); + add(board, postId, subject, insertOnly=false) { + const key = `${board}-${postId}`; + if (!insertOnly) { + if (this.watchListMap.has(key)) { + return; //already watching + } + console.log('adding', key, 'to watchlist'); + this.watchListMap.set(key, subject); + } //todo: = fetchThread(); - //todo: dedup/prevent dup - //todo: push to watchListSet //todo: modify watchListItemHtml to highlight/bold, if already in selected thread - const watchListItemHtml = watchedthread({ watchedthread: { board: 'test', subject: 'testing 123', postId: 1 } }); + const watchListItemHtml = watchedthread({ watchedthread: { board, postId, subject } }); this.threadWatcher.insertAdjacentHTML('beforeend', watchListItemHtml); const watchedThreadElem = this.threadWatcher.lastChild; const lastClose = watchedThreadElem.querySelector('.close'); lastClose.addEventListener('click', () => { watchedThreadElem.remove(); - this.remove(board, thread); + this.remove(key); }); + this.updateSettingsList(); } - remove(board, thread) { - console.log('remove'); -// + remove(key) { + console.log('removing', key, 'from watchlist'); + this.watchListMap.delete(key); + this.updateSettingsList(); } clear() { - console.log('clear'); - watchList = new Set(); - watchListInput.value = ''; + this.watchListMap = new Map(); + Array.from(this.threadWatcher.children) + .forEach((c, i) => i > 0 && c.remove()); //remove all except first child (the draghandle) setLocalStorage('watchlist', '[]'); console.log('cleared watchlist'); + this.updateSettingsList(); } } -window.addEventListener('settingsReady', () => new ThreadWatcher()); +const threadWatcher = new ThreadWatcher(); +window.addEventListener('settingsReady', () => threadWatcher.init()); diff --git a/gulpfile.js b/gulpfile.js index c29b6be1..6c85a8c8 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -434,10 +434,10 @@ const extraLocals = ${JSON.stringify({ meta: config.get.meta, reverseImageLinksU `${paths.scripts.src}/saveoverboard.js`, `${paths.scripts.src}/hidefileinput.js`, `${paths.scripts.src}/dragable.js`, - `${paths.scripts.src}/watchlist.js`, `${paths.scripts.src}/hideimages.js`, `${paths.scripts.src}/yous.js`, `${paths.scripts.src}/filters.js`, + `${paths.scripts.src}/watchlist.js`, `${paths.scripts.src}/catalog.js`, `${paths.scripts.src}/time.js`, ]) diff --git a/views/mixins/post.pug b/views/mixins/post.pug index f66d8cd8..c1be323b 100644 --- a/views/mixins/post.pug +++ b/views/mixins/post.pug @@ -71,6 +71,8 @@ mixin post(post, truncate, manage=false, globalmanage=false, ban=false, overboar option(value='ftrip') Filter Tripcode if !overboard && !ban option(value='moderate') Moderate + if !post.thread + option(value='watch') Watch .post-data if post.files.length > 0 .post-files(class=(post.files.length > 1 ? 'fn' : '')) diff --git a/views/mixins/watchedthread.pug b/views/mixins/watchedthread.pug index 75e32dae..e290f7c5 100644 --- a/views/mixins/watchedthread.pug +++ b/views/mixins/watchedthread.pug @@ -1,6 +1,7 @@ mixin watchedthread(thread) - .row.watched-thread + .row.watched-thread(data-id=`${thread.board}-${thread.postId}`) a.close X - const watchedThreadLink = `/${thread.board}/thread/${thread.postId}.html`; - a(href=watchedThreadLink) /#{thread.board}/ - #{thread.subject} + a(href=watchedThreadLink) /#{thread.board}/ - #{thread.subject || 'No subject'} a(href=`${watchedThreadLink}#bottom`) [▼] + //-notification count