bind bbox to file list; pass click event copy from grid to list elements. this enables the bbox in both views

contrib/plugins/graft-thumbs.js

@@ -82,15 +82,15 @@
 	};
 
 	// ...and then the trick! near the end of loadgrid,
-	// thegrid.bagit is called to initialize the baguettebox
+	// msel.bagit is called to initialize the baguettebox
 	// (image/video gallery); this is the perfect function to
 	// "hook" (hijack) so we can run our code :^)
 
 	// need to grab a backup of the original function first,
-	var orig_func = thegrid.bagit;
+	var orig_func = msel.bagit;
 
 	// and then replace it with our own:
-	thegrid.bagit = function (isrc) {
+	msel.bagit = function (isrc) {
 
 		if (isrc !== '#ggrid')
 			// we only want to modify the grid, so
@@ -104,7 +104,7 @@
 		// filenames, so schedule another run:
 		setTimeout(graft_thumbs, 1);
 
-		// and finally, call the original thegrid.bagit function
+		// and finally, call the original msel.bagit function
 		return orig_func(isrc);
 	};
 

copyparty/web/baguettebox.js

@@ -288,7 +288,7 @@ window.baguetteBox = (function () {
         var galleries = data[selector].galleries;
         [].forEach.call(galleries, function (gallery) {
             [].forEach.call(gallery, function (imageItem) {
-                unbind(imageItem.imageElement, 'click', imageItem.eventHandler);
+                //unbind(imageItem.imageElement, 'click', imageItem.eventHandler);
             });
 
             if (currentGallery === gallery)
@@ -1379,16 +1379,16 @@ window.baguetteBox = (function () {
 
 
 function init(){
-    if(thegrid != undefined && thegrid.dirty == false && thegrid.bbox != true){
+    if(msel != undefined && msel.bbox != true){
         console.log('bbox load')
-        thegrid.bagit();
+        msel.bagit();
     }
     else{
         setTimeout(init, 100)
     }
 }
 
-console.log('wait for grid init');
+console.log('wait for file list init');
 init();
 
 J_BBX = 2;

copyparty/web/browser.js

@@ -6414,86 +6414,15 @@ window.thegrid = (function () {
 	}
 	setsz();
 
-	function gclick1(e) {
-		if (ctrl(e) && !treectl.csel && !r.sel && !r.tempsel)
-			return true;
-		else if (e.altKey){
-			ev(e);
-			return;
-		}
-
-		return gclick.call(this, e, false);
-	}
-
 	function gclick2(e) {
 		if (ctrl(e) || !r.sel && !r.tempsel)
 			return true;
 
-		return gclick.call(this, e, true);
+		return fclick.call(this, e, true);
-	}
-
-	function gclick(e, dbl) {
-		var oth = ebi(this.getAttribute('ref')),
-			qhref = this.getAttribute('href'),
-			href = qhref.split('?')[0],
-			fid = oth.getAttribute('id'),
-			aplay = ebi('a' + fid),
-			atext = ebi('t' + fid),
-			is_txt = atext && !/\.ts$/.test(href) && showfile.getlang(href),
-			is_img = img_re.test(href),
-			is_dir = href.endsWith('/'),
-			is_srch = !!ebi('unsearch'),
-			in_tree = is_dir && treectl.find(oth.textContent.slice(0, -1)),
-			have_sel = QS('#files tr.sel'),
-			td = oth.closest('td').nextSibling,
-			tr = td.parentNode;
-
-		if ((r.sel || r.tempsel) && !dbl && !ctrl(e) || treectl.csel && (e.shiftKey || ctrl(e))) {
-			ev(e);
-			td.onclick.call(td, e);
-			if (e.shiftKey)
-				return r.loadsel();
-			clmod(this, 'sel', clgot(tr, 'sel'));
-		}
-		else if (in_tree)
-			in_tree.click();
-
-		else if (oth.hasAttribute('download'))
-			oth.click();
-
-		else if (aplay && (r.vau || !is_img))
-			aplay.click();
-
-		else if (is_dir)
-			treectl.reqls(qhref, true);
-
-		else if (is_txt && !has(['md', 'htm', 'html'], is_txt))
-			atext.click();
-
-		else if (!is_img && !is_dir && have_sel)
-			window.open(qhref, '_blank');
-
-		else {
-			if (!dbl){
-				return true;
-			}
-
-			setTimeout(function () {
-				r.sel = true;
-			}, 1);
-			r.sel = false;
-			this.click();
-		}
-		ev(e);
 	}
 
 	r.imshow = function (url) {
-		var sel = '#ggrid>a'
+		var ims = QSA('#files a[id]');
-		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)
@@ -6678,7 +6607,7 @@ window.thegrid = (function () {
 		var ths = QSA('#ggrid>a');
 		for (var a = 0, aa = ths.length; a < aa; a++) {
 			ths[a].ondblclick = gclick2;
-			ths[a].onclick = gclick1;
+			ths[a].onclick = fclick1;
 		}
 
 		var imgs = QSA('#ggrid>a img');
@@ -6700,46 +6629,11 @@ window.thegrid = (function () {
 
 		r.dirty = false;
 		r.loadsel();
-		if(window.baguetteBox != undefined)
-			r.bagit();
 		setTimeout(aligngriditems, 1);
 		setTimeout(r.tippen, 20);
 		drag.initgrid();
 	}
 
-	r.bagit = function (isrc) {
-		console.log('init image viewer');
-		
-		if (r.bbox)
-			baguetteBox.destroy();
-
-		if(!isrc)
-			isrc = thegrid.en ? '#ggrid' : '#files'
-
-		var br = baguetteBox.run(isrc, {
-			noScrollbars: true,
-			duringHide: r.onhide,
-			afterShow: function () {
-				r.bbox_opts.refocus = true;
-			},
-			captions: function (g, idx) {
-				var h = '' + g;
-
-				return '<a download href="' + h +
-					'">' + (idx + 1) + ' / ' + this.length + ' -- ' +
-					esc(uricom_dec(h.split('/').pop())) + '</a>';
-			},
-			onChange: function (i, maxIdx) {
-				if (this[i].imageElement) {
-					sethash('g' + this[i].imageElement.getAttribute('ref') + getsort());
-				}
-			}
-		});
-		r.bbox_opts = br[1];
-		r.bbox = true;
-		eval_hash()
-	};
-
 	r.onhide = function () {
 		afilt.apply();
 
@@ -10022,6 +9916,13 @@ var msel = (function () {
 		for (var a = 0, aa = tds.length; a < aa; a++)
 			tds[a].onclick = r.seltgl;
 
+		var links = QSA('#files a[id]')
+		for (var a = 0, aa = links.length; a < aa; a++)
+			links[a].onclick = fclick;
+
+		if(window.baguetteBox != undefined)
+			r.bagit();
+		
 		r.selui(true);
 		arcfmt.render();
 		fileman.render();
@@ -10030,9 +9931,129 @@ var msel = (function () {
 		ebi('selzip').style.display = zipvis;
 		ebi('zip1').style.display = zipvis;
 	}
+
+	r.bagit = function (isrc) {
+		console.log('init image viewer');
+		
+		if (r.bbox)
+			baguetteBox.destroy();
+
+		if(!isrc)
+			isrc = '#files'
+
+		var br = baguetteBox.run(isrc, {
+			noScrollbars: true,
+			duringHide: r.onhide,
+			afterShow: function () {
+				r.bbox_opts.refocus = true;
+			},
+			captions: function (g, idx) {
+				var h = '' + g;
+
+				return '<a download href="' + h +
+					'">' + (idx + 1) + ' / ' + this.length + ' -- ' +
+					esc(uricom_dec(h.split('/').pop())) + '</a>';
+			},
+			onChange: function (i, maxIdx) {
+				if (this[i].imageElement) {
+					sethash('g' + this[i].imageElement.getAttribute('ref') + getsort());
+				}
+			}
+		});
+		r.bbox_opts = br[1];
+		r.bbox = true;
+		eval_hash()
+	};
+
+	if(window.baguetteBox != undefined)
+		r.bagit();
+	
 	return r;
 })();
 
+function fclick1(e) {
+	if (ctrl(e) && !treectl.csel && !r.sel && !r.tempsel)
+		return true;
+
+	e.preventDefault ? e.preventDefault() : e.returnValue = false;
+
+	// pass copy of click event to list entry (can trigger bbox handler)
+	var link = ebi(this.getAttribute('ref'));
+	link.dispatchEvent(new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+        clientX: e.clientX,
+        clientY: e.clientY,
+		ctrlKey: e.ctrlKey,
+        shiftKey: e.shiftKey,
+        altKey: e.altKey,
+        metaKey: e.metaKey,
+    }));
+}
+
+function fclick(e, dbl) {
+	if (e.altKey){
+		ev(e);
+		return;
+	}
+	var isInGrid = this.hasAttribute('ref'),
+		link = this;
+	if(isInGrid){
+		// get table row with file link
+		link = ebi(this.getAttribute('ref'))
+	}
+	var qhref = link.getAttribute('href'),
+		href = qhref.split('?')[0],
+		fid = link.getAttribute('id'),
+		aplay = ebi('a' + fid),
+		atext = ebi('t' + fid),
+		is_txt = atext && !/\.ts$/.test(href) && showfile.getlang(href),
+		is_img = img_re.test(href),
+		is_dir = href.endsWith('/'),
+		is_srch = !!ebi('unsearch'),
+		in_tree = is_dir && treectl.find(link.textContent.slice(0, -1)),
+		have_sel = QS('#files tr.sel'),
+		td = link.closest('td').nextSibling,
+		tr = td.parentNode;
+
+	if ( thegrid.en && (thegrid.sel || thegrid.tempsel) && !dbl && !ctrl(e) || treectl.csel && (e.shiftKey || ctrl(e))) {
+		ev(e);
+		msel.seltgl.call(td, e);
+		if (e.shiftKey)
+			return thegrid.loadsel();
+		clmod(this, 'sel', clgot(tr, 'sel'));
+	}
+	else if (in_tree)
+		in_tree.click();
+
+	else if (link.hasAttribute('download'))
+		link.click();
+
+	else if (thegrid.en && aplay && (thegrid.vau || !is_img))
+		aplay.click();
+
+	else if (is_dir)
+		treectl.reqls(qhref, true);
+
+	else if (is_txt && !has(['md', 'htm', 'html'], is_txt))
+		atext.click();
+
+	else if (!is_img && !is_dir && have_sel)
+		window.open(qhref, '_blank');
+
+	else {
+		if (!dbl)
+			return true;
+
+		setTimeout(function () {
+			thegrid.sel = true;
+		}, 1);
+		thegrid.sel = false;
+		link.click();
+	}
+	ev(e);
+}
+
 
 (function () {
 	if (!FormData)