From 3393d1014aff7b4db64dee17c457d6361fc85097 Mon Sep 17 00:00:00 2001 From: Thomas Lynch Date: Tue, 7 Dec 2021 09:56:08 +1100 Subject: [PATCH] ref #292 --- gulp/res/css/style.css | 8 +++- gulp/res/js/dragable.js | 9 +++-- gulp/res/js/localstorage.js | 3 +- gulp/res/js/threadwatcher.js | 5 +++ gulp/res/js/watchedthread.js | 14 +++++++ gulp/res/js/watchlist.js | 66 +++++++++++++++++++++++--------- gulpfile.js | 2 + views/includes/threadwatcher.pug | 2 + views/includes/watchedthread.pug | 2 + views/mixins/threadwatcher.pug | 4 ++ views/mixins/watchedthread.pug | 7 ++++ 11 files changed, 95 insertions(+), 27 deletions(-) create mode 100644 gulp/res/js/threadwatcher.js create mode 100644 gulp/res/js/watchedthread.js create mode 100644 views/includes/threadwatcher.pug create mode 100644 views/includes/watchedthread.pug create mode 100644 views/mixins/threadwatcher.pug create mode 100644 views/mixins/watchedthread.pug diff --git a/gulp/res/css/style.css b/gulp/res/css/style.css index c920d953..8f1e8bf0 100644 --- a/gulp/res/css/style.css +++ b/gulp/res/css/style.css @@ -205,7 +205,7 @@ pre { content: "Settings"; } -#postform-dragHandle { +#postform-dragHandle, #threadwatcher-dragHandle { flex-grow: 1; background: var(--darken); height: 1.75em; @@ -1181,7 +1181,7 @@ input[type="file"] { background: var(--input-background); } -#postform { +#postform, #threadwatcher { display: none; max-width: calc(100% - 10px); max-height: calc(100% - 50px); @@ -1195,6 +1195,10 @@ input[type="file"] { overflow-y: auto; } +#threadwatcher { + display: flex; +} + #postform:target { display: flex; } diff --git a/gulp/res/js/dragable.js b/gulp/res/js/dragable.js index b4812098..36908ef6 100644 --- a/gulp/res/js/dragable.js +++ b/gulp/res/js/dragable.js @@ -4,14 +4,15 @@ class Dragable { this.draging = false; this.xo = 0; this.yo = 0; + this.targetId = target; this.handle = document.querySelector(handle); this.target = document.querySelector(target); - const savedTop = localStorage.getItem('dragtop'); + const savedTop = localStorage.getItem(`${this.targetId}-dragtop`); if (savedTop != 'null') { this.target.style.top = savedTop; this.target.style.bottom = 'unset'; } - const savedLeft = localStorage.getItem('dragleft'); + const savedLeft = localStorage.getItem(`${this.targetId}-dragleft`); if (savedLeft != 'null') { this.target.style.left = savedLeft; } @@ -101,8 +102,8 @@ class Dragable { break; } this.target.style.bottom = 'unset'; - setLocalStorage('dragtop', this.target.style.top); - setLocalStorage('dragleft', this.target.style.left); + setLocalStorage(`${this.targetId}-dragtop`, this.target.style.top); + setLocalStorage(`${this.targetId}-dragleft`, this.target.style.left); } //stopped dragging diff --git a/gulp/res/js/localstorage.js b/gulp/res/js/localstorage.js index 368811ce..77fb5413 100644 --- a/gulp/res/js/localstorage.js +++ b/gulp/res/js/localstorage.js @@ -49,10 +49,9 @@ setDefaultLocalStorage('notification-yous-only', settings.notificationsYousOnly) setDefaultLocalStorage('yous-setting', settings.showYous); setDefaultLocalStorage('disableboardcss', false); -setDefaultLocalStorage('dragtop', null); -setDefaultLocalStorage('dragleft', null); setDefaultLocalStorage('filters1', '[]'); setDefaultLocalStorage('yous', '[]'); +setDefaultLocalStorage('watchlist', '[]'); setDefaultLocalStorage('name', ''); setDefaultLocalStorage('theme', 'default'); setDefaultLocalStorage('codetheme', 'default'); diff --git a/gulp/res/js/threadwatcher.js b/gulp/res/js/threadwatcher.js new file mode 100644 index 00000000..b9f35f84 --- /dev/null +++ b/gulp/res/js/threadwatcher.js @@ -0,0 +1,5 @@ +function threadwatcher(locals) {var pug_html = "", pug_mixins = {}, pug_interp;pug_mixins["threadwatcher"] = pug_interp = function(){ +var block = (this && this.block), attributes = (this && this.attributes) || {}; +pug_html = pug_html + "\u003Cdiv class=\"flex-center\" id=\"threadwatcher\"\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"noselect\" id=\"threadwatcher-dragHandle\"\u003EThread Watcher\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E"; +}; +pug_mixins["threadwatcher"]();;return pug_html;} \ No newline at end of file diff --git a/gulp/res/js/watchedthread.js b/gulp/res/js/watchedthread.js new file mode 100644 index 00000000..2426046f --- /dev/null +++ b/gulp/res/js/watchedthread.js @@ -0,0 +1,14 @@ +function pug_escape(e){var a=""+e,t=pug_match_html.exec(a);if(!t)return e;var r,c,n,s="";for(r=t.index,c=0;r]/;function watchedthread(locals) {var pug_html = "", pug_mixins = {}, pug_interp;; + var locals_for_with = (locals || {}); + + (function (watchedthread) { + pug_mixins["watchedthread"] = pug_interp = function(thread){ +var block = (this && this.block), attributes = (this && this.attributes) || {}; +pug_html = pug_html + "\u003Cdiv\u003E\u003Cdiv class=\"watched-thread\"\u003E\u003Cp\u003E \u003Cb\u003E\u002F" + (pug_escape(null == (pug_interp = thread.board) ? "" : pug_interp)) + "\u002F" + (pug_escape(null == (pug_interp = thread.postId) ? "" : pug_interp)) + "\u003C\u002Fb\u003E - " + (pug_escape(null == (pug_interp = thread.subject) ? "" : pug_interp)) + "\u003C\u002Fp\u003E\u003Ca class=\"close\"\u003EX\u003C\u002Fa\u003E\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E"; +}; +pug_mixins["watchedthread"](watchedthread); + }.call(this, "watchedthread" in locals_for_with ? + locals_for_with.watchedthread : + typeof watchedthread !== 'undefined' ? watchedthread : 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 b41652e6..194b2458 100644 --- a/gulp/res/js/watchlist.js +++ b/gulp/res/js/watchlist.js @@ -1,27 +1,55 @@ -let watchList = new Set(JSON.parse(localStorage.getItem('watchlist'))); -window.addEventListener('settingsReady', () => { - - const watchListInput = document.getElementById('watchlist-setting'); - watchListInput.value = [...watchList]; - const watchListClearButton = document.getElementById('watchlist-clear'); - - /* - * todo: use compiled pug to create and/or update watchlist - * similar to live.js, have a separate pug function and the list container, - * and for each entry and add the listeners when inserting one - */ - //new Dragable('#watchlist', '#postform'); //make watch list draggable and maintains position - - const removeWatchList = (board, thread) => { - watchList.delete(`${board}-${thread}`); +class ThreadWatcher { + + constructor() { + this.watchListSet = new Set(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.createListHtml(); + this.refreshInterval = setInterval(this.refresh, 60 * 1000); + this.refresh(); + } + + refresh() { + console.log('refreshing thread watcher'); + // + } + + //pause() { } + + //resume() { } + + createListHtml() { + const threadWatcherHtml = threadwatcher(); + const footer = document.getElementById('bottom'); + footer.insertAdjacentHTML('afterend', threadWatcherHtml); + new Dragable('#threadwatcher-dragHandle', '#threadwatcher'); + } + + add(board, thread) { +/* + const watchListItemHtml = uploaditem({ data }); + .insertAdjacentHTML('beforeend', uploadItemHtml); + const fileElem = this.fileUploadList.lastChild; + const lastClose = fileElem.querySelector('.close'); + lastClose.addEventListener('click', () => { + this.removeFile(fileElem, file.name, file.size); + }); +*/ } - const clearWatchList = () => { + + remove(board, thread) { +// + } + + clear() { watchList = new Set(); watchListInput.value = ''; setLocalStorage('watchlist', '[]'); console.log('cleared watchlist'); } - watchListClearButton.addEventListener('click', clearWatchList, false); +} -}); +window.addEventListener('settingsReady', () => new ThreadWatcher()); diff --git a/gulpfile.js b/gulpfile.js index 7ea440e3..c29b6be1 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -396,6 +396,8 @@ const extraLocals = ${JSON.stringify({ meta: config.get.meta, reverseImageLinksU fs.writeFileSync('gulp/res/js/uploaditem.js', pug.compileFileClient(`${paths.pug.src}/includes/uploaditem.pug`, { compileDebug: false, debug: false, name: 'uploaditem' })); fs.writeFileSync('gulp/res/js/pugfilters.js', pug.compileFileClient(`${paths.pug.src}/includes/filters.pug`, { compileDebug: false, debug: false, name: 'filters' })); fs.writeFileSync('gulp/res/js/captchaformsection.js', pug.compileFileClient(`${paths.pug.src}/includes/captchaformsection.pug`, { compileDebug: false, debug: false, name: 'captchaformsection' })); + fs.writeFileSync('gulp/res/js/watchedthread.js', pug.compileFileClient(`${paths.pug.src}/includes/watchedthread.pug`, { compileDebug: false, debug: false, name: 'watchedthread' })); + fs.writeFileSync('gulp/res/js/threadwatcher.js', pug.compileFileClient(`${paths.pug.src}/includes/threadwatcher.pug`, { compileDebug: false, debug: false, name: 'threadwatcher' })); fs.symlinkSync(__dirname+'/node_modules/socket.io/client-dist/socket.io.min.js', __dirname+'/gulp/res/js/socket.io.js', 'file'); } catch (e) { if (e.code !== 'EEXIST') { diff --git a/views/includes/threadwatcher.pug b/views/includes/threadwatcher.pug new file mode 100644 index 00000000..2df63cf7 --- /dev/null +++ b/views/includes/threadwatcher.pug @@ -0,0 +1,2 @@ +include ../mixins/threadwatcher.pug ++threadwatcher() diff --git a/views/includes/watchedthread.pug b/views/includes/watchedthread.pug new file mode 100644 index 00000000..c502e023 --- /dev/null +++ b/views/includes/watchedthread.pug @@ -0,0 +1,2 @@ +include ../mixins/watchedthread.pug ++watchedthread(watchedthread) diff --git a/views/mixins/threadwatcher.pug b/views/mixins/threadwatcher.pug new file mode 100644 index 00000000..ba869590 --- /dev/null +++ b/views/mixins/threadwatcher.pug @@ -0,0 +1,4 @@ +mixin threadwatcher() + .flex-center#threadwatcher + .row + .noselect#threadwatcher-dragHandle Thread Watcher diff --git a/views/mixins/watchedthread.pug b/views/mixins/watchedthread.pug new file mode 100644 index 00000000..0307ed9f --- /dev/null +++ b/views/mixins/watchedthread.pug @@ -0,0 +1,7 @@ +mixin watchedthread(thread) + div + .watched-thread + p + b /#{thread.board}/#{thread.postId} + | - #{thread.subject} + a.close X