clear master
This commit is contained in:
Szymon Haczyk
34
.eslintrc.js
34
.eslintrc.js
@@ -1,34 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
extends: [
|
|
||||||
// add more generic rulesets here, such as:
|
|
||||||
// 'eslint:recommended',
|
|
||||||
"plugin:vue/vue3-recommended",
|
|
||||||
// 'plugin:vue/recommended' // Use this if you are using Vue.js 2.x.
|
|
||||||
],
|
|
||||||
rules: {
|
|
||||||
// override/add rules settings here, such as:
|
|
||||||
// 'vue/no-unused-vars': 'error'
|
|
||||||
"vue/no-mutating-props": 1,
|
|
||||||
"vue/html-indent": 0,
|
|
||||||
"vue/html-self-closing": ["warn", {
|
|
||||||
"html": {
|
|
||||||
"void": "any",
|
|
||||||
"normal": "always",
|
|
||||||
"component": "always"
|
|
||||||
},
|
|
||||||
"svg": "always",
|
|
||||||
"math": "always"
|
|
||||||
}],
|
|
||||||
"vue/max-attributes-per-line": [
|
|
||||||
"warn",
|
|
||||||
{
|
|
||||||
singleline: {
|
|
||||||
max: 2,
|
|
||||||
},
|
|
||||||
multiline: {
|
|
||||||
max: 2,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
30
README.md
30
README.md
@@ -1,30 +0,0 @@
|
|||||||
# magicopagebuilder
|
|
||||||
|
|
||||||
## Project setup
|
|
||||||
```
|
|
||||||
npm install
|
|
||||||
```
|
|
||||||
|
|
||||||
### Compiles and hot-reloads for development
|
|
||||||
```
|
|
||||||
npm run serve
|
|
||||||
```
|
|
||||||
|
|
||||||
### Compiles and minifies for production
|
|
||||||
```
|
|
||||||
npm run build
|
|
||||||
```
|
|
||||||
|
|
||||||
### Lints and fixes files
|
|
||||||
```
|
|
||||||
npm run lint
|
|
||||||
```
|
|
||||||
|
|
||||||
### Customize configuration
|
|
||||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
IMPORT TINYMCE FROM CDN
|
|
||||||
|
|
||||||
<script src="https://cdn.magico.pl/tinymce/tinymce.min.js"></script>
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
presets: [
|
|
||||||
'@vue/cli-plugin-babel/preset'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
43
package.json
43
package.json
@@ -1,43 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "magicopagebuilder",
|
|
||||||
"version": "0.1.0",
|
|
||||||
"private": true,
|
|
||||||
"scripts": {
|
|
||||||
"serve": "vue-cli-service serve",
|
|
||||||
"build": "vue-cli-service build",
|
|
||||||
"lint": "vue-cli-service lint"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"@popperjs/core": "^2.11.7",
|
|
||||||
"@tinymce/tinymce-vue": "^4",
|
|
||||||
"bootstrap": "^5.3.1",
|
|
||||||
"core-js": "^3.6.5",
|
|
||||||
"magico-section": "../magico-section",
|
|
||||||
"tinymce": "^6.0.3",
|
|
||||||
"vue": "^3.2.36",
|
|
||||||
"vuedraggable": "^4.1.0"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@babel/eslint-parser": "^7.22.9",
|
|
||||||
"@vue/cli-plugin-babel": "~5.0.8",
|
|
||||||
"@vue/cli-plugin-eslint": "~5.0.8",
|
|
||||||
"@vue/cli-service": "~5.0.8",
|
|
||||||
"babel-eslint": "^10.1.0",
|
|
||||||
"eslint": "^8.46.0",
|
|
||||||
"eslint-plugin-vue": "^9.16.1"
|
|
||||||
},
|
|
||||||
"eslintConfig": {
|
|
||||||
"root": true,
|
|
||||||
"env": {
|
|
||||||
"node": true
|
|
||||||
},
|
|
||||||
"extends": [
|
|
||||||
"plugin:vue/essential",
|
|
||||||
"eslint:recommended"
|
|
||||||
],
|
|
||||||
"parserOptions": {
|
|
||||||
"parser": "@babel/eslint-parser"
|
|
||||||
},
|
|
||||||
"rules": {}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
@@ -1,26 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<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://cdn.magico.pl/tinymce/tinymce.min.js"></script>
|
|
||||||
<title>
|
|
||||||
<%= htmlWebpackPlugin.options.title %>
|
|
||||||
</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<noscript>
|
|
||||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
|
|
||||||
Please enable it to continue.</strong>
|
|
||||||
</noscript>
|
|
||||||
<div id="app"></div>
|
|
||||||
<!-- built files will be auto injected -->
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
34
src/App.vue
34
src/App.vue
@@ -1,34 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div id="app" class="container">
|
|
||||||
<img alt="Vue logo" style="width:100px" src="./assets/logo.png">
|
|
||||||
<h2>Pagebuilder Magico</h2>
|
|
||||||
<MagicoPagebuilder v-model="data" />
|
|
||||||
|
|
||||||
<div class="bg-dark text-light mt-4 p-2">{{data}}</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'App',
|
|
||||||
components: {
|
|
||||||
|
|
||||||
},
|
|
||||||
data: function(){
|
|
||||||
return {
|
|
||||||
data:'[{"label":"1 kolumna ","name":"col_1","columns":[{"name":"col-md-12","items":[{"name":"core_section_textarea","text":""},{"name":"core_section_text","text":""}]}]}]'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
#app {
|
|
||||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
color: #2c3e50;
|
|
||||||
margin-top: 60px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
@@ -1,48 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="row p-2">
|
|
||||||
<div
|
|
||||||
v-for="(item, index) in items"
|
|
||||||
:key="index"
|
|
||||||
class="col-md-3"
|
|
||||||
>
|
|
||||||
<div class="my-check v2">
|
|
||||||
<label
|
|
||||||
@click="emitEvent(item)"
|
|
||||||
:for="item.name"
|
|
||||||
><img
|
|
||||||
style="width: 100%"
|
|
||||||
:src="'https://cdn.magico.pl/pagebuilder/images/' + item.name + '.jpg'"
|
|
||||||
:alt="item.label"
|
|
||||||
/></label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import { ref } from "vue";
|
|
||||||
import grid from "./grid.js";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
emits: ["choose"],
|
|
||||||
setup(props, { emit }) {
|
|
||||||
const items = ref(grid);
|
|
||||||
|
|
||||||
function emitEvent(item) {
|
|
||||||
emit("choose", item);
|
|
||||||
}
|
|
||||||
return { items, emitEvent };
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.my-check input {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.my-check label {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,87 +0,0 @@
|
|||||||
<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('choose', index)"
|
|
||||||
:for="'pos_' + index"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style="width: 100%"
|
|
||||||
v-if="item.svg"
|
|
||||||
v-html="item.svg"
|
|
||||||
></div>
|
|
||||||
<img
|
|
||||||
v-else
|
|
||||||
style="width: 100%"
|
|
||||||
:src="'https://cdn.magico.pl/pagebuilder/images/' + 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('update:modelValue', 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: {},
|
|
||||||
|
|
||||||
emits:['choose'],
|
|
||||||
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>
|
|
||||||
@@ -1,90 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
:id="id"
|
|
||||||
class="modal"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="modal-dialog"
|
|
||||||
:class="class_other"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-if="modal"
|
|
||||||
class="modal-content"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-if="title"
|
|
||||||
class="modal-header"
|
|
||||||
>
|
|
||||||
<h4
|
|
||||||
class="modal-title"
|
|
||||||
v-html="title"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="btn-close"
|
|
||||||
data-bs-dismiss="modal"
|
|
||||||
aria-label="Close"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="p-3">
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { Modal } from "bootstrap";
|
|
||||||
import { onMounted, onBeforeUnmount, ref, watch } from "vue";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
props: ["modelValue", "title", "class_other"],
|
|
||||||
setup(props, { emit }) {
|
|
||||||
const id = "modal" + Math.round(Math.random() * 100000);
|
|
||||||
const modal = ref(null);
|
|
||||||
|
|
||||||
const triggerModal = (value, emitEvent = true) => {
|
|
||||||
if (value == true) {
|
|
||||||
modal.value.show();
|
|
||||||
} else {
|
|
||||||
modal.value.hide();
|
|
||||||
if (emitEvent) {
|
|
||||||
emit("hide");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
emit("update:modelValue", value);
|
|
||||||
};
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
document.body.append(document.getElementById(id));
|
|
||||||
modal.value = new Modal(document.getElementById(id));
|
|
||||||
document.getElementById(id).addEventListener("hidden.bs.modal", function () {
|
|
||||||
triggerModal(false);
|
|
||||||
});
|
|
||||||
triggerModal(props.modelValue, false);
|
|
||||||
});
|
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
|
||||||
document.getElementById(id).remove();
|
|
||||||
});
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => props.modelValue,
|
|
||||||
() => {
|
|
||||||
triggerModal(props.modelValue);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
return { id, modal };
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.modal-xxl {
|
|
||||||
width: 100% !important;
|
|
||||||
max-width: 100% !important;
|
|
||||||
padding: 0 10px !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,319 +0,0 @@
|
|||||||
<template>
|
|
||||||
<section
|
|
||||||
:class="{ 'pagebuilder-fullscreen': fullscreen }"
|
|
||||||
class="content card-body p-3"
|
|
||||||
id="pagebuilder"
|
|
||||||
>
|
|
||||||
<div class="pagebuilder-body">
|
|
||||||
<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> -->
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<draggable
|
|
||||||
:options="{ handle: '.box-move' }"
|
|
||||||
v-model.value="comps"
|
|
||||||
@start="drag = true"
|
|
||||||
item-key="d"
|
|
||||||
@end="
|
|
||||||
drag = false;
|
|
||||||
onChange();
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<template #item="{ element }">
|
|
||||||
<PagebuilderSection
|
|
||||||
:value="element"
|
|
||||||
v-on:deleteSection="deleteSection"
|
|
||||||
v-on:copy="copySection"
|
|
||||||
@change="onChange"
|
|
||||||
>
|
|
||||||
</PagebuilderSection>
|
|
||||||
</template>
|
|
||||||
</draggable>
|
|
||||||
|
|
||||||
<b-modal
|
|
||||||
class_other="modal-xl"
|
|
||||||
v-model.value="modalSave"
|
|
||||||
title="Zapisz szablon do schowka"
|
|
||||||
v-on:onClose="modalSave = false"
|
|
||||||
>
|
|
||||||
<PagebuilderTemplateSave
|
|
||||||
v-model.value="pageType"
|
|
||||||
:szablon="value"
|
|
||||||
>
|
|
||||||
</PagebuilderTemplateSave>
|
|
||||||
<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.value="modalLoad"
|
|
||||||
title="Wczytaj szablon ze schowka"
|
|
||||||
v-on:onClose="modalLoad = false"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<PagebuilderTemplateLoad
|
|
||||||
v-model.value="pageType"
|
|
||||||
@input="modalLoadClick"
|
|
||||||
></PagebuilderTemplateLoad>
|
|
||||||
</div>
|
|
||||||
</b-modal>
|
|
||||||
|
|
||||||
<b-modal
|
|
||||||
class_other="modal-xl"
|
|
||||||
v-model.value="modalCopy"
|
|
||||||
v-on:onClose="modalCopy = false"
|
|
||||||
>
|
|
||||||
<PagebuilderTemplateLoad v-model.value="pageType"></PagebuilderTemplateLoad>
|
|
||||||
<div>
|
|
||||||
<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.value="modalAddSection"
|
|
||||||
title=" Dodaj sekcję"
|
|
||||||
v-on:onClose="modalAddSection = false"
|
|
||||||
hide-footer
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<DropdownSectionGrid @choose="addSection"> </DropdownSectionGrid>
|
|
||||||
</div>
|
|
||||||
<div></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>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import draggable from "vuedraggable";
|
|
||||||
import grid from "./grid.js";
|
|
||||||
import MagicoModal from "./MagicoModal.vue";
|
|
||||||
import PagebuilderSection from "./PagebuilderSection.vue";
|
|
||||||
import DropdownSectionGrid from "./DropdownSectionGrid.vue";
|
|
||||||
import PagebuilderTemplateSave from "./PagebuilderTemplateSave.vue";
|
|
||||||
import PagebuilderTemplateLoad from "./PagebuilderTemplateLoad.vue";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "MagicoPagebuilder",
|
|
||||||
emits: ["update:modelValue"],
|
|
||||||
components: {
|
|
||||||
"b-modal": MagicoModal,
|
|
||||||
PagebuilderSection,
|
|
||||||
draggable,
|
|
||||||
DropdownSectionGrid,
|
|
||||||
PagebuilderTemplateSave,
|
|
||||||
PagebuilderTemplateLoad,
|
|
||||||
},
|
|
||||||
data: function () {
|
|
||||||
return {
|
|
||||||
fullscreen: false,
|
|
||||||
grid: grid,
|
|
||||||
namex: "body", //podmieniane przez name
|
|
||||||
drag: false,
|
|
||||||
optionx: "",
|
|
||||||
comps: [],
|
|
||||||
modalAddSection: false,
|
|
||||||
modalCopy: false,
|
|
||||||
pageType: { id: false },
|
|
||||||
modalSave: false,
|
|
||||||
modalLoad: false,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
props: ["name", "modelValue", "showcopy", "lang"],
|
|
||||||
mounted: function () {
|
|
||||||
//var trimmed = $("#body_pagebuilder").val().replace((/ |\r\n|\n|\r/gm),"");
|
|
||||||
var trimmed = this.modelValue; //.replace((/{2} |\r\n|\n|\r/gm), "");
|
|
||||||
try {
|
|
||||||
this.comps = JSON.parse(trimmed);
|
|
||||||
} catch (e) {
|
|
||||||
console.warn(e);
|
|
||||||
this.comps = [
|
|
||||||
{
|
|
||||||
label: "1 kolumna ",
|
|
||||||
name: "col_1",
|
|
||||||
columns: [{ name: "col-md-12", items: [{ name: "core_section_textarea" }] }],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created: function () {
|
|
||||||
if (this.name) this.namex = this.name;
|
|
||||||
else this.namxe = "body";
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
// whenever question changes, this function will run
|
|
||||||
comps: function (newQuestion) {
|
|
||||||
console.log("nq", newQuestion);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onChange: function () {
|
|
||||||
this.$emit("update:modelValue", JSON.stringify(this.comps));
|
|
||||||
this.$emit("change");
|
|
||||||
},
|
|
||||||
copySection: function (item) {
|
|
||||||
this.comps.push(JSON.parse(JSON.stringify(item)));
|
|
||||||
this.onChange();
|
|
||||||
},
|
|
||||||
deleteSection: function (item) {
|
|
||||||
this.comps.splice(this.comps.indexOf(item), 1);
|
|
||||||
this.onChange();
|
|
||||||
},
|
|
||||||
addSection: function (it) {
|
|
||||||
this.modalAddSection = false;
|
|
||||||
this.comps.push(JSON.parse(JSON.stringify(it)));
|
|
||||||
this.onChange();
|
|
||||||
},
|
|
||||||
modalSaveSave: function () {
|
|
||||||
console.log(this.pageType);
|
|
||||||
var data = {
|
|
||||||
id: this.pageType.id,
|
|
||||||
name: this.pageType.name,
|
|
||||||
source: this.modelValue,
|
|
||||||
description: this.pageType.description,
|
|
||||||
};
|
|
||||||
if (this.$pagebuilder.axios) {
|
|
||||||
this.$pagebuilder.axios.post("api/v1/pagebuilder/template", data).then(() => {
|
|
||||||
this.pageType = {};
|
|
||||||
this.modalSave = false;
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
console.error("NO AXIOS INSTACE PROVIDED TO PAGEBUILDER");
|
|
||||||
}
|
|
||||||
},
|
|
||||||
modalLoadClick: function () {
|
|
||||||
this.pageType.body = this.pageType.source;
|
|
||||||
this.changeBody();
|
|
||||||
},
|
|
||||||
changeBody() {
|
|
||||||
var t = this;
|
|
||||||
var value = this.pageType.body;
|
|
||||||
var trimmed = value;
|
|
||||||
try {
|
|
||||||
//this.comps.forEach((item)=>{
|
|
||||||
// this.deleteSection(item);
|
|
||||||
//})
|
|
||||||
this.comps = [];
|
|
||||||
setTimeout(function () {
|
|
||||||
t.comps = JSON.parse(trimmed);
|
|
||||||
t.onChange();
|
|
||||||
}, 300);
|
|
||||||
//this.comps =JSON.parse(trimmed);
|
|
||||||
} catch (e) {
|
|
||||||
this.comps = [
|
|
||||||
{
|
|
||||||
label: "1 kolumna ",
|
|
||||||
name: "col_1",
|
|
||||||
columns: [{ name: "col-md-12", items: [{ name: "core_section_textarea" }] }],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
||||||
this.modalCopy = false;
|
|
||||||
this.modalSave = false;
|
|
||||||
this.modalLoad = false;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
||||||
<style scoped>
|
|
||||||
h3 {
|
|
||||||
margin: 40px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style-type: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #42b983;
|
|
||||||
}
|
|
||||||
|
|
||||||
#pagebuilder {
|
|
||||||
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>
|
|
||||||
@@ -1,36 +0,0 @@
|
|||||||
import MagicoPagebuilder from "./MagicoPagebuilder.vue";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
install: (app) => {
|
|
||||||
app.component("MagicoPagebuilder", MagicoPagebuilder);
|
|
||||||
|
|
||||||
console.log(app);
|
|
||||||
app.config.globalProperties.$pagebuilder = {
|
|
||||||
items: {
|
|
||||||
core_section_text: {
|
|
||||||
label: "Pole nagłowek",
|
|
||||||
svg_off: "",
|
|
||||||
},
|
|
||||||
core_section_textarea: {
|
|
||||||
label: "Pole tekstowe",
|
|
||||||
svg_off: "",
|
|
||||||
},
|
|
||||||
core_section_html: {
|
|
||||||
label: "Pole HTML",
|
|
||||||
svg_off: "",
|
|
||||||
},
|
|
||||||
core_section_image: {
|
|
||||||
label: "Obrazek",
|
|
||||||
svg_off: "",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
axios: null,
|
|
||||||
registerPlugin(name, item, component) {
|
|
||||||
this.items[name] = item;
|
|
||||||
if(component){
|
|
||||||
app.component(name, component);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@@ -1,162 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
style="min-height: 100px"
|
|
||||||
class="pagebuilder-column"
|
|
||||||
:class="value.name"
|
|
||||||
>
|
|
||||||
<b-modal
|
|
||||||
v-model.value="modalAddBox"
|
|
||||||
class_other="modal-xl"
|
|
||||||
v-on:onClose="modalAddBox = false"
|
|
||||||
title="Dodaj widżet"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<DropdownSectionSection @choose="clickAdd"> </DropdownSectionSection>
|
|
||||||
</div>
|
|
||||||
</b-modal>
|
|
||||||
|
|
||||||
<b-modal
|
|
||||||
v-model="modalColumnsSettings"
|
|
||||||
title="Ustawienia kolumny"
|
|
||||||
size="sm"
|
|
||||||
v-on:onClose="modalColumnsSettings = false"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<div class="from-group">
|
|
||||||
<label>Klasa kolumny</label>
|
|
||||||
<input
|
|
||||||
@input="onChange"
|
|
||||||
v-model="value.class"
|
|
||||||
type="text"
|
|
||||||
class="form-control"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<button
|
|
||||||
@click="modalColumnsSettings = false"
|
|
||||||
class="btn btn-outline-secondary"
|
|
||||||
>
|
|
||||||
Zapisz i zamknij
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</b-modal>
|
|
||||||
<draggable
|
|
||||||
:options="{ handle: '.box-move' }"
|
|
||||||
v-model="value.items"
|
|
||||||
@start="drag = true"
|
|
||||||
@end="
|
|
||||||
drag = false;
|
|
||||||
onChange();
|
|
||||||
"
|
|
||||||
group="people"
|
|
||||||
>
|
|
||||||
<template #item="{ element, index }">
|
|
||||||
<div class="pb_section table-bordered p-2 pl-3 pr-3 mb-3 rounded">
|
|
||||||
<component
|
|
||||||
@itemRemoved="removeItem"
|
|
||||||
:key="index"
|
|
||||||
v-bind:is="element.name"
|
|
||||||
v-bind:value="element"
|
|
||||||
v-model="value.items[index]"
|
|
||||||
@update:model-value="onChange"
|
|
||||||
@change="onChange"
|
|
||||||
></component>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</draggable>
|
|
||||||
<div :class="value.items.length > 0 ? 'pagebuilder-column-hover-padding' : ''"></div>
|
|
||||||
<div
|
|
||||||
class="posistion-relative"
|
|
||||||
:class="value.items.length > 0 ? 'pagebuilder-column-hover' : 'd-flex'"
|
|
||||||
>
|
|
||||||
<div class="flex-fill mr-0 pr-0">
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
<div class="ml-0 pl-0">
|
|
||||||
<a
|
|
||||||
title="Ustawienia kolumny"
|
|
||||||
class="btn-icon-sm"
|
|
||||||
@click.prevent="modalColumnsSettings = !modalColumnsSettings"
|
|
||||||
><i
|
|
||||||
style="cursor: pointer; position: relative; top: 5px; margin-left: 5px"
|
|
||||||
class="material-icons-outlined"
|
|
||||||
>create</i
|
|
||||||
></a
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
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 SectionImage from "./plugin/SectionImage.vue";
|
|
||||||
|
|
||||||
import DropdownSectionSection from "./DropdownSectionSection.vue";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
data: function () {
|
|
||||||
return { opcja: "", modalAddBox: false, drag: false, modalColumnsSettings: false };
|
|
||||||
},
|
|
||||||
props: { value: Object },
|
|
||||||
emits: ["update:modelValue"],
|
|
||||||
components: {
|
|
||||||
draggable,
|
|
||||||
"b-modal": MagicoModal,
|
|
||||||
core_section_textarea: SectionTextarea,
|
|
||||||
core_section_text: SectionText,
|
|
||||||
core_section_html: SectionHtml,
|
|
||||||
core_section_image: SectionImage,
|
|
||||||
|
|
||||||
DropdownSectionSection,
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onChange: function () {
|
|
||||||
this.$emit("change");
|
|
||||||
},
|
|
||||||
rand: function () {
|
|
||||||
return "component" + Math.random() * 100;
|
|
||||||
},
|
|
||||||
removeItem(item) {
|
|
||||||
this.value.items.indexOf(item);
|
|
||||||
this.value.items.splice(this.value.items.indexOf(item), 1);
|
|
||||||
|
|
||||||
this.onChange();
|
|
||||||
},
|
|
||||||
clickAdd: function (item) {
|
|
||||||
console.log(item);
|
|
||||||
this.modalAddBox = false;
|
|
||||||
var a = { name: item, open: true };
|
|
||||||
this.value.items.push(a);
|
|
||||||
this.onChange();
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</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>
|
|
||||||
@@ -1,174 +0,0 @@
|
|||||||
<template>
|
|
||||||
<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 me-2">
|
|
||||||
<PagebuilderContent
|
|
||||||
class="col-sm-12"
|
|
||||||
v-for="(column, index) in value.columns"
|
|
||||||
:value="column"
|
|
||||||
:key="index"
|
|
||||||
@change="onChange"
|
|
||||||
></PagebuilderContent>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="pb_section_options position-absolute"
|
|
||||||
style="top: 12px; right: 14px; width: 20px"
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
title="Przenieś sekcje"
|
|
||||||
class="box-settings-icon box-move"
|
|
||||||
><i class="material-icons-outlined">sort</i></a
|
|
||||||
>
|
|
||||||
<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
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
title="Ustawienia sekcji"
|
|
||||||
@click.prevent="toggleSettings"
|
|
||||||
class="box-settings-icon box-settings text-secondary"
|
|
||||||
><i class="material-icons-outlined">settings</i></a
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
title="Usuń sekcje"
|
|
||||||
@click.prevent="deleteSection"
|
|
||||||
class="box-settings-icon box-delete text-danger"
|
|
||||||
><i class="material-icons-outlined">delete</i></a
|
|
||||||
>
|
|
||||||
<b-modal
|
|
||||||
v-model="show_settings"
|
|
||||||
title="Ustawienia sekcji"
|
|
||||||
@onClose="ustawieniaSave()"
|
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
<div class="form-group mb-2">
|
|
||||||
<label class="w-100 col-form-label"> Klasa sekcji </label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="form-control"
|
|
||||||
v-model="value.class"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="form-group mb-2">
|
|
||||||
<label>Margines górny</label>
|
|
||||||
<div class="input-group mb-3">
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
class="form-control"
|
|
||||||
v-model="value.margin_top"
|
|
||||||
/>
|
|
||||||
<div class="input-group-append">
|
|
||||||
<span
|
|
||||||
class="input-group-text"
|
|
||||||
id="basic-addon1"
|
|
||||||
>px</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group mb-2">
|
|
||||||
<label>Margines dolny</label>
|
|
||||||
<div class="input-group mb-3">
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
class="form-control"
|
|
||||||
v-model="value.margin_bottom"
|
|
||||||
/>
|
|
||||||
<div class="input-group-append">
|
|
||||||
<span
|
|
||||||
class="input-group-text"
|
|
||||||
id="basic-addon1"
|
|
||||||
>px</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<button
|
|
||||||
class="btn btn-outline-secondary"
|
|
||||||
@click.prevent="ustawieniaSave"
|
|
||||||
>
|
|
||||||
Zapisz
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</b-modal>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import grid from "./grid.js";
|
|
||||||
import MagicoModal from "./MagicoModal.vue";
|
|
||||||
import PagebuilderContent from "./PagebuilderContent.vue";
|
|
||||||
export default {
|
|
||||||
props: { value: Object },
|
|
||||||
emits: ["update:modelValue", "copy", "deleteSection"],
|
|
||||||
components: {
|
|
||||||
"b-modal": MagicoModal,
|
|
||||||
PagebuilderContent,
|
|
||||||
},
|
|
||||||
data: function () {
|
|
||||||
return { items: grid, value2: "", show_settings: false };
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
changeSelect: function () {
|
|
||||||
this.onChange();
|
|
||||||
},
|
|
||||||
onChange: function () {
|
|
||||||
this.$emit("change");
|
|
||||||
},
|
|
||||||
deleteSection: function () {
|
|
||||||
this.$emit("deleteSection", this.value);
|
|
||||||
},
|
|
||||||
copySection: function () {
|
|
||||||
this.$emit("copy", this.value);
|
|
||||||
},
|
|
||||||
toggleSettings: function () {
|
|
||||||
this.show_settings = !this.show_settings;
|
|
||||||
},
|
|
||||||
ustawieniaSave: function () {
|
|
||||||
this.show_settings = false;
|
|
||||||
this.onChange();
|
|
||||||
},
|
|
||||||
rand: function (index) {
|
|
||||||
return "column" + index + Math.random() * 100;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted: function () {},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
#pagebuilder {
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pb_section {
|
|
||||||
background-color: #fff;
|
|
||||||
|
|
||||||
> div {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn.btn-icon-sm,
|
|
||||||
.btn.drp-icon-sm {
|
|
||||||
width: 34px;
|
|
||||||
height: 34px;
|
|
||||||
padding: 6px 6px;
|
|
||||||
margin-bottom: 0px;
|
|
||||||
margin-right: 4px;
|
|
||||||
}
|
|
||||||
.material-icons-outlined {
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,38 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="form form-group">
|
|
||||||
<div class="ms-3">
|
|
||||||
<div class="mb-3" v-for="item, ii in items" :key="ii" :value="item">{{ item.name }} <button
|
|
||||||
class="btn btn-outline-primary" @click="itemselected = item; changeSelect()">Wczytaj</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div v-show="items.length == 0"><i>Brak zapisanych szablonów</i></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
created() {
|
|
||||||
this.getPost();
|
|
||||||
},
|
|
||||||
data: function () {
|
|
||||||
return {
|
|
||||||
items: [],
|
|
||||||
itemselected: {},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
changeSelect() {
|
|
||||||
this.$emit('update:modelValue', this.itemselected);
|
|
||||||
},
|
|
||||||
getPost() {
|
|
||||||
if (this.$pagebuilder.axios) {
|
|
||||||
this.$pagebuilder.axios.get('api/v1/pagebuilder/template').then(response => {
|
|
||||||
this.items = response.data.data;
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
console.error('NO AXIOS INSTACE PROVIDED TO PAGEBUILDER');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,101 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="form-group mb-3">
|
|
||||||
<label
|
|
||||||
v-if="id < 1"
|
|
||||||
class="col-4"
|
|
||||||
>Tworzysz nowy szablon</label
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
v-if="id > 0"
|
|
||||||
class="col-4"
|
|
||||||
>Nadpiszesz istniejacy szablon</label
|
|
||||||
>
|
|
||||||
<div class="col-8">
|
|
||||||
<b
|
|
||||||
v-if="id > 0"
|
|
||||||
class=""
|
|
||||||
>{{ name2 }}</b
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form form-group mb-3">
|
|
||||||
<label class="w-100">Wyszukaj istniejący lub zapisz jako nowy</label>
|
|
||||||
<select
|
|
||||||
v-model="itemselected"
|
|
||||||
@change="changeSelect"
|
|
||||||
class="form-control"
|
|
||||||
>
|
|
||||||
<option :value="{ new: 1 }">Stwórz nowy szablon</option>
|
|
||||||
<option
|
|
||||||
:key="ii"
|
|
||||||
v-for="(item, ii) in items"
|
|
||||||
:value="item"
|
|
||||||
>
|
|
||||||
Nadpisz: {{ item.name }}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div v-show="itemselected.new == 1">
|
|
||||||
<div class="form form-group mb-3">
|
|
||||||
<label class="w-100">Nazwa szablonu</label
|
|
||||||
><input
|
|
||||||
@change="change"
|
|
||||||
class="form-control"
|
|
||||||
type="text"
|
|
||||||
v-model="name"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="form form-group mb-3">
|
|
||||||
<label class="w-100">Opis</label
|
|
||||||
><input
|
|
||||||
@change="change"
|
|
||||||
class="form-control"
|
|
||||||
type="text"
|
|
||||||
v-model="description"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
created() {
|
|
||||||
this.getPost();
|
|
||||||
},
|
|
||||||
data: function () {
|
|
||||||
return {
|
|
||||||
items: [],
|
|
||||||
itemselected: { new: 1 },
|
|
||||||
name: "",
|
|
||||||
description: "",
|
|
||||||
id: 0,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
change() {
|
|
||||||
this.$emit("update:modelValue", {
|
|
||||||
id: this.id,
|
|
||||||
name: this.name,
|
|
||||||
description: this.description,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
changeSelect() {
|
|
||||||
this.id = this.itemselected.id;
|
|
||||||
this.name = this.itemselected.name;
|
|
||||||
this.name2 = this.itemselected.naem;
|
|
||||||
this.description = this.itemselected.description;
|
|
||||||
this.change();
|
|
||||||
},
|
|
||||||
getPost() {
|
|
||||||
if (this.$pagebuilder.axios) {
|
|
||||||
this.$pagebuilder.axios.get("api/v1/pagebuilder/template").then((response) => {
|
|
||||||
this.items = response.data.data;
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
console.error("NO AXIOS INSTACE PROVIDED TO PAGEBUILDER");
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@@ -1,117 +0,0 @@
|
|||||||
export default {
|
|
||||||
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",
|
|
||||||
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",
|
|
||||||
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",
|
|
||||||
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",
|
|
||||||
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",
|
|
||||||
class: "",
|
|
||||||
columns: [
|
|
||||||
{ name: "col-md-10", items: [] },
|
|
||||||
{ name: "col-md-2", 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",
|
|
||||||
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",
|
|
||||||
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",
|
|
||||||
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",
|
|
||||||
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",
|
|
||||||
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: [] },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@@ -1,76 +0,0 @@
|
|||||||
<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 rows="40" class="form-control" v-model="text"></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: {
|
|
||||||
modelValue: Object
|
|
||||||
},
|
|
||||||
mounted: function () {
|
|
||||||
this.name = (this.modelValue && this.modelValue.name) ? this.modelValue.name : this.name;
|
|
||||||
this.text = (this.modelValue && this.modelValue.text) ? this.modelValue.text : this.text;
|
|
||||||
if (this.modelValue.open) this.modalBox = true;
|
|
||||||
console.log('mounted html');
|
|
||||||
this.$emit('update:modelValue',this.modelValue);
|
|
||||||
},
|
|
||||||
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.modelValue.text?this.modelValue.text.replace(/<(?:.|\n)*?>/gm, ''):'';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
removeItem: function () {
|
|
||||||
this.$emit('itemRemoved', this.modelValue);
|
|
||||||
},
|
|
||||||
onCloseModal: function () {
|
|
||||||
this.modalBox = false;
|
|
||||||
this.$emit('update:modelValue', {
|
|
||||||
name: this.name,
|
|
||||||
text: this.text,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,200 +0,0 @@
|
|||||||
|
|
||||||
<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="modalOpen" 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>
|
|
||||||
<b-modal v-model="modalBox" v-on:close="onCloseModal" :title="langs.label">
|
|
||||||
<div>
|
|
||||||
<div class="p-0 m-0">
|
|
||||||
<div class="form-group ">
|
|
||||||
<label class="w-100 col-form-label">{{ langs.label }}</label>
|
|
||||||
<div class="input-group mb-3">
|
|
||||||
<input class="form-control" type="text" v-model="text" />
|
|
||||||
<button @click="chooseImage" class="btn btn-outline-secondary" type="button" id="button-addon2">Wybierz</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group ">
|
|
||||||
<label class="w-100 col-form-label">{{ langs.title }}</label>
|
|
||||||
<input class="form-control" type="text" v-model="title" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group ">
|
|
||||||
<label class="w-100 col-form-label">{{ langs.alt }}</label>
|
|
||||||
<input class="form-control" type="text" v-model="alt" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group ">
|
|
||||||
<label class="w-100 col-form-label">Legenda obrazka</label>
|
|
||||||
<input class="form-control" type="text" v-model="figcaption" />
|
|
||||||
</div>
|
|
||||||
<div class="form-group ">
|
|
||||||
<label class="w-100 col-form-label">{{ langs.scaling }}</label>
|
|
||||||
<select v-model="scale" class="form-select">
|
|
||||||
<option v-for="item, ii in scales" :key="ii" :value="item.key">{{ item.modelValue }}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="w-100 col-form-label">{{ langs.href }}</label>
|
|
||||||
<input class="form-control" type="text" v-model="href" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<fieldset class="mt-3" v-show="scale == 'tak'">
|
|
||||||
<legend>{{ langs.proportions }}</legend>
|
|
||||||
Brak możliwości skalowania obrazków z zewnętrznego serwera.
|
|
||||||
<div class="form-group"><label class="w-100 col-form-label">{{ langs.width
|
|
||||||
}}</label><input class="form-control" v-model="width"></div>
|
|
||||||
<div class="form-group"><label class="w-100 col-form-label">{{ langs.height
|
|
||||||
}}</label><input class="form-control" v-model="height"></div>
|
|
||||||
<div class="form-group"><label class="w-100 col-form-label">{{ langs.ratio
|
|
||||||
}}</label><select class="form-select" v-model="ratio">
|
|
||||||
<option v-for="item, ri in ratios" :key="ri">{{ item }}</option>
|
|
||||||
</select></div>
|
|
||||||
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<img v-if="text" :src="text" style="max-width: 100%;" class="my-2">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="text-center mt-4"><button class="btn btn-outline-secondary mr-1"
|
|
||||||
@click.prevent="onCloseModal">{{
|
|
||||||
langs.saveclose
|
|
||||||
}}</button></div>
|
|
||||||
</b-modal>
|
|
||||||
|
|
||||||
<div v-if="text">
|
|
||||||
<img :src="text" style="width:100px;" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import MagicoModal from './../MagicoModal.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
modelValue: Object,
|
|
||||||
},
|
|
||||||
data: function () {
|
|
||||||
return {
|
|
||||||
langs: {
|
|
||||||
saveclose: "Zapisz",
|
|
||||||
label: "Obrazek",
|
|
||||||
close: "Zamknij",
|
|
||||||
removefile: "<?=lang('pagebuilder_core_section_image_removefile')?>",
|
|
||||||
fileupload: "<?=lang('pagebuilder_core_section_image_fileupload')?>",
|
|
||||||
scaling: "Skalowanie",
|
|
||||||
scalingyes: "Tak",
|
|
||||||
scalingno: "Nie",
|
|
||||||
proportions: "Proporcje",
|
|
||||||
height: "Wysokość",
|
|
||||||
width: "Szerokość",
|
|
||||||
ratio: "Radio",
|
|
||||||
href: "Adres URL",
|
|
||||||
alt: "Tekst alternatywny",
|
|
||||||
title: "Tytuł",
|
|
||||||
},
|
|
||||||
modalBox: false,
|
|
||||||
items: [],
|
|
||||||
text: '',
|
|
||||||
name: '',
|
|
||||||
alt: '',
|
|
||||||
href: '',
|
|
||||||
title: '',
|
|
||||||
width: 1800,
|
|
||||||
height: 600,
|
|
||||||
ratio: 'crop',
|
|
||||||
figcaption: '',
|
|
||||||
ratios: ['crop', 'auto', 'width', 'height'],
|
|
||||||
scales: [{
|
|
||||||
"key": "nie",
|
|
||||||
"value": "Nie"
|
|
||||||
}, {
|
|
||||||
"key": "tak",
|
|
||||||
"value": "Tak"
|
|
||||||
}],
|
|
||||||
scale: "Nie"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted: function () {
|
|
||||||
console.log('mount image', this.modelValue);
|
|
||||||
this.alt = (this.modelValue && this.modelValue.alt) ? this.modelValue.alt : this.alt;
|
|
||||||
this.title = (this.modelValue && this.modelValue.title) ? this.modelValue.title : this.title;
|
|
||||||
this.name = (this.modelValue && this.modelValue.name) ? this.modelValue.name : this.name;
|
|
||||||
this.text = (this.modelValue && this.modelValue.text) ? this.modelValue.text : this.text;
|
|
||||||
this.width = (this.modelValue && this.modelValue.width) ? this.modelValue.width : this.width;
|
|
||||||
this.height = (this.modelValue && this.modelValue.height) ? this.modelValue.height : this.height;
|
|
||||||
this.ratio = (this.modelValue && this.modelValue.ratio) ? this.modelValue.ratio : this.ratio;
|
|
||||||
this.scale = (this.modelValue && this.modelValue.scale) ? this.modelValue.scale : this.scale;
|
|
||||||
this.href = (this.modelValue && this.modelValue.href) ? this.modelValue.href : this.href;
|
|
||||||
this.figcaption = (this.modelValue && this.modelValue.figcaption) ? this.modelValue.figcaption : this.figcaption;
|
|
||||||
|
|
||||||
if (this.modelValue.open) this.modalBox = true;
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
'b-modal': MagicoModal,
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
removeItem: function () {
|
|
||||||
this.$emit('itemRemoved', this.modelValue);
|
|
||||||
},
|
|
||||||
chooseImage: function () {
|
|
||||||
if (this.$filechooser) {
|
|
||||||
let vm = this;
|
|
||||||
this.$filechooser.open({
|
|
||||||
chooseCallback: function (ev) {
|
|
||||||
vm.text = ev.publicUrl
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}else{
|
|
||||||
alert('No FileChooser implemented')
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onCloseModal: function () {
|
|
||||||
this.modalBox = false;
|
|
||||||
this.$emit('update:modelValue', {
|
|
||||||
name: this.name,
|
|
||||||
text: this.text,
|
|
||||||
height: this.height,
|
|
||||||
width: this.width,
|
|
||||||
ratio: this.ratio,
|
|
||||||
scale: this.scale,
|
|
||||||
alt: this.alt,
|
|
||||||
href: this.href,
|
|
||||||
title: this.title,
|
|
||||||
figcaption: this.figcaption,
|
|
||||||
})
|
|
||||||
},
|
|
||||||
setText: function (item) {
|
|
||||||
this.text = 'files/images/' + item;
|
|
||||||
this.$emit('update:modelValue', {
|
|
||||||
name: this.name,
|
|
||||||
text: this.text,
|
|
||||||
height: this.height,
|
|
||||||
width: this.width,
|
|
||||||
ratio: this.ratio,
|
|
||||||
scale: this.scale,
|
|
||||||
alt: this.alt,
|
|
||||||
href: this.href,
|
|
||||||
title: this.title,
|
|
||||||
figcaption: this.figcaption,
|
|
||||||
})
|
|
||||||
},
|
|
||||||
modalOpen: function () {
|
|
||||||
this.modalBox = !this.modalBox;
|
|
||||||
//this.getItems();
|
|
||||||
},
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@@ -1,124 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="row m-0 p-0 align-items-center">
|
|
||||||
<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-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">
|
|
||||||
|
|
||||||
<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-grou mb-2">
|
|
||||||
<label class="w-100 col-form-label">{{ langs.type }}</label>
|
|
||||||
<select class="form-select" 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>
|
|
||||||
<option value="h6">{{ langs.typeheader }} 6</option>
|
|
||||||
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="w-100 col-form-label">Wyrównanie</label>
|
|
||||||
<div class="">
|
|
||||||
<button v-tooltip title="Wyrównanie do lewej" @click="align = 'left'" class="btn btn-icon-sm "
|
|
||||||
:class="align == 'left' ? 'btn-primary' : 'btn-outline-primary'">
|
|
||||||
<span class="material-icons-outlined">format_align_left</span>
|
|
||||||
</button>
|
|
||||||
<button v-tooltip title="Wyrównanie do środka" @click="align = 'center'" class="btn btn-icon-sm "
|
|
||||||
:class="align == 'center' ? 'btn-primary' : 'btn-outline-primary'">
|
|
||||||
<span class="material-icons-outlined">format_align_center</span>
|
|
||||||
</button>
|
|
||||||
<button v-tooltip title="Wyrównanie do prawej" @click="align = 'right'" class="btn btn-icon-sm "
|
|
||||||
:class="align == 'right' ? 'btn-primary' : 'btn-outline-primary'">
|
|
||||||
<span class="material-icons-outlined">format_align_right</span>
|
|
||||||
</button>
|
|
||||||
<button v-tooltip title="Justowanie" @click="align = 'justify'" class="btn btn-icon-sm "
|
|
||||||
:class="align == 'justify' ? 'btn-primary' : 'btn-outline-primary'">
|
|
||||||
<span class="material-icons-outlined">format_align_justify</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</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>
|
|
||||||
import MagicoModal from './../MagicoModal.vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
'b-modal': MagicoModal,
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
modelValue: Object
|
|
||||||
},
|
|
||||||
emits:['update:modelValue'],
|
|
||||||
data: function () {
|
|
||||||
return {
|
|
||||||
langs: {
|
|
||||||
label: "Tekst",
|
|
||||||
close: "Zaknij",
|
|
||||||
content: "Treść",
|
|
||||||
type: "Typ",
|
|
||||||
typeplaintext: "Tekst",
|
|
||||||
typeheader: "Nagłowek",
|
|
||||||
saveclose: "Zapisz"
|
|
||||||
},
|
|
||||||
modalBox: false,
|
|
||||||
text: '',
|
|
||||||
name: '',
|
|
||||||
h_type: '',
|
|
||||||
align: 'left',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted: function () {
|
|
||||||
this.name = (this.modelValue && this.modelValue.name) ? this.modelValue.name : this.name;
|
|
||||||
this.text = (this.modelValue && this.modelValue.text) ? this.modelValue.text : this.text;
|
|
||||||
this.h_type = (this.modelValue && this.modelValue.h_type) ? this.modelValue.h_type : this.h_type;
|
|
||||||
this.align = (this.modelValue && this.modelValue.align) ? this.modelValue.align : this.align;
|
|
||||||
if (this.modelValue.open) this.modalBox = true;
|
|
||||||
console.log('mounted text');
|
|
||||||
this.$emit('update:modelValue', this.modelValue);
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
removeItem: function () {
|
|
||||||
this.$emit('itemRemoved', this.modelValue);
|
|
||||||
},
|
|
||||||
onCloseModal: function () {
|
|
||||||
this.modalBox = false;
|
|
||||||
this.$emit('update:modelValue', {
|
|
||||||
name: this.name,
|
|
||||||
text: this.text,
|
|
||||||
h_type: this.h_type,
|
|
||||||
align: this.align,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
destroy() {
|
|
||||||
this.modalBox = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,107 +0,0 @@
|
|||||||
<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 {
|
|
||||||
emits:['update:modelValue'],
|
|
||||||
components: {
|
|
||||||
'b-modal': MagicoModal,
|
|
||||||
|
|
||||||
'editor': Editor // <- To jest TINYMCE
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
modelValue: Object
|
|
||||||
},
|
|
||||||
mounted: function () {
|
|
||||||
this.name = (this.modelValue && this.modelValue.name) ? this.modelValue.name : this.name;
|
|
||||||
this.text = (this.modelValue && this.modelValue.text) ? this.modelValue.text : this.text;
|
|
||||||
if (this.modelValue.open) this.modalBox = true;
|
|
||||||
console.log('mounted textarea');
|
|
||||||
this.$emit('update:modelValue', this.modelValue);
|
|
||||||
|
|
||||||
},
|
|
||||||
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: Object.assign(tinymceConfig, {
|
|
||||||
file_picker_callback: (callback) => {
|
|
||||||
if (this.$filechooser) {
|
|
||||||
this.$filechooser.open({
|
|
||||||
chooseCallback: function (ev) {
|
|
||||||
console.log('filePathChosed', ev)
|
|
||||||
callback(ev.publicUrl);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
modalBox: function () {
|
|
||||||
if (this.modalBox) {
|
|
||||||
document.addEventListener('focusin', (e) => {
|
|
||||||
if (e.target.closest(".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root") !== null) {
|
|
||||||
e.stopImmediatePropagation();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
console.log('focus');
|
|
||||||
},
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
ctext: function () {
|
|
||||||
return this.modelValue.text ? this.modelValue.text.replace(/<(?:.|\n)*?>/gm, '') : '';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
removeItem: function () {
|
|
||||||
this.$emit('itemRemoved', this.modelValue);
|
|
||||||
},
|
|
||||||
onCloseModal: function () {
|
|
||||||
this.modalBox = false;
|
|
||||||
this.$emit('update:modelValue', {
|
|
||||||
name: this.name,
|
|
||||||
text: this.text,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
import PagebuilderSectionPlugin from "../../../magico-section/src/components/PagebuilderSectionPlugin.vue";
|
|
||||||
|
|
||||||
export function useSections() {
|
|
||||||
console.log('DUPA',PagebuilderSectionPlugin);
|
|
||||||
function register(vm) {
|
|
||||||
vm.registerPlugin(
|
|
||||||
"SectionX1",
|
|
||||||
{
|
|
||||||
label: "Sekcja 1",
|
|
||||||
svg_off: ``,
|
|
||||||
},
|
|
||||||
PagebuilderSectionPlugin
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return { register };
|
|
||||||
}
|
|
||||||
@@ -1,118 +0,0 @@
|
|||||||
export default {
|
|
||||||
autoresize_max_height: window.innerHeight - window.innerHeight / 4,
|
|
||||||
width: '100%',
|
|
||||||
selector: "textarea.wysiwyg",
|
|
||||||
language: "pl",
|
|
||||||
language_url: 'https://cdn.magico.pl/tinymce/langs/pl.js',
|
|
||||||
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,
|
|
||||||
promotion: false,
|
|
||||||
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: ['autoresize'],
|
|
||||||
removed_menuitems: 'newdocument',
|
|
||||||
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',
|
|
||||||
toolbar2: '',
|
|
||||||
menubar: true,
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -1,59 +0,0 @@
|
|||||||
/* 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() {
|
|
||||||
|
|
||||||
}
|
|
||||||
File diff suppressed because one or more lines are too long
10
src/main.js
10
src/main.js
@@ -1,10 +0,0 @@
|
|||||||
import { createApp } from "vue";
|
|
||||||
import App from "./App.vue";
|
|
||||||
import "bootstrap/dist/css/bootstrap.min.css";
|
|
||||||
import MagicoPagebuilder from "./components/MagicoPagebuilderPlugin.js";
|
|
||||||
import { useSections } from "./components/registerSections";
|
|
||||||
|
|
||||||
const app = createApp(App).use(MagicoPagebuilder).mount("#app");
|
|
||||||
|
|
||||||
const { register: sectionRegister } = useSections();
|
|
||||||
sectionRegister(app.$pagebuilder);
|
|
||||||
Reference in New Issue
Block a user