152 lines
3.8 KiB
Vue
152 lines
3.8 KiB
Vue
<template>
|
|
<modal>
|
|
<content-block-title-input slot="header"></content-block-title-input>
|
|
<div v-for="(element, index) in elements" :key="index" class="new-content-block-wizard__element">
|
|
<component
|
|
class="new-content-block-wizard__element-component"
|
|
:is="type(element)"
|
|
:class="{'new-content-block-wizard__chooser': type(element) === 'content-block-chooser-widget'}"
|
|
:element="element" :index="index"
|
|
v-on:change-type="changeType"
|
|
></component>
|
|
<a class="new-content-block-wizard__remove" v-on:click="removeElement(index)">
|
|
<trash-icon v-if="type(element) !== 'content-block-chooser-widget'"
|
|
class="new-content-block-wizard__trash-icon"></trash-icon>
|
|
</a>
|
|
|
|
<add-content-element class="new-content-block-wizard__add"
|
|
v-on:add-element="addElement"
|
|
:index="index"
|
|
></add-content-element>
|
|
</div>
|
|
</modal>
|
|
</template>
|
|
|
|
<script>
|
|
import Modal from '@/components/Modal';
|
|
import ContentBlockChooserWidget from '@/components/ContentBlockChooserWidget';
|
|
import ContentBlockTitleInput from '@/components/ContentBlockTitleInput';
|
|
import AddContentElement from '@/components/AddContentElement';
|
|
import LinkForm from '@/components/content-forms/LinkForm';
|
|
import VideoForm from '@/components/content-forms/VideoForm';
|
|
import ImageForm from '@/components/content-forms/ImageForm';
|
|
import DocumentForm from '@/components/content-forms/DocumentForm';
|
|
import ExerciseForm from '@/components/content-forms/ExerciseForm';
|
|
import TextForm from '@/components/content-forms/TextForm';
|
|
import TrashIcon from '@/components/icons/TrashIcon';
|
|
|
|
export default {
|
|
components: {
|
|
Modal,
|
|
ContentBlockChooserWidget,
|
|
ContentBlockTitleInput,
|
|
AddContentElement,
|
|
LinkForm,
|
|
VideoForm,
|
|
ImageForm,
|
|
DocumentForm,
|
|
ExerciseForm,
|
|
TextForm,
|
|
TrashIcon
|
|
},
|
|
|
|
methods: {
|
|
type(element) {
|
|
switch (element.type) {
|
|
case 'link':
|
|
return 'link-form';
|
|
case 'video':
|
|
return 'video-form';
|
|
case 'image':
|
|
return 'image-form';
|
|
case 'text':
|
|
return 'text-form';
|
|
case 'exercise':
|
|
return 'exercise-form';
|
|
case 'document':
|
|
return 'document-form';
|
|
}
|
|
return 'content-block-chooser-widget'
|
|
},
|
|
removeElement(index) {
|
|
this.elements.splice(index, 1);
|
|
},
|
|
addElement(index) {
|
|
this.elements.splice(index + 1, 0, {})
|
|
},
|
|
changeType(index, type) {
|
|
this.elements.splice(index, 1, {type: type});
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
elements: [
|
|
{
|
|
type: 'link'
|
|
},
|
|
{
|
|
type: 'text'
|
|
},
|
|
{
|
|
type: 'video'
|
|
},
|
|
{
|
|
type: 'document'
|
|
},
|
|
{
|
|
type: 'exercise'
|
|
},
|
|
{
|
|
type: 'image'
|
|
},
|
|
{}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/_variables.scss";
|
|
|
|
.new-content-block-wizard {
|
|
/* top level does not exist, because of the modal */
|
|
|
|
&__element {
|
|
display: grid;
|
|
grid-template-columns: 1fr 50px;
|
|
grid-auto-rows: auto;
|
|
/*width: 95%; // reserve space for scrollbar*/
|
|
}
|
|
|
|
&__element-component {
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
&__remove {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
|
|
&__trash-icon {
|
|
width: 25px;
|
|
height: 25px;
|
|
fill: $color-grey;
|
|
cursor: pointer;
|
|
justify-self: center;
|
|
}
|
|
|
|
&__chooser {
|
|
grid-column: 1 / span 2;
|
|
}
|
|
|
|
&__add {
|
|
grid-column: 1 / span 2;
|
|
}
|
|
}
|
|
</style>
|