From 949baae539caf5c6c63fc30bf0ac0b57a3967824 Mon Sep 17 00:00:00 2001
From: ed <s@ocv.me>
Date: Thu, 30 Mar 2023 21:21:21 +0000
Subject: [PATCH] integrate markdown thumbs with image gallery

---
 copyparty/web/baguettebox.js | 11 +++++++++--
 copyparty/web/browser.js     | 26 +++++++++++++++++++++++---
 copyparty/web/util.js        | 15 ++++++++++++++-
 3 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/copyparty/web/baguettebox.js b/copyparty/web/baguettebox.js
index 0f497fed..6f3e8037 100644
--- a/copyparty/web/baguettebox.js
+++ b/copyparty/web/baguettebox.js
@@ -27,8 +27,8 @@ window.baguetteBox = (function () {
         isOverlayVisible = false,
         touch = {},  // start-pos
         touchFlag = false,  // busy
-        re_i = /.+\.(a?png|avif|bmp|gif|heif|jpe?g|jfif|svg|webp)(\?|$)/i,
-        re_v = /.+\.(webm|mkv|mp4)(\?|$)/i,
+        re_i = /^[^?]+\.(a?png|avif|bmp|gif|heif|jpe?g|jfif|svg|webp)(\?|$)/i,
+        re_v = /^[^?]+\.(webm|mkv|mp4)(\?|$)/i,
         anims = ['slideIn', 'fadeIn', 'none'],
         data = {},  // all galleries
         imagesElements = [],
@@ -580,6 +580,7 @@ window.baguetteBox = (function () {
     function hideOverlay(e) {
         ev(e);
         playvid(false);
+        removeFromCache('#files');
         if (options.noScrollbars) {
             document.documentElement.style.overflowY = 'auto';
             document.body.style.overflowY = 'auto';
@@ -812,10 +813,16 @@ window.baguetteBox = (function () {
     }
 
     function vid() {
+        if (currentIndex >= imagesElements.length)
+            return;
+
         return imagesElements[currentIndex].querySelector('video');
     }
 
     function vidimg() {
+        if (currentIndex >= imagesElements.length)
+            return;
+
         return imagesElements[currentIndex].querySelector('img, video');
     }
 
diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js
index 746d56fb..b4fbef83 100644
--- a/copyparty/web/browser.js
+++ b/copyparty/web/browser.js
@@ -4150,6 +4150,21 @@ var thegrid = (function () {
 		ev(e);
 	}
 
+	r.imshow = function (url) {
+		var sel = '#ggrid>a'
+		if (!thegrid.en) {
+			thegrid.bagit('#files');
+			sel = '#files a[id]';
+		}
+		var ims = QSA(sel);
+		for (var a = 0, aa = ims.length; a < aa; a++) {
+			var iu = ims[a].getAttribute('href').split('?')[0].split('/').slice(-1)[0];
+			if (iu == url)
+				return ims[a].click();
+		}
+		baguetteBox.hide();
+	};
+
 	r.loadsel = function () {
 		if (r.dirty)
 			return;
@@ -4289,19 +4304,19 @@ var thegrid = (function () {
 		}
 
 		r.dirty = false;
-		r.bagit();
+		r.bagit('#ggrid');
 		r.loadsel();
 		setTimeout(r.tippen, 20);
 	}
 
-	r.bagit = function () {
+	r.bagit = function (isrc) {
 		if (!window.baguetteBox)
 			return;
 
 		if (r.bbox)
 			baguetteBox.destroy();
 
-		r.bbox = baguetteBox.run('#ggrid', {
+		r.bbox = baguetteBox.run(isrc, {
 			captions: function (g) {
 				var idx = -1,
 					h = '' + g;
@@ -6775,6 +6790,7 @@ function show_md(md, name, div, url, depth) {
 
 			els[a].setAttribute('href', '#md-' + href.slice(1));
 		}
+		md_th_set();
 		set_tabindex();
 		var hash = location.hash;
 		if (hash.startsWith('#md-'))
@@ -6853,6 +6869,7 @@ function sandbox(tgt, rules, cls, html) {
 		'window.onblur=function(){say("ilost #' + tid + '")};' +
 		'var el="' + want + '"&&ebi("' + want + '");' +
 		'if(el)say("iscroll #' + tid + ' "+el.offsetTop);' +
+		'md_th_set();' +
 		(cls == 'mdo' && md_plug.post ?
 			'const x={' + md_plug.post + '};' +
 			'if(x.render)x.render(ebi("b"));' +
@@ -6885,6 +6902,9 @@ window.addEventListener("message", function (e) {
 		else if (t[0] == 'igot' || t[0] == 'ilost') {
 			clmod(QS(t[1] + '>iframe'), 'focus', t[0] == 'igot');
 		}
+		else if (t[0] == 'imshow') {
+			thegrid.imshow(e.data.slice(7));
+		}
 	} catch (ex) {
 		console.log('msg-err: ' + ex);
 	}
diff --git a/copyparty/web/util.js b/copyparty/web/util.js
index bdb022bc..c8fda0d0 100644
--- a/copyparty/web/util.js
+++ b/copyparty/web/util.js
@@ -1674,10 +1674,23 @@ function md_thumbs(md) {
         if (!/[?&]cache/.exec(url))
             url += (url.indexOf('?') < 0 ? '?' : '&') + 'cache=i';
 
-        md[a] = '<a href="' + url + '" class="mdth' + float.slice(0, 1) + '"><img src="' + url + '&th=w" alt="' + alt + '" /></a>' + md[a].slice(o2 + 1);
+        md[a] = '<a href="' + url + '" class="mdth mdth' + float.slice(0, 1) + '"><img src="' + url + '&th=w" alt="' + alt + '" /></a>' + md[a].slice(o2 + 1);
     }
     return md.join('');
 }
+function md_th_set() {
+    var els = QSA('.mdth');
+    for (var a = 0, aa = els.length; a < aa; a++)
+        els[a].onclick = md_th_click;
+}
+function md_th_click(e) {
+    ev(e);
+    var url = this.getAttribute('href').split('?')[0];
+    if (window.sb_md)
+        window.parent.postMessage("imshow " + url, "*");
+    else
+        thegrid.imshow(url);
+}
 
 
 var svg_decl = '<?xml version="1.0" encoding="UTF-8"?>\n';