minimise button #292

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;

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<r.length;g++)(s=pug_classes(r[g]))&&(c&&a[g]&&(s=pug_escape(s)),e=e+u+s,u=" ");return e}
+function pug_classes_object(r){var a="",n="";for(var o in r)o&&r[o]&&pug_has_own_property.call(r,o)&&(a=a+n+o,n=" ");return a}
+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_has_own_property=Object.prototype.hasOwnProperty;
+var pug_match_html=/["&<>]/;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;}
+pug_mixins["threadwatcher"](minimised);
+    }.call(this, "minimised" in locals_for_with ?
+        locals_for_with.minimised :
+        typeof minimised !== 'undefined' ? minimised : undefined));
+    ;;return pug_html;}

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

views/includes/threadwatcher.pug

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

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 ? '[+]' : '[−]'}