@silexlabs/grapesjs-symbols/dist/es5/view/traits.js

Symbols for GrapesJS

"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;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
        if (ar || !(i in from)) {
            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
            ar[i] = from[i];
        }
    }
    return to.concat(ar || Array.prototype.slice.call(from));
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = default_1;
var lit_html_1 = require("lit-html");
var events_1 = require("../events");
var SymbolsView_1 = require("./SymbolsView");
var utils_1 = require("../utils");
// Same signature as a grapesjs plugin
function default_1(editor, options) {
    function unlink(component) {
        // FIXME: Handle the case when the component is the main symbol
        (0, SymbolsView_1.confirmDialog)({
            editor: editor,
            title: 'Unlink from symbol',
            content: "\n        <p>Are you sure you want to unlink this component from the symbol? This is a <em>definitive action<em></p>\n        <p>Unlinking this component <em>will not</em> delete the symbol, just disconnects it. Confirm to proceed or cancel to maintain the current link.</p>\n      ",
            primaryLabel: 'Unlink',
            cbk: function () {
                (0, utils_1.unbindSymbolInstance)(editor, component);
            },
            lsKey: 'unlink-symbol',
        });
    }
    function updateUi(el, component) {
        var _a, _b;
        var symbolInfo = component && (0, utils_1.getSymbol)(editor, component);
        if (symbolInfo) {
            el.style.display = 'initial';
            (0, lit_html_1.render)((0, lit_html_1.html)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["<fieldset class=\"gjs-trt-trait__wrp gjs-trt-trait__wrp-title\" style=\"\n        border-color: ", ";\n        padding: 10px;\n      \">\n        <legend class=\"fa fa-ban on fa-diamond\">&nbsp;<em>", "</em></legend>\n        <div class=\"gjs-field\">\n          <button\n            class=\"gjs-btn-prim gjs-btn--full\"\n            style=\"\n              margin: 10px 0;\n              border: 1px solid ", ";\n            \"\n            @click=", ">Unlink</button>\n        </div>\n      </fieldset>"], ["<fieldset class=\"gjs-trt-trait__wrp gjs-trt-trait__wrp-title\" style=\"\n        border-color: ", ";\n        padding: 10px;\n      \">\n        <legend class=\"fa fa-ban on fa-diamond\">&nbsp;<em>", "</em></legend>\n        <div class=\"gjs-field\">\n          <button\n            class=\"gjs-btn-prim gjs-btn--full\"\n            style=\"\n              margin: 10px 0;\n              border: 1px solid ", ";\n            \"\n            @click=", ">Unlink</button>\n        </div>\n      </fieldset>"])), options.primaryColor, (_b = (_a = symbolInfo.main) === null || _a === void 0 ? void 0 : _a.getName()) !== null && _b !== void 0 ? _b : 'symbol', options.primaryColor, function () { return unlink(component); }), el);
        }
        else {
            el.style.display = 'none';
        }
    }
    // Create a new trait type
    editor.TraitManager.addType('symbol-trait', {
        noLabel: true,
        createInput: function () {
            // Create a new element container and add some content
            var el = document.createElement('div');
            // update the UI when a new symbol is selected or created/deleted etc
            Object.values(events_1.SymbolEvents).forEach(function (event) { return editor.on(event, function () { return updateUi(el); }); });
            // Initial ui update
            updateUi(el);
            // this will be the element passed to onEvent and onUpdate
            return el;
        },
        // Update the component based on UI changes
        // `elInput` is the result HTMLElement you get from `createInput`
        //onEvent({ elInput, component, event }) {
        //},
        // Update UI on the component change
        onUpdate: function (_a) {
            var elInput = _a.elInput, component = _a.component;
            updateUi(elInput, component);
        },
    });
    // Add trait to symbols when the user selects one
    editor.on('component:selected symbol', function () {
        var _a, _b;
        var component = editor.getSelected();
        var symbolId = component && ((_b = (_a = (0, utils_1.getSymbol)(editor, component)) === null || _a === void 0 ? void 0 : _a.main) === null || _b === void 0 ? void 0 : _b.getId());
        if (symbolId) {
            component.addTrait([{
                    type: 'symbol-trait',
                    name: 'Symbol',
                }]);
        }
    });
    // Add the new trait to all component types
    editor.DomComponents.getTypes().forEach(function (type) {
        editor.DomComponents.addType(type.id, {
            //isComponent: el => isComponent(el),
            model: {
                defaults: {
                    traits: __spreadArray(__spreadArray([], editor.DomComponents.getType(type.id).model.prototype.defaults.traits, true), [
                        // Add the new trait
                        {
                            type: 'symbol-trait',
                            name: 'Symbol',
                        }
                    ], false)
                }
            }
        });
    });
}
var templateObject_1;
//# sourceMappingURL=traits.js.map