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

This commit is contained in:
Til Schmitter 2026-06-12 23:05:00 +02:00
parent d11fb558f2
commit 2d487d1427
3 changed files with 138 additions and 117 deletions

View file

@ -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);
};

View file

@ -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;

View file

@ -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);
}
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);
return fclick.call(this, e, true);
}
r.imshow = function (url) {
var sel = '#ggrid>a'
if (!thegrid.en) {
thegrid.bagit('#files');
sel = '#files a[id]';
}
var ims = QSA(sel);
var ims = QSA('#files a[id]');
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)