You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
3.4 KiB
85 lines
3.4 KiB
<template>
|
|
<div name="block-images">
|
|
<div v-if="! noTitle" class="kit__field field">
|
|
<div class="field__wrap field__wrap--title">
|
|
<input :readonly="readOnly" type="text" name="block-images-title"
|
|
:value="title"
|
|
class="field__input"
|
|
placeholder="Заголовок раздела"
|
|
@change="onTitleChange">
|
|
</div>
|
|
</div>
|
|
<div class="kit__gallery">
|
|
<div class="kit__preview" v-for="(image, index) in images" v-bind:class="{ 'kit__preview--loading': image.loading }"
|
|
name="block-images-image-block">
|
|
<img :src="image.image_thumbnail_url" class="kit__pic" name="block-images-image">
|
|
<button class="kit__delete-photo" type="button" @click="onRemoveImage(index)" name="block-images-delete-image">
|
|
<svg class="icon icon-delete">
|
|
<use xlink:href="/static/img/sprite.svg#icon-delete"></use>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="kit__photo">
|
|
<svg class="icon icon-add-plus" name="block-images-add-image">
|
|
<use xlink:href="/static/img/sprite.svg#icon-add-plus"></use>
|
|
</svg>
|
|
<input type="file" class="kit__file" multiple @change="onImageAdded">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {api} from "../../js/modules/api";
|
|
|
|
export default {
|
|
name: "block-images",
|
|
props: ["index", "title", "images", "accessToken", "readOnly", "longSide", "noTitle"],
|
|
methods: {
|
|
onTitleChange(event) {
|
|
this.$emit('update:title', event.target.value);
|
|
},
|
|
onImageAdded(event) {
|
|
const longSide = +this.longSide || 1600;
|
|
Array.from(event.target.files).forEach((file) => {
|
|
let reader = new FileReader();
|
|
reader.onload = () => {
|
|
let images = this.images;
|
|
|
|
images.push({
|
|
loading: true,
|
|
});
|
|
this.$emit('update:images', images);
|
|
const index = images.length - 1;
|
|
|
|
api.uploadImage(reader.result, this.accessToken)
|
|
.then((response) => {
|
|
let images = this.images;
|
|
images[index].image_id = response.data.id;
|
|
images[index].loading = false;
|
|
images[index].image_url = response.data.image;
|
|
images[index].image_thumbnail_url = response.data.image_thumbnail;
|
|
this.$emit('update:images', images);
|
|
})
|
|
.catch((error) => {
|
|
console.log('error', error);
|
|
});
|
|
};
|
|
if (file) {
|
|
reader.readAsDataURL(file);
|
|
}
|
|
});
|
|
},
|
|
onRemoveImage(index) {
|
|
let images = this.images;
|
|
const id = images[index].image_id;
|
|
|
|
api.removeImage(id, this.accessToken)
|
|
.then(response => {
|
|
images = images.filter(image => image.image_id != id);
|
|
this.$emit('update:images', images);
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|