add expand height limit disable and audio/video loop to settings menu, references #57

gulp/res/css/style.css

@@ -590,6 +590,10 @@ video, img {
 	max-height: 90vh;
 }
 
+.mh-100 {
+	max-height: 100%;
+}
+
 .post-file-src {
 	justify-content: center;
 	display: flex;

gulp/res/js/expand.js

@@ -1,5 +1,6 @@
 setDefaultLocalStorage('volume', 100);
-!localStorage.getItem('volume') ? setLocalStorage('volume', 100) : void 0;
+setDefaultLocalStorage('loop', 'false');
+setDefaultLocalStorage('heightlimit', 'true');
 
 window.addEventListener('DOMContentLoaded', (event) => {
 
@@ -10,20 +11,48 @@ window.addEventListener('DOMContentLoaded', (event) => {
 		}
 	}
 
-	if (!isCatalog) {
-		const thumbs = document.getElementsByClassName('post-file-src');
+	const volumeSetting = document.getElementById('volume-setting');
+	let volumeLevel = localStorage.getItem('volume');
+	const changeVolume = (change) => {
+		volumeLevel = volumeSetting.value;
+		console.log('adjusting default volume', volumeLevel);
+		setLocalStorage('volume', volumeLevel);
+	}
+	volumeSetting.value = volumeLevel;
+	volumeSetting.addEventListener('change', changeVolume, false);
 
-		const volumeSetting = document.getElementById('volume-setting');
-		let volumeLevel = localStorage.getItem('volume');
-		const changeVolume = (change) => {
-			volumeLevel = volumeSetting.value;
-			console.log('adjusting volume', volumeLevel);
-			setLocalStorage('volume', volumeLevel);
-		}
-		volumeSetting.value = volumeLevel;
-		volumeSetting.addEventListener('change', changeVolume, false);
+	const loopSetting = document.getElementById('loop-setting');
+	let loopEnabled = localStorage.getItem('loop') == 'true';
+	const toggleLoop = (change) => {
+		loopEnabled = loopSetting.checked;
+		console.log('toggling video/audio looping', loopEnabled);
+		setLocalStorage('loop', loopEnabled);
+	}
+	loopSetting.checked = loopEnabled;
+	loopSetting.addEventListener('change', toggleLoop, false);
+
+	const heightlimitSetting = document.getElementById('heightlimit-setting');
+	let heightlimitEnabled = localStorage.getItem('heightlimit') == 'true';
+	const toggleHeightlimit = (change) => {
+		heightlimitEnabled = heightlimitSetting.checked;
+		console.log('toggling image height limit', heightlimitEnabled);
+		setLocalStorage('heightlimit', heightlimitEnabled);
+	}
+	heightlimitSetting.checked = heightlimitEnabled;
+	heightlimitSetting.addEventListener('change', toggleHeightlimit, false);
 
+	if (!isCatalog) { //dont expand on catalog
+		const thumbs = document.getElementsByClassName('post-file-src');
 		const toggle = function(thumb, exp, fn, src) {
+			if (loopEnabled) {
+				exp.loop = true;
+			}
+			if (!heightlimitEnabled) {
+				exp.classList.add('mh-100');
+			} else {
+				exp.classList.remove('mh-100');
+			}
+			exp.volume = volumeLevel/100;
 			const close = exp.previousSibling.innerText === 'Close' ? exp.previousSibling : null;
 			if (thumb.style.display === 'none') {
 				//closing
@@ -95,7 +124,6 @@ window.addEventListener('DOMContentLoaded', (event) => {
 							toggle(thumbElement, expandedElement, fileName, pfs);
 						}, true);
 						expandedElement.controls = 'true';
-						expandedElement.volume = volumeLevel/100;
 						source = document.createElement('source');
 						expandedElement.appendChild(source);
 						fileLink.appendChild(expandedElement);

gulp/res/js/modal.js

@@ -95,7 +95,7 @@ pug_html = pug_html + "\u003Coption" + (pug_attr("value", theme, true, false)) +
   }
 }).call(this);
 
-pug_html = pug_html + "\u003C\u002Fselect\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003EDefault volume\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"volume-setting\" type=\"range\" min=\"0\" max=\"100\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003ELive posts\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"live-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003ENotifications\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"notification-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003EScroll to new posts\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"scroll-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003E24h time\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"24hour-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003EShow relative time\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"relative-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003EHide Thumbnails\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"hideimages-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E";
+pug_html = pug_html + "\u003C\u002Fselect\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003ELive posts\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"live-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003ENotifications\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"notification-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003EScroll to new posts\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"scroll-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003E24h time\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"24hour-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003EShow relative time\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"relative-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003EHide Thumbnails\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"hideimages-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003EDefault volume\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"volume-setting\" type=\"range\" min=\"0\" max=\"100\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003ELoop audio\u002Fvideo\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"loop-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"row\"\u003E\u003Cdiv class=\"label\"\u003ELimit expand height\u003C\u002Fdiv\u003E\u003Clabel class=\"postform-style ph-5\"\u003E\u003Cinput id=\"heightlimit-setting\" type=\"checkbox\"\u002F\u003E\u003C\u002Flabel\u003E\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E";
 }
 pug_html = pug_html + "\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E";
 };

views/mixins/modal.pug

@@ -31,10 +31,6 @@ mixin modal(data)
 							option(value='default') default
 							each theme in data.settings.codeThemes
 								option(value=theme) #{theme}
-					.row
-						.label Default volume
-						label.postform-style.ph-5
-							input#volume-setting(type='range' min='0' max='100')
 					.row
 						.label Live posts
 						label.postform-style.ph-5
@@ -59,3 +55,15 @@ mixin modal(data)
 						.label Hide Thumbnails
 						label.postform-style.ph-5
 							input#hideimages-setting(type='checkbox')
+					.row
+						.label Default volume
+						label.postform-style.ph-5
+							input#volume-setting(type='range' min='0' max='100')
+					.row
+						.label Loop audio/video
+						label.postform-style.ph-5
+							input#loop-setting(type='checkbox')
+					.row
+						.label Limit expand height
+						label.postform-style.ph-5
+							input#heightlimit-setting(type='checkbox')