make js file for expanded_image_modal

files/assets/js/bottom.js

@@ -170,34 +170,6 @@ bs_trigger(document);
 
 const negative_awards = document.querySelectorAll("[data-positive=False]")
 
-let all_images
-let position
-let last_img_index
-
-const imgnav_next = document.getElementById('imgnav-next')
-const imgnav_prev = document.getElementById('imgnav-prev')
-
-document.addEventListener('keydown', (e) => {
-	if (['ArrowRight', 'd'].includes(e.key)  && imgnav_next && !imgnav_next.classList.contains('d-none')) {
-		imgnav_next.click()
-	}
-	else if (['ArrowLeft', 'a'].includes(e.key)  && imgnav_prev && !imgnav_prev.classList.contains('d-none')) {
-		imgnav_prev.click()
-	}
-})
-
-function handle_navigation(delta) {
-	position += delta
-	if (position < last_img_index) {
-		imgnav_next.classList.remove('d-none')
-		imgnav_next.href = all_images[position+1].dataset.src
-	}
-	if (position > 0) {
-		imgnav_prev.classList.remove('d-none')
-		imgnav_prev.href = all_images[position-1].dataset.src
-	}
-}
-
 document.addEventListener("click", function (e) {
 	let element = e.target
 	if (element.tagName == "I")
@@ -205,15 +177,7 @@ document.addEventListener("click", function (e) {
 
 	if (!element) return
 
-	if (element == imgnav_next) {
-		expandImage(element.href)
-		handle_navigation(1)
-	}
-	else if (element == imgnav_prev) {
-		expandImage(element.href)
-		handle_navigation(-1)
-	}
-	else if (element instanceof HTMLImageElement && (element.alt.startsWith('![](') || element.classList.contains('img'))) {
+	if (element instanceof HTMLImageElement && (element.alt.startsWith('![](') || element.classList.contains('img'))) {
 		expandImage()
 		all_images = element.parentElement.parentElement.parentElement.getElementsByClassName('img')
 		if (all_images.length != 0) {

files/assets/js/core.js

@@ -186,31 +186,6 @@ function formkey() {
 	else return null;
 }
 
-const expandImageModal = document.getElementById('expandImageModal')
-
-function expandImage(url) {
-	document.getElementById('imgnav-next').classList.add('d-none')
-	document.getElementById('imgnav-prev').classList.add('d-none')
-
-	const e = this.event
-	if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey)
-		return;
-	e.preventDefault();
-
-	document.getElementById("expanded-image").src = '';
-	document.getElementById("expanded-image-wrap-link").href = '';
-
-	if (!url)
-	{
-		url = e.target.dataset.src
-		if (!url) url = e.target.src
-	}
-	document.getElementById("expanded-image").src = url.replace("200w.webp", "giphy.webp");
-	document.getElementById("expanded-image-wrap-link").href = url.replace("200w.webp", "giphy.webp");
-
-	bootstrap.Modal.getOrCreateInstance(expandImageModal).show();
-};
-
 function bs_trigger(e) {
 	let tooltipTriggerList = [].slice.call(e.querySelectorAll('[data-bs-toggle="tooltip"]'));
 	tooltipTriggerList.map(function(element){
@@ -685,8 +660,12 @@ function handleUploadProgress(e, upload_prog) {
 
 if (screen_width < 768) {
 	let object
+
+	const expandImageModal = document.getElementById('expandImageModal')
+
 	if (gbrowser == 'iphone' && expandImageModal)
 		object = expandImageModal
+
 	if (gbrowser != 'iphone')
 		object = document
 

files/assets/js/expanded_image_modal.js

@@ -0,0 +1,63 @@
+let all_images
+let position
+let last_img_index
+
+const imgnav_next = document.getElementById('imgnav-next')
+const imgnav_prev = document.getElementById('imgnav-prev')
+
+document.addEventListener('keydown', (e) => {
+	if (['ArrowRight', 'd'].includes(e.key)  && imgnav_next && !imgnav_next.classList.contains('d-none')) {
+		imgnav_next.click()
+	}
+	else if (['ArrowLeft', 'a'].includes(e.key)  && imgnav_prev && !imgnav_prev.classList.contains('d-none')) {
+		imgnav_prev.click()
+	}
+})
+
+function handle_navigation(delta) {
+	position += delta
+	if (position < last_img_index) {
+		imgnav_next.classList.remove('d-none')
+		imgnav_next.href = all_images[position+1].dataset.src
+	}
+	if (position > 0) {
+		imgnav_prev.classList.remove('d-none')
+		imgnav_prev.href = all_images[position-1].dataset.src
+	}
+}
+
+const expandImageModal = document.getElementById('expandImageModal')
+
+function expandImage(url) {
+	document.getElementById('imgnav-next').classList.add('d-none')
+	document.getElementById('imgnav-prev').classList.add('d-none')
+
+	const e = this.event
+	if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey)
+		return;
+	e.preventDefault();
+
+	document.getElementById("expanded-image").src = '';
+	document.getElementById("expanded-image-wrap-link").href = '';
+
+	if (!url)
+	{
+		url = e.target.dataset.src
+		if (!url) url = e.target.src
+	}
+	document.getElementById("expanded-image").src = url.replace("200w.webp", "giphy.webp");
+	document.getElementById("expanded-image-wrap-link").href = url.replace("200w.webp", "giphy.webp");
+
+	bootstrap.Modal.getOrCreateInstance(expandImageModal).show();
+};
+
+
+imgnav_next.onclick = () => {
+	expandImage(imgnav_next.href)
+	handle_navigation(1)
+}
+
+imgnav_prev.onclick = () => {
+	expandImage(imgnav_prev.href)
+	handle_navigation(-1)
+}

files/templates/modals/expanded_image.html

@@ -9,3 +9,5 @@
 		<a id="imgnav-next" class="fas fa-arrow-right px-5 py-3 px-md-4 py-md-5 d-none"></a>
 	</div>
 </div>
+
+<script defer src="{{'js/expanded_image_modal.js' | asset}}"></script>