diff --git a/gulp/res/css/style.css b/gulp/res/css/style.css index 8f1e8bf0..4bc9a92c 100644 --- a/gulp/res/css/style.css +++ b/gulp/res/css/style.css @@ -214,6 +214,7 @@ pre { align-items: center; justify-content: center; font-weight: bold; + width: 100%; } .wrapbar { @@ -1197,6 +1198,19 @@ input[type="file"] { #threadwatcher { display: flex; + flex-direction: column; +} + +.watched-thread { + width: 100%; + justify-content: space-between; + padding: 3px; + box-sizing: border-box; +} + +.watched-thread a { + width: unset + margin-right: 5px; } #postform:target { diff --git a/gulp/res/js/threadwatcher.js b/gulp/res/js/threadwatcher.js index b9f35f84..f1e24457 100644 --- a/gulp/res/js/threadwatcher.js +++ b/gulp/res/js/threadwatcher.js @@ -1,5 +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_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_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 index 2426046f..3d30c9a5 100644 --- a/gulp/res/js/watchedthread.js +++ b/gulp/res/js/watchedthread.js @@ -1,3 +1,4 @@ +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_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 || {}); @@ -5,7 +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\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_html = pug_html + "\u003Cdiv class=\"row watched-thread\"\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_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 194b2458..ee17ad87 100644 --- a/gulp/res/js/watchlist.js +++ b/gulp/res/js/watchlist.js @@ -7,8 +7,12 @@ class ThreadWatcher { this.clearButton = document.getElementById('watchlist-clear'); 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() { @@ -25,25 +29,34 @@ class ThreadWatcher { const footer = document.getElementById('bottom'); footer.insertAdjacentHTML('afterend', threadWatcherHtml); new Dragable('#threadwatcher-dragHandle', '#threadwatcher'); + //todo: add() all ones saved in storage } + //fetchThread() {} + add(board, thread) { -/* - const watchListItemHtml = uploaditem({ data }); - .insertAdjacentHTML('beforeend', uploadItemHtml); - const fileElem = this.fileUploadList.lastChild; - const lastClose = fileElem.querySelector('.close'); + console.log('add'); + //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 } }); + this.threadWatcher.insertAdjacentHTML('beforeend', watchListItemHtml); + const watchedThreadElem = this.threadWatcher.lastChild; + const lastClose = watchedThreadElem.querySelector('.close'); lastClose.addEventListener('click', () => { - this.removeFile(fileElem, file.name, file.size); + watchedThreadElem.remove(); + this.remove(board, thread); }); -*/ } remove(board, thread) { + console.log('remove'); // } clear() { + console.log('clear'); watchList = new Set(); watchListInput.value = ''; setLocalStorage('watchlist', '[]'); diff --git a/views/mixins/threadwatcher.pug b/views/mixins/threadwatcher.pug index ba869590..45f6f71b 100644 --- a/views/mixins/threadwatcher.pug +++ b/views/mixins/threadwatcher.pug @@ -1,4 +1,3 @@ mixin threadwatcher() .flex-center#threadwatcher - .row - .noselect#threadwatcher-dragHandle Thread Watcher + .row.noselect#threadwatcher-dragHandle Thread Watcher diff --git a/views/mixins/watchedthread.pug b/views/mixins/watchedthread.pug index 0307ed9f..75e32dae 100644 --- a/views/mixins/watchedthread.pug +++ b/views/mixins/watchedthread.pug @@ -1,7 +1,6 @@ mixin watchedthread(thread) - div - .watched-thread - p - b /#{thread.board}/#{thread.postId} - | - #{thread.subject} - a.close X + .row.watched-thread + a.close X + - const watchedThreadLink = `/${thread.board}/thread/${thread.postId}.html`; + a(href=watchedThreadLink) /#{thread.board}/ - #{thread.subject} + a(href=`${watchedThreadLink}#bottom`) [▼]