From ed1a9e285c9034d78312887c6e7a439110590ad3 Mon Sep 17 00:00:00 2001 From: vinaykumargujja Date: Mon, 13 Nov 2023 16:08:49 +0530 Subject: [PATCH 1/2] updated to dynamic width and height --- blocks/model-image/model-image.css | 177 +++++++++++++++++++++++++++++ blocks/model-image/model-image.js | 136 ++++++++++++++++++++++ 2 files changed, 313 insertions(+) create mode 100644 blocks/model-image/model-image.css create mode 100644 blocks/model-image/model-image.js diff --git a/blocks/model-image/model-image.css b/blocks/model-image/model-image.css new file mode 100644 index 00000000..1e7eaf2c --- /dev/null +++ b/blocks/model-image/model-image.css @@ -0,0 +1,177 @@ +#colorbox,#cboxOverlay,#cboxWrapper { + position: absolute; + top: 0; + left: 0; + z-index: 9999; + overflow: hidden; + -webkit-transform: translate3d(0,0,0) +} + +#cboxWrapper { + max-width: none +} + +#cboxOverlay { + position: fixed; + width: 100%; + height: 100% +} + +#cboxContent { + position: relative +} + +#cboxLoadingOverlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100% +} + +#cboxClose { + cursor: pointer +} + +.cboxPhoto { + float: left; + margin: auto; + border: 0; + display: block; + max-width: none; + -ms-interpolation-mode: bicubic +} + +#colorbox,#cboxContent{ + box-sizing: content-box; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box +} + +#cboxOverlay { + background: #000 +} + +#colorbox { + outline: 0 +} + +#cboxContent { + margin-top: 20px; + background: #fff +} + +#cboxContent .button { + padding: .6em 1em; + margin-top: 10px +} + +#cboxClose { + border: 0; + padding: 0; + margin: 0; + overflow: visible; + width: auto; + background: 0 +} + +#cboxClose:active { + outline: 0 +} + +#cboxClose { + position: absolute; + top: 0; + right: 0; + display: block; + width: 32px; + height: 32px; + padding: 0; + font-size: 28px; + font-family: Arial,Helvetica; + line-height: 32px; + background-color: #ec8f2d; + color: #fff; + border-radius: 0 +} + +#cboxClose:hover { + background-color: #000 !important +} + +.icon-search { + position: absolute; + bottom: 0; + right: 0; + display: block; + width: 32px; + height: 32px; + padding: 0; + margin: 0; + border: 0; + font-size: 16px; + line-height: 32px; + background-color: #ec8f2d; + color: #fff; + border-radius: 0 +} + +.icon-search:hover { + background-color: #000 !important +} + +#colorbox{ + animation: createBox 1s; +} +@keyframes createBox { + from { + transform: scale(0); + } + to { + transform: scale(1); + } +} + +.image-wrapper{ + border-radius: 5px; + box-shadow: 0 2px 8px rgba(0 0 0 / 10%); + box-sizing: border-box; + cursor: pointer; + margin: 0.6em 0; + padding: 10px; + width: 676px; + margin: 0 auto; +} + +.image-wrapper-ani{ + animation: createBox1 0s; +} +@keyframes createBox1 { + from { + transform: scale(1); + } + to { + transform: scale(1.5); + } +} + +/* .colorbox-wrapper{ + display: flex; + position: absolute; + justify-content: center; + align-items: center; + flex-direction: row; + flex-wrap: nowrap; + width: 100vw; + height: 100vh; +} */ + +#colorbox{ + display: block; + visibility: visible; + background-color: white; + padding: 15px; + /* top: 50%; + left: 50%; + transform: translateX(-50%); */ +} diff --git a/blocks/model-image/model-image.js b/blocks/model-image/model-image.js new file mode 100644 index 00000000..23be2a22 --- /dev/null +++ b/blocks/model-image/model-image.js @@ -0,0 +1,136 @@ +// creating the elements with class names +const creteEleAddCls = (obj) => { + const { classes } = obj; + let { targetEle } = obj; + targetEle = document.createElement(targetEle); + if (classes && classes.length > 0) { + targetEle.classList.add(...classes); + } + return targetEle; +}; +// adding the inline-styles for the element +const addStyles = (ele, obj) => { + for (const [key, value] of Object.entries(obj)) { + ele.style[key] = value; + } +}; +// setting the attributes for the element +const setAttributes = (ele, obj) => { + for (const [key, value] of Object.entries(obj)) { + ele.setAttribute(key, value); + } +}; +export default function decorate(block) { + const imgWrap = creteEleAddCls({ targetEle: 'div', classes: ['img-colorbox-popup', 'cboxElement'] }); + const pictureTag = block.querySelector('picture'); + const pictureTagForZoom = pictureTag.cloneNode(true); + addStyles(pictureTagForZoom, { cursor: 'pointer' }); + imgWrap.append(pictureTag); + imgWrap.classList.add('image-wrapper'); + block.textContent = ''; + block.append(imgWrap); + const overlayDiv = creteEleAddCls({ targetEle: 'div', classes: [] }); + addStyles(overlayDiv, { + display: 'none', + opacity: '0', + cursor: 'pointer', + visibility: 'visible', + }); + setAttributes(overlayDiv, { + id: 'cboxOverlay', + }); + document.body.append(overlayDiv); + + const colorboxWrapper = creteEleAddCls({ targetEle: 'div', classes: ['colorbox-wrapper'] }); + const colorboxDiv = creteEleAddCls({ targetEle: 'div', classes: [] }); + setAttributes(colorboxDiv, { + id: 'colorbox', + role: 'dialog', + tabindex: '-1', + }); + addStyles(colorboxDiv, { + display: 'none', + visibility: 'visible', + // top: '50px', + // left: '20px', + // position: 'absolute', + }); + + colorboxWrapper.append(colorboxDiv); + document.body.append(colorboxWrapper); + const pictureWrapperDiv = creteEleAddCls({ targetEle: 'div', classes: ['picture-wrapper'] }); + const pictureOverflowWrapperDiv = creteEleAddCls({ targetEle: 'div', classes: ['picture-overflow-wrap'] }); + pictureOverflowWrapperDiv.append(pictureTagForZoom); + pictureWrapperDiv.append(pictureOverflowWrapperDiv); + colorboxDiv.append(pictureWrapperDiv); + const cboxWrapperSecondChildCboxbtnIconSearch = creteEleAddCls({ targetEle: 'span', classes: ['button', 'icon-search'] }); + const cboxWrapperSecondChildCboxCloseBtn = creteEleAddCls({ targetEle: 'button', classes: [] }); + setAttributes(cboxWrapperSecondChildCboxCloseBtn, { + id: 'cboxClose', + type: 'button', + }); + cboxWrapperSecondChildCboxCloseBtn.innerHTML = '×'; + colorboxDiv.append(cboxWrapperSecondChildCboxCloseBtn); + colorboxDiv.append(cboxWrapperSecondChildCboxbtnIconSearch); + document.querySelector('.img-colorbox-popup.cboxElement').addEventListener('click', () => { + addStyles(overlayDiv, { + display: 'block', + opacity: '0.7', + cursor: 'pointer', + visibility: 'visible', + }); + addStyles(colorboxDiv, { + display: 'block', + visibility: 'visible', + // top: '50px', + // left: '20px', + // right: '20px', + // position: 'absolute', + 'z-index': '9999', + 'background-color': 'white', + padding: '15px', + }); + }); + document.getElementById('cboxClose').addEventListener('click', () => { + addStyles(overlayDiv, { + display: 'none', + opacity: '0', + }); + addStyles(colorboxDiv, { + display: 'none', + }); + addStyles(document.querySelector('.picture-wrapper'), { overflow: 'unset' }); + addStyles(document.querySelector('.picture-overflow-wrap'), { width: '100%', height: '100%' }); + }); + overlayDiv.addEventListener('click', () => { + addStyles(overlayDiv, { + display: 'none', + opacity: '0', + }); + addStyles(colorboxDiv, { + display: 'none', + }); + addStyles(document.querySelector('.picture-wrapper'), { overflow: 'unset' }); + addStyles(document.querySelector('.picture-overflow-wrap'), + { + width: '100%', + height: '100%', + }); + }); + pictureTagForZoom.addEventListener('click', () => { + addStyles(document.querySelector('.picture-wrapper'), { overflow: 'auto' }); + addStyles(document.querySelector('.picture-overflow-wrap'), + { + width: `${pictureTag.querySelector('img').getAttribute('width')}px`, + height: `${pictureTag.querySelector('img').getAttribute('height')}px` + }); + }); + document.querySelector('.button.icon-search').addEventListener('click', () => { + addStyles(document.querySelector('.picture-wrapper'), { overflow: 'auto' }); + addStyles(document.querySelector('.picture-overflow-wrap'), + { + width: '133%' + } + ); + }); +} From 558ec5ad7321e28def8c0afc2b06e6d2d80765f0 Mon Sep 17 00:00:00 2001 From: TeshuKatepalli Date: Tue, 14 Nov 2023 19:29:10 +0530 Subject: [PATCH 2/2] Updated the logic --- blocks/model-image/model-image.css | 114 +++++++++++------------------ blocks/model-image/model-image.js | 88 ++++++++++------------ 2 files changed, 84 insertions(+), 118 deletions(-) diff --git a/blocks/model-image/model-image.css b/blocks/model-image/model-image.css index 1e7eaf2c..e975bb3b 100644 --- a/blocks/model-image/model-image.css +++ b/blocks/model-image/model-image.css @@ -1,24 +1,28 @@ -#colorbox,#cboxOverlay,#cboxWrapper { - position: absolute; - top: 0; - left: 0; - z-index: 9999; - overflow: hidden; - -webkit-transform: translate3d(0,0,0) +.model-image .img-colorbox-popup { + margin: 0.6em 0; } -#cboxWrapper { - max-width: none +.model-image { + position: relative; } -#cboxOverlay { - position: fixed; +.model-image .img-colorbox-popup img { width: 100%; - height: 100% } -#cboxContent { - position: relative +#cboxOverlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 999; + overflow: hidden; + transform: translate3d(0,0,0); + background: #0009; + align-items: center; + justify-content: center; + cursor: pointer; } #cboxLoadingOverlay { @@ -29,36 +33,29 @@ height: 100% } -#cboxClose { - cursor: pointer -} - .cboxPhoto { float: left; margin: auto; border: 0; display: block; max-width: none; - -ms-interpolation-mode: bicubic } -#colorbox,#cboxContent{ +#colorbox{ box-sizing: content-box; - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box -} - -#cboxOverlay { - background: #000 -} - -#colorbox { - outline: 0 + outline: 0; + animation: create-box 1s; } #cboxContent { margin-top: 20px; - background: #fff + background: #fff; + box-sizing: content-box; + position: relative; +} + +.picture-wrapper { + overflow: scroll; } #cboxContent .button { @@ -66,15 +63,6 @@ margin-top: 10px } -#cboxClose { - border: 0; - padding: 0; - margin: 0; - overflow: visible; - width: auto; - background: 0 -} - #cboxClose:active { outline: 0 } @@ -92,14 +80,17 @@ line-height: 32px; background-color: #ec8f2d; color: #fff; - border-radius: 0 + border-radius: 0; + border: 0; + margin: 0; + overflow: visible; } #cboxClose:hover { - background-color: #000 !important + background-color: #00000050 !important } -.icon-search { +.model-image .icon-search { position: absolute; bottom: 0; right: 0; @@ -116,17 +107,15 @@ border-radius: 0 } -.icon-search:hover { +.model-image .icon-search:hover { background-color: #000 !important } -#colorbox{ - animation: createBox 1s; -} -@keyframes createBox { +@keyframes create-box { from { transform: scale(0); } + to { transform: scale(1); } @@ -137,41 +126,26 @@ box-shadow: 0 2px 8px rgba(0 0 0 / 10%); box-sizing: border-box; cursor: pointer; - margin: 0.6em 0; padding: 10px; - width: 676px; + width: 100%; margin: 0 auto; } .image-wrapper-ani{ - animation: createBox1 0s; + animation: create-box1 0s; } -@keyframes createBox1 { + +@keyframes create-box1 { from { transform: scale(1); } + to { transform: scale(1.5); } } -/* .colorbox-wrapper{ - display: flex; +.colorbox-wrapper{ position: absolute; - justify-content: center; - align-items: center; - flex-direction: row; - flex-wrap: nowrap; - width: 100vw; - height: 100vh; -} */ - -#colorbox{ - display: block; - visibility: visible; - background-color: white; - padding: 15px; - /* top: 50%; - left: 50%; - transform: translateX(-50%); */ + z-index: 999; } diff --git a/blocks/model-image/model-image.js b/blocks/model-image/model-image.js index 23be2a22..52ee5ef1 100644 --- a/blocks/model-image/model-image.js +++ b/blocks/model-image/model-image.js @@ -8,21 +8,23 @@ const creteEleAddCls = (obj) => { } return targetEle; }; -// adding the inline-styles for the element -const addStyles = (ele, obj) => { - for (const [key, value] of Object.entries(obj)) { +// Adding the inline-styles for the element +const addStyles = (ele, styles) => { + Object.entries(styles).forEach(([key, value]) => { ele.style[key] = value; - } + }); }; -// setting the attributes for the element -const setAttributes = (ele, obj) => { - for (const [key, value] of Object.entries(obj)) { + +// Setting the attributes for the element +const setAttributes = (ele, attributes) => { + Object.entries(attributes).forEach(([key, value]) => { ele.setAttribute(key, value); - } + }); }; + export default function decorate(block) { const imgWrap = creteEleAddCls({ targetEle: 'div', classes: ['img-colorbox-popup', 'cboxElement'] }); - const pictureTag = block.querySelector('picture'); + const pictureTag = block.querySelector('img'); const pictureTagForZoom = pictureTag.cloneNode(true); addStyles(pictureTagForZoom, { cursor: 'pointer' }); imgWrap.append(pictureTag); @@ -32,14 +34,13 @@ export default function decorate(block) { const overlayDiv = creteEleAddCls({ targetEle: 'div', classes: [] }); addStyles(overlayDiv, { display: 'none', - opacity: '0', cursor: 'pointer', visibility: 'visible', }); setAttributes(overlayDiv, { id: 'cboxOverlay', }); - document.body.append(overlayDiv); + block.appendChild(overlayDiv); const colorboxWrapper = creteEleAddCls({ targetEle: 'div', classes: ['colorbox-wrapper'] }); const colorboxDiv = creteEleAddCls({ targetEle: 'div', classes: [] }); @@ -51,16 +52,15 @@ export default function decorate(block) { addStyles(colorboxDiv, { display: 'none', visibility: 'visible', - // top: '50px', - // left: '20px', - // position: 'absolute', }); colorboxWrapper.append(colorboxDiv); - document.body.append(colorboxWrapper); + overlayDiv.appendChild(colorboxWrapper); const pictureWrapperDiv = creteEleAddCls({ targetEle: 'div', classes: ['picture-wrapper'] }); const pictureOverflowWrapperDiv = creteEleAddCls({ targetEle: 'div', classes: ['picture-overflow-wrap'] }); pictureOverflowWrapperDiv.append(pictureTagForZoom); + pictureTagForZoom.style.width = '100%'; + pictureTagForZoom.style.height = '100%'; pictureWrapperDiv.append(pictureOverflowWrapperDiv); colorboxDiv.append(pictureWrapperDiv); const cboxWrapperSecondChildCboxbtnIconSearch = creteEleAddCls({ targetEle: 'span', classes: ['button', 'icon-search'] }); @@ -72,65 +72,57 @@ export default function decorate(block) { cboxWrapperSecondChildCboxCloseBtn.innerHTML = '×'; colorboxDiv.append(cboxWrapperSecondChildCboxCloseBtn); colorboxDiv.append(cboxWrapperSecondChildCboxbtnIconSearch); - document.querySelector('.img-colorbox-popup.cboxElement').addEventListener('click', () => { + block.querySelector('.img-colorbox-popup.cboxElement').addEventListener('click', (e) => { + e.stopPropagation(); addStyles(overlayDiv, { - display: 'block', - opacity: '0.7', + display: 'flex', cursor: 'pointer', visibility: 'visible', }); addStyles(colorboxDiv, { display: 'block', visibility: 'visible', - // top: '50px', - // left: '20px', - // right: '20px', - // position: 'absolute', 'z-index': '9999', 'background-color': 'white', padding: '15px', }); }); - document.getElementById('cboxClose').addEventListener('click', () => { + cboxWrapperSecondChildCboxCloseBtn.addEventListener('click', (e) => { + e.stopPropagation(); addStyles(overlayDiv, { display: 'none', - opacity: '0', }); addStyles(colorboxDiv, { display: 'none', }); - addStyles(document.querySelector('.picture-wrapper'), { overflow: 'unset' }); - addStyles(document.querySelector('.picture-overflow-wrap'), { width: '100%', height: '100%' }); + pictureTagForZoom.style.width = '100%'; + pictureTagForZoom.style.height = 'auto'; + pictureTagForZoom.style.maxWidth = '100%'; + pictureTagForZoom.style.maxHeight = '100%'; }); - overlayDiv.addEventListener('click', () => { + overlayDiv.addEventListener('click', (e) => { + e.stopPropagation(); addStyles(overlayDiv, { display: 'none', - opacity: '0', }); addStyles(colorboxDiv, { display: 'none', }); - addStyles(document.querySelector('.picture-wrapper'), { overflow: 'unset' }); - addStyles(document.querySelector('.picture-overflow-wrap'), - { - width: '100%', - height: '100%', - }); + pictureTagForZoom.style.width = '100%'; + pictureTagForZoom.style.height = 'auto'; + pictureTagForZoom.style.maxWidth = '100%'; + pictureTagForZoom.style.maxHeight = '100%'; }); - pictureTagForZoom.addEventListener('click', () => { - addStyles(document.querySelector('.picture-wrapper'), { overflow: 'auto' }); - addStyles(document.querySelector('.picture-overflow-wrap'), - { - width: `${pictureTag.querySelector('img').getAttribute('width')}px`, - height: `${pictureTag.querySelector('img').getAttribute('height')}px` - }); + pictureTagForZoom.addEventListener('click', (e) => { + e.stopPropagation(); + pictureTagForZoom.style.width = '150%'; + pictureTagForZoom.style.height = '150%'; + pictureTagForZoom.style.maxWidth = '150%'; }); - document.querySelector('.button.icon-search').addEventListener('click', () => { - addStyles(document.querySelector('.picture-wrapper'), { overflow: 'auto' }); - addStyles(document.querySelector('.picture-overflow-wrap'), - { - width: '133%' - } - ); + block.querySelector('.button.icon-search').addEventListener('click', (e) => { + e.stopPropagation(); + pictureTagForZoom.style.width = '150%'; + pictureTagForZoom.style.height = '150%'; + pictureTagForZoom.style.maxWidth = '150%'; }); }