public/MagicoPagebuilder
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add simple ui fetures to test it

Browse Source
This commit is contained in:
Szymon Haczyk
2022-06-24 12:13:50 +02:00
parent 5fd3d9c9ba
commit 57930b1c50
16 changed files with 539 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/components/plugin/SectionHtml.vue Normal file
View File

@@ -0,0 +1,76 @@
<template>
<div class="row m-0 p-0 align-items-center">
<div class="col-sm-12 col-md-6 p-0">
<span class="material-icons-outlined box-move me-2" style="cursor:move;">open_with</span><span
class="font-weight-bold text-primary">{{ langs.label }}</span>
</div>
<div class="col-sm-12 col-md-6 p-0 text-end">
<a href="#" @click.prevent="modalBox = !modalBox" title="Edytuj" class="text-primary me-2"><i
class="material-icons-outlined">create</i></a>
<b-modal no-enforce-focus class_other="modal-xl" v-model="modalBox" :title="langs.label"
v-on:hide="onCloseModal">
<div class="mb-4">
<div class="form-group">
<textarea class="form-control" v-model="text" :init="vtinymce" ></textarea>
</div>
</div>
<div class="d-flex"><button class="btn btn-outline-secondary m-auto" @click.prevent="onCloseModal">{{
langs.saveclose
}}</button></div>
</b-modal>
<a href="#" title="Usuń" @click.prevent="removeItem()" class="text-danger"><i
class="material-icons-outlined">delete</i></a>
</div>
<div class="ms-4" style="color: #a9a9a9" v-html="ctext"></div>
</div>
</template>
<script>
import MagicoModal from './../MagicoModal.vue'
export default {
components: {
'b-modal': MagicoModal,
},
props: {
value: Object
},
mounted: function () {
this.name = (this.value && this.value.name) ? this.value.name : this.name;
this.text = (this.value && this.value.text) ? this.value.text : this.text;
if (this.value.open) this.modalBox = true;
},
data: function () {
return {
langs: {
saveclose: "Zapisz",
label: "Pole HTML",
close: "Zamknij"
},
height: window.innerHeight - window.innerHeight / 4,
modalBox: false,
text: '',
name: 'core_section_html',
}
},
computed: {
ctext: function () {
return this.value.text?this.value.text.replace(/<(?:.|\n)*?>/gm, ''):'';
}
},
methods: {
removeItem: function () {
this.$emit('itemRemoved', this.value);
},
onCloseModal: function () {
this.modalBox = false;
this.$emit('input', {
name: this.name,
text: this.text,
})
}
},
}
</script>

68
src/components/plugin/SectionText.vue
View File

@@ -1,46 +1,46 @@
<template>
<div class="row m-0 p-0 align-items-center">
<div class="col-sm-12 col-md-6 p-0">
<span class="material-icons-outlined mr-1 box-move" style="cursor:move;">open_with</span><span
<div class="col-sm-12 col-md-6 p-0 mb-0">
<span class="material-icons-outlined me-1 box-move" style="cursor:move;">open_with</span><span
class="font-weight-bold text-primary">{{ langs.label }}</span>
</div>
<div class="col-sm-12 col-md-6 p-0 text-right">
<a href="#" @click.prevent="modalBox = !modalBox" title="Edytuj" class="text-primary mr-2"><i
<div class="col-sm-12 col-md-6 p-0 text-end">
<a href="#" @click.prevent="modalBox = !modalBox" title="Edytuj" class="text-primary me-2"><i
class="material-icons-outlined">create</i></a>
<b-modal v-model="modalBox" :title="langs.label" @close="onCloseModal">
<p>
<div class="form-group">
<label class="w-100 col-form-label">{{ langs.content }}</label>
<input class="form-control" type="text" v-model="text" />
</div>
<div class="form-group">
<label class="w-100 col-form-label">{{ langs.type }}</label>
<select class="form-control" v-model="h_type">
<option value="">{{ langs.typeplaintext }}</option>
<option value="h1">{{ langs.typeheader }} 1</option>
<option value="h2">{{ langs.typeheader }} 2</option>
<option value="h3">{{ langs.typeheader }} 3</option>
<option value="h4">{{ langs.typeheader }} 4</option>
<option value="h5">{{ langs.typeheader }} 5</option>
</select>
</div>
<div class="form-group">
<label class="w-100 col-form-label">Wyrównanie</label>
</div>
<div><button class="btn btn-outline-secondary mr-1" @click.prevent="onCloseModal">{{
langs.saveclose
}}</button></div>
</b-modal>
<a href="#" title="Usuń" @click.prevent="removeItem()" class="text-danger"><i
class="material-icons-outlined">delete</i></a>
</div>
<div>
<div class="ms-2">
<strong class="font-weight-bold">{{ langs.type }}:</strong> {{ h_type }},
<strong class="font-weight-bold">{{ langs.content }}:</strong> {{ (text) ? text : ' ' }}
</div>
<b-modal v-model="modalBox" :title="langs.label" @close="onCloseModal">
<div class="form-group">
<label class="w-100 col-form-label">{{ langs.content }}</label>
<input class="form-control" type="text" v-model="text" />
</div>
<div class="form-group">
<label class="w-100 col-form-label">{{ langs.type }}</label>
<select class="form-control" v-model="h_type">
<option value="">{{ langs.typeplaintext }}</option>
<option value="h1">{{ langs.typeheader }} 1</option>
<option value="h2">{{ langs.typeheader }} 2</option>
<option value="h3">{{ langs.typeheader }} 3</option>
<option value="h4">{{ langs.typeheader }} 4</option>
<option value="h5">{{ langs.typeheader }} 5</option>
</select>
</div>
<div class="form-group">
<!-- <label class="w-100 col-form-label">Wyrównanie</label> -->
</div>
<div class="text-center"><button class="btn btn-outline-secondary me-1" @click.prevent="onCloseModal">{{
langs.saveclose
}}</button></div>
</b-modal>
</div>
</template>
<script>
@@ -77,21 +77,25 @@ export default {
this.h_type = (this.value && this.value.h_type) ? this.value.h_type : this.h_type;
this.align = (this.value && this.value.align) ? this.value.align : this.align;
if (this.value.open) this.modalBox = true;
console.log('pagebuilder', this.$pagebuilder);
},
methods: {
removeItem: function () {
this.$emit('itemRemoved', this.value);
},
onCloseModal: function () {
this.modalBox = false;
this.$emit('input', {
name: this.name,
text: this.text,
h_type: this.h_type,
align: this.align,
})
this.modalBox = false;
}
},
destroy(){
this.modalBox=false;
}
}
</script>

80
src/components/plugin/SectionTextarea.vue Normal file
View File

@@ -0,0 +1,80 @@
<template>
<div class="row m-0 p-0 align-items-center">
<div class="col-sm-12 col-md-6 p-0">
<span class="material-icons-outlined box-move me-2" style="cursor:move;">open_with</span><span
class="font-weight-bold text-primary">{{ langs.label }}</span>
</div>
<div class="col-sm-12 col-md-6 p-0 text-end">
<a href="#" @click.prevent="modalBox = !modalBox" title="Edytuj" class="text-primary me-2"><i
class="material-icons-outlined">create</i></a>
<b-modal no-enforce-focus class_other="modal-xl" v-model="modalBox" :title="langs.label"
v-on:hide="onCloseModal">
<div class="mb-4">
<div class="form-group">
<editor api-key="no-api-key" rows="12" class="form-control" v-model="text" :init="vtinymce" />
</div>
</div>
<div class="d-flex"><button class="btn btn-outline-secondary m-auto" @click.prevent="onCloseModal">{{
langs.saveclose
}}</button></div>
</b-modal>
<a href="#" title="Usuń" @click.prevent="removeItem()" class="text-danger"><i
class="material-icons-outlined">delete</i></a>
</div>
<div class="ms-4" style="color: #a9a9a9" v-html="ctext"></div>
</div>
</template>
<script>
import MagicoModal from './../MagicoModal.vue'
import tinymceConfig from '../tinymce/config.js'
import Editor from '@tinymce/tinymce-vue'
export default {
components: {
'b-modal': MagicoModal,
'editor': Editor // <- To jest TINYMCE
},
props: {
value: Object
},
mounted: function () {
this.name = (this.value && this.value.name) ? this.value.name : this.name;
this.text = (this.value && this.value.text) ? this.value.text : this.text;
if (this.value.open) this.modalBox = true;
},
data: function () {
return {
langs: {
saveclose: "Zapisz",
label: "Pole tekstowe",
close: "Zamknij"
},
height: window.innerHeight - window.innerHeight / 4,
modalBox: false,
text: '',
name: 'core_section_textarea',
vtinymce: tinymceConfig,
}
},
computed: {
ctext: function () {
return this.value.text?this.value.text.replace(/<(?:.|\n)*?>/gm, ''):'';
}
},
methods: {
removeItem: function () {
this.$emit('itemRemoved', this.value);
},
onCloseModal: function () {
this.modalBox = false;
this.$emit('input', {
name: this.name,
text: this.text,
})
}
},
}
</script>