start of image gallery
This commit is contained in:
@@ -6,6 +6,7 @@
|
||||
import DOMPurify from "dompurify";
|
||||
import { computed } from "vue";
|
||||
import { ImportMetaExtras } from "../../../import-meta";
|
||||
import SMImageGallery from "./SMImageGallery.vue";
|
||||
|
||||
const props = defineProps({
|
||||
html: {
|
||||
@@ -30,6 +31,16 @@ const computedContent = computed(() => {
|
||||
);
|
||||
html = props.html.replace(regexHref, '<router-link $1to="$2</router-link>');
|
||||
|
||||
// Convert image galleries to SMImageGallery component
|
||||
const regexGallery =
|
||||
/<ul class="tinymce-sm-gallery">((?:\s*<li><img src="[^"]*" \/><\/li>)+)\s*<\/ul>/gi;
|
||||
html = html.replace(regexGallery, (match, p1) => {
|
||||
const imageSrcs = p1
|
||||
.match(/<img src="([^"]*)" \/><\/li>/gi)
|
||||
.map((m) => m.match(/<img src="([^"]*)" \/><\/li>/i)[1]);
|
||||
return `<SMImageGallery :images="${JSON.stringify(imageSrcs)}" />`;
|
||||
});
|
||||
|
||||
// Update local images to use at most the large size
|
||||
const regexImg = new RegExp(
|
||||
`<img ([^>]*?)src="${
|
||||
@@ -49,6 +60,9 @@ const computedContent = computed(() => {
|
||||
|
||||
return {
|
||||
template: `<div class="sm-content">${html}</div>`,
|
||||
components: {
|
||||
SMImageGallery,
|
||||
},
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
258
resources/js/components/SMImageGallery.vue
Normal file
258
resources/js/components/SMImageGallery.vue
Normal file
@@ -0,0 +1,258 @@
|
||||
<template>
|
||||
<div class="sm-image-gallery">
|
||||
<div
|
||||
class="sm-image-gallery-inner"
|
||||
:style="{ transform: `translateX(-${slideIndex * slideWidth}px)` }">
|
||||
<div
|
||||
class="sm-image-gallery-slide"
|
||||
v-for="(image, index) in images"
|
||||
:key="index">
|
||||
<img
|
||||
:src="image"
|
||||
class="sm-image-gallery-image"
|
||||
@click="showModal(index)" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="sm-image-gallery-arrow sm-image-gallery-arrow-left"
|
||||
@click="prevSlide"
|
||||
:class="{ disabled: slideIndex === 0 }">
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M19 12H5"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round" />
|
||||
<path
|
||||
d="M12 19L5 12L12 5"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round" />
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
class="sm-image-gallery-arrow sm-image-gallery-arrow-right"
|
||||
@click="nextSlide"
|
||||
:class="{ disabled: slideIndex === images.length - visibleSlides }">
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M5 12H19"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round" />
|
||||
<path
|
||||
d="M12 5L19 12L12 19"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round" />
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
v-if="showModalFlag"
|
||||
class="sm-image-gallery-modal"
|
||||
@click="hideModal">
|
||||
<img
|
||||
:src="images[slideIndex]"
|
||||
class="sm-image-gallery-modal-image" />
|
||||
<div class="sm-image-gallery-modal-close" @click="hideModal">
|
||||
×
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "SMImageGallery",
|
||||
props: {
|
||||
images: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
slideIndex: 0,
|
||||
slideWidth: 0,
|
||||
showModalFlag: false,
|
||||
visibleSlides: 0,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.slideWidth = this.$el.offsetWidth;
|
||||
window.addEventListener("resize", this.handleResize);
|
||||
document.addEventListener("keydown", this.handleKeyDown);
|
||||
},
|
||||
beforeUnmount() {
|
||||
window.removeEventListener("resize", this.handleResize);
|
||||
document.removeEventListener("keydown", this.handleKeyDown);
|
||||
},
|
||||
methods: {
|
||||
nextSlide() {
|
||||
if (this.slideIndex < this.images.length - this.visibleSlides) {
|
||||
this.slideIndex++;
|
||||
} else {
|
||||
this.slideIndex = this.images.length - this.visibleSlides;
|
||||
}
|
||||
},
|
||||
prevSlide() {
|
||||
if (this.slideIndex > 0) {
|
||||
this.slideIndex--;
|
||||
} else {
|
||||
this.slideIndex = 0;
|
||||
}
|
||||
},
|
||||
showModal(index) {
|
||||
this.slideIndex = index;
|
||||
this.showModalFlag = true;
|
||||
document.addEventListener("keydown", this.handleKeyDown);
|
||||
},
|
||||
hideModal() {
|
||||
this.showModalFlag = false;
|
||||
document.removeEventListener("keydown", this.handleKeyDown);
|
||||
},
|
||||
handleResize() {
|
||||
this.slideWidth = this.$el.offsetWidth;
|
||||
this.slideIndex = 0;
|
||||
|
||||
this.visibleSlides = Math.floor(
|
||||
this.$el.clientWidth / this.slideWidth
|
||||
);
|
||||
if (this.slideIndex >= this.images.length - this.visibleSlides) {
|
||||
this.slideIndex = this.images.length - this.visibleSlides;
|
||||
}
|
||||
},
|
||||
handleKeyDown(event) {
|
||||
if (event.key === "ArrowLeft") {
|
||||
if (this.showModalFlag) {
|
||||
if (this.slideIndex > 0) {
|
||||
this.slideIndex--;
|
||||
}
|
||||
}
|
||||
} else if (event.key === "ArrowRight") {
|
||||
if (this.showModalFlag) {
|
||||
if (this.slideIndex < this.images.length - 1) {
|
||||
this.slideIndex++;
|
||||
}
|
||||
}
|
||||
} else if (event.key === "Escape") {
|
||||
this.hideModal();
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sm-image-gallery {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: 20px auto;
|
||||
max-height: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sm-image-gallery-inner {
|
||||
display: flex;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sm-image-gallery-slide {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
margin-right: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sm-image-gallery-image {
|
||||
cursor: pointer;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.sm-image-gallery-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.sm-image-gallery-arrow.disabled {
|
||||
pointer-events: none;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.sm-image-gallery-arrow:hover {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.sm-image-gallery-arrow-left {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.sm-image-gallery-arrow-right {
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.sm-image-gallery-arrow svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.sm-image-gallery-arrow svg path {
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.sm-image-gallery-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sm-image-gallery-modal-image {
|
||||
max-width: 90%;
|
||||
max-height: 90%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.sm-image-gallery-modal-close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.sm-image-gallery-modal-close:hover {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user