From aa1880362dce13d644f7a0db49c2869987dd4b4e Mon Sep 17 00:00:00 2001 From: Yunseon Hong Date: Wed, 20 Mar 2024 20:42:22 +0900 Subject: [PATCH 1/6] add lightbox --- src/index.css | 35 +++++++++++++++++++++++++++++++++++ src/ui.js | 23 ++++++++++++++++++++++- 2 files changed, 57 insertions(+), 1 deletion(-) diff --git a/src/index.css b/src/index.css index 2823c160..0e544f4f 100644 --- a/src/index.css +++ b/src/index.css @@ -7,6 +7,7 @@ border-radius: 3px; overflow: hidden; margin-bottom: 10px; + cursor: pointer; &-picture { max-width: 100%; @@ -157,3 +158,37 @@ transform: rotate(360deg); } } + +.lightbox-panel { + z-index: 1000; + display: block; + position: fixed; + overflow: hidden; + top:0; + right: 0; + left: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.1); + transition: opacity .15s linear; + touch-action: pinch-zoom; + + .lightbox-item { + display: flex; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + justify-content: center; + align-items: center; + will-change: transform opacity; + + img { + width: auto; + height: auto; + max-width: 100vw; + max-height: 100vh; + cursor: pointer; + } + } +} \ No newline at end of file diff --git a/src/ui.js b/src/ui.js index 8609ef21..78ba05a2 100644 --- a/src/ui.js +++ b/src/ui.js @@ -210,6 +210,10 @@ export default class Ui { } }); + this.nodes.imageEl.addEventListener('click', () => { + this.openLightbox(this.nodes.imageEl.src); + }); + this.nodes.imageContainer.appendChild(this.nodes.imageEl); } @@ -249,5 +253,22 @@ export default class Ui { applyTune(tuneName, status) { this.nodes.wrapper.classList.toggle(`${this.CSS.wrapper}--${tuneName}`, status); } -} + /** + * Open lightbox with an image + * + * @param {string} url - image source url + */ + openLightbox(url) { + const lightbox = make('div', 'lightbox-panel'); + const overflow = document.body.style.overflow; + + lightbox.innerHTML = `
image
`; + lightbox.addEventListener('click', () => { + document.body.style.overflow = overflow; + lightbox.remove(); + }); + document.body.style.overflow = 'hidden'; + document.body.appendChild(lightbox); + } +} From 7a659a42edbe38931c7d1532424ca7368f952b2f Mon Sep 17 00:00:00 2001 From: Yunseon Hong Date: Wed, 20 Mar 2024 21:02:43 +0900 Subject: [PATCH 2/6] exclude video --- src/ui.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/ui.js b/src/ui.js index 78ba05a2..e353fe01 100644 --- a/src/ui.js +++ b/src/ui.js @@ -208,10 +208,12 @@ export default class Ui { if (this.nodes.imagePreloader) { this.nodes.imagePreloader.style.backgroundImage = ''; } - }); - this.nodes.imageEl.addEventListener('click', () => { - this.openLightbox(this.nodes.imageEl.src); + if (tag === 'IMG') { + this.nodes.imageEl.addEventListener('click', () => { + this.openLightbox(this.nodes.imageEl.src); + }); + } }); this.nodes.imageContainer.appendChild(this.nodes.imageEl); From 533650af1e42128348aec4f6f465fa8d24b157e8 Mon Sep 17 00:00:00 2001 From: Yunseon Hong Date: Thu, 21 Mar 2024 10:29:02 +0900 Subject: [PATCH 3/6] add close button --- src/index.css | 15 +++++++++++++-- src/ui.js | 21 +++++++++++++++++---- 2 files changed, 30 insertions(+), 6 deletions(-) diff --git a/src/index.css b/src/index.css index 0e544f4f..536cbe3e 100644 --- a/src/index.css +++ b/src/index.css @@ -159,7 +159,7 @@ } } -.lightbox-panel { +.image-lightbox { z-index: 1000; display: block; position: fixed; @@ -172,7 +172,7 @@ transition: opacity .15s linear; touch-action: pinch-zoom; - .lightbox-item { + &__item { display: flex; position: absolute; top: 0; @@ -191,4 +191,15 @@ cursor: pointer; } } + + &__close { + position: absolute; + top: 5px; + right: 5px; + cursor: pointer; + color: #fff; + font-size: 24px; + line-height: 1; + padding: 20px; + } } \ No newline at end of file diff --git a/src/ui.js b/src/ui.js index e353fe01..f3a911e8 100644 --- a/src/ui.js +++ b/src/ui.js @@ -262,14 +262,27 @@ export default class Ui { * @param {string} url - image source url */ openLightbox(url) { - const lightbox = make('div', 'lightbox-panel'); const overflow = document.body.style.overflow; - lightbox.innerHTML = `
image
`; - lightbox.addEventListener('click', () => { + const lightbox = make('div', 'image-lightbox'); + const imageContainer = make('div', 'image-lightbox__item'); + const image = make('img', 'image-lightbox__image', { src: url }); + const closeBtn = make('button', 'image-lightbox__close'); + + const closeLightbox = () => { document.body.style.overflow = overflow; lightbox.remove(); - }); + }; + + closeBtn.innerHTML = ''; + + imageContainer.appendChild(image); + lightbox.appendChild(imageContainer); + lightbox.appendChild(closeBtn); + + closeBtn.addEventListener('click', closeLightbox); + image.addEventListener('click', closeLightbox); + document.body.style.overflow = 'hidden'; document.body.appendChild(lightbox); } From 7c5042def17e0b83941adf2d8bd49b40e4fd2edb Mon Sep 17 00:00:00 2001 From: Yunseon Hong Date: Fri, 22 Mar 2024 16:32:10 +0900 Subject: [PATCH 4/6] update image cursor, add paste config --- src/index.css | 6 ++++-- src/index.js | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/index.css b/src/index.css index 536cbe3e..4625d23e 100644 --- a/src/index.css +++ b/src/index.css @@ -7,14 +7,16 @@ border-radius: 3px; overflow: hidden; margin-bottom: 10px; - cursor: pointer; &-picture { max-width: 100%; - vertical-align: bottom; display: block; } + img { + cursor: zoom-in; + } + &-preloader { width: 50px; height: 50px; diff --git a/src/index.js b/src/index.js index ff00b214..23f025db 100644 --- a/src/index.js +++ b/src/index.js @@ -290,7 +290,7 @@ export default class ImageTool { * Drag n drop file from into the Editor */ files: { - mimeTypes: [ 'image/*' ], + mimeTypes: [ 'image/*', 'video/*' ], }, }; } From 5f0486d5b794bcaf8e90211de09e79643c18dbba Mon Sep 17 00:00:00 2001 From: Yunseon Hong Date: Mon, 8 Apr 2024 12:47:31 +0900 Subject: [PATCH 5/6] ignore case for extension checking --- src/index.js | 2 +- src/ui.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index 23f025db..db53dc66 100644 --- a/src/index.js +++ b/src/index.js @@ -290,7 +290,7 @@ export default class ImageTool { * Drag n drop file from into the Editor */ files: { - mimeTypes: [ 'image/*', 'video/*' ], + mimeTypes: [ 'image/*', 'video/mp4' ], }, }; } diff --git a/src/ui.js b/src/ui.js index f3a911e8..254f44b6 100644 --- a/src/ui.js +++ b/src/ui.js @@ -152,7 +152,7 @@ export default class Ui { /** * Check for a source extension to compose element correctly: video tag for mp4, img — for others */ - const tag = /\.mp4$/.test(url) ? 'VIDEO' : 'IMG'; + const tag = /\.mp4$/i.test(url) ? 'VIDEO' : 'IMG'; const attributes = { src: url, From 1e923f361002d70cf0017e219c0dbd52f91e8ed7 Mon Sep 17 00:00:00 2001 From: Yunseon Hong Date: Fri, 24 May 2024 14:02:50 +0900 Subject: [PATCH 6/6] fix: Fixed bug where onchange event was called after image loading --- src/index.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/index.js b/src/index.js index db53dc66..5904ece5 100644 --- a/src/index.js +++ b/src/index.js @@ -105,18 +105,18 @@ export default class ImageTool { */ static get tunes() { return [ - { - name: 'withBorder', - icon: IconAddBorder, - title: 'With border', - toggle: true, - }, { name: 'stretched', icon: IconStretch, title: 'Stretch image', toggle: true, }, + { + name: 'withBorder', + icon: IconAddBorder, + title: 'With border', + toggle: true, + }, { name: 'withBackground', icon: IconAddBackground,