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.
124 lines
3.8 KiB
124 lines
3.8 KiB
<template>
|
|
<div class="kit__section">
|
|
<div v-if="!isOpen" class="kit__add add">
|
|
<button type="button" class="add__toggle" @click="isOpen = true">
|
|
<span class="add__circle">
|
|
<svg class="icon icon-add-plus">
|
|
<use xlink:href="/static/img/sprite.svg#icon-add-plus"></use>
|
|
</svg>
|
|
</span>
|
|
<span class="add__title">Добавить блок</span>
|
|
</button>
|
|
</div>
|
|
<div v-if="isOpen" class="kit__add add open">
|
|
<button type="button" class="add__toggle" @click="isOpen = false">
|
|
<span class="add__circle">
|
|
<svg class="icon icon-add-plus">
|
|
<use xlink:href="/static/img/sprite.svg#icon-add-plus"></use>
|
|
</svg>
|
|
</span>
|
|
<span class="add__title">Добавить блок</span>
|
|
</button>
|
|
<div class="add__list">
|
|
<button class="add__btn" type="button" @click="addBlockText">
|
|
<svg class="icon icon-text">
|
|
<use xlink:href="/static/img/sprite.svg#icon-text"></use>
|
|
</svg>
|
|
</button>
|
|
<button class="add__btn" type="button" @click="addBlockImage">
|
|
<svg class="icon icon-image">
|
|
<use xlink:href="/static/img/sprite.svg#icon-image"></use>
|
|
</svg>
|
|
</button>
|
|
<button type="button" class="add__btn" @click="addBlockImageText">
|
|
<svg class="icon icon-image-text">
|
|
<use xlink:href="/static/img/sprite.svg#icon-image-text"></use>
|
|
</svg>
|
|
</button>
|
|
<button type="button" class="add__btn" @click="addBlockImages">
|
|
<svg class="icon icon-images">
|
|
<use xlink:href="/static/img/sprite.svg#icon-images"></use>
|
|
</svg>
|
|
</button>
|
|
<button type="button" class="add__btn" @click="addBlockVideo">
|
|
<svg class="icon icon-video-stroke">
|
|
<use xlink:href="/static/img/sprite.svg#icon-video-stroke"></use>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import uuidv4 from 'uuid/v4';
|
|
|
|
export default {
|
|
name: "block-add",
|
|
data() {
|
|
return {
|
|
isOpen: false
|
|
}
|
|
},
|
|
methods: {
|
|
add(blockData) {
|
|
blockData.uuid = uuidv4();
|
|
this.isOpen = false;
|
|
this.$emit('added', blockData)
|
|
},
|
|
addBlockText() {
|
|
this.add({
|
|
type: 'text',
|
|
data: {
|
|
title: '',
|
|
text: '',
|
|
}
|
|
})
|
|
},
|
|
addBlockImage() {
|
|
this.add({
|
|
type: 'image',
|
|
data: {
|
|
title: '',
|
|
image_id: null,
|
|
image_url: null,
|
|
}
|
|
})
|
|
},
|
|
addBlockImageText() {
|
|
this.add({
|
|
type: 'image-text',
|
|
data: {
|
|
title: '',
|
|
text: '',
|
|
image_id: null,
|
|
image_url: null,
|
|
}
|
|
})
|
|
},
|
|
addBlockImages() {
|
|
this.add({
|
|
type: 'images',
|
|
data: {
|
|
title: '',
|
|
text: '',
|
|
images: [],
|
|
}
|
|
})
|
|
},
|
|
addBlockVideo() {
|
|
this.add({
|
|
type: 'video',
|
|
data: {
|
|
title: '',
|
|
video_url: '',
|
|
}
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|
|
|