function photogridwithdetailview( images, { width, height, gridimgsize = 50, detailviewwidth, detailviewheight, gridimgpadding = 10 } ) { console.log("images", images); if (!images || images === "" || images.length === 0) { return ""; } let detailviewimg = images[0]["viewsrc"]; let detailview = html`

`; let gridwidth = width - detailviewwidth - 10; let gridheight = height - 50; let cols = Math.floor(gridwidth / (gridimgsize + gridimgpadding / 2)); let rows = Math.floor( (gridheight - 2 * gridimgpadding) / (gridimgsize + gridimgpadding / 2) ); rows = Math.min(rows, Math.ceil(images.length / cols)); function fetch_curr_images(i) { return [...images.slice(i, i + 10)]; } let index = 0; let upArrow = html``; let downArrow = html``; function redraw(i) { let curr_images = fetch_curr_images(i); let counter = -1; let grid = Array.from({ length: rows }).map((d, r) => { return html`

${Array.from({ length: cols }).map((d, c) => { counter += 1; if (!curr_images[counter]) { return ""; } let img = html`

`; // Based on the event, track the img index let index = counter; img.addEventListener("mouseover", () => { img.style = "border: 2px solid blue"; detailview.childNodes[1].src = curr_images[index]?.viewsrc; }); img.addEventListener("mouseout", () => { img.style = ""; }); return html`

${img}

`; })}

`; }); let upArrowcheckBound = upArrow; let downArrowcheckBound = downArrow; if (i == 0) { upArrowcheckBound = html`

`; } if (i >= images.length - 10) { downArrowcheckBound = html`

`; } let gridview = html`

${upArrowcheckBound}

${grid}

${downArrowcheckBound}

`; return gridview; } let grid = redraw(index); let target = html`

${detailview} ${grid}

`; upArrow.addEventListener("click", () => { if (index < 1) { return; } index -= 1; grid = redraw(index); target.replaceChild(grid, target.querySelector("#grid_view")); }); downArrow.addEventListener("click", () => { if (index >= images.length - 10) { return; } index += 1; grid = redraw(index); target.replaceChild(grid, target.querySelector("#grid_view")); // grid.querySelector("#photo_grid").lastChild.lastChild.childNodes[0].focus(); }); // target.addEventListener("keyup", (evt) => { // if (evt.key === "Tab" && evt.target.className === "grid-image") { // console.log(evt.target, "tab"); // detailview.childNodes[1].src = evt.target.childNodes[0].src; // } // }); return target; }