2d:null 2e:["$","title",null,{"children":"Photogrid with Detailed View | Kasi Viswanath | Observable"}] 33:Teab,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; }34:[{"id":"294fa32badf1877662d1093baf74549a8d453bd2532ead8c9925e45c118cd51da7c8b6dc424cb050379e83d27caa0e9a646c34808f07594398b3786c52efbcda","href":"https://static.observableusercontent.com/files/294fa32badf1877662d1093baf74549a8d453bd2532ead8c9925e45c118cd51da7c8b6dc424cb050379e83d27caa0e9a646c34808f07594398b3786c52efbcda","name":"6.jpg","type":"image/jpeg","lastModified":1664325223804.932,"size":1154},{"id":"59fc2dd0497a9e09aab44a8f76b9076fcd6023eab11638ad89e7b611a38df56d99b68a4f61bb7b2cfcf642a1f6301e336ce2aff2c80443ec7c11378e174b98e2","href":"https://static.observableusercontent.com/files/59fc2dd0497a9e09aab44a8f76b9076fcd6023eab11638ad89e7b611a38df56d99b68a4f61bb7b2cfcf642a1f6301e336ce2aff2c80443ec7c11378e174b98e2","name":"11.jpg","type":"image/jpeg","lastModified":1664325223811.867,"size":912},{"id":"43e626564bb5cd732dabc76d211e6b5ac70a34de24af686ce32d48e8699cb01b1b432e9b2240ccc2381737167ea8199a85f9efc23030f2f753cbd6866fba892c","href":"https://static.observableusercontent.com/files/43e626564bb5cd732dabc76d211e6b5ac70a34de24af686ce32d48e8699cb01b1b432e9b2240ccc2381737167ea8199a85f9efc23030f2f753cbd6866fba892c","name":"7.jpg","type":"image/jpeg","lastModified":1664325223833.626,"size":744},{"id":"8612e4e6f07f1e00deaf829a6dba26a99929e712075eb8a539faa45c247af1726d0206a39d29fe9ea4debe1acca057a7d29bac120310785515078978940387f0","href":"https://static.observableusercontent.com/files/8612e4e6f07f1e00deaf829a6dba26a99929e712075eb8a539faa45c247af1726d0206a39d29fe9ea4debe1acca057a7d29bac120310785515078978940387f0","name":"4.jpg","type":"image/jpeg","lastModified":1664325223829.382,"size":856},{"id":"65be673b24a9734960837b6c5baff3d1eb27c04e227fab511ed5a505251b904ce3626c01e2fcf9b65f830dd2edf51050d40d221f4dd50cd6ec1b3a6438bbe1e1","href":"https://static.observableusercontent.com/files/65be673b24a9734960837b6c5baff3d1eb27c04e227fab511ed5a505251b904ce3626c01e2fcf9b65f830dd2edf51050d40d221f4dd50cd6ec1b3a6438bbe1e1","name":"8.jpg","type":"image/jpeg","lastModified":1664325223829.599,"size":734},{"id":"3d1ef73b5760663e2a7ba0b04d706576273473784b63079b3faf2c1ef891f156be357c32e0a488481e434367ae3c1a9e18e074e89542eb8c13aaf1e7aea63629","href":"https://static.observableusercontent.com/files/3d1ef73b5760663e2a7ba0b04d706576273473784b63079b3faf2c1ef891f156be357c32e0a488481e434367ae3c1a9e18e074e89542eb8c13aaf1e7aea63629","name":"1.jpg","type":"image/jpeg","lastModified":1664325223834.627,"size":874},{"id":"1645e7c61de86d8372260efcbfef8e3f24f5a11993722dc1ef1e34abff0b7580d074ffbb1473649383754062fb5ed5955f8b89fa3d1c2fbcc51a543e1852c335","href":"https://static.observableusercontent.com/files/1645e7c61de86d8372260efcbfef8e3f24f5a11993722dc1ef1e34abff0b7580d074ffbb1473649383754062fb5ed5955f8b89fa3d1c2fbcc51a543e1852c335","name":"3.jpg","type":"image/jpeg","lastModified":1664325223879.367,"size":1048},{"id":"180e137a580ec558d143d29823864974c6ec12ae7b42e72a92bb1574273e92cb9be251376c68cf4d15c2e251e31b01daded11e2bc0b4431a8764bd723fd15d36","href":"https://static.observableusercontent.com/files/180e137a580ec558d143d29823864974c6ec12ae7b42e72a92bb1574273e92cb9be251376c68cf4d15c2e251e31b01daded11e2bc0b4431a8764bd723fd15d36","name":"10.jpg","type":"image/jpeg","lastModified":1664325223930.808,"size":1267},{"id":"37d5ac2460b25c9db225054fa34988ae21986ad5f626757bc63e8536fa60cba07fdccb19b661b4a0ea550207a14d25f2b7fa93993bbacefec975c6e0583b3d12","href":"https://static.observableusercontent.com/files/37d5ac2460b25c9db225054fa34988ae21986ad5f626757bc63e8536fa60cba07fdccb19b661b4a0ea550207a14d25f2b7fa93993bbacefec975c6e0583b3d12","name":"5.jpg","type":"image/jpeg","lastModified":1664325223958.559,"size":1057},{"id":"442f7a9937bfbaac1dffebcb49598c110eea380d1944dcbcce8383cbec0380cbf843b78ab1cd2addc1094baa5c9e7345cfac989b3c55bb8146c5a35d0e92d8f5","href":"https://static.observableusercontent.com/files/442f7a9937bfbaac1dffebcb49598c110eea380d1944dcbcce8383cbec0380cbf843b78ab1cd2addc1094baa5c9e7345cfac989b3c55bb8146c5a35d0e92d8f5","name":"2.jpg","type":"image/jpeg","lastModified":1664325223961.215,"size":739},{"id":"fa87542d0c264b7cbee4f04ccc6148326d4398326ad5869a5c9fb2fc1b8a69f2d6edb50d98e5e1cfd4d97f2ede19d4bdf5f1fea8721d64bc20194889e8ed509a","href":"https://static.observableusercontent.com/files/fa87542d0c264b7cbee4f04ccc6148326d4398326ad5869a5c9fb2fc1b8a69f2d6edb50d98e5e1cfd4d97f2ede19d4bdf5f1fea8721d64bc20194889e8ed509a","name":"detailView.jpg","type":"image/jpeg","lastModified":1664330325231.802,"size":14252}] 31:{"id":"c217544125a90bb9","slug":"photogrid-with-detailed-view","title":"Photogrid with Detailed View","thumbnail":"295dea6cfd47b36cb4edb17a584b30d70a3d9d7568fcc3a02c3c2923b67d06f8","access_level":"public","create_time":"$D2022-09-27T23:59:33.551Z","update_time":"$D2022-10-13T18:56:41.334Z","view_time":null,"first_public_time":"$D2022-09-28T04:42:58.429Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"b760ea566a896d7d","login":"kasivisu4","name":"Kasi Viswanath","avatar_url":"https://avatars-next.observableusercontent.com/48e36723913e7e5b18b906e1d7cde12fad4146715e78bbf74d3db7969a248b56","tier":"starter_2024"},"version":512,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fcd94e1c1ca12ae9","login":"kasivisu4","name":"Kasi Viswanath","avatar_url":"https://avatars-next.observableusercontent.com/48e36723913e7e5b18b906e1d7cde12fad4146715e78bbf74d3db7969a248b56","tier":null}],"members":[{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null,"role":"editor"},{"type":"individual","id":"fcd94e1c1ca12ae9","login":"kasivisu4","name":"Kasi Viswanath","avatar_url":"https://avatars-next.observableusercontent.com/48e36723913e7e5b18b906e1d7cde12fad4146715e78bbf74d3db7969a248b56","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"b76ab0ab689e9c2b","slug":"list_curator","title":"List Curator","owner":{"id":"b760ea566a896d7d","login":"kasivisu4","name":"Kasi Viswanath"}},"type":"notebook","body":{"title":"Photogrid with Detailed View","cells":[{"id":0,"value":"# Photogrid with Detailed View","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"A widget that is designed to display images of the apartment which is used in annotator usecase","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"photogridwithdetailview(images, {\n width: width,\n height: height,\n detailviewwidth: 0.9 * width,\n detailviewheight: height\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"Add side button to navigate b/w images","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":409,"value":"images.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"height = 650","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"images.concat(images)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"images","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"craiglistapt = [\n \"https://images.craigslist.org/00p0p_hJJj61ubMhpz_0CI0t2_50x50c.jpg\",\n \"https://images.craigslist.org/00f0f_gjMY46dZcMuz_0CI0t2_50x50c.jpg\",\n \"https://images.craigslist.org/00k0k_2MpTgGr4dV9z_0CI0t2_50x50c.jpg\",\n \"https://images.craigslist.org/00r0r_juG5OkYZfYxz_0CI0t2_50x50c.jpg\",\n \"https://images.craigslist.org/00D0D_3t7IaNAcZa9z_0CI0t2_50x50c.jpg\",\n \"https://images.craigslist.org/00n0n_1J8q7CBHvwRz_0CI0rn_50x50c.jpg\",\n \"https://images.craigslist.org/00O0O_kTSnTmtgbBNz_09G07g_50x50c.jpg\",\n \"https://images.craigslist.org/00808_cHPVIsfS9crz_04Q07g_50x50c.jpg\",\n \"https://images.craigslist.org/00L0L_juwgb954Mkz_09G07g_50x50c.jpg\",\n \"https://images.craigslist.org/00O0O_gGAQd1x7uNz_09G07g_50x50c.jpg\",\n \"https://images.craigslist.org/01212_2GKZoDq8Rtnz_09G07g_50x50c.jpg\"\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"images = craiglistapt.map((x) => {\n return {\n viewsrc: x.slice(0, x.length - 10) + \"600x450.jpg\",\n gridsrc: x\n };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"// images = [\n// ...uploaded_images.map((x) => {\n// return {\n// gridsrc: x.src,\n// viewsrc: default_img.src\n// };\n// })\n// ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"default_img = FileAttachment(\"detailView.jpg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"uploaded_images = Promise.all([\n FileAttachment(\"1.jpg\").image(),\n FileAttachment(\"2.jpg\").image(),\n FileAttachment(\"3.jpg\").image(),\n FileAttachment(\"4.jpg\").image(),\n FileAttachment(\"5.jpg\").image(),\n FileAttachment(\"6.jpg\").image(),\n FileAttachment(\"7.jpg\").image(),\n FileAttachment(\"8.jpg\").image(),\n FileAttachment(\"10.jpg\").image(),\n FileAttachment(\"11.jpg\").image()\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"