@silexlabs/grapesjs-symbols
Version:
Symbols for GrapesJS
166 lines • 13 kB
JavaScript
"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.confirmDialog = confirmDialog;
var lit_html_1 = require("lit-html");
var unsafe_html_js_1 = require("lit-html/directives/unsafe-html.js");
var utils_1 = require("../utils");
function closestHtml(child, attr) {
var ptr = child;
while (ptr && !ptr.getAttribute(attr)) {
ptr = ptr.parentElement;
}
return ptr;
}
function confirmDialog(_a) {
var editor = _a.editor, main = _a.content, title = _a.title, primaryLabel = _a.primaryLabel, _b = _a.secondaryLabel, secondaryLabel = _b === void 0 ? 'Cancel' : _b, cbk = _a.cbk, lsKey = _a.lsKey;
// Check if the user has already been asked
if (localStorage.getItem(lsKey) === 'on') {
cbk();
}
else {
var content = document.createElement('div');
editor.Modal.open({
title: title,
content: content,
});
var remember_1 = 'off';
(0, lit_html_1.render)((0, lit_html_1.html)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["<main>\n ", "\n </main><footer style=\"\n display: flex;\n justify-content: space-between;\n margin-top: 30px;\n \">\n <div>\n <label class=\"gjs-field gjs-field-checkbox\" style=\"\n float: left;\n margin-right: 10px;\n \">\n <input type=\"checkbox\" id=\"remember\" @click=", ">\n <i class=\"gjs-chk-icon\"></i>\n </label>\n <label for=\"remember\">Don't ask me again</label>\n </div>\n <div>\n <button\n class=\"gjs-btn-prim\"\n @click=", "\n style=\"\n margin-left: auto;\n background: transparent;\n margin-right: 10px;\n \">", "</button>\n <button class=\"gjs-btn-prim\" @click=", ">", "</button>\n </div>\n </footer>"], ["<main>\n ", "\n </main><footer style=\"\n display: flex;\n justify-content: space-between;\n margin-top: 30px;\n \">\n <div>\n <label class=\"gjs-field gjs-field-checkbox\" style=\"\n float: left;\n margin-right: 10px;\n \">\n <input type=\"checkbox\" id=\"remember\" @click=", ">\n <i class=\"gjs-chk-icon\"></i>\n </label>\n <label for=\"remember\">Don't ask me again</label>\n </div>\n <div>\n <button\n class=\"gjs-btn-prim\"\n @click=", "\n style=\"\n margin-left: auto;\n background: transparent;\n margin-right: 10px;\n \">", "</button>\n <button class=\"gjs-btn-prim\" @click=", ">", "</button>\n </div>\n </footer>"])), (0, unsafe_html_js_1.unsafeHTML)(main), function (_a) {
var rememberCheckbox = _a.target;
return remember_1 = rememberCheckbox === null || rememberCheckbox === void 0 ? void 0 : rememberCheckbox.value;
}, function () { return editor.Modal.close(); }, secondaryLabel, function () {
cbk();
localStorage.setItem(lsKey, remember_1);
editor.Modal.close();
}, primaryLabel), content);
}
}
var SymbolsView = /** @class */ (function () {
function SymbolsView(options) {
var _this = this;
this.options = options;
this.lastPos = null;
this.lastTarget = null;
// listen to redraw UI
options.editor.on('component:selected', function () { return _this.render(); });
// listen to drag event in order to have access to the drop target
options.editor.on('sorter:drag', function (event) {
_this.lastPos = event.pos;
_this.lastTarget = event.target;
});
// Listen to events on `symbol`
options.editor.on('symbol', function () {
// Redraw the UI
_this.render();
});
// list wrapper
this.el = document.createElement('div');
this.el.classList.add('symbols__wrapper');
document.querySelector(options.appendTo)
.appendChild(this.el);
// first render
this.render();
}
SymbolsView.prototype.render = function () {
var _this = this;
var symbols = (0, utils_1.getSymbols)(this.options.editor);
symbols.forEach(function (symbolInfo) {
if (!symbolInfo.main) {
console.warn('Symbol has no main component:', symbolInfo);
return;
}
});
var selected = this.options.editor.getSelected();
(0, lit_html_1.render)((0, lit_html_1.html)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n <style>\n .symbols__symbol-selected {\n border: 1px solid ", ";\n }\n .symbols__symbol {\n position: relative;\n }\n .symbols__num {\n font-size: xx-small;\n }\n .symbols__empty {\n padding: 10px;\n text-align: center;\n width: 100%;\n }\n .symbols__remove {\n position: absolute;\n top: 0; right: 0;\n width: 20px;\n line-height: 1;\n cursor: pointer;\n }\n </style>\n <main class=\"symbols__list\" @dragend=", ">\n <div class=\"gjs-blocks-c\">\n ", "\n ", "\n </div>\n </main>\n "], ["\n <style>\n .symbols__symbol-selected {\n border: 1px solid ", ";\n }\n .symbols__symbol {\n position: relative;\n }\n .symbols__num {\n font-size: xx-small;\n }\n .symbols__empty {\n padding: 10px;\n text-align: center;\n width: 100%;\n }\n .symbols__remove {\n position: absolute;\n top: 0; right: 0;\n width: 20px;\n line-height: 1;\n cursor: pointer;\n }\n </style>\n <main class=\"symbols__list\" @dragend=", ">\n <div class=\"gjs-blocks-c\">\n "
// keep the same structure as the layers panel
, "\n ", "\n </div>\n </main>\n "])), this.options.highlightColor, function (event) { return _this.onDrop(event); },
// keep the same structure as the layers panel
symbols
.filter(function (s) { return s.main; })
.map(function (symbolData) { return (0, lit_html_1.html)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n <div\n class=\"gjs-block gjs-one-bg gjs-four-color-h symbols__symbol\n ", "\n ", "\n \"\n title=\"\" draggable=\"true\"\n data-symbol-id=", "\n >\n <div title=\"Unlink all instances and delete Symbol\" class=\"symbols__remove\" @click=", ">\n <svg viewBox=\"0 0 24 24\"><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z\"></path></svg>\n </div>\n <div class=\"gjs-block-label\">\n ", "\n <div class=\"symbols__num\">\n ", " instances\n </div>\n </div>\n </div>\n "], ["\n <div\n class=\"gjs-block gjs-one-bg gjs-four-color-h symbols__symbol\n ", "\n ", "\n \"\n title=\"\" draggable=\"true\"\n data-symbol-id=", "\n >\n <div title=\"Unlink all instances and delete Symbol\" class=\"symbols__remove\" @click=", ">\n <svg viewBox=\"0 0 24 24\"><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z\"></path></svg>\n </div>\n <div class=\"gjs-block-label\">\n ", "\n <div class=\"symbols__num\">\n ", " instances\n </div>\n </div>\n </div>\n "])), !!selected && symbolData.instances.includes(selected) ? 'symbols__symbol-selected' : '', symbolData.main.get('icon') || 'fa fa-diamond', symbolData.main.getId(), function (event) { return _this.onRemove(event); }, symbolData.main.getName(), symbolData.instances.length); }), symbols.length ? '' : (0, lit_html_1.html)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["<div class=\"symbols__empty\">\n ", "\n </div>"], ["<div class=\"symbols__empty\">\n ", "\n </div>"])), this.options.emptyText)), this.el);
return this;
};
SymbolsView.prototype.onDrop = function (event) {
var _a;
var symbolId = event.target.dataset.symbolId;
if (symbolId) {
var symbolInfo = (0, utils_1.getSymbol)(this.options.editor, this.options.editor.Components.getById(symbolId));
if (symbolInfo) {
var parentId = (_a = this.lastTarget) === null || _a === void 0 ? void 0 : _a.id;
if (!parentId)
throw new Error('Can not create the symbol: missing param id');
var parent_1 = this.lastTarget ? this.options.editor.Components.getById(parentId) : null;
if (parent_1) {
// Make sure we have a target and position
this.lastTarget = this.lastTarget || this.options.editor.Canvas.getBody();
this.lastPos = this.lastPos || { placement: 'after', index: 0 };
// Get the parent component from the HTML element
var parentId_1 = this.lastTarget.getAttribute('id');
if (!parentId_1)
throw new Error('Can not create the symbol: missing param id');
var parent_2 = this.options.editor.Components.allById()[parentId_1];
// Check if we can drop the symbol there
if ((0, utils_1.allowDrop)(this.options.editor, parent_2)) {
// create the new component
var instances = (0, utils_1.createSymbol)(this.options.editor, symbolInfo.main).instances;
// Last one is the added one
var instance = instances[instances.length - 1];
var c = (this.lastPos.placement === 'after' ? parent_2.append(instance) :
parent_2.append(instance, { at: this.lastPos.index }))[0];
// Select the new component
// Break unit tests? editor.select(c, { scroll: true })
return c;
}
else {
throw new Error('Can not create the symbol: one of the parent is in the symbol');
}
}
else {
throw new Error('Can not create the symbol: parent not found');
}
}
else {
throw new Error("Could not create an instance of symbol ".concat(symbolId, ": symbol not found"));
}
}
else {
// not a symbol creation
}
return null;
};
SymbolsView.prototype.onRemove = function (_a) {
var _this = this;
var deleteButton = _a.target;
// Warn the user
confirmDialog({
editor: this.options.editor,
title: 'Delete Symbol',
content: "\n <p>Are you sure you want to delete this symbol?</p>\n <p>Deleting this symbol <em>will not</em> delete its instances, just disconnects them. Confirm to proceed or cancel to maintain the current link.</p>\n ",
primaryLabel: 'Delete',
cbk: function () {
_this.onRemoveConfirm(deleteButton);
},
lsKey: 'delete-symbol',
});
};
SymbolsView.prototype.onRemoveConfirm = function (target) {
var _a;
var symbolId = (_a = closestHtml((target), 'data-symbol-id')) === null || _a === void 0 ? void 0 : _a.dataset.symbolId;
if (!symbolId) {
throw new Error('Can not delete symbol: missing param symbolId');
}
var symbol = this.options.editor.Components.getSymbols()
.find(function (symbol) { return symbol.getId() === symbolId; });
if (!symbol) {
throw new Error('Can not delete symbol: symbol not found');
}
(0, utils_1.deleteSymbol)(this.options.editor, symbol);
};
return SymbolsView;
}());
exports.default = SymbolsView;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
//# sourceMappingURL=SymbolsView.js.map