From 2933e48cda8db478b242cc6367287ce33c0053cc Mon Sep 17 00:00:00 2001 From: 7malikk <7malikk@gmail.com> Date: Thu, 22 Dec 2022 17:52:50 +0100 Subject: [PATCH 1/8] load thumbnail in sidebar --- examples/js/archive.js | 104 ++++++++++++++++++++++++++++++++--------- 1 file changed, 82 insertions(+), 22 deletions(-) diff --git a/examples/js/archive.js b/examples/js/archive.js index 38d674452..89ee119e8 100644 --- a/examples/js/archive.js +++ b/examples/js/archive.js @@ -59,27 +59,87 @@ function extractKey() { let imageCount = 0; let fetchedFrom; -function renderImages(file, url) { - if (file.format === 'PNG' || file.format === 'JPEG') { - const imageRow = document.createElement('div'); - const image = new Image(150, 150); - const placeButton = document.createElement('a'); - fetchedFrom = document.createElement('p'); - const fetchedFromUrl = document.createElement('a'); - fetchedFromUrl.setAttribute('href', input.value); - fetchedFromUrl.setAttribute('target', '_blank'); - fetchedFromUrl.innerHTML = 'this Internet Archive Collection'; - fetchedFrom.appendChild(fetchedFromUrl); - - placeButton.classList.add('btn', 'btn-sm', 'btn-outline-secondary', 'place-button'); - placeButton.innerHTML = 'Place on map'; - - image.src = `${url.replace('metadata', 'download')}/${file.name}`; - imageRow.classList.add('d-flex', 'justify-content-between', 'align-items-center', 'mb-4', 'pe-5'); - imageRow.append(image, placeButton); - - imageContainer.appendChild(imageRow); - imageCount++; +function renderImages(files, url, count) { + const thumbs = files.filter(file => file.source === 'derivative'); + const images = files.filter(file => file.format === 'PNG' || file.format === 'JPEG'); + + if (count < 100) { + images.forEach((file) => { + const imageRow = document.createElement('div'); + const image = new Image(150, 150); + const placeButton = document.createElement('a'); + fetchedFrom = document.createElement('p'); + const fetchedFromUrl = document.createElement('a'); + fetchedFromUrl.setAttribute('href', input.value); + fetchedFromUrl.setAttribute('target', '_blank'); + fetchedFromUrl.innerHTML = 'this Internet Archive Collection'; + fetchedFrom.appendChild(fetchedFromUrl); + + placeButton.classList.add('btn', 'btn-sm', 'btn-outline-secondary', 'place-button'); + placeButton.innerHTML = 'Place on map'; + image.setAttribute('data-original-image', `${url.replace('metadata', 'download')}/${file.name}`); + image.src = `${url.replace('metadata', 'download')}/${file.name}`; + imageRow.classList.add('d-flex', 'justify-content-between', 'align-items-center', 'mb-4', 'pe-5'); + imageRow.append(image, placeButton); + imageContainer.appendChild(imageRow); + imageCount++; + }); + } else if (thumbs.length === images.length) { + thumbs.forEach((file) => { + const imageRow = document.createElement('div'); + const image = new Image(65, 65); + const placeButton = document.createElement('a'); + fetchedFrom = document.createElement('p'); + const fetchedFromUrl = document.createElement('a'); + fetchedFromUrl.setAttribute('href', input.value); + fetchedFromUrl.setAttribute('target', '_blank'); + fetchedFromUrl.innerHTML = 'this Internet Archive Collection'; + fetchedFrom.appendChild(fetchedFromUrl); + const fileName = document.createElement('p'); + fileName.innerHTML = file.name; + fileName.classList.add('m-0'); + fileName.style.fontSize = '12px'; + + placeButton.classList.add('btn', 'btn-sm', 'btn-outline-secondary', 'place-button', 'mt-1'); + placeButton.innerHTML = 'Place'; + placeButton.setAttribute('title', 'Place image on map'); + + image.setAttribute('data-original', `${url.replace('metadata', 'download')}/${file.original}`); + image.src = `${url.replace('metadata', 'download')}/${file.name}`; + imageRow.classList.add('col-4', 'd-flex', 'flex-column', 'p-2', 'align-items-center'); + imageRow.append(image, placeButton, fileName); + imageContainer.appendChild(imageRow); + imageContainer.setAttribute('class', 'row'); + imageCount++; + }); + } else { + images.forEach((file) => { + const imageRow = document.createElement('div'); + const image = new Image(65, 65); + const placeButton = document.createElement('a'); + fetchedFrom = document.createElement('p'); + const fetchedFromUrl = document.createElement('a'); + fetchedFromUrl.setAttribute('href', input.value); + fetchedFromUrl.setAttribute('target', '_blank'); + fetchedFromUrl.innerHTML = 'this Internet Archive Collection'; + fetchedFrom.appendChild(fetchedFromUrl); + const fileName = document.createElement('p'); + fileName.innerHTML = file.name; + fileName.classList.add('m-0'); + fileName.style.fontSize = '12px'; + + placeButton.classList.add('btn', 'btn-sm', 'btn-outline-secondary', 'place-button', 'mt-1'); + placeButton.innerHTML = 'Place'; + placeButton.setAttribute('title', 'Place image on map'); + + image.setAttribute('data-original', `${url.replace('metadata', 'download')}/${file.name}`); + image.src = `${url.replace('metadata', 'download')}/${file.name}`; + imageRow.classList.add('col-4', 'd-flex', 'flex-column', 'p-2', 'align-items-center'); + imageRow.append(image, placeButton, fileName); + imageContainer.appendChild(imageRow); + imageContainer.setAttribute('class', 'row'); + imageCount++; + }); } } @@ -124,7 +184,7 @@ tileMap.addEventListener('click', (event) => { document.addEventListener('click', (event) => { if (event.target.classList.contains('place-button')) { - const imageURL = event.target.previousElementSibling.src; + const imageURL = event.target.previousElementSibling.dataset.original; const image = L.distortableImageOverlay(imageURL); map.imgGroup.addLayer(image); } From c325e392de1a691729d9c44a6be3eb26e9cbb6d3 Mon Sep 17 00:00:00 2001 From: 7malikk <7malikk@gmail.com> Date: Fri, 23 Dec 2022 17:04:17 +0100 Subject: [PATCH 2/8] hot fix - render thumbnail in side bar --- dist/leaflet.distortableimage.js | 2 +- examples/js/archive.js | 9 ++++++--- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/dist/leaflet.distortableimage.js b/dist/leaflet.distortableimage.js index 38b45f3eb..2c285c7b8 100644 --- a/dist/leaflet.distortableimage.js +++ b/dist/leaflet.distortableimage.js @@ -7269,7 +7269,7 @@ module.exports.formatError = function (err) { /******/ /******/ /* webpack/runtime/getFullHash */ /******/ !function() { -/******/ __webpack_require__.h = function() { return "e74ca99591694a12fb9d"; } +/******/ __webpack_require__.h = function() { return "06d4ae5e250bc7502b06"; } /******/ }(); /******/ /******/ /* webpack/runtime/hasOwnProperty shorthand */ diff --git a/examples/js/archive.js b/examples/js/archive.js index 89ee119e8..4d5bcebd5 100644 --- a/examples/js/archive.js +++ b/examples/js/archive.js @@ -149,9 +149,12 @@ function showImages(getUrl) { axios.get(url) .then((response) => { if (response.data.files && response.data.files.length != 0) { - response.data.files.forEach((file) => { - renderImages(file, url); - }); + count = response.data.files.filter((file)=> { + if (file.format === 'PNG' || file.format === 'JPEG' || file.format.includes('Thumb') ) { + return file; + } + }).length; + renderImages(response.data.files, url, count); responseText.innerHTML = imageCount ? `${imageCount} image(s) fetched successfully from ${fetchedFrom.innerHTML}.` : 'No images found in the link provided...'; } else { responseText.innerHTML = 'No images found in the link provided...'; From 5e1d50d4d01cd06ca7afd88d3c85d4b62c79e2af Mon Sep 17 00:00:00 2001 From: 7malikk <7malikk@gmail.com> Date: Wed, 4 Jan 2023 11:31:33 +0100 Subject: [PATCH 3/8] add comments and refactor --- examples/js/archive.js | 145 ++++++++++++++++++++--------------------- 1 file changed, 70 insertions(+), 75 deletions(-) diff --git a/examples/js/archive.js b/examples/js/archive.js index 4d5bcebd5..1e99bfaff 100644 --- a/examples/js/archive.js +++ b/examples/js/archive.js @@ -59,87 +59,82 @@ function extractKey() { let imageCount = 0; let fetchedFrom; + +// the imgsBelow function is called when the images and thumbnails gotten from the data fetched are below 100 +// it renders the images in the sidebar +const imgsBelow = (imgs, url) => { + imgs.forEach((file) => { + const imageRow = document.createElement('div'); + const image = new Image(150, 150); + const placeButton = document.createElement('a'); + fetchedFrom = document.createElement('p'); + const fetchedFromUrl = document.createElement('a'); + fetchedFromUrl.setAttribute('href', input.value); + fetchedFromUrl.setAttribute('target', '_blank'); + fetchedFromUrl.innerHTML = 'this Internet Archive Collection'; + fetchedFrom.appendChild(fetchedFromUrl); + + placeButton.classList.add('btn', 'btn-sm', 'btn-outline-secondary', 'place-button'); + placeButton.innerHTML = 'Place on map'; + image.setAttribute('data-original-image', `${url.replace('metadata', 'download')}/${file.name}`); + image.src = `${url.replace('metadata', 'download')}/${file.name}`; + imageRow.classList.add('d-flex', 'justify-content-between', 'align-items-center', 'mb-4', 'pe-5'); + imageRow.append(image, placeButton); + imageContainer.appendChild(imageRow); + imageCount++; + }); +}; + +// this function is called when there are more than a 100 images and thumbnails in data fetched and also if there are not enough thumbnails per image +// it takes in three arguments thumbs, url and imgs +// using defualt function parameters and a logical OR, it is reuseable as a graceful failsafe for when there are no thumbnails for all images. +const getThumbs = (thumbs = [], url, imgs) => { + const display = thumbs || imgs; + + display.forEach((file) => { + const imageRow = document.createElement('div'); + const image = new Image(65, 65); + const placeButton = document.createElement('a'); + fetchedFrom = document.createElement('p'); + const fetchedFromUrl = document.createElement('a'); + fetchedFromUrl.setAttribute('href', input.value); + fetchedFromUrl.setAttribute('target', '_blank'); + fetchedFromUrl.innerHTML = 'this Internet Archive Collection'; + fetchedFrom.appendChild(fetchedFromUrl); + const fileName = document.createElement('p'); + fileName.innerHTML = file.name; + fileName.classList.add('m-0'); + fileName.style.fontSize = '12px'; + + placeButton.classList.add('btn', 'btn-sm', 'btn-outline-secondary', 'place-button', 'mt-1'); + placeButton.innerHTML = 'Place'; + placeButton.setAttribute('title', 'Place image on map'); + + image.setAttribute('data-original', `${url.replace('metadata', 'download')}/${thumbs ? file.original : file.name}`); + image.src = `${url.replace('metadata', 'download')}/${file.name}`; + imageRow.classList.add('col-4', 'd-flex', 'flex-column', 'p-2', 'align-items-center'); + imageRow.append(image, placeButton, fileName); + imageContainer.appendChild(imageRow); + imageContainer.setAttribute('class', 'row'); + imageCount++; + }); +}; + + +// renderImages function is to render the images fetched from IA function renderImages(files, url, count) { + // thumbs variable is to extract the thumbnail files from the fetched data const thumbs = files.filter(file => file.source === 'derivative'); + // images variable is to extract the actual image files from the fetched data const images = files.filter(file => file.format === 'PNG' || file.format === 'JPEG'); + // this if check is to check the amount of image files and thumbnail files is below 100, afterwhich if true it renders the images in the sidebar if (count < 100) { - images.forEach((file) => { - const imageRow = document.createElement('div'); - const image = new Image(150, 150); - const placeButton = document.createElement('a'); - fetchedFrom = document.createElement('p'); - const fetchedFromUrl = document.createElement('a'); - fetchedFromUrl.setAttribute('href', input.value); - fetchedFromUrl.setAttribute('target', '_blank'); - fetchedFromUrl.innerHTML = 'this Internet Archive Collection'; - fetchedFrom.appendChild(fetchedFromUrl); - - placeButton.classList.add('btn', 'btn-sm', 'btn-outline-secondary', 'place-button'); - placeButton.innerHTML = 'Place on map'; - image.setAttribute('data-original-image', `${url.replace('metadata', 'download')}/${file.name}`); - image.src = `${url.replace('metadata', 'download')}/${file.name}`; - imageRow.classList.add('d-flex', 'justify-content-between', 'align-items-center', 'mb-4', 'pe-5'); - imageRow.append(image, placeButton); - imageContainer.appendChild(imageRow); - imageCount++; - }); - } else if (thumbs.length === images.length) { - thumbs.forEach((file) => { - const imageRow = document.createElement('div'); - const image = new Image(65, 65); - const placeButton = document.createElement('a'); - fetchedFrom = document.createElement('p'); - const fetchedFromUrl = document.createElement('a'); - fetchedFromUrl.setAttribute('href', input.value); - fetchedFromUrl.setAttribute('target', '_blank'); - fetchedFromUrl.innerHTML = 'this Internet Archive Collection'; - fetchedFrom.appendChild(fetchedFromUrl); - const fileName = document.createElement('p'); - fileName.innerHTML = file.name; - fileName.classList.add('m-0'); - fileName.style.fontSize = '12px'; - - placeButton.classList.add('btn', 'btn-sm', 'btn-outline-secondary', 'place-button', 'mt-1'); - placeButton.innerHTML = 'Place'; - placeButton.setAttribute('title', 'Place image on map'); - - image.setAttribute('data-original', `${url.replace('metadata', 'download')}/${file.original}`); - image.src = `${url.replace('metadata', 'download')}/${file.name}`; - imageRow.classList.add('col-4', 'd-flex', 'flex-column', 'p-2', 'align-items-center'); - imageRow.append(image, placeButton, fileName); - imageContainer.appendChild(imageRow); - imageContainer.setAttribute('class', 'row'); - imageCount++; - }); + imgsBelow(images, url); + } else if (thumbs.length === images.length) { // <--- this check is to make sure there are thumbnails for each image, else it defaults to the last case + getThumbs(thumbs, url, images); } else { - images.forEach((file) => { - const imageRow = document.createElement('div'); - const image = new Image(65, 65); - const placeButton = document.createElement('a'); - fetchedFrom = document.createElement('p'); - const fetchedFromUrl = document.createElement('a'); - fetchedFromUrl.setAttribute('href', input.value); - fetchedFromUrl.setAttribute('target', '_blank'); - fetchedFromUrl.innerHTML = 'this Internet Archive Collection'; - fetchedFrom.appendChild(fetchedFromUrl); - const fileName = document.createElement('p'); - fileName.innerHTML = file.name; - fileName.classList.add('m-0'); - fileName.style.fontSize = '12px'; - - placeButton.classList.add('btn', 'btn-sm', 'btn-outline-secondary', 'place-button', 'mt-1'); - placeButton.innerHTML = 'Place'; - placeButton.setAttribute('title', 'Place image on map'); - - image.setAttribute('data-original', `${url.replace('metadata', 'download')}/${file.name}`); - image.src = `${url.replace('metadata', 'download')}/${file.name}`; - imageRow.classList.add('col-4', 'd-flex', 'flex-column', 'p-2', 'align-items-center'); - imageRow.append(image, placeButton, fileName); - imageContainer.appendChild(imageRow); - imageContainer.setAttribute('class', 'row'); - imageCount++; - }); + getThumbs(false, url, images); } } From 2b89fc5878791efaac577369d8c52711629a6e6a Mon Sep 17 00:00:00 2001 From: Malik <75104021+7malikk@users.noreply.github.com> Date: Thu, 5 Jan 2023 17:51:01 +0100 Subject: [PATCH 4/8] code-style changes Co-authored-by: Jeffrey Warren --- examples/js/archive.js | 1 + 1 file changed, 1 insertion(+) diff --git a/examples/js/archive.js b/examples/js/archive.js index 1e99bfaff..acb3ffec5 100644 --- a/examples/js/archive.js +++ b/examples/js/archive.js @@ -110,6 +110,7 @@ const getThumbs = (thumbs = [], url, imgs) => { placeButton.innerHTML = 'Place'; placeButton.setAttribute('title', 'Place image on map'); + // store the full-resolution image URL in a "data-original" attribute image.setAttribute('data-original', `${url.replace('metadata', 'download')}/${thumbs ? file.original : file.name}`); image.src = `${url.replace('metadata', 'download')}/${file.name}`; imageRow.classList.add('col-4', 'd-flex', 'flex-column', 'p-2', 'align-items-center'); From 499f9915c15b981663187005df48a9d8d11ce27d Mon Sep 17 00:00:00 2001 From: Malik <75104021+7malikk@users.noreply.github.com> Date: Thu, 5 Jan 2023 17:54:07 +0100 Subject: [PATCH 5/8] code-style changes Co-authored-by: Jeffrey Warren --- examples/js/archive.js | 1 + 1 file changed, 1 insertion(+) diff --git a/examples/js/archive.js b/examples/js/archive.js index acb3ffec5..05cb8e63d 100644 --- a/examples/js/archive.js +++ b/examples/js/archive.js @@ -95,6 +95,7 @@ const getThumbs = (thumbs = [], url, imgs) => { const imageRow = document.createElement('div'); const image = new Image(65, 65); const placeButton = document.createElement('a'); + // link back to the images' source URL fetchedFrom = document.createElement('p'); const fetchedFromUrl = document.createElement('a'); fetchedFromUrl.setAttribute('href', input.value); From 8d590f618c8c4f43b934e3018a23d388a897920f Mon Sep 17 00:00:00 2001 From: Malik <75104021+7malikk@users.noreply.github.com> Date: Thu, 5 Jan 2023 17:54:32 +0100 Subject: [PATCH 6/8] code-style changes Co-authored-by: Jeffrey Warren --- examples/js/archive.js | 1 - 1 file changed, 1 deletion(-) diff --git a/examples/js/archive.js b/examples/js/archive.js index 05cb8e63d..d37e44ba7 100644 --- a/examples/js/archive.js +++ b/examples/js/archive.js @@ -123,7 +123,6 @@ const getThumbs = (thumbs = [], url, imgs) => { }; -// renderImages function is to render the images fetched from IA function renderImages(files, url, count) { // thumbs variable is to extract the thumbnail files from the fetched data const thumbs = files.filter(file => file.source === 'derivative'); From 30590aebd0f55f9c9f82d0a82c0887a6bc324bca Mon Sep 17 00:00:00 2001 From: 7malikk <7malikk@gmail.com> Date: Thu, 5 Jan 2023 18:47:07 +0100 Subject: [PATCH 7/8] render code refactor --- dist/leaflet.distortableimage.js | 2 +- examples/js/archive.js | 55 +++++++++++++------------------- 2 files changed, 24 insertions(+), 33 deletions(-) diff --git a/dist/leaflet.distortableimage.js b/dist/leaflet.distortableimage.js index 2c285c7b8..c2d1982a6 100644 --- a/dist/leaflet.distortableimage.js +++ b/dist/leaflet.distortableimage.js @@ -7269,7 +7269,7 @@ module.exports.formatError = function (err) { /******/ /******/ /* webpack/runtime/getFullHash */ /******/ !function() { -/******/ __webpack_require__.h = function() { return "06d4ae5e250bc7502b06"; } +/******/ __webpack_require__.h = function() { return "7093e9aa550efa305255"; } /******/ }(); /******/ /******/ /* webpack/runtime/hasOwnProperty shorthand */ diff --git a/examples/js/archive.js b/examples/js/archive.js index d37e44ba7..6d6b3e873 100644 --- a/examples/js/archive.js +++ b/examples/js/archive.js @@ -60,13 +60,13 @@ function extractKey() { let imageCount = 0; let fetchedFrom; -// the imgsBelow function is called when the images and thumbnails gotten from the data fetched are below 100 -// it renders the images in the sidebar -const imgsBelow = (imgs, url) => { - imgs.forEach((file) => { + +const renderImages = (fullResImages, url) => { + fullResImages.forEach((file) => { const imageRow = document.createElement('div'); const image = new Image(150, 150); const placeButton = document.createElement('a'); + // link back to the images' source URL fetchedFrom = document.createElement('p'); const fetchedFromUrl = document.createElement('a'); fetchedFromUrl.setAttribute('href', input.value); @@ -76,6 +76,7 @@ const imgsBelow = (imgs, url) => { placeButton.classList.add('btn', 'btn-sm', 'btn-outline-secondary', 'place-button'); placeButton.innerHTML = 'Place on map'; + // store the full-resolution image URL in a "data-original" attribute image.setAttribute('data-original-image', `${url.replace('metadata', 'download')}/${file.name}`); image.src = `${url.replace('metadata', 'download')}/${file.name}`; imageRow.classList.add('d-flex', 'justify-content-between', 'align-items-center', 'mb-4', 'pe-5'); @@ -85,13 +86,11 @@ const imgsBelow = (imgs, url) => { }); }; -// this function is called when there are more than a 100 images and thumbnails in data fetched and also if there are not enough thumbnails per image -// it takes in three arguments thumbs, url and imgs -// using defualt function parameters and a logical OR, it is reuseable as a graceful failsafe for when there are no thumbnails for all images. -const getThumbs = (thumbs = [], url, imgs) => { - const display = thumbs || imgs; +// renders thumbnails or images in thumbnail size +const renderThumbnails = (thumbnails = [], url, fullResImgs) => { + const imagesToRender = thumbnails || fullResImgs; - display.forEach((file) => { + imagesToRender.forEach((file) => { const imageRow = document.createElement('div'); const image = new Image(65, 65); const placeButton = document.createElement('a'); @@ -112,7 +111,7 @@ const getThumbs = (thumbs = [], url, imgs) => { placeButton.setAttribute('title', 'Place image on map'); // store the full-resolution image URL in a "data-original" attribute - image.setAttribute('data-original', `${url.replace('metadata', 'download')}/${thumbs ? file.original : file.name}`); + image.setAttribute('data-original', `${url.replace('metadata', 'download')}/${thumbnails ? file.original : file.name}`); image.src = `${url.replace('metadata', 'download')}/${file.name}`; imageRow.classList.add('col-4', 'd-flex', 'flex-column', 'p-2', 'align-items-center'); imageRow.append(image, placeButton, fileName); @@ -122,35 +121,26 @@ const getThumbs = (thumbs = [], url, imgs) => { }); }; - -function renderImages(files, url, count) { - // thumbs variable is to extract the thumbnail files from the fetched data - const thumbs = files.filter(file => file.source === 'derivative'); - // images variable is to extract the actual image files from the fetched data - const images = files.filter(file => file.format === 'PNG' || file.format === 'JPEG'); - - // this if check is to check the amount of image files and thumbnail files is below 100, afterwhich if true it renders the images in the sidebar - if (count < 100) { - imgsBelow(images, url); - } else if (thumbs.length === images.length) { // <--- this check is to make sure there are thumbnails for each image, else it defaults to the last case - getThumbs(thumbs, url, images); - } else { - getThumbs(false, url, images); - } -} - function showImages(getUrl) { const url = getUrl.replace('details', 'metadata'); axios.get(url) .then((response) => { if (response.data.files && response.data.files.length != 0) { + const imageThumbnails = response.data.files.filter(file => file.source === 'derivative'); + const fullResImages = response.data.files.filter(file => file.format === 'PNG' || file.format === 'JPEG'); count = response.data.files.filter((file)=> { - if (file.format === 'PNG' || file.format === 'JPEG' || file.format.includes('Thumb') ) { - return file; - } + if (file.format === 'PNG' || file.format === 'JPEG' || file.format.includes('Thumb')) return file; }).length; - renderImages(response.data.files, url, count); + if (count > 100) { + if (imageThumbnails.length === fullResImages.length) { + renderThumbnails(imageThumbnails, url, fullResImages); + } else { + renderThumbnails(false, url, fullResImages); + } + } else { + renderImages(fullResImages, url); + } responseText.innerHTML = imageCount ? `${imageCount} image(s) fetched successfully from ${fetchedFrom.innerHTML}.` : 'No images found in the link provided...'; } else { responseText.innerHTML = 'No images found in the link provided...'; @@ -158,6 +148,7 @@ function showImages(getUrl) { }) .catch((error) => { responseText.innerHTML = 'Uh-oh! Something\'s not right with the link provided!'; + console.log(error); }) .finally(() => { bootstrap.Modal.getInstance(welcomeModal).hide(); From 20fe8f165954998baf745cce7dc356ca1b9c61aa Mon Sep 17 00:00:00 2001 From: 7malikk <7malikk@gmail.com> Date: Thu, 5 Jan 2023 19:25:46 +0100 Subject: [PATCH 8/8] hot fix --- dist/leaflet.distortableimage.js | 2 +- examples/js/archive.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/dist/leaflet.distortableimage.js b/dist/leaflet.distortableimage.js index c2d1982a6..8f3ddb2d6 100644 --- a/dist/leaflet.distortableimage.js +++ b/dist/leaflet.distortableimage.js @@ -7269,7 +7269,7 @@ module.exports.formatError = function (err) { /******/ /******/ /* webpack/runtime/getFullHash */ /******/ !function() { -/******/ __webpack_require__.h = function() { return "7093e9aa550efa305255"; } +/******/ __webpack_require__.h = function() { return "d06aea7ce8d056523b19"; } /******/ }(); /******/ /******/ /* webpack/runtime/hasOwnProperty shorthand */ diff --git a/examples/js/archive.js b/examples/js/archive.js index 6d6b3e873..2a6ddd04c 100644 --- a/examples/js/archive.js +++ b/examples/js/archive.js @@ -77,7 +77,7 @@ const renderImages = (fullResImages, url) => { placeButton.classList.add('btn', 'btn-sm', 'btn-outline-secondary', 'place-button'); placeButton.innerHTML = 'Place on map'; // store the full-resolution image URL in a "data-original" attribute - image.setAttribute('data-original-image', `${url.replace('metadata', 'download')}/${file.name}`); + image.setAttribute('data-original', `${url.replace('metadata', 'download')}/${file.name}`); image.src = `${url.replace('metadata', 'download')}/${file.name}`; imageRow.classList.add('d-flex', 'justify-content-between', 'align-items-center', 'mb-4', 'pe-5'); imageRow.append(image, placeButton);