grapesjs_codeapps
Version:
Free and Open Source Web Builder Framework/SC Modification
906 lines (858 loc) • 33.2 kB
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SaveCart Builder</title>
<link rel="stylesheet" href="dist/css/grapes.min.css">
<link href="/node_modules/grapesjs-preset-webpage-ca/dist/grapesjs-preset-webpage.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--<script src="node_modules/ckeditor/ckeditor.js"></script>-->
<script src="dist/grapes.min.js?=4"></script>
<script src="node_modules/grapesjs-mjml/dist/grapesjs-mjml.min.js?v=5"></script>
<!--<script src="node_modules/grapesjs-custom-code-ca/dist/grapesjs-custom-code-ca.min.js?v=1"></script>-->
<script src="node_modules/grapesjs-plugin-ckeditor-ca/dist/grapesjs-plugin-ckeditor-ca.min.js"></script>
<script src="node_modules/grapesjs-preset-webpage-ca/dist/grapesjs-preset-webpage.min.js?v=1"></script>
<style>
body,
html {
height: 100%;
margin: 0;
}
.panel__top {
padding: 0;
width: 100%;
display: flex;
position: initial;
justify-content: space-between;
}
.panel__basic-actions {
position: initial;
}
.gjs-pn-views-container, .gjs-pn-views {
left: 0;
right: initial
}
.gjs-cv-canvas, .gjs-pn-options {
right: 0;
left: initial;
}
.gjs-pn-devices-c {
padding-left: 7%;
width: 22%;
z-index: 4;
}
.gjs-pn-panel.gjs-pn-views {
padding: 0;
}
.gjs-pn-views {
width: 7%;
bottom: 0;
top: 0;
z-index: 5;
}
.gjs-pn-template-list .gjs-block {
width: 100%;
cursor: pointer;
}
.gjs-pn-template-list .gjs-devices-c {
padding: 6px 8px 8px 2px;
}
.gjs-pn-template-list, .gjs-pn-location-manager, .gjs-pn-bg-manager {
height: 100%;
padding: 143px 0 0;
right: 0;
left: 7%;
width: 15%;
overflow: auto;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
background-color: white !important;
}
.gjs-pn-views .gjs-pn-buttons {
display: flex;
flex-direction: column;
}
.gjs-pn-views .gjs-pn-btn {
padding: 15px;
font-size: 20px;
width: 100%;
border-radius: 0px;
}
.gjs-pn-views .gjs-pn-btn p {
margin: 8px 0 0;
font-size: 14px;
color: black;
}
.gjs-four-color {
color: black;
}
.gjs-pn-views-container {
left: 7%;
padding: 146px 0 0;
}
.gjs-cv-canvas {
width: 78%;
}
.gjs-rte-toolbar {
display: none;
}
.gjs-one-bg {
background-color: white;
}
.gjs-two-color {
color: black;
}
.gjs-layers {
display: flex;
flex-direction: column-reverse;
}
.gjs-three-bg {
background-color: black;
color: white;
}
.gjs-pn-btn {
display: flex !important;
align-items: center;
justify-content: center;
flex-direction: column;
}
.gjs-category-open, .gjs-sm-sector.gjs-sm-open, .gjs-sm-open.gjs-clm-tags, .gjs-block-category.gjs-open {
border-bottom: 0;
}
.gjs-block svg {
max-width: 46px;
}
/* new styles */
.pp-data img {
width: 100px;
}
.pp-field {
display: flex;
align-items: center;
margin-bottom: 5px;
}
.pp-field label {
margin-left: 10px;
}
</style>
</head>
<body>
<div id="gjs" style="height:0px; overflow:hidden;">
</div>
<script type="text/javascript">
const lang = {
absolute: "absolutna",
actions: "Akcje",
activateCode: "Aktywuj kod rabat w tle",
addImage: "Dodaj obrazek",
alt: "Tekst zastepczy",
background: "Tło",
basic: "Podstawowe",
block: "Blok",
border: "Obramowanie",
bottom: "Dół",
boxShadow: "Cień",
button: "Przycisk",
cat1: "Szablony Pop-up",
cat2: "Zapisane szablony",
cat3: "Szablony Widget",
cat4: "Szablony Email",
cat5: "Szablony Web push",
checkbox: "Checkbox",
circle: "Okrąg",
classes: "Klasy",
click: "Kliknięcie",
closeIcon: "Ikona zamknięcia",
closePopup: "Zamknij pop-up",
color: "Kolor",
column: "Kolumna",
columns: "Kolumny",
componentSettings: "Ustawienia elementu",
custom: "Własne",
customCode: "Własny kod",
customFont: "Własna czcionka",
decorations: "Dekoracja",
dimension: "Rozmiar",
display: "Wyświelatnie",
dropHere: "Upuści pliki tutaj lub kliknij",
elements: "Elementy",
extra: "Dodatkowe",
fixed: "Pływanie",
float: "Wyrównanie",
fontFamily: "Czcionka",
fontSize: "Rozmiar",
fontWeight: "Grubość",
form: "Formularz",
forms: "Formularze",
general: "Ogólne",
groupOfProducts: "Grupa produktów",
height: "Wysokość",
hover: "Najechanie",
image: "Obrazek",
inline: "Linnia",
inlineB: "Pełna Linnia",
input: "Pole",
label: "Tytuł",
layers: "Warstwy",
layout: "Układ",
left: "Lewa",
letterSpacing: "Odstęp",
lineHeight: "Wysokość linni",
link: "Link",
location: "Lokacja",
margin: "Margines",
move: "Przenieś do koszyka i atywuj rabat",
name: "Nazwa",
none: "brak",
padding: "Padding",
parity: "Parzysty",
perspective: "Perspektywa",
popupSettings: "Ustawienia Pop-up",
popupSettingsTitle: "Ustaw pozycję pop-up",
position: "Pozycja",
price: "Cena",
quantity: "Ilość",
radio: "Radio",
radius: "zaokrąglenie",
rectangle: "Prostokąt",
relative: "relatywnie",
required: "Wymagane",
right: "Prawo",
rotate: "obrót",
select: "Wybierz",
selected: "Wybrane",
selectElement: "Wybierz element przed edycją",
selectImage: "Wybierz obrazek",
settings: "Ustawienia",
shapes: "Figury",
showCode: "Pokaż kod rabatowy",
square: "Kwadrat",
state: "- Stan -",
static: "statyczne",
style: "styl",
title: "Tytuł",
templates: "Szablony",
text: "Tekst",
textAlign: "Pozycja tekstu",
textArea: "Obszar tekstowy",
textShadow: "Cień tekstu",
top: "Góra",
transform: "Przesunięcie",
transition: "Przejście",
typography: "Typografia",
width: "Szerokość",
"max-width": "Szerkość max",
"min-height": "Wysokość max",
"margin-top": "Góra",
"margin-left": "Lewa",
"margin-right": "Prawa",
"margin-bottom": "Dół",
"padding-top": "Góra",
"padding-left": "Lewa",
"padding-right": "Prawa",
"padding-bottom": "Dół",
"font-family": "Czcionka",
"font-size": "Rozmiar",
"font-weight": "Grubość",
"letter-spacing": "Odstęp",
"line-height": "Wyskość linni",
"text-align": "Wyrówanie",
"text-shadow": "Cień",
"text-shadow-h": "Pozycja X",
"text-shadow-v": "Pozycja Y",
"text-shadow-blur": "Zasięg",
"text-shadow-color": "Kolor",
"transform-rotate-x": "Rotacja X",
"transform-rotate-y": "Rotacja Y",
"transform-rotate-z": "Rotacja Z",
"transform-scale-x": "Skalowanie X",
"transform-scale-y": "Skalowanie Y",
"transform-scale-z": "Skalowanie Z",
"background-image": "Obrazek",
"background-repeat": "Powtarzanie",
"background-position": "Pozycja",
"background-attachment": "Załącznik",
"background-size": "Rozmiar",
"background-color": "Kolor",
"transition-property": "Animuj",
"transition-duration": "Czas",
"transition-timing-function": "Animacja",
"border-radius": "Zaokrąglenie",
"border-top-left-radius": "Lewa góra",
"border-top-right-radius": "Prawa góra",
"border-bottom-left-radius": "Lewy dół",
"border-bottom-right-radius": "Prawy dół",
"border-width": "Grubość",
"border-style": "Styl",
"border-color": "Kolor",
"box-shadow": "Cień",
prop: {
none: "brak",
left: "lewa",
right: "prawa",
block: "blok",
inline: "w linni",
static: "statyczna",
relative: "relatywna",
absolute: "absolutna",
fixed: "pływająca",
"inline-block": "w bloku"
},
lay: {
"button-action": "Button",
body: "Pop-up",
svg: "Wektor",
text: "Tekst",
box: "Element",
row: "Wiersz",
cell: "Komórka",
image: "Obrazek",
form: "Formularz",
circle: "Okrąg",
rect: "Element"
}
};
window.lang = lang;
const addElements = () => {
// add custom font
const el = document.createElement("div");
el.style.width = "100%";
const html = `<div id="gjs-sm-top" class="gjs-sm-property gjs-sm-integer" style="display: block; width: 100%;">
<div class="gjs-sm-label">
<span class="gjs-sm-icon " title="">
Custom Font
</span>
</div>
<div class="gjs-fields">
<div class="gjs-field" style="width: 100%;">
<span class="gjs-input-holder"><input type="text" placeholder=""></span>
</div></div>
</div>`;
el.innerHTML = html;
try {
document.querySelector("#gjs-sm-typografia .gjs-sm-properties").prepend(el);
} catch {
}
//add width and height;
const el2 = document.createElement("div");
const html2 = `<div class="gjs-traits-label">Ustawienia Pop-up</div>
<div class="gjs-trt-traits gjs-one-bg gjs-two-color">
<div class="gjs-trt-trait">
<div class="gjs-label" title="Width">Szerokość</div>
<div class="gjs-field gjs-field-text">
<div class="gjs-input-holder">
<input type="text" id="popup-width" placeholder="eg. 600"></div></div></div>
<div class="gjs-trt-trait"><div class="gjs-label" title="Title">Wysokość</div>
<div class="gjs-field gjs-field-text"><div class="gjs-input-holder">
<input type="text" id="popup-height" placeholder="eg. 400"></div></div></div></div>`;
el2.innerHTML = html2;
document.querySelector(".gjs-pn-devices-c").append(el2);
};
const bindUpdate = () => {
if (document.querySelector("#popup-width"))
document.querySelector("#popup-width").addEventListener("change", updateSize);
if (document.querySelector("#popup-height"))
document.querySelector("#popup-height").addEventListener("change", updateSize);
};
const getSize = () => {
const el = String(document.querySelector("#popup-width").value) || "100%";
const el2 = String(document.querySelector("#popup-height").value) || "100%";
return { width: el, height: el2 };
};
const updateSize = () => {
let width = getSize().width;
let height = getSize().height;
width === "" ? width = "100%" : "";
height === "" ? height = "100%" : "";
updateDeviceSize(width, height);
};
const updateDeviceSize = (width, height) => {
const device = editor.getDevice();
editor.DeviceManager.setSize(device, width, height);
editor.trigger("change:device");
};
const renderDeviceSize = () => {
const el = document.querySelector(".gjs-frame");
const device = editor.getDevice().toLowerCase();
const config = editor.Config.custom.size[device];
el.style.width = config.width;
el.style.height = config.height;
setTimeout(function() {
editor.refresh();
}, 500);
};
const saveSize = () => {
const config = editor.DeviceManager.getAll();
let data = {};
config.models.forEach((el, idx) => {
data[idx] = { width: el.attributes.width, height: el.attributes.height };
});
return data;
};
let initData = {
web: "<p class=\"c7086\">Wpisz tekst tutaj</p><style>.c7086{position:absolute;left:116px;top:126px;}</style>",
newsletter: "<mjml><mj-body><mj-container><mj-section><mj-column><mj-text>Witaj w kreatorzee!</mj-text></mj-column></mj-section></mj-container></mj-body></mjml>",
newsletter2: "<mjml> <mj-body> <mj-container> <mj-section background-color=\"#f0f0f0\" id=\"iegg\"> <mj-column> <mj-text font-style=\"italic\" font-size=\"20\" color=\"#626262\" id=\"i16m\"> My Company </mj-text> </mj-column> </mj-section> <mj-section background-url=\"//1.bp.blogspot.com/-TPrfhxbYpDY/Uh3Refzk02I/AAAAAAAALw8/5sUJ0UUGYuw/s1600/New+York+in+The+1960's+-+70's+(2).jpg\" background-size=\"cover\" background-repeat=\"no-repeat\" id=\"ieux\"> <mj-column width=\"auto%\"> <mj-text align=\"center\" color=\"#fff\" font-size=\"40\" font-family=\"Helvetica Neue\" id=\"imhns\">Slogan here </mj-text> <mj-button background-color=\"#F63A4D\" href=\"#\" id=\"ipdof\"> Promotion </mj-button> <mj-text align=\"center\" id=\"iw0s3\"> <strong><span style=\"font-family:Tahoma,Geneva,sans-serif;\"><span style=\"color:#ffffff;\"><span style=\"font-size:11px;\">Insert text here</span></span></span></strong> </mj-text> </mj-column> </mj-section> <mj-section background-color=\"#fafafa\" id=\"ivgay\"> <mj-column width=\"400\" id=\"iw6tf\"> <mj-text font-style=\"italic\" font-size=\"20\" font-family=\"Helvetica Neue\" color=\"#626262\" id=\"i11fj\">My Awesome Text </mj-text> <mj-text color=\"#525252\" id=\"i3zwf\"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus, sit amet suscipit nibh. Proin nec commodo purus. Sed eget nulla elit. Nulla aliquet mollis faucibus. </mj-text> <mj-button background-color=\"#F45E43\" href=\"#\" id=\"indgc\">Learn more </mj-button> </mj-column> </mj-section> <mj-section background-color=\"white\" id=\"i9fhv\"> <mj-column width=\"50%\"> <mj-image width=\"200\" src=\"https://designspell.files.wordpress.com/2012/01/sciolino-paris-bw.jpg\" id=\"i2iv5\"/> </mj-column> <mj-column width=\"50%\"> <mj-text font-style=\"italic\" font-size=\"20\" font-family=\"Helvetica Neue\" color=\"#626262\" id=\"ib8nl\">Find amazing places </mj-text> <mj-text color=\"#525252\" id=\"ipyr8\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus. </mj-text> </mj-column> </mj-section> <mj-section background-color=\"#fbfbfb\" id=\"iwenj\"> <mj-column width=\"33%\"> <mj-image width=\"100\" src=\"//191n.mj.am/img/191n/3s/x0l.png\" id=\"id6ej\"/> </mj-column> <mj-column width=\"33%\"> <mj-image width=\"100\" src=\"//191n.mj.am/img/191n/3s/x01.png\" id=\"iy1yk\"/> </mj-column> <mj-column width=\"33%\"> <mj-image width=\"100\" src=\"//191n.mj.am/img/191n/3s/x0s.png\" id=\"inhre\"/> </mj-column> </mj-section> <mj-section background-color=\"#e7e7e7\" id=\"i21yj\"> <mj-column> <mj-button href=\"#\" id=\"idkm8\">Hello There! </mj-button> <mj-social display=\"facebook twitter\" facebook-content=\"Share\" twitter-content=\"Tweet\" google-content=\"+1\" instagram-content=\"Share\" linkedin-content=\"Share\" pinterest-content=\"Pin it\" id=\"ire6c\"/> </mj-column> </mj-section> </mj-container> </mj-body></mjml>"
};
let editor = grapesjs_codeapps.init({
height: "100vh",
showOffsets: 1,
noticeOnUnload: 0,
storageManager: { autoload: 0 },
container: "#gjs",
fromElement: true,
//plugins: ["gjs-preset-webpage", "grapesjs-custom-code", "gjs-plugin-ckeditor"],
plugins: ["gjs-preset-webpage", "grapesjs-custom-code"],
pluginsOpts: {},
assetManager: {
upload: "/files",
uploadName: "file"
}
});
const init = () => {
let editor = grapesjs_codeapps.init({
height: "100vh",
showOffsets: 1,
noticeOnUnload: 0,
storageManager: { autoload: 0 },
container: "#gjs",
fromElement: true,
plugins: ["gjs-preset-webpage", "grapesjs-custom-code", "gjs-plugin-ckeditor"],
pluginsOpts: {},
assetManager: {
upload: "/files",
uploadName: "file"
}
});
editor.setComponents("");
editor.UndoManager.clear();
};
var blockManager = editor.BlockManager;
var templateList = editor.TemplateList;
var styleManager = editor.StyleManager;
var domComps = editor.DomComponents;
var dType = domComps.getType("default");
var dTypeLink = domComps.getType("link");
var dModel = dType.model;
var dView = dType.view;
editor.Panels.addButton("options", {
id: "show-json",
className: "fa fa-file-code-o",
context: "show-json",
attributes: { title: "Show JSON" },
command(editor) {
editor.Modal.setTitle("Components JSON")
.setContent("<textarea style=\"width:100%; height: 250px;\">" + JSON.stringify(editor.getComponents()) + "</textarea>")
.open();
}
});
editor.on("change:device", () => {
const data = editor.DeviceManager.get(editor.getDevice());
document.querySelector("#popup-width").value = data.attributes.width;
document.querySelector("#popup-height").value = data.attributes.height;
});
editor.on("asset:upload:start", (data) => {
console.log("start uplaod", data);
});
editor.on("load", function() {
editor.setComponents(initData["web"]);
editor.UndoManager.clear();
editor.setCustomSettings({
size: {
desktop: ["600", "400"],
tablet: ["", ""],
mobile: ["", ""]
},
position: "1",
fixed: false
});
addElements();
bindUpdate();
//editor.setLang(lang);
});
//templates
templateList.add("template-1", {
label: "Template 1",
category: "Pop-up",
content: "<mjml><mj-body><mj-container><mj-section><mj-column><mj-text>Template1!</mj-text></mj-column></mj-section></mj-container></mj-body></mjml>"
});
templateList.add("template-2", {
label: "Template 2",
category: "Pop-up",
content: "<a href=\"#\" class=\"c1884\">x</a><div class=\"c2543\"> <p>DODAJ PRODUKTY <br>DO KOSZYKA I OTRZYMAJ </p></div><div class=\"c3578\"> <p> <strong>5% RABATU</strong> </p></div><a href=\"#\" class=\"c3881\">Aktywuj rabat*</a><div class=\"c4444\"> <p>*Rabat aktywuje się w koszyku <br>automatycznie i działa tylko przez 30min </p></div><img src=\"https://ninewaw.com/kreator/logo.png\" class=\"c1599\"/><style>* { box-sizing: border-box; } body {margin: 0;}body{background-image:url(https://ninewaw.com/kreator/bg.png);background-position:left top;background-attachment:scroll;background-repeat:no-repeat;background-size:contain;}.c1599{color:black;width:242px;height:35px;}.c1884{color:black;text-decoration:none;font-size:28px;}.c2543{padding:10px;text-align:center;font-family:Trebuchet MS, Helvetica, sans-serif;font-size:22px;color:#444444;}.c3578{padding:10px;color:#444444;font-family:Trebuchet MS, Helvetica, sans-serif;font-size:36px;}.c3881{padding:15px 50px 15px 50px;text-decoration:none;background-color:#c3976c;font-family:Trebuchet MS, Helvetica, sans-serif;color:#343434;}.c4444{padding:10px;text-align:center;font-family:Trebuchet MS, Helvetica, sans-serif;font-size:14px;color:#444444;}</style>"
});
templateList.add("template-2", {
label: "Template 2",
category: "Newsletter",
content: "<mjml><mj-body><mj-container><mj-section><mj-column><mj-text>Template2!</mj-text></mj-column></mj-section></mj-container></mj-body></mjml>"
});
templateList.add("template-3", {
label: "Template 3",
category: "Newsletter",
content: initData["newsletter2"]
});
//elements
blockManager.add("shape-circle", {
label: "Circle",
attributes: {
class: "fa fa-circle"
},
category: "Shapes",
content: "<svg version=\"1.1\" width=\"100\" viewBox=\"0 0 500 500\" preserveAspectRatio=\"xMinYMin meet\"><circle cx=\"250\" cy=\"250\" r=\"200\" /></svg>"
});
blockManager.add("shape-rect", {
label: "Rectangle",
attributes: {
class: "fa fa-window-minimize"
},
category: "Shapes",
content: "<svg version=\"1.1\" width=\"100\" viewBox=\"0 0 500 200\" preserveAspectRatio=\"xMinYMin meet\"><rect width=\"400\" height=\"200\" /></svg>"
});
blockManager.add("shape-square", {
label: "Square",
attributes: {
class: "fa fa-square"
},
category: "Shapes",
content: "<svg version=\"1.1\" width=\"100\" viewBox=\"0 0 210 210\" preserveAspectRatio=\"xMinYMin meet\"><rect width=\"200\" height=\"200\" /></svg>"
});
blockManager.add("product-block", {
label: "Group of products",
attributes: {
class: "fa fa-shopping-basket"
},
category: "Extra",
content: "<div class=\"product-block\" style=\"display:flex;justify-content: space-between; align-items:center; text-align:center;flex-wrap: wrap; padding:10px;\"><div><img src=\"https://via.placeholder.com/150x100\" class=\"product-img\"> <div style=\"\" class=\"product-name\">Product name</div><div style=\"\" class=\"product-price\">12.00 zł</div></div><div> <img src=\"https://via.placeholder.com/150x100\" class=\"product-img\"> <div style=\"\" class=\"product-name\">Product name</div><div style=\"\" class=\"product-price\">12.00 zł</div></div><div> <img src=\"https://via.placeholder.com/150x100\" class=\"product-img\"> <div style=\"\" class=\"product-name\">Product name</div><div style=\"\" class=\"product-price\">12.00 zł</div></div><div> <img src=\"https://via.placeholder.com/150x100\" class=\"product-img\"> <div style=\"\" class=\"product-name\">Product name</div><div style=\"\" class=\"product-price\">12.00 zł</div></div></div>"
});
blockManager.add("product-slider", {
label: "Product slider",
attributes: {
class: "fa fa-fast-forward"
},
category: "Extra",
content: "<div class=\"product-slider\" style=\"display:flex;justify-content: space-between; align-items:center; text-align:center;flex-wrap: wrap; padding:10px;\"><div class=\"product-nav\"> < </div><div><img src=\"https://via.placeholder.com/150x100\" class=\"product-img\"> <div style=\"\" class=\"product-s-name\">Product name</div><div style=\"\" class=\"product-s-price\">12.00 zł</div></div><div> <img src=\"https://via.placeholder.com/150x100\" class=\"product-s-img\"> <div style=\"\" class=\"product-s-name\">Product name</div><div style=\"\" class=\"product-s-price\">12.00 zł</div></div><div> <img src=\"https://via.placeholder.com/150x100\" class=\"product-s-img\"> <div style=\"\" class=\"product-s-name\">Product name</div><div style=\"\" class=\"product-s-price\">12.00 zł</div></div><div> <img src=\"https://via.placeholder.com/150x100\" class=\"product-s-img\"> <div style=\"\" class=\"product-s-name\">Product name</div><div style=\"\" class=\"product-s-price\">12.00 zł</div></div><div class=\"product-nav\"> > </div></div>"
});
styleManager.addProperty(lang['extra'], {
name: 'Kolor kształtów',
property: 'fill',
type: 'color',
defaults: '#000000'
});
//traits
let traits = [
{
type: "number",
label: "Quantity",
name: "quantity",
min: 1,
value: 4
}, {
type: "checkbox",
label: "Image",
name: "image",
value: true
}, {
type: "checkbox",
label: "Name",
name: "name",
value: true
}, {
type: "checkbox",
label: "Price",
name: "price",
value: true
}, {
type: "checkbox",
label: "Old Price",
name: "old-price",
value: false
}, {
type: "checkbox",
label: "Description",
name: "desc",
value: false
}, {
type: "number",
label: "Length",
name: "description",
min: 0,
value: "0"
}
];
let traitsSlider = [
...traits,
{
type: "number",
label: "Start from",
name: "start",
value: "0"
}, {
type: "checkbox",
label: "Loop",
name: "loop",
value: true
}, {
type: "checkbox",
label: "Buttons",
name: "buttons",
value: true
}];
domComps.addType("Product block", {
model: dModel.extend({
defaults: Object.assign({}, dModel.prototype.defaults, {
droppable: false,
traits: traits
})
}, {
isComponent: function(el) {
if (el.tagName === "DIV" && el.classList.contains("product-block")) {
return { type: "Product block" };
}
}
}),
view: dView.extend({
events: {
click: "handleClick"
},
init() {
let watch = "change:attributes:quantity change:attributes:name change:attributes:price change:attributes:image change:attributes:old-price";
this.listenTo(this.model, watch, this.handleChangeQuantity);
this.listenTo(this.model, "change:attributes:description change:attributes:desc", this.handleChangeDescription);
},
setStyle: function(property, value) {
const style = this.model.getStyle();
if (value) {
style[property] = value;
} else {
delete style[property];
}
this.model.setStyle(style);
},
handleChangeDescription: function () {
this.handleChangeQuantity();
},
handleChangeQuantity: function() {
let value = this.model.getTrait("quantity").attributes.value;
let images = this.model.getTrait("image").attributes.value;
let name = this.model.getTrait("name").attributes.value;
let price = this.model.getTrait("price").attributes.value;
let oldPrice = this.model.getTrait("old-price").attributes.value;
let desc = this.model.getTrait("desc").attributes.value;
let description = this.model.getTrait("description").attributes.value || 100;
console.log(description);
if (value) {
this.model.components(this.generateProduct(value, images, name, price, oldPrice, desc, description));
}
},
handleClick: function() {},
generateProduct(count, images = true, name = true, price = true, oldPrice = false, desc = false, description = 100) {
let text = "Your product description your product description your product description your product description";
let html = "";
for (let i = 0; i < count; i++) {
html += `<div>`;
if (images) {
html += `<img src="https://via.placeholder.com/150x100" class="product-img">`;
}
if (name) {
html += `<div style="" class="product-name">Product name</div>`;
}
if (desc) {
html += '<div style="" class="product-description">' + text.substr(0, description) + '...' + '</div>';
}
if (oldPrice) {
html += `<div class="product-price-old">16.00 zł</div>`;
}
if (price) {
html += `<div style="" class="product-price">12.00 zł</div>`;
}
html += `</div>`;
}
return html;
},
render: function() {
dView.prototype.render.apply(this, arguments);
return this;
}
})
});
domComps.addType("Product slider", {
model: dModel.extend({
defaults: Object.assign({}, dModel.prototype.defaults, {
droppable: false,
traits: traitsSlider
})
}, {
isComponent: function(el) {
if (el.tagName === "DIV" && el.classList.contains("product-slider")) {
return { type: "Product slider" };
}
}
}),
view: dView.extend({
events: {
click: "handleClick"
},
init() {
let watch = `change:attributes:quantity change:attributes:name change:attributes:price change:attributes:image change:attributes:old-price change:attributes:buttons`;
this.listenTo(this.model, watch, this.handleChangeQuantity);
},
setStyle: function(property, value) {
const style = this.model.getStyle();
if (value) {
style[property] = value;
} else {
delete style[property];
}
this.model.setStyle(style);
},
handleChangeQuantity: function() {
let value = this.model.getTrait("quantity").attributes.value;
let images = this.model.getTrait("image").attributes.value;
let name = this.model.getTrait("name").attributes.value;
let price = this.model.getTrait("price").attributes.value;
let nav = this.model.getTrait("buttons").attributes.value;
if (value) {
this.model.components(this.generateProduct(value, images, name, price, nav));
}
},
handleClick: function() {},
generateProduct(count, images = true, name = true, price = true, nav = true) {
let html = "";
if(nav) {
html += '<div class="product-nav"> < </div>';
}
for (let i = 0; i < count; i++) {
html += `<div>`;
if (images) {
html += `<img src="https://via.placeholder.com/150x100" class="product-img">`;
}
if (name) {
html += `<div style="" class="product-name">Product name</div>`;
}
if (price) {
html += `<div style="" class="product-price">12.00 zł</div>`;
}
html += `</div>`;
}
if(nav) {
html += '<div class="product-nav"> > </div>';
}
return html;
},
render: function() {
dView.prototype.render.apply(this, arguments);
return this;
}
})
});
domComps.addType("link", {
model: dTypeLink.model.extend({
defaults: Object.assign({}, dTypeLink.model.prototype.defaults, {
traits: [
"title", "href", "target",
{
type: "select",
label: "Akcja",
name: "action",
options: [
{ value: "", name: "" },
{ value: "cart", name: "Przenieś do koszyka i atywuj rabat" },
{ value: "show", name: "Pokaż kod rabatowy" },
{ value: "activate", name: "Aktywuj kod rabat w tle" },
{ value: "close", name: "Zamknij pop-up" }
],
changeProp: 1
}
]
})
}, {
isComponent: function(el) {
if (el.tagName === "A" && el.dataset.action === "button") {
return { type: "link" };
}
}
}),
view: dTypeLink.view
});
domComps.addType("button action", {
model: dTypeLink.model.extend({
defaults: Object.assign({}, dTypeLink.model.prototype.defaults, {
traits: [
"title", "href", "target",
{
type: "select",
label: "Akcja",
name: "action",
options: [
{ value: "", name: "" },
{ value: "cart", name: "Przenieś do koszyka i atywuj rabat" },
{ value: "show", name: "Pokaż kod rabatowy" },
{ value: "activate", name: "Aktywuj kod rabat w tle" },
{ value: "close", name: "Zamknij pop-up" }
],
changeProp: 1
}
]
}),
init() {
this.listenTo(this, "change:action", this.modifyAttributes);
},
modifyAttributes(data) {
data.attributes["attributes"]["data-ref"] = data.attributes.action;
}
}, {
isComponent: function(el) {
if (el.tagName === "A" && el.dataset.action === "true") {
return { type: "button action" };
}
}
}),
view: dTypeLink.view
});
blockManager.add("close-icon", {
label: "Close Icon",
attributes: {
class: "fa fa-window-close"
},
traits: ["name", "config"],
category: "Actions",
content: "<a href=\"#\" data-action=\"true\" data-ref=\"close\" style=\"color: black; text-decoration: none; font-size: 28px;\">x</a>"
});
blockManager.add("button-action", {
label: "Button",
attributes: {
class: "fa fa-bars"
},
category: "Actions",
content: "<a data-type=\"button\" data-action=\"true\" style=\"padding: 5px 10px; text-decoration: none; background-color: indianred; color: #ffffff\">Button</a>"
});
blockManager.remove("video");
blockManager.remove("map");
blockManager.remove("quote");
blockManager.remove("link-block");
blockManager.remove("h-navbar");
blockManager.remove("countdown");
//traits
domComps.addType("cart-block", {
model: dModel.extend({
defaults: Object.assign({}, dModel.prototype.defaults, {
traits: [
"name",
"placeholder",
{
type: "checkbox",
label: "Required",
name: "required"
}]
})
}, {
isComponent: function(el) {
if (el.tagName === "INPUT") {
return { type: "input" };
}
}
}),
view: dView
});
</script>
</body>
</html>