ref #292

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;
 }

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

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');

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;}

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<a.length;r++){switch(a.charCodeAt(r)){case 34:n="&quot;";break;case 38:n="&amp;";break;case 60:n="&lt;";break;case 62:n="&gt;";break;default:continue}c!==r&&(s+=a.substring(c,r)),c=r+1,s+=n}return c!==r?s+a.substring(c,r):s}
+var pug_match_html=/["&<>]/;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;}

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());

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') {

views/includes/threadwatcher.pug

@@ -0,0 +1,2 @@
+include ../mixins/threadwatcher.pug
++threadwatcher()

views/includes/watchedthread.pug

@@ -0,0 +1,2 @@
+include ../mixins/watchedthread.pug
++watchedthread(watchedthread)

views/mixins/threadwatcher.pug

@@ -0,0 +1,4 @@
+mixin threadwatcher()
+	.flex-center#threadwatcher
+		.row
+			.noselect#threadwatcher-dragHandle Thread Watcher

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