init
This commit is contained in:
Szymon Haczyk
14
.eslintrc.cjs
Normal file
14
.eslintrc.cjs
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
/* eslint-env node */
|
||||||
|
require('@rushstack/eslint-patch/modern-module-resolution')
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
'extends': [
|
||||||
|
'plugin:vue/vue3-essential',
|
||||||
|
'eslint:recommended',
|
||||||
|
'@vue/eslint-config-prettier/skip-formatting'
|
||||||
|
],
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: 'latest'
|
||||||
|
}
|
||||||
|
}
|
||||||
28
.gitignore
vendored
Normal file
28
.gitignore
vendored
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
.DS_Store
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
coverage
|
||||||
|
*.local
|
||||||
|
|
||||||
|
/cypress/videos/
|
||||||
|
/cypress/screenshots/
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
8
.prettierrc.json
Normal file
8
.prettierrc.json
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://json.schemastore.org/prettierrc",
|
||||||
|
"semi": false,
|
||||||
|
"tabWidth": 2,
|
||||||
|
"singleQuote": true,
|
||||||
|
"printWidth": 100,
|
||||||
|
"trailingComma": "none"
|
||||||
|
}
|
||||||
3
.vscode/extensions.json
vendored
Normal file
3
.vscode/extensions.json
vendored
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
|
||||||
|
}
|
||||||
35
README.md
Normal file
35
README.md
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
# magico-pagebuilder
|
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 in Vite.
|
||||||
|
|
||||||
|
## Recommended IDE Setup
|
||||||
|
|
||||||
|
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
|
||||||
|
|
||||||
|
## Customize configuration
|
||||||
|
|
||||||
|
See [Vite Configuration Reference](https://vitejs.dev/config/).
|
||||||
|
|
||||||
|
## Project Setup
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compile and Hot-Reload for Development
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compile and Minify for Production
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
### Lint with [ESLint](https://eslint.org/)
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run lint
|
||||||
|
```
|
||||||
19
index.html
Normal file
19
index.html
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link rel="icon" href="/favicon.ico">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Magico Pagebuilder</title>
|
||||||
|
<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>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
31
package.json
Normal file
31
package.json
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
{
|
||||||
|
"name": "magico-pagebuilder",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
|
||||||
|
"format": "prettier --write src/"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"vue": "^3.3.4",
|
||||||
|
"@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",
|
||||||
|
"vuedraggable": "^4.1.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@rushstack/eslint-patch": "^1.3.2",
|
||||||
|
"@vitejs/plugin-vue": "^4.2.3",
|
||||||
|
"@vue/eslint-config-prettier": "^8.0.0",
|
||||||
|
"eslint": "^8.45.0",
|
||||||
|
"eslint-plugin-vue": "^9.15.1",
|
||||||
|
"prettier": "^3.0.0",
|
||||||
|
"vite": "^4.4.6"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
34
src/App.vue
Normal file
34
src/App.vue
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
<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>
|
||||||
73
src/assets/base.css
Normal file
73
src/assets/base.css
Normal file
@@ -0,0 +1,73 @@
|
|||||||
|
/* color palette from <https://github.com/vuejs/theme> */
|
||||||
|
:root {
|
||||||
|
--vt-c-white: #ffffff;
|
||||||
|
--vt-c-white-soft: #f8f8f8;
|
||||||
|
--vt-c-white-mute: #f2f2f2;
|
||||||
|
|
||||||
|
--vt-c-black: #181818;
|
||||||
|
--vt-c-black-soft: #222222;
|
||||||
|
--vt-c-black-mute: #282828;
|
||||||
|
|
||||||
|
--vt-c-indigo: #2c3e50;
|
||||||
|
|
||||||
|
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
|
||||||
|
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
|
||||||
|
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
|
||||||
|
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
|
||||||
|
|
||||||
|
--vt-c-text-light-1: var(--vt-c-indigo);
|
||||||
|
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
||||||
|
--vt-c-text-dark-1: var(--vt-c-white);
|
||||||
|
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* semantic color variables for this project */
|
||||||
|
:root {
|
||||||
|
--color-background: var(--vt-c-white);
|
||||||
|
--color-background-soft: var(--vt-c-white-soft);
|
||||||
|
--color-background-mute: var(--vt-c-white-mute);
|
||||||
|
|
||||||
|
--color-border: var(--vt-c-divider-light-2);
|
||||||
|
--color-border-hover: var(--vt-c-divider-light-1);
|
||||||
|
|
||||||
|
--color-heading: var(--vt-c-text-light-1);
|
||||||
|
--color-text: var(--vt-c-text-light-1);
|
||||||
|
|
||||||
|
--section-gap: 160px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--color-background: var(--vt-c-black);
|
||||||
|
--color-background-soft: var(--vt-c-black-soft);
|
||||||
|
--color-background-mute: var(--vt-c-black-mute);
|
||||||
|
|
||||||
|
--color-border: var(--vt-c-divider-dark-2);
|
||||||
|
--color-border-hover: var(--vt-c-divider-dark-1);
|
||||||
|
|
||||||
|
--color-heading: var(--vt-c-text-dark-1);
|
||||||
|
--color-text: var(--vt-c-text-dark-2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
min-height: 100vh;
|
||||||
|
color: var(--color-text);
|
||||||
|
background: var(--color-background);
|
||||||
|
transition: color 0.5s, background-color 0.5s;
|
||||||
|
line-height: 1.6;
|
||||||
|
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
|
||||||
|
Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||||
|
font-size: 15px;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
1
src/assets/logo.svg
Normal file
1
src/assets/logo.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
||||||
|
After Width: | Height: | Size: 276 B |
33
src/assets/main.css
Normal file
33
src/assets/main.css
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
@import './base.css';
|
||||||
|
|
||||||
|
#app {
|
||||||
|
min-width: 1980px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem;
|
||||||
|
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
.green {
|
||||||
|
text-decoration: none;
|
||||||
|
color: hsla(160, 100%, 37%, 1);
|
||||||
|
transition: 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (hover: hover) {
|
||||||
|
a:hover {
|
||||||
|
background-color: hsla(160, 100%, 37%, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
padding: 0 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
48
src/components/DropdownSectionGrid.vue
Normal file
48
src/components/DropdownSectionGrid.vue
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
<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>
|
||||||
87
src/components/DropdownSectionSection.vue
Normal file
87
src/components/DropdownSectionSection.vue
Normal file
@@ -0,0 +1,87 @@
|
|||||||
|
<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>
|
||||||
90
src/components/MagicoModal.vue
Normal file
90
src/components/MagicoModal.vue
Normal file
@@ -0,0 +1,90 @@
|
|||||||
|
<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>
|
||||||
319
src/components/MagicoPagebuilder.vue
Normal file
319
src/components/MagicoPagebuilder.vue
Normal file
@@ -0,0 +1,319 @@
|
|||||||
|
<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>
|
||||||
36
src/components/MagicoPagebuilderPlugin.js
Normal file
36
src/components/MagicoPagebuilderPlugin.js
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
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);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
162
src/components/PagebuilderContent.vue
Normal file
162
src/components/PagebuilderContent.vue
Normal file
@@ -0,0 +1,162 @@
|
|||||||
|
<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>
|
||||||
174
src/components/PagebuilderSection.vue
Normal file
174
src/components/PagebuilderSection.vue
Normal file
@@ -0,0 +1,174 @@
|
|||||||
|
<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>
|
||||||
38
src/components/PagebuilderTemplateLoad.vue
Normal file
38
src/components/PagebuilderTemplateLoad.vue
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
<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>
|
||||||
101
src/components/PagebuilderTemplateSave.vue
Normal file
101
src/components/PagebuilderTemplateSave.vue
Normal file
@@ -0,0 +1,101 @@
|
|||||||
|
<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>
|
||||||
117
src/components/grid.js
Normal file
117
src/components/grid.js
Normal file
@@ -0,0 +1,117 @@
|
|||||||
|
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: [] },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
76
src/components/plugin/SectionHtml.vue
Normal file
76
src/components/plugin/SectionHtml.vue
Normal 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 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>
|
||||||
200
src/components/plugin/SectionImage.vue
Normal file
200
src/components/plugin/SectionImage.vue
Normal file
@@ -0,0 +1,200 @@
|
|||||||
|
|
||||||
|
<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>
|
||||||
124
src/components/plugin/SectionText.vue
Normal file
124
src/components/plugin/SectionText.vue
Normal file
@@ -0,0 +1,124 @@
|
|||||||
|
<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>
|
||||||
107
src/components/plugin/SectionTextarea.vue
Normal file
107
src/components/plugin/SectionTextarea.vue
Normal file
@@ -0,0 +1,107 @@
|
|||||||
|
<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>
|
||||||
16
src/components/registerSections.js
Normal file
16
src/components/registerSections.js
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
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 };
|
||||||
|
}
|
||||||
118
src/components/tinymce/config.js
Normal file
118
src/components/tinymce/config.js
Normal file
@@ -0,0 +1,118 @@
|
|||||||
|
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,
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
59
src/components/tinymce/editor.js
Normal file
59
src/components/tinymce/editor.js
Normal 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() {
|
||||||
|
|
||||||
|
}
|
||||||
7
src/components/tinymce/pl.js
Normal file
7
src/components/tinymce/pl.js
Normal file
File diff suppressed because one or more lines are too long
17
src/main.js
Normal file
17
src/main.js
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
import './assets/main.css'
|
||||||
|
|
||||||
|
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);
|
||||||
16
vite.config.js
Normal file
16
vite.config.js
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
import { fileURLToPath, URL } from 'node:url'
|
||||||
|
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
vue(),
|
||||||
|
],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user