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

pagebuilder fullscreen mode

Browse Source
This commit is contained in:
Szymon Haczyk
2023-04-06 11:05:28 +02:00
parent d2f1a6a10d
commit 134b73af29
7 changed files with 153 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/MagicoModal.vue
View File

@@ -24,20 +24,23 @@ export default {
} }
}, },
mounted() { mounted() {
document.body.append(document.getElementById(this.id));
this.modal = new Modal(document.getElementById(this.id)) this.modal = new Modal(document.getElementById(this.id))
let vm = this; let vm = this;
document.getElementById(this.id).addEventListener('hidden.bs.modal', function () { document.getElementById(this.id).addEventListener('hidden.bs.modal', function () {
vm.triggerModal(false); vm.triggerModal(false);
}) })
this.triggerModal(this.value); this.triggerModal(this.value, false);
}, },
methods: { methods: {
triggerModal: function (value) { triggerModal: function (value, emit = true) {
if (value == true) { if (value == true) {
this.modal.show(); this.modal.show();
} else { } else {
this.modal.hide() this.modal.hide()
this.$emit('hide'); if (emit) {
this.$emit('hide');
}
} }
this.$emit('input', value); this.$emit('input', value);
} }
@@ -47,8 +50,20 @@ export default {
this.triggerModal(this.value); this.triggerModal(this.value);
} }
}, },
destroy() { onDestroy: function () {
this.modal.dispose() document.getElementById(this.id).remove();
} }
} }
</script> </script>
<style>
.modal-xxl {
width: 100% !important;
max-width: 100% !important;
padding: 0 10px !important;
}
.modal-xlg {
width: 75% !important;
max-width: 75% !important;
padding: 0 10px !important;
}
</style>

139
src/components/MagicoPagebuilder.vue
View File

@@ -1,67 +1,75 @@
<template> <template>
<section class="content card-body " id="pagebuilder"> <section :class="{ 'pagebuilder-fullscreen': fullscreen }" class="content card-body " id="pagebuilder">
<div class="d-flex justify-content-end"> <div class="pagebuilder-body">
<button @click.prevent="modalLoad = !modalLoad; pageType = { name: null }" title="Wczytaj szablon do schowka"
class="btn btn-outline-primary btn-icon-sm"><span class="material-icons-outlined">find_replace</span></button>
<button @click.prevent="modalSave = !modalSave; pageType = { name: null }" title="Zapisz szablon do schowka"
class="btn btn-outline-success btn-icon-sm"><span class="material-icons-outlined">save</span></button>
<!-- <button v-if="showcopy" class="btn btn-outline-secondary mr-1" @click.prevent="modalCopy = !modalCopy;">Kopiuj <div class="d-flex justify-content-between">
<button @click.prevent="fullscreen = !fullscreen" title="Tryb pełnoekranowy"
class="btn btn-outline-primary btn-icon-sm"><span class="material-icons-outlined">fullscreen</span></button>
<div>
<button @click.prevent="modalLoad = !modalLoad; pageType = { name: null }" title="Wczytaj szablon do schowka"
class="btn btn-outline-primary btn-icon-sm"><span class="material-icons-outlined">find_replace</span></button>
<button @click.prevent="modalSave = !modalSave; pageType = { name: null }" title="Zapisz szablon do schowka"
class="btn btn-outline-success btn-icon-sm"><span class="material-icons-outlined">save</span></button>
</div>
<!-- <button v-if="showcopy" class="btn btn-outline-secondary mr-1" @click.prevent="modalCopy = !modalCopy;">Kopiuj
układ z innej strony</button> --> układ z innej strony</button> -->
</div>
<draggable :options="{ handle: '.box-move' }" v-model="comps" @start="drag = true" @end="drag = false; onChange()">
<div v-for="(item, index) in comps" :key="index">
<PagebuilderSection :value="item" v-on:deleteSection="deleteSection" v-on:copy="copySection" @change="onChange">
</PagebuilderSection>
</div>
</draggable>
<b-modal class_other="modal-xl" v-model="modalSave" title="Zapisz szablon do schowka"
v-on:onClose="modalSave = false">
<div slot="modal-title"><span></span></div>
<div>
<PagebuilderTemplateSave v-model="pageType" :szablon="value">
</PagebuilderTemplateSave>
</div>
<div><button @click.prevent="modalSaveSave" title="Zapisz do schowka" class="btn btn-success mr-1"
:disabled="!pageType.name">Zapisz do schowka </button></div>
</b-modal>
<b-modal class_other="modal-xl" v-model="modalLoad" title="Wczytaj szablon ze schowka"
v-on:onClose="modalLoad = false">
<div>
<PagebuilderTemplateLoad v-model="pageType" @input="modalLoadClick"></PagebuilderTemplateLoad>
</div> </div>
</b-modal> <draggable :options="{ handle: '.box-move' }" v-model="comps" @start="drag = true" @end="drag = false; onChange()">
<div v-for="(item, index) in comps" :key="index">
<PagebuilderSection :value="item" v-on:deleteSection="deleteSection" v-on:copy="copySection" @change="onChange">
</PagebuilderSection>
</div>
</draggable>
<b-modal class_other="modal-xl" v-model="modalCopy" v-on:onClose="modalCopy = false"> <b-modal class_other="modal-xl" v-model="modalSave" title="Zapisz szablon do schowka"
<div slot="modal-title"><span>Zapisz lub Kopiuj układ w schowku</span></div> v-on:onClose="modalSave = false">
<div> <div slot="modal-title"><span></span></div>
<PagebuilderTemplateLoad v-model="pageType"></PagebuilderTemplateLoad> <div>
<PagebuilderTemplateSave v-model="pageType" :szablon="value">
</PagebuilderTemplateSave>
</div>
<div><button @click.prevent="modalSaveSave" title="Zapisz do schowka" class="btn btn-success mr-1"
:disabled="!pageType.name">Zapisz do schowka </button></div>
</b-modal>
<b-modal class_other="modal-xl" v-model="modalLoad" title="Wczytaj szablon ze schowka"
v-on:onClose="modalLoad = false">
<div>
<PagebuilderTemplateLoad v-model="pageType" @input="modalLoadClick"></PagebuilderTemplateLoad>
</div>
</b-modal>
<b-modal class_other="modal-xl" v-model="modalCopy" v-on:onClose="modalCopy = false">
<div slot="modal-title"><span>Zapisz lub Kopiuj układ w schowku</span></div>
<div>
<PagebuilderTemplateLoad v-model="pageType"></PagebuilderTemplateLoad>
</div>
<div slot="modal-footer"><button class="btn btn-primary mr-1" :disabled="!pageType.id"
@click.prevent="changeBody">Skopiuj układ i treść </button></div>
</b-modal>
<b-modal class_other="modal-xl" v-model="modalAddSection" title=" Dodaj sekcję"
v-on:onClose="modalAddSection = false" hide-footer>
<div slot="modal-title"><span>
</span></div>
<div>
<DropdownSectionGrid v-on:input="addSection" v-model="optionx">
</DropdownSectionGrid>
</div>
<div slot="modal-footer"></div>
</b-modal>
<div class="text-center">
<!-- <textarea style="display:none" :name="namex">{{ comps }}</textarea> --><button
class="btn btn-block btn-primary mt-4" @click.prevent="modalAddSection = !modalAddSection; optionx = false">
Dodaj sekcję
</button>
</div> </div>
<div slot="modal-footer"><button class="btn btn-primary mr-1" :disabled="!pageType.id"
@click.prevent="changeBody">Skopiuj układ i treść </button></div>
</b-modal>
<b-modal class_other="modal-xl" v-model="modalAddSection" title=" Dodaj sekcję"
v-on:onClose="modalAddSection = false" hide-footer>
<div slot="modal-title"><span>
</span></div>
<div>
<DropdownSectionGrid v-on:input="addSection" v-model="optionx">
</DropdownSectionGrid>
</div>
<div slot="modal-footer"></div>
</b-modal>
<div class="text-center">
<!-- <textarea style="display:none" :name="namex">{{ comps }}</textarea> --><button
class="btn btn-block btn-primary mt-4" @click.prevent="modalAddSection = !modalAddSection; optionx = false">
Dodaj sekcję
</button>
</div> </div>
</section> </section>
</template> </template>
@@ -87,6 +95,7 @@ export default {
}, },
data: function () { data: function () {
return { return {
fullscreen: false,
grid: grid, grid: grid,
namex: 'body', //podmieniane przez name namex: 'body', //podmieniane przez name
drag: false, drag: false,
@@ -212,4 +221,22 @@ a {
#pagebuilder { #pagebuilder {
background-color: #f5f5f5; background-color: #f5f5f5;
} }
.pagebuilder-fullscreen {
position: fixed;
top: 10px;
width: 80%;
left: 10%;
right: 10%;
min-height: 100vh;
z-index: 100;
overflow-y: auto;
}
.pagebuilder-fullscreen .pagebuilder-body {
overflow-x: hidden;
overflow-y: auto;
max-height: 95vh;
padding-right: 20px;
}
</style> </style>

34
src/components/PagebuilderContent.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div style="min-height: 100px;" :class="value.name"> <div style="min-height: 100px;" class="pagebuilder-column" :class="value.name">
<b-modal v-model="modalAddBox" class_other="modal-xl" v-on:onClose="modalAddBox = false" title="Dodaj widżet"> <b-modal v-model="modalAddBox" class_other="modal-xl" v-on:onClose="modalAddBox = false" title="Dodaj widżet">
@@ -17,11 +17,11 @@
<div> <div>
<div class="from-group"> <div class="from-group">
<label>Klasa kolumny</label> <label>Klasa kolumny</label>
<input v-model="value.class" type="text" class="form-control"> <input @input="onChange" v-model="value.class" type="text" class="form-control">
</div> </div>
</div> </div>
<div slot="modal-footer"><button @click="modalColumnsSettings = false" <div slot="modal-footer"><button @click="modalColumnsSettings = false" class="btn btn-outline-secondary">Zapisz
class="btn btn-outline-secondary">Zapisz i zamknij</button></div> i zamknij</button></div>
</b-modal> </b-modal>
<draggable :options="{ handle: '.box-move' }" v-model="value.items" @start="drag = true" <draggable :options="{ handle: '.box-move' }" v-model="value.items" @start="drag = true"
@end="drag = false; onChange()" group="people"> @end="drag = false; onChange()" group="people">
@@ -32,10 +32,11 @@
v-model="value.items[index]" @input="onChange" @change="onChange"></component> v-model="value.items[index]" @input="onChange" @change="onChange"></component>
</div> </div>
</draggable> </draggable>
<div class="d-flex posistion-relative"> <div :class="value.items.length > 0 ? 'pagebuilder-column-hover-padding' : ''"></div>
<div class="flex-fill mr-0 pr-0"> <div class="posistion-relative " :class="value.items.length > 0 ? 'pagebuilder-column-hover' : 'd-flex'">
<button class="mb-3 w-100 btn btn-icon-sm btn-primary off_tooltip_off" <div class="flex-fill mr-0 pr-0 ">
@click.prevent="modalAddBox = !modalAddBox" title=" "> <i <button class=" w-100 btn btn-icon-sm btn-outline-primary off_tooltip_off"
@click.prevent="modalAddBox = !modalAddBox" title="Dodaj widget"> <i
class="material-icons-outlined">add_circle_outline</i></button> class="material-icons-outlined">add_circle_outline</i></button>
</div> </div>
<div class="ml-0 pl-0"> <div class="ml-0 pl-0">
@@ -93,3 +94,20 @@ export default {
} }
} }
</script> </script>
<style>
.pagebuilder-column-hover {
display: none;
}
.pagebuilder-column-hover-padding {
padding: 17px;
}
.pagebuilder-column:hover .pagebuilder-column-hover {
display: flex;
}
.pagebuilder-column:hover .pagebuilder-column-hover-padding {
padding: 0px;
}
</style>

12
src/components/PagebuilderSection.vue
View File

@@ -10,23 +10,23 @@
<div class="pb_section_options position-absolute" style="top: 12px; right: 14px; width: 20px;"> <div class="pb_section_options position-absolute" style="top: 12px; right: 14px; width: 20px;">
<a href="#" title="pilder_addsection_moveicon');?>" class="box-settings-icon box-move"><i <a href="#" title="Przenieś sekcje" class="box-settings-icon box-move"><i
class="material-icons-outlined">sort</i></a> class="material-icons-outlined">sort</i></a>
<a href="#" title="pagebuilder_addsection_duplicateicon" @click.prevent="copySection" <a href="#" title="Duplikuj sekcje" @click.prevent="copySection"
class="box-settings-icon box-copy text-warning"><i class="material-icons-outlined">file_copy</i></a> class="box-settings-icon box-copy text-warning"><i class="material-icons-outlined">file_copy</i></a>
<a href="#" title="pagebuilder_addsection_settingsicon" @click.prevent="toggleSettings" <a href="#" title="Ustawienia sekcji" @click.prevent="toggleSettings"
class="box-settings-icon box-settings text-secondary"><i class="box-settings-icon box-settings text-secondary"><i
class="material-icons-outlined">settings</i></a> class="material-icons-outlined">settings</i></a>
<a href="#" title="pagebuilder_addsection_deleteicon" @click.prevent="deleteSection" <a href="#" title="Usuń sekcje" @click.prevent="deleteSection"
class="box-settings-icon box-delete text-danger"><i class="material-icons-outlined">delete</i></a> class="box-settings-icon box-delete text-danger"><i class="material-icons-outlined">delete</i></a>
<b-modal v-model="show_settings" title="pagebuilder_addsection_settings_settings" <b-modal v-model="show_settings" title="Ustawienia sekcji"
@onClose="ustawieniaSave()"> @onClose="ustawieniaSave()">
<div> <div>
<div> <div>
<div class="form-group mb-2"> <div class="form-group mb-2">
<label class="w-100 col-form-label"> <label class="w-100 col-form-label">
pagebuilder_addsection_settings_cssclass Klasa sekcji
</label> </label>
<input type="text" class="form-control" v-model="value.class"> <input type="text" class="form-control" v-model="value.class">
</div> </div>

24
src/components/grid.js
View File

@@ -1,14 +1,14 @@
export default { export default {
'col_1': { label: '1 kolumna ', name: 'col_1', columns: [{ name: 'col-md-12', items: [] }] }, 'col_1': { label: '1 kolumna ', name: 'col_1', class: '', columns: [{ name: 'col-md-12', items: [] }] },
'col_2': { label: '2 kolumny po 6 ', name: 'col_2', columns: [{ name: 'col-md-6', items: [] }, { name: 'col-md-6', items: [] }] }, 'col_2': { label: '2 kolumny po 6 ', name: 'col_2', class: '', columns: [{ name: 'col-md-6', items: [] }, { name: 'col-md-6', items: [] }] },
'col_4_8': { label: '2 kolumny 2 i 8 ', name: 'col_4_8', columns: [{ name: 'col-md-4', items: [] }, { name: 'col-md-8', items: [] }] }, 'col_4_8': { label: '2 kolumny 2 i 8 ', name: 'col_4_8', class: '', columns: [{ name: 'col-md-4', items: [] }, { name: 'col-md-8', items: [] }] },
'col_8_4': { label: '2 kolkumny 8 i 2 ', name: 'col_8_4', columns: [{ name: 'col-md-8', items: [] }, { name: 'col-md-4', items: [] }] }, 'col_8_4': { label: '2 kolkumny 8 i 2 ', name: 'col_8_4', class: '', columns: [{ name: 'col-md-8', items: [] }, { name: 'col-md-4', items: [] }] },
'col_2_10': { label: '2 kolumny 2 i 10 ', name: 'col_2_10', columns: [{ name: 'col-md-2', items: [] }, { name: 'col-md-10', items: [] }] }, 'col_2_10': { label: '2 kolumny 2 i 10 ', name: 'col_2_10', class: '', columns: [{ name: 'col-md-2', items: [] }, { name: 'col-md-10', items: [] }] },
'col_10_2': { label: '2 kolkumny 10 i 2 ', name: 'col_10_2', columns: [{ name: 'col-md-10', items: [] }, { name: 'col-md-2', items: [] }] }, 'col_10_2': { label: '2 kolkumny 10 i 2 ', name: 'col_10_2', class: '', columns: [{ name: 'col-md-10', items: [] }, { name: 'col-md-2', items: [] }] },
'col_3': { label: '3 kolumny po 4 ', name: 'col_3', columns: [{ name: 'col-md-4', items: [] }, { name: 'col-md-4', items: [] }, { name: 'col-md-4', items: [] }] }, 'col_3': { label: '3 kolumny po 4 ', name: 'col_3', class: '', columns: [{ name: 'col-md-4', items: [] }, { name: 'col-md-4', items: [] }, { name: 'col-md-4', items: [] }] },
'col_3_6_3': { label: '3 kolumny: 3 ,6, 3 ', name: 'col_3_6_3', columns: [{ name: 'col-md-3', items: [] }, { name: 'col-md-6', items: [] }, { name: 'col-md-3', items: [] }] }, 'col_3_6_3': { label: '3 kolumny: 3 ,6, 3 ', name: 'col_3_6_3', class: '', columns: [{ name: 'col-md-3', items: [] }, { name: 'col-md-6', items: [] }, { name: 'col-md-3', items: [] }] },
'col_6_3_3': { label: '3 kolumny: 6,3,3 ', name: 'col_6_3_3', columns: [{ name: 'col-md-6', items: [] }, { name: 'col-md-3', items: [] }, { name: 'col-md-3', items: [] }] }, 'col_6_3_3': { label: '3 kolumny: 6,3,3 ', name: 'col_6_3_3', class: '', columns: [{ name: 'col-md-6', items: [] }, { name: 'col-md-3', items: [] }, { name: 'col-md-3', items: [] }] },
'col_3_3_6': { label: '3 kolumny: 3,3,6 ', name: 'col_3_3_6', columns: [{ name: 'col-md-3', items: [] }, { name: 'col-md-3', items: [] }, { name: 'col-md-6', items: [] }] }, 'col_3_3_6': { label: '3 kolumny: 3,3,6 ', name: 'col_3_3_6', class: '', columns: [{ name: 'col-md-3', items: [] }, { name: 'col-md-3', items: [] }, { name: 'col-md-6', items: [] }] },
'col_4': { label: '4 kolumny po 3 ', name: 'col_4', columns: [{ name: 'col-md-3', items: [] }, { name: 'col-md-3', items: [] }, { name: 'col-md-3', items: [] }, { name: 'col-md-3', items: [] }] }, 'col_4': { label: '4 kolumny po 3 ', name: 'col_4', class: '', columns: [{ name: 'col-md-3', items: [] }, { name: 'col-md-3', items: [] }, { name: 'col-md-3', items: [] }, { name: 'col-md-3', items: [] }] },
'col_6': { label: '6 kolumn po 2 ', name: 'col_6', columns: [{ name: 'col-md-2', items: [] }, { name: 'col-md-2', items: [] }, { name: 'col-md-2', items: [] }, { name: 'col-md-2', items: [] }, { name: 'col-md-2', items: [] }, { name: 'col-md-2', items: [] }] }, 'col_6': { label: '6 kolumn po 2 ', name: 'col_6', class: '', columns: [{ name: 'col-md-2', items: [] }, { name: 'col-md-2', items: [] }, { name: 'col-md-2', items: [] }, { name: 'col-md-2', items: [] }, { name: 'col-md-2', items: [] }, { name: 'col-md-2', items: [] }] },
} }

2
src/components/plugin/SectionHtml.vue
View File

@@ -12,7 +12,7 @@
v-on:hide="onCloseModal"> v-on:hide="onCloseModal">
<div class="mb-4"> <div class="mb-4">
<div class="form-group"> <div class="form-group">
<textarea class="form-control" v-model="text"></textarea> <textarea rows="40" class="form-control" v-model="text"></textarea>
</div> </div>
</div> </div>
<div class="d-flex"><button class="btn btn-outline-secondary m-auto" @click.prevent="onCloseModal">{{ <div class="d-flex"><button class="btn btn-outline-secondary m-auto" @click.prevent="onCloseModal">{{

2
src/components/tinymce/config.js
View File

@@ -106,7 +106,7 @@ export default {
valid_styles: { valid_styles: {
'*': 'display, margin, float, margin-left, margin-right, margin-top, margin-bottom, padding-left, padding-right, padding-top, padding-bottom, text-decoration, border,font-size,color,background,background-color,line-height,text-align,list-style-type, border-radius', '*': 'display, margin, float, margin-left, margin-right, margin-top, margin-bottom, padding-left, padding-right, padding-top, padding-bottom, text-decoration, border,font-size,color,background,background-color,line-height,text-align,list-style-type, border-radius',
}, },
plugins: ['advlist', 'lists', 'link', 'print', 'hr', 'code', 'table', 'contextmenu', 'emoticons', 'paste', 'textcolor', 'textpattern'], plugins: ['advlist', 'lists', 'link', 'print', 'hr', 'code', 'table', 'contextmenu', 'emoticons', 'paste', 'textcolor', 'textpattern','autoresize'],
removed_menuitems: 'newdocument', removed_menuitems: 'newdocument',
toolbarxx: "undo redo | bold italic | bullist numlist outdent indent | alignleft aligncenter alignright alignjustify | link image forecolor backcolor", toolbarxx: "undo redo | bold italic | bullist numlist outdent indent | alignleft aligncenter alignright alignjustify | link image forecolor backcolor",
toolbar1: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | media | forecolor backcolor', toolbar1: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | media | forecolor backcolor',