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

26
package-lock.json generated
View File

@@ -8,9 +8,11 @@
"name": "magicopagebuilder",
"version": "0.1.0",
"dependencies": {
"@tinymce/tinymce-vue": "^3.2.8",
"boostrap": "^2.0.0",
"bootstrap": "^5.1.3",
"core-js": "^3.6.5",
"tinymce": "^6.0.3",
"vue": "^2.6.11",
"vuedraggable": "^2.24.3"
},
@@ -1933,6 +1935,14 @@
"integrity": "sha512-T7VNNlYVM1SgQ+VsMYhnDkcGmWhQdL0bDyGm5TlQ3GBXnJscEClUUOKduWTmm2zCnvNLC1hc3JpuXjs/nFOc5w==",
"dev": true
},
"node_modules/@tinymce/tinymce-vue": {
"version": "3.2.8",
"resolved": "https://registry.npmjs.org/@tinymce/tinymce-vue/-/tinymce-vue-3.2.8.tgz",
"integrity": "sha512-jEz+NZ0g+FZFz273OEUWz9QkwPMyjc5AJYyxOgu51O1Y5UaJ/6IUddXTX6A20mwCleEv5ebwNYdalviafx4fnA==",
"peerDependencies": {
"vue": "^2.4.3"
}
},
"node_modules/@types/body-parser": {
"version": "1.19.2",
"resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
@@ -13630,6 +13640,11 @@
"integrity": "sha512-qsdtZH+vMoCARQtyod4imc2nIJwg9Cc7lPRrw9CzF8ZKR0khdr8+2nX80PBhET3tcyTtJDxAffGh2rXH4tyU8A==",
"dev": true
},
"node_modules/tinymce": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/tinymce/-/tinymce-6.0.3.tgz",
"integrity": "sha512-4cu80kWF7nRGhviE10poZtjTkl3jNL+lycilCMfdm3KU5V7FtiQQrKbEo6GInXT05RY78Ha/NFP0gOBELcSpfg=="
},
"node_modules/tmp": {
"version": "0.0.33",
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -17018,6 +17033,12 @@
"integrity": "sha512-T7VNNlYVM1SgQ+VsMYhnDkcGmWhQdL0bDyGm5TlQ3GBXnJscEClUUOKduWTmm2zCnvNLC1hc3JpuXjs/nFOc5w==",
"dev": true
},
"@tinymce/tinymce-vue": {
"version": "3.2.8",
"resolved": "https://registry.npmjs.org/@tinymce/tinymce-vue/-/tinymce-vue-3.2.8.tgz",
"integrity": "sha512-jEz+NZ0g+FZFz273OEUWz9QkwPMyjc5AJYyxOgu51O1Y5UaJ/6IUddXTX6A20mwCleEv5ebwNYdalviafx4fnA==",
"requires": {}
},
"@types/body-parser": {
"version": "1.19.2",
"resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
@@ -26469,6 +26490,11 @@
"integrity": "sha512-qsdtZH+vMoCARQtyod4imc2nIJwg9Cc7lPRrw9CzF8ZKR0khdr8+2nX80PBhET3tcyTtJDxAffGh2rXH4tyU8A==",
"dev": true
},
"tinymce": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/tinymce/-/tinymce-6.0.3.tgz",
"integrity": "sha512-4cu80kWF7nRGhviE10poZtjTkl3jNL+lycilCMfdm3KU5V7FtiQQrKbEo6GInXT05RY78Ha/NFP0gOBELcSpfg=="
},
"tmp": {
"version": "0.0.33",
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",

2
package.json
View File

@@ -8,9 +8,11 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"@tinymce/tinymce-vue": "^3.2.8",
"boostrap": "^2.0.0",
"bootstrap": "^5.1.3",
"core-js": "^3.6.5",
"tinymce": "^6.0.3",
"vue": "^2.6.11",
"vuedraggable": "^2.24.3"
},

1
public/index.html
View File

@@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.0.3/tinymce.min.js" integrity="sha512-DB4Mu+YChAdaLiuKCybPULuNSoFBZ2flD9vURt7PgU/7pUDnwgZEO+M89GjBLvK9v/NaixpswQtQRPSMRQwYIA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>

3
src/App.vue
View File

@@ -9,12 +9,11 @@
</template>
<script>
import MagicoPagebuilder from './components/MagicoPagebuilder.vue'
export default {
name: 'App',
components: {
MagicoPagebuilder
},
data: function(){
return {

69
src/components/DropdownSectionSection.vue Normal file
View File

@@ -0,0 +1,69 @@
<template>
<div>
<div class="row col-md-12 pagebuilder_section">
<div v-for="(item, index) in $pagebuilder.items" :key="index" class="col-md-2">
<template v-if="!item.type || item.type != 'custom'">
<div class="my-check v2">
<label @click="$emit('input', index)" :for="'pos_' + index">
<div style="width:100%" v-if="item.svg" v-html="item.svg"></div>
<img v-else style="width:100%"
:src="'assets/images/pagebuilder/' + index + '.jpg'" alt="1 kolumna">
<span style="cursor: pointer" class="d-inline-block w-100 text-center mt-1 mb-1">{{
item.label
}}</span>
</label>
</div>
</template>
</div>
</div>
<!-- <div class="col-md-12 text-center">
<h3>DESIGN SYSTEM</h3>
<div>
<div class="row col-md-12 pagebuilder_section">
<div v-for="(item, index) in items" class="col-md-2" v-if="item.type && item.type == 'custom'">
<div class="form-check v2">
<input @input="event => { $emit('input', index) }" type="radio" :id="'pos_' + index"
name="pos">
<label :for="'pos_' + index">
<div style="width:100%" v-if="item.svg" v-html="item.svg"></div>
<img v-else style="width:100%"
:src="'`+ BASE_URL +`' + 'assets/images/pagebuilder/' + index + '.jpg'"
alt="1 kolumna">
<span style="cursor: pointer" class="d-inline-block w-100 text-center mt-1 mb-1">{{
item.label
}}</span>
</label>
</div>
</div>
</div>
</div>
</div> -->
</div>
</template>
<script>
export default {
methods: {},
props:['value'],
data: function () {
return {
items: {}, //{'core_pagebuilder_section_naglowek':'core_pagebuilder_section_naglowek', 'core_pagebuilder_section_tresc':'core_pagebuilder_section_tresc', 'core_pagebuilder_section_widget_jakis':'core_pagebuilder_section_widget_jakis'},
}
},
mounted() {
}
}
</script>
<style>
.my-check input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.my-check label {
cursor: pointer;
}
</style>

5
src/components/MagicoModal.vue
View File

@@ -7,7 +7,6 @@
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="p-3">
<slot></slot>
</div>
</div>
@@ -37,7 +36,6 @@ export default {
if (value == true) {
this.modal.show();
} else {
console.log('vaaaa');
this.modal.hide()
this.$emit('hide');
}
@@ -48,6 +46,9 @@ export default {
value: function () {
this.triggerModal(this.value);
}
},
destroy() {
this.modal.dispose()
}
}
</script>

10
src/components/MagicoPagebuilder.vue
View File

@@ -13,8 +13,8 @@
<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>
<PagebuilderSection :value="item" v-on:deleteSection="deleteSection" v-on:copy="copySection" @change="onChange">
</PagebuilderSection>
</div>
</draggable>
@@ -46,7 +46,8 @@
@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>
<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>
@@ -56,11 +57,12 @@
</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>
</section>
</template>

28
src/components/MagicoPagebuilderPlugin.js Normal file
View File

@@ -0,0 +1,28 @@
import MagicoPagebuilder from './MagicoPagebuilder.vue'
export default {
install: (app) => {
app.component('MagicoPagebuilder', MagicoPagebuilder);
console.log(app);
app.prototype.$pagebuilder = {
items: {
'core_section_text': {
label: 'Pole nagłowek',
svg: '<svg version="1.1" height="128" width="128" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="31.29px" height="31.29px" viewBox="0 0 31.29 31.29" style="enable-background:new 0 0 31.29 31.29;" xml:space="preserve"><g><g><path d="M18.585,31.226v-1.833h0.577c0.497,0,0.961-0.036,1.395-0.105c0.436-0.072,0.812-0.219,1.131-0.438s0.576-0.537,0.769-0.948c0.192-0.412,0.287-0.959,0.287-1.643V16.03H8.547v10.229c0,0.683,0.095,1.229,0.287,1.644c0.192,0.41,0.448,0.729,0.768,0.947c0.32,0.221,0.699,0.365,1.14,0.438c0.442,0.07,0.902,0.106,1.386,0.106h0.577v1.833H0v-1.833h0.555c0.497,0,0.961-0.036,1.396-0.106c0.434-0.071,0.813-0.217,1.141-0.438c0.326-0.221,0.582-0.537,0.769-0.947c0.184-0.412,0.275-0.961,0.275-1.644v-21.4c0-0.639-0.096-1.153-0.287-1.545c-0.194-0.392-0.454-0.693-0.78-0.906C2.742,2.195,2.363,2.056,1.927,1.992c-0.431-0.065-0.89-0.096-1.373-0.096H0V0.063h12.705v1.833h-0.577c-0.483,0-0.943,0.035-1.386,0.107c-0.44,0.07-0.819,0.217-1.14,0.437C9.283,2.66,9.027,2.976,8.834,3.389C8.642,3.8,8.547,4.348,8.547,5.03v8.823h14.195V5.03c0-0.683-0.096-1.23-0.287-1.642s-0.448-0.729-0.768-0.948c-0.32-0.22-0.696-0.366-1.131-0.437c-0.435-0.072-0.897-0.107-1.396-0.107h-0.577V0.063h12.705v1.833h-0.553c-0.498,0-0.961,0.035-1.396,0.107c-0.434,0.07-0.812,0.217-1.141,0.437c-0.326,0.22-0.582,0.536-0.768,0.948c-0.186,0.411-0.277,0.959-0.277,1.642v21.442c0,0.64,0.097,1.155,0.287,1.545c0.192,0.392,0.453,0.687,0.779,0.884c0.326,0.2,0.705,0.331,1.141,0.396c0.434,0.064,0.892,0.096,1.373,0.096h0.556v1.833H18.585z"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>'
},
'core_section_textarea': {
label: 'Pole tekstowe',
svg: '<svg id="Capa_1" enable-background="new 0 0 512 512" height="128" viewBox="0 0 512 512" width="128" xmlns="http://www.w3.org/2000/svg"><g><path d="m15 114.235c8.284 0 15-6.716 15-15v-69.235h69.235c8.284 0 15-6.716 15-15s-6.716-15-15-15h-84.235c-8.284 0-15 6.716-15 15v84.235c0 8.285 6.716 15 15 15z"/><path d="m497 0h-84.235c-8.284 0-15 6.716-15 15s6.716 15 15 15h69.235v69.235c0 8.284 6.716 15 15 15s15-6.716 15-15v-84.235c0-8.284-6.716-15-15-15z"/><path d="m497 397.765c-8.284 0-15 6.716-15 15v69.235h-69.235c-8.284 0-15 6.716-15 15s6.716 15 15 15h84.235c8.284 0 15-6.716 15-15v-84.235c0-8.285-6.716-15-15-15z"/><path d="m99.235 482h-69.235v-69.235c0-8.284-6.716-15-15-15s-15 6.716-15 15v84.235c0 8.284 6.716 15 15 15h84.235c8.284 0 15-6.716 15-15s-6.715-15-15-15z"/><path d="m419.66 191.38v-94.73c0-4.7-3.81-8.51-8.52-8.51h-155.14-155.14c-4.71 0-8.52 3.81-8.52 8.51v94.73c0 4.71 3.81 8.52 8.52 8.52h45.24c4.7 0 8.51-3.81 8.51-8.52v-32.45c0-4.71 3.82-8.52 8.52-8.52h53.21c4.71 0 8.52 3.81 8.52 8.52v234.14c0 4.71-3.81 8.52-8.52 8.52h-23.27c-4.71 0-8.52 3.81-8.52 8.52v45.24c0 4.7 3.81 8.51 8.52 8.51h62.93 62.93c4.71 0 8.52-3.81 8.52-8.51v-45.24c0-4.71-3.81-8.52-8.52-8.52h-23.27c-4.71 0-8.52-3.81-8.52-8.52v-234.14c0-4.71 3.81-8.52 8.52-8.52h53.21c4.7 0 8.52 3.81 8.52 8.52v32.45c0 4.71 3.81 8.52 8.51 8.52h45.24c4.71 0 8.52-3.81 8.52-8.52z"/></g></svg>'
},
'core_section_html': {
label: 'Pole HTML',
svg: '<svg version="1.1" height="128" width="128" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><g><path d="M467,0H45C20.187,0,0,20.187,0,45v422c0,24.813,20.187,45,45,45h422c24.813,0,45-20.187,45-45V45C512,20.187,491.813,0,467,0z M482,467c0,8.271-6.729,15-15,15H45c-8.271,0-15-6.729-15-15V150h452V467z M482,120H30V45c0-8.271,6.729-15,15-15h422c8.271,0,15,6.729,15,15V120z"/></g></g><g><g><path d="M127.213,316l49.393-49.393c5.858-5.858,5.858-15.356,0-21.214c-5.857-5.858-15.355-5.858-21.213,0l-60,60c-5.858,5.858-5.858,15.355,0,21.213l60,60c5.857,5.857,15.355,5.858,21.213,0c5.858-5.858,5.858-15.355,0-21.213L127.213,316z"/></g></g><g><g><path d="M416.607,305.393l-60.001-60c-5.857-5.858-15.355-5.858-21.213,0c-5.858,5.858-5.858,15.355,0,21.213L384.787,316l-49.393,49.393c-5.858,5.858-5.858,15.355,0,21.213c5.857,5.857,15.355,5.858,21.213,0l60-60C422.465,320.748,422.465,311.251,416.607,305.393z"/></g></g><g><g><path d="M290.744,211.77c-7.862-2.621-16.354,1.628-18.974,9.487l-60,180c-2.62,7.859,1.628,16.354,9.487,18.974c7.861,2.62,16.355-1.629,18.974-9.487l60-180C302.85,222.884,298.603,214.389,290.744,211.77z"/></g></g><g><g><path d="M106,60H76c-8.284,0-15,6.716-15,15s6.716,15,15,15h30c8.284,0,15-6.716,15-15S114.284,60,106,60z"/></g></g><g><g><path d="M196,60h-30c-8.284,0-15,6.716-15,15s6.716,15,15,15h30c8.284,0,15-6.716,15-15S204.284,60,196,60z"/></g></g><g><g><path d="M286,60h-30c-8.284,0-15,6.716-15,15s6.716,15,15,15h30c8.284,0,15-6.716,15-15S294.284,60,286,60z"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>'
}
},
registerPlugin(name, item) {
this.items[name] = item;
}
}
}
}

34
src/components/PagebuilderContent.vue
View File

@@ -1,11 +1,11 @@
<template>
<div :class="value.name">
<div style="min-height: 100px;" :class="value.name">
<b-modal v-model="modalAddBox" size="lg" 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" >
<div>
<!-- <core_pagebuilder_dropdown_section_section v-on:input="clickAdd" v-model="opcja" :value="opcja">
</core_pagebuilder_dropdown_section_section> -->
<DropdownSectionSection v-on:input="clickAdd" v-model="opcja">
</DropdownSectionSection>
</div>
<div slot="modal-footer"></div>
</b-modal>
@@ -26,22 +26,22 @@
<draggable :options="{ handle: '.box-move' }" v-model="value.items" @start="drag = true"
@end="drag = false; onChange()" group="people">
<div v-for="(item, index) in value.items" :key="rand(index)"
<div v-for="(item, index) in value.items" :key="index"
class="pb_section table-bordered p-2 pl-3 pr-3 mb-3 rounded">
<component @itemRemoved="removeItem" :key="rand(index)" v-bind:is="item.name" v-bind:value="item"
<component @itemRemoved="removeItem" :key="index" v-bind:is="item.name" v-bind:value="item"
v-model="value.items[index]" @input="onChange" @change="onChange"></component>
</div>
</draggable>
<div class="row">
<div class="col-11 mr-0 pr-0">
<div class="d-flex posistion-relative">
<div class="flex-fill mr-0 pr-0">
<button class="mb-3 w-100 btn btn-icon-sm btn-primary off_tooltip_off"
@click.prevent="modalAddBox = !modalAddBox" title=" "> <i
class="material-icons-outlined">add_circle_outline</i></button>
</div>
<div class="col-1 ml-0 pl-0">
<div class="ml-0 pl-0">
<a title="Ustawienia kolumny" class="btn-icon-sm"
@click.prevent="modalColumnsSettings = !modalColumnsSettings"><i
style="position:absolute; top:5px; right:0; cursor:pointer"
style=" cursor:pointer; position: relative; top:5px; margin-left: 5px;"
class="material-icons-outlined">create</i></a>
</div>
</div>
@@ -51,6 +51,10 @@
import draggable from 'vuedraggable'
import MagicoModal from './MagicoModal.vue'
import SectionText from './plugin/SectionText.vue'
import SectionTextarea from './plugin/SectionTextarea.vue'
import SectionHtml from './plugin/SectionHtml.vue'
import DropdownSectionSection from './DropdownSectionSection.vue'
export default {
data: function () { return { opcja: '', modalAddBox: false, drag: false, modalColumnsSettings: false } },
@@ -58,8 +62,10 @@ export default {
components: {
draggable,
'b-modal': MagicoModal,
'core_section_textarea': SectionText,
'core_section_textarea': SectionTextarea,
'core_section_text': SectionText,
'core_section_html':SectionHtml,
DropdownSectionSection
},
methods: {
@@ -73,11 +79,13 @@ export default {
this.onChange();
},
clickAdd: function () {
clickAdd: function (item) {
console.log(item);
this.modalAddBox = false;
var a = { name: this.opcja, open: true }
var a = { name: item, open: true }
this.value.items.push(a);
this.onChange();
this.opcja='';
}
}
}

6
src/components/PagebuilderSection.vue
View File

@@ -2,9 +2,9 @@
<div class="row pb-3 mb-3 position-relative border-bottom pb_outer_section pr-5">
<div class="col-sm-12">
<div class="row p-0 mt-3">
<div class="row p-0 mt-3 me-2">
<PagebuilderContent class="col-sm-12" v-for="(column, index) in value.columns" :value="column"
:key="rand(index)" @change="onChange"></PagebuilderContent>
:key="index" @change="onChange"></PagebuilderContent>
</div>
</div>
@@ -55,7 +55,7 @@
</div>
<div><button class="btn btn-outline-secondary" @click.prevent="ustawieniaSave">
pagebuilder_addsection_settings_saveclose
Zapisz
</button></div>
</b-modal>

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>

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

@@ -1,15 +1,22 @@
<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>
<a href="#" title="Usuń" @click.prevent="removeItem()" class="text-danger"><i
class="material-icons-outlined">delete</i></a>
</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">
<p>
<div class="form-group">
<label class="w-100 col-form-label">{{ langs.content }}</label>
<input class="form-control" type="text" v-model="text" />
@@ -26,21 +33,14 @@
</select>
</div>
<div class="form-group">
<label class="w-100 col-form-label">Wyrównanie</label>
<!-- <label class="w-100 col-form-label">Wyrównanie</label> -->
</div>
<div><button class="btn btn-outline-secondary mr-1" @click.prevent="onCloseModal">{{
<div class="text-center"><button class="btn btn-outline-secondary me-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>
<strong class="font-weight-bold">{{ langs.type }}:</strong> {{ h_type }},
<strong class="font-weight-bold">{{ langs.content }}:</strong> {{ (text) ? text : ' ' }}
</div>
</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>

114
src/components/tinymce/config.js Normal file
View File

@@ -0,0 +1,114 @@
export default {
autoresize_max_height: window.innerHeight - window.innerHeight / 4,
width: '100%',
selector: "textarea.wysiwyg",
language: "pl",
forced_root_block: "p",
entity_encoding: 'named',
entities: '160,nbsp,38,amp,60,lt,62,gt',
valid_elements: '*[*]',
document_base_url: window.location,
relative_urls: false,
browser_spellcheck: true,
autoresize_bottom_margin: 10,
autoresize_min_height: 90,
image_caption: true,
image_description: true,
image_title: true,
visualblocks_default_state: true,
visualchars_default_state: false,
formats: {
mainparagraph: {
inline: 'span',
styles: {
fontSize: '18px'
},
classes: 'main_paragraph'
},
firstlink: {
inline: 'span',
styles: {
fontSize: '16px'
},
classes: 'default_button_span black'
},
secondlink: {
inline: 'span',
styles: {
fontSize: '16px'
},
classes: 'default_button_span'
}
},
style_formats: [{
title: 'Headers',
items: [{
title: 'h1',
block: 'h1'
}, {
title: 'h2',
block: 'h2'
}, {
title: 'h3',
block: 'h3'
}, {
title: 'h4',
block: 'h4'
}, {
title: 'h5',
block: 'h5'
}, {
title: 'h6',
block: 'h6'
}]
}, {
title: 'Blocks',
items: [{
title: 'Główny akapit',
format: 'mainparagraph'
}, {
title: 'LinkURL - 1',
format: 'firstlink'
}, {
title: 'LinkURL - 2',
format: 'secondlink'
}, {
title: 'p',
block: 'p'
}, {
title: 'div',
block: 'div'
}, {
title: 'pre',
block: 'pre'
}]
}, {
title: 'Containers',
items: [{
title: 'section',
block: 'section',
wrapper: true,
merge_siblings: false
},
//{ title: 'article', block: 'article', wrapper: true, merge_siblings: false },
{
title: 'blockquote',
block: 'blockquote',
wrapper: true
},
//{ title: 'hgroup', block: 'hgroup', wrapper: true },
//{ title: 'aside', block: 'aside', wrapper: true },
//{ title: 'figure', block: 'figure', wrapper: true }
]
}],
paste_word_valid_elements: "table,tr,td,th,b,strong,i,em,h1,h2, strong",
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',
},
plugins: ['advlist', 'autolink', 'lists', 'link', 'image', 'print', 'hr', 'anchor', 'media', 'pagebreak' ,'searchreplace', 'wordcount', 'visualblocks', 'visualchars', 'code' ,'insertdatetime', 'nonbreaking', 'save', 'table', 'contextmenu', 'directionality' ,'emoticons', 'paste', 'textcolor', 'textpattern', 'codesample', 'charmap', 'autoresize'],
removed_menuitems: 'newdocument',
toolbarxx: "undo redo | styleselect | bold italic | bullist numlist outdent indent | alignleft aligncenter alignright alignjustify | link image forecolor backcolor mybutton mybuttona",
toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | media | forecolor backcolor',
toolbar2: '',
menubar:false,
}

59
src/components/tinymce/editor.js Normal file
View File

@@ -0,0 +1,59 @@
/* Import TinyMCE */
import 'tinymce/tinymce';
/* Default icons are required. After that, import custom icons if applicable */
import 'tinymce/icons/default';
/* Required TinyMCE components */
import 'tinymce/themes/silver';
// import 'tinymce/models/dom';
/* Import a skin (can be a custom skin instead of the default) */
import 'tinymce/skins/ui/oxide/skin.css';
// /* Import plugins */
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/code';
import 'tinymce/plugins/emoticons';
import 'tinymce/plugins/emoticons/js/emojis';
import 'tinymce/plugins/link';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/table';
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/autolink'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/link'
import 'tinymce/plugins/image'
import 'tinymce/plugins/anchor'
import 'tinymce/plugins/media'
import 'tinymce/plugins/pagebreak'
import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/visualblocks'
import 'tinymce/plugins/visualchars'
import 'tinymce/plugins/code'
import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/nonbreaking'
import 'tinymce/plugins/save'
import 'tinymce/plugins/table'
import 'tinymce/plugins/directionality'
import 'tinymce/plugins/emoticons'
// import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/codesample'
import 'tinymce/plugins/charmap'
import 'tinymce/plugins/autoresize'
/* Import premium plugins */
/* NOTE: Download separately and add these to /src/plugins */
/* import './plugins/checklist/plugin'; */
/* import './plugins/powerpaste/plugin'; */
/* import './plugins/powerpaste/js/wordimport'; */
/* content UI CSS is required */
/* Initialize TinyMCE */
export function render() {
}

3
src/main.js
View File

@@ -1,8 +1,9 @@
import Vue from 'vue'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.min.css';
import MagicoPagebuilder from './components/MagicoPagebuilderPlugin.js'
Vue.config.productionTip = false
Vue.use(MagicoPagebuilder);
new Vue({
render: h => h(App),
}).$mount('#app')