From ccd2c670cba863a525ceb67a57ca3011b24bf4d4 Mon Sep 17 00:00:00 2001 From: Ritwik Srivastava Date: Mon, 23 Sep 2024 18:56:19 +0530 Subject: [PATCH 1/6] Add hotspot --- blocks/hotspot/hotspot.css | 138 +++++++++++++++++++++++++++++++++++++ blocks/hotspot/hotspot.js | 56 +++++++++++++++ 2 files changed, 194 insertions(+) create mode 100644 blocks/hotspot/hotspot.css create mode 100644 blocks/hotspot/hotspot.js diff --git a/blocks/hotspot/hotspot.css b/blocks/hotspot/hotspot.css new file mode 100644 index 0000000000..b46acea753 --- /dev/null +++ b/blocks/hotspot/hotspot.css @@ -0,0 +1,138 @@ +/* CSS: styles.css */ +.block.hotspot { + position: relative; + background: none; +} + +.block.hotspot img { + max-width: 100%; + width: auto; + height: auto; +} + +.block.hotspot > div.hotspot { + width: 20px; + height: 20px; + border-radius: 100%; + border: 3px solid var(--white); + background: var(--secondary); + position: absolute; + cursor: pointer; +} + +.block.hotspot img, +.block.hotspot video { + max-width: 100%; + width: auto; + height: auto; +} + +.block.hotspot > div.hotspot .hotspot-content { + display: none; /* Hidden by default */ + position: absolute; + top: -10px; /* Adjust positioning as needed */ + left: 50%; + transform: translateX(-50%); + /*background: rgba(0, 0, 0, 0.8);*/ + padding: 10px; + border-radius: 5px; + z-index: 15; + width: 200px; /* Adjust size as needed */ +} + +.block.hotspot > div.hotspot .hotspot-content.bgborder { + background: white; + border: 1px solid white; +} + +.block.hotspot > div.hotspot.onclick .hotspot-content, +.block.hotspot > div.hotspot:hover .hotspot-content { + display: block; /* Show on click or hover */ +} + + +.block.hotspot > div.hotspot .hotspot-content img, +.block.hotspot > div.hotspot .hotspot-content video { + width: 400px; + height: auto; + max-width: unset !important +} + +.block.hotspot > div.hotspot .hotspot-content video { + max-height: 150px; /* Adjust as needed */ +} + +/* +.block.hotspot > div.hotspot::after { + content: attr(data); + color: rgb(0, 255, 0); + opacity: 0; + transition: opacity 0.3s ease-in-out; + position: absolute; + padding: 15px; + width: 20vw; + left: -150%; + bottom: 150%; + background: black; + box-shadow: 0 8px 8px -4px lightgrey; + font-size: var(--body-font-size-s); + z-index: +1; + pointer-events: none; +} */ + +.block.hotspot > div.hotspot:hover::after, +.block.hotspot > div.hotspot.onclick::after { + opacity: 1; +} + + + +.section.hotspot-container > .section-container { + display: flex; + flex-direction: column; + margin: auto 1rem; +} + + +main .embed .embed-default { + position: relative; + left: 0; + width: 100%; + height: 0; + padding-bottom: 56.25%; +} + + +.block.hotspot > div.hotspot { + background: red !important; /* Temporary for visibility */ + z-index: 10; /* Ensure it is above the image */ +} + + +.section.hotspot-container > .section-container > div:first-of-type { + flex-basis: 70%; + display: flex; + flex-direction: column; + justify-content: flex-end; +} + +.block.hotspot svg { + position: absolute; + top: 0; + left: 0; + z-index: 0; +} + +@media (min-width: 62rem) { + .section.hotspot-container > .section-container { + display: flex; + flex-direction: row; + margin: auto; + } + + .section.hotspot-container > .section-container h1 { + font-size: var(--h1-font-size-desktop); + font-weight: var(--font-weight-small); + margin: 4.375rem 0 2.5rem; + } +} \ No newline at end of file diff --git a/blocks/hotspot/hotspot.js b/blocks/hotspot/hotspot.js new file mode 100644 index 0000000000..943bb80653 --- /dev/null +++ b/blocks/hotspot/hotspot.js @@ -0,0 +1,56 @@ +export default function decorate(block) { + [...block.children].forEach((row, r) => { + if (r > 0) { + const content = [...row.children][0].textContent.trim(); + const isImage = content.endsWith('.jpg') || content.endsWith('.png') || content.endsWith('.gif') || content.endsWith('.jpeg'); + const isVideo = content.endsWith('.mp4') || content.endsWith('.webm') || content.endsWith('play') || content.endsWith('content/'); // Adjust condition as needed + const isText = !isImage && !isVideo; // Assuming if it's neither image nor video, it's text + + const nexticondiv = document.createElement('div'); + nexticondiv.classList.add('hotspot'); // Added class for CSS targeting + nexticondiv.style.left = [...row.children][1].textContent; + nexticondiv.style.top = [...row.children][2].textContent; + nexticondiv.setAttribute('data', content); + //nexticondiv.setAttribute('data-city', [...row.children][0].textContent.split('\n')[2].split(':')[0]); + + // Create content display element + const contentContainer = document.createElement('div'); + contentContainer.classList.add('hotspot-content'); + + if (isImage) { + const img = document.createElement('img'); + img.src = content; + contentContainer.appendChild(img); + } else if (isVideo) { + const video =document.createElement('div'); + video.innerHTML =`
+ +
`; + //video.src = content; + //video.controls = true; // Allows user control over the video + contentContainer.appendChild(video); + } else if (isText) { + contentContainer.textContent = content; // Display text + contentContainer.classList.add('bgborder'); + } + + // Append content container to hotspot div + nexticondiv.appendChild(contentContainer); + + nexticondiv.addEventListener('click', () => { + // Hide content of all other hotspots + document.querySelectorAll('.hotspot').forEach(hotspot => { + if (hotspot !== nexticondiv) { + hotspot.classList.remove('onclick'); + } + }); + // Toggle the current hotspot content + nexticondiv.classList.toggle('onclick'); + }); + + row.after(nexticondiv); + row.remove(); + } + }); +} \ No newline at end of file From a55090c380828908cef370fe57483a256e531cb9 Mon Sep 17 00:00:00 2001 From: Ritwik Srivastava Date: Tue, 24 Sep 2024 09:24:12 +0530 Subject: [PATCH 2/6] Add hotspot --- blocks/hotspot/hotspot.css | 7 +++---- blocks/hotspot/hotspot.js | 4 +--- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/blocks/hotspot/hotspot.css b/blocks/hotspot/hotspot.css index b46acea753..56dd04844d 100644 --- a/blocks/hotspot/hotspot.css +++ b/blocks/hotspot/hotspot.css @@ -14,8 +14,7 @@ width: 20px; height: 20px; border-radius: 100%; - border: 3px solid var(--white); - background: var(--secondary); + border: 3px solid white; position: absolute; cursor: pointer; } @@ -131,8 +130,8 @@ main .embed .embed-default { } .section.hotspot-container > .section-container h1 { - font-size: var(--h1-font-size-desktop); - font-weight: var(--font-weight-small); + font-size: var(--heading-font-size-xxl); + font-weight: 300; margin: 4.375rem 0 2.5rem; } } \ No newline at end of file diff --git a/blocks/hotspot/hotspot.js b/blocks/hotspot/hotspot.js index 943bb80653..0657651f21 100644 --- a/blocks/hotspot/hotspot.js +++ b/blocks/hotspot/hotspot.js @@ -11,7 +11,6 @@ export default function decorate(block) { nexticondiv.style.left = [...row.children][1].textContent; nexticondiv.style.top = [...row.children][2].textContent; nexticondiv.setAttribute('data', content); - //nexticondiv.setAttribute('data-city', [...row.children][0].textContent.split('\n')[2].split(':')[0]); // Create content display element const contentContainer = document.createElement('div'); @@ -27,8 +26,7 @@ export default function decorate(block) { `; - //video.src = content; - //video.controls = true; // Allows user control over the video + // above code can be updated for video controls such as autoplay, loop, etc. contentContainer.appendChild(video); } else if (isText) { contentContainer.textContent = content; // Display text From c398a90968d48b1ac251aaf7627a161c0cbfe2a4 Mon Sep 17 00:00:00 2001 From: Ritwik Srivastava Date: Tue, 24 Sep 2024 09:40:15 +0530 Subject: [PATCH 3/6] Add hotspot --- blocks/hotspot/hotspot.css | 29 ++---------- blocks/hotspot/hotspot.js | 95 +++++++++++++++++++------------------- 2 files changed, 50 insertions(+), 74 deletions(-) diff --git a/blocks/hotspot/hotspot.css b/blocks/hotspot/hotspot.css index 56dd04844d..4efba57ac8 100644 --- a/blocks/hotspot/hotspot.css +++ b/blocks/hotspot/hotspot.css @@ -11,6 +11,8 @@ } .block.hotspot > div.hotspot { + background: red !important; /* Temporary for visibility */ + z-index: 10; /* Ensure it is above the image */ width: 20px; height: 20px; border-radius: 100%; @@ -32,7 +34,6 @@ top: -10px; /* Adjust positioning as needed */ left: 50%; transform: translateX(-50%); - /*background: rgba(0, 0, 0, 0.8);*/ padding: 10px; border-radius: 5px; z-index: 15; @@ -61,24 +62,6 @@ max-height: 150px; /* Adjust as needed */ } -/* -.block.hotspot > div.hotspot::after { - content: attr(data); - color: rgb(0, 255, 0); - opacity: 0; - transition: opacity 0.3s ease-in-out; - position: absolute; - padding: 15px; - width: 20vw; - left: -150%; - bottom: 150%; - background: black; - box-shadow: 0 8px 8px -4px lightgrey; - font-size: var(--body-font-size-s); - z-index: +1; - pointer-events: none; -} */ - .block.hotspot > div.hotspot:hover::after, .block.hotspot > div.hotspot.onclick::after { opacity: 1; @@ -102,12 +85,6 @@ main .embed .embed-default { } -.block.hotspot > div.hotspot { - background: red !important; /* Temporary for visibility */ - z-index: 10; /* Ensure it is above the image */ -} - - .section.hotspot-container > .section-container > div:first-of-type { flex-basis: 70%; display: flex; @@ -122,7 +99,7 @@ main .embed .embed-default { z-index: 0; } -@media (min-width: 62rem) { +@media (width >= 62rem) { .section.hotspot-container > .section-container { display: flex; flex-direction: row; diff --git a/blocks/hotspot/hotspot.js b/blocks/hotspot/hotspot.js index 0657651f21..072e796c1f 100644 --- a/blocks/hotspot/hotspot.js +++ b/blocks/hotspot/hotspot.js @@ -1,54 +1,53 @@ export default function decorate(block) { - [...block.children].forEach((row, r) => { - if (r > 0) { - const content = [...row.children][0].textContent.trim(); - const isImage = content.endsWith('.jpg') || content.endsWith('.png') || content.endsWith('.gif') || content.endsWith('.jpeg'); - const isVideo = content.endsWith('.mp4') || content.endsWith('.webm') || content.endsWith('play') || content.endsWith('content/'); // Adjust condition as needed - const isText = !isImage && !isVideo; // Assuming if it's neither image nor video, it's text + [...block.children].forEach((row, r) => { + if (r > 0) { + const content = [...row.children][0].textContent.trim(); + const isImage = content.endsWith('.jpg') || content.endsWith('.png') || content.endsWith('.gif') || content.endsWith('.jpeg'); + const isVideo = content.endsWith('.mp4') || content.endsWith('.webm') || content.endsWith('play') || content.endsWith('content/'); // Adjust condition as needed + const isText = !isImage && !isVideo; // Assuming if it's neither image nor video, it's text - const nexticondiv = document.createElement('div'); - nexticondiv.classList.add('hotspot'); // Added class for CSS targeting - nexticondiv.style.left = [...row.children][1].textContent; - nexticondiv.style.top = [...row.children][2].textContent; - nexticondiv.setAttribute('data', content); + const nexticondiv = document.createElement('div'); + nexticondiv.classList.add('hotspot'); // Added class for CSS targeting + nexticondiv.style.left = [...row.children][1].textContent; + nexticondiv.style.top = [...row.children][2].textContent; + nexticondiv.setAttribute('data', content); - // Create content display element - const contentContainer = document.createElement('div'); - contentContainer.classList.add('hotspot-content'); + // Create content display element + const contentContainer = document.createElement('div'); + contentContainer.classList.add('hotspot-content'); - if (isImage) { - const img = document.createElement('img'); - img.src = content; - contentContainer.appendChild(img); - } else if (isVideo) { - const video =document.createElement('div'); - video.innerHTML =`
- -
`; - // above code can be updated for video controls such as autoplay, loop, etc. - contentContainer.appendChild(video); - } else if (isText) { - contentContainer.textContent = content; // Display text - contentContainer.classList.add('bgborder'); - } + if (isImage) { + const img = document.createElement('img'); + img.src = content; + contentContainer.appendChild(img); + } else if (isVideo) { + const video = document.createElement('div'); + video.innerHTML = `
+ +
`; + // above code can be updated for video controls such as autoplay, loop, etc. + contentContainer.appendChild(video); + } else if (isText) { + contentContainer.textContent = content; // Display text + contentContainer.classList.add('bgborder'); + } - // Append content container to hotspot div - nexticondiv.appendChild(contentContainer); + // Append content container to hotspot div + nexticondiv.appendChild(contentContainer); + nexticondiv.addEventListener('click', () => { + // Hide content of all other hotspots + document.querySelectorAll('.hotspot').forEach((hotspot) => { + if (hotspot !== nexticondiv) { + hotspot.classList.remove('onclick'); + } + }); + // Toggle the current hotspot content + nexticondiv.classList.toggle('onclick'); + }); - nexticondiv.addEventListener('click', () => { - // Hide content of all other hotspots - document.querySelectorAll('.hotspot').forEach(hotspot => { - if (hotspot !== nexticondiv) { - hotspot.classList.remove('onclick'); - } - }); - // Toggle the current hotspot content - nexticondiv.classList.toggle('onclick'); - }); - - row.after(nexticondiv); - row.remove(); - } - }); -} \ No newline at end of file + row.after(nexticondiv); + row.remove(); + } + }); +} From 8dc2f2570bc4a2cc9cc765afab519d2ea657ace4 Mon Sep 17 00:00:00 2001 From: Ritwik Srivastava Date: Tue, 24 Sep 2024 15:12:25 +0530 Subject: [PATCH 4/6] Add hotspot --- blocks/hotspot/hotspot.css | 38 +++----------------------------------- 1 file changed, 3 insertions(+), 35 deletions(-) diff --git a/blocks/hotspot/hotspot.css b/blocks/hotspot/hotspot.css index 4efba57ac8..2384df19cd 100644 --- a/blocks/hotspot/hotspot.css +++ b/blocks/hotspot/hotspot.css @@ -11,7 +11,7 @@ } .block.hotspot > div.hotspot { - background: red !important; /* Temporary for visibility */ + background: red; /* Temporary for visibility */ z-index: 10; /* Ensure it is above the image */ width: 20px; height: 20px; @@ -50,12 +50,11 @@ display: block; /* Show on click or hover */ } - .block.hotspot > div.hotspot .hotspot-content img, .block.hotspot > div.hotspot .hotspot-content video { width: 400px; height: auto; - max-width: unset !important + max-width: unset; } .block.hotspot > div.hotspot .hotspot-content video { @@ -67,16 +66,7 @@ opacity: 1; } - - -.section.hotspot-container > .section-container { - display: flex; - flex-direction: column; - margin: auto 1rem; -} - - -main .embed .embed-default { +main .embed-default { position: relative; left: 0; width: 100%; @@ -84,31 +74,9 @@ main .embed .embed-default { padding-bottom: 56.25%; } - -.section.hotspot-container > .section-container > div:first-of-type { - flex-basis: 70%; - display: flex; - flex-direction: column; - justify-content: flex-end; -} - .block.hotspot svg { position: absolute; top: 0; left: 0; z-index: 0; } - -@media (width >= 62rem) { - .section.hotspot-container > .section-container { - display: flex; - flex-direction: row; - margin: auto; - } - - .section.hotspot-container > .section-container h1 { - font-size: var(--heading-font-size-xxl); - font-weight: 300; - margin: 4.375rem 0 2.5rem; - } -} \ No newline at end of file From d850230b44c4502965f4f4260ee2925e0d967c78 Mon Sep 17 00:00:00 2001 From: Ritwik Srivastava Date: Mon, 30 Sep 2024 13:04:18 +0530 Subject: [PATCH 5/6] incorporate review comments --- blocks/hotspot/hotspot.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/blocks/hotspot/hotspot.js b/blocks/hotspot/hotspot.js index 072e796c1f..9b8bb57a5d 100644 --- a/blocks/hotspot/hotspot.js +++ b/blocks/hotspot/hotspot.js @@ -2,9 +2,10 @@ export default function decorate(block) { [...block.children].forEach((row, r) => { if (r > 0) { const content = [...row.children][0].textContent.trim(); - const isImage = content.endsWith('.jpg') || content.endsWith('.png') || content.endsWith('.gif') || content.endsWith('.jpeg'); - const isVideo = content.endsWith('.mp4') || content.endsWith('.webm') || content.endsWith('play') || content.endsWith('content/'); // Adjust condition as needed - const isText = !isImage && !isVideo; // Assuming if it's neither image nor video, it's text + const variant = block.classList.value; + const isImageVariant = variant.includes('image') && !(variant.includes('video')); + const isVideoVariant = variant.includes('video') && !(variant.includes('image')); + const isTextVariant = !isImageVariant && !isVideoVariant; const nexticondiv = document.createElement('div'); nexticondiv.classList.add('hotspot'); // Added class for CSS targeting @@ -16,11 +17,11 @@ export default function decorate(block) { const contentContainer = document.createElement('div'); contentContainer.classList.add('hotspot-content'); - if (isImage) { + if (isImageVariant) { const img = document.createElement('img'); img.src = content; contentContainer.appendChild(img); - } else if (isVideo) { + } else if (isVideoVariant) { const video = document.createElement('div'); video.innerHTML = `