diff --git a/README.md b/README.md index 010b75d5c4..acba61b1f9 100644 --- a/README.md +++ b/README.md @@ -182,6 +182,7 @@ $ npm test * [grapesjs-component-countdown](https://github.com/artf/grapesjs-component-countdown) - Simple countdown component * [grapesjs-style-gradient](https://github.com/artf/grapesjs-style-gradient) - Add `gradient` type input to the Style Manager * [grapesjs-style-filter](https://github.com/artf/grapesjs-style-filter) - Add `filter` type input to the Style Manager +* [grapesjs-style-bg](https://github.com/artf/grapesjs-style-bg) - Full-stack background style property type, with the possibility to add images, colors, and gradients * [grapesjs-blocks-flexbox](https://github.com/artf/grapesjs-blocks-flexbox) - Add the flexbox block * [grapesjs-lory-slider](https://github.com/artf/grapesjs-lory-slider) - Slider component by using [lory](https://github.com/meandmax/lory) * [grapesjs-tabs](https://github.com/artf/grapesjs-tabs) - Simple tabs component @@ -191,6 +192,7 @@ $ npm test * [grapesjs-indexeddb](https://github.com/artf/grapesjs-indexeddb) - Storage wrapper for IndexedDB * [grapesjs-firestore](https://github.com/artf/grapesjs-firestore) - Storage wrapper for [Cloud Firestore](https://firebase.google.com/docs/firestore) * [grapesjs-parser-postcss](https://github.com/artf/grapesjs-parser-postcss) - Custom CSS parser for GrapesJS by using [PostCSS](https://github.com/postcss/postcss) +* [grapesjs-typed](https://github.com/artf/grapesjs-typed) - Typed component made by wrapping Typed.js library ### Presets * [grapesjs-preset-webpage](https://github.com/artf/grapesjs-preset-webpage) - Webpage Builder diff --git a/dist/grapes.js b/dist/grapes.js index 38f5b72c3f..6e912641c9 100644 --- a/dist/grapes.js +++ b/dist/grapes.js @@ -27094,7 +27094,7 @@ __webpack_require__.r(__webpack_exports__); /* harmony default export */ __webpack_exports__["default"] = ({ getPanels: function getPanels(editor) { if (!this.panels) { - this.panels = editor.Panels.getPanelsEl(); + this.panels = editor.Panels.getPanels(); } return this.panels; @@ -27131,7 +27131,9 @@ __webpack_require__.r(__webpack_exports__); this.helper.style.display = 'inline-block'; this.tglPointers(editor); - panels.style.display = 'none'; + panels.forEach(function (panel) { + return panel.set('visible', false); + }); var canvasS = canvas.style; canvasS.width = '100%'; canvasS.height = '100%'; @@ -27146,13 +27148,16 @@ __webpack_require__.r(__webpack_exports__); sender = _this$sender === void 0 ? {} : _this$sender; sender.set && sender.set('active', 0); var panels = this.getPanels(editor); + var swVisibilityButton = editor.Panels.getButton('options', 'sw-visibility'); - if (editor.Panels.getButton('options', 'sw-visibility').get('active')) { + if (swVisibilityButton && swVisibilityButton.get('active')) { editor.runCommand('sw-visibility'); } editor.getModel().runDefault(); - panels.style.display = ''; + panels.forEach(function (panel) { + return panel.set('visible', true); + }); var canvas = editor.Canvas.getElement(); canvas.setAttribute('style', ''); @@ -28953,6 +28958,8 @@ __webpack_require__.r(__webpack_exports__); +var _window = window, + CSS = _window.CSS; /* harmony default export */ __webpack_exports__["default"] = (backbone__WEBPACK_IMPORTED_MODULE_1___default.a.Model.extend(domain_abstract_model_Styleable__WEBPACK_IMPORTED_MODULE_2__["default"]).extend({ defaults: { // Css selectors @@ -29020,7 +29027,12 @@ __webpack_require__.r(__webpack_exports__); var wrapper = this.get('wrapper'); var addSelector = this.get('selectorsAdd'); var isBody = wrapper && em && em.getConfig('wrapperIsBody'); - var selectors = isBody ? 'body' : this.get('selectors').getFullString(); + var selOpts = { + escape: function escape(str) { + return CSS && CSS.escape ? CSS.escape(str) : str; + } + }; + var selectors = isBody ? 'body' : this.get('selectors').getFullString(0, selOpts); var stateStr = state && !opts.skipState ? ":".concat(state) : ''; selectors && result.push("".concat(selectors).concat(stateStr)); addSelector && !opts.skipAdd && result.push(addSelector); @@ -35332,7 +35344,8 @@ var parseStyle = Object(parser_model_ParserHtml__WEBPACK_IMPORTED_MODULE_3__["de var imp = opts.important; var important = Object(underscore__WEBPACK_IMPORTED_MODULE_1__["isArray"])(imp) ? imp.indexOf(prop) >= 0 : imp; var value = "".concat(style[prop]).concat(important ? ' !important' : ''); - value && result.push("".concat(prop, ":").concat(value, ";")); + var propPrv = prop.substr(0, 2) == '__'; + value && !propPrv && result.push("".concat(prop, ":").concat(value, ";")); } return result.join(''); @@ -35712,6 +35725,8 @@ Object(utils_ColorPicker__WEBPACK_IMPORTED_MODULE_3__["default"])($); changed = 1; var cl = getColor(color); cpStyle.backgroundColor = cl; + model.setValueFromInput(0, 0); // for UndoManager + model.setValueFromInput(cl); self.noneColor = 0; }, @@ -37214,6 +37229,7 @@ var logs = { var el = c.el; var log = c.log; var toLog = log === true ? Object(underscore__WEBPACK_IMPORTED_MODULE_1__["keys"])(logs) : Object(underscore__WEBPACK_IMPORTED_MODULE_1__["isArray"])(log) ? log : []; + Object(underscore__WEBPACK_IMPORTED_MODULE_1__["bindAll"])(this, 'initBaseColorPicker'); if (el && c.fromElement) this.config.components = el.innerHTML; this.attrsOrig = el ? Object(underscore__WEBPACK_IMPORTED_MODULE_1__["toArray"])(el.attributes).reduce(function (res, next) { res[next.nodeName] = next.nodeValue; @@ -37906,6 +37922,24 @@ var logs = { level: 'error' })); }, + initBaseColorPicker: function initBaseColorPicker(el) { + var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + var config = this.getConfig(); + var _config$colorPicker = config.colorPicker, + colorPicker = _config$colorPicker === void 0 ? {} : _config$colorPicker; + var elToAppend = config.el; + var ppfx = config.stylePrefix; + return Object(cash_dom__WEBPACK_IMPORTED_MODULE_2__["default"])(el).spectrum(_objectSpread({ + containerClassName: "".concat(ppfx, "one-bg ").concat(ppfx, "two-color"), + appendTo: elToAppend || 'body', + maxSelectionSize: 8, + showPalette: true, + palette: [], + showAlpha: true, + chooseText: 'Ok', + cancelText: 'тип' + }, opts, {}, colorPicker)); + }, /** * Set/get data from the HTMLElement @@ -38459,7 +38493,7 @@ var defaultConfig = { editors: editors, plugins: plugins, // Will be replaced on build - version: '0.16.2', + version: '0.16.3', /** * Initialize the editor with passed options @@ -40624,9 +40658,9 @@ var $ = backbone__WEBPACK_IMPORTED_MODULE_1___default.a.$; clicked: function clicked(e) { if (this.model.get('bntsVis')) return; if (this.model.get('disable')) return; - this.toogleActive(); + this.toggleActive(); }, - toogleActive: function toogleActive() { + toggleActive: function toggleActive() { var model = this.model; var _model$attributes = model.attributes, active = _model$attributes.active, @@ -43088,6 +43122,9 @@ var Selector = backbone__WEBPACK_IMPORTED_MODULE_0___default.a.Model.extend({ * @return {string} */ getFullName: function getFullName() { + var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; + var escape = opts.escape; + var name = this.get('name'); var init = ''; switch (this.get('type')) { @@ -43100,7 +43137,7 @@ var Selector = backbone__WEBPACK_IMPORTED_MODULE_0___default.a.Model.extend({ break; } - return init + this.get('name'); + return init + (escape ? escape(name) : name); } }, { // All type selectors: https://developer.mozilla.org/it/docs/Web/CSS/CSS_Selectors @@ -43160,10 +43197,11 @@ __webpack_require__.r(__webpack_exports__); }); }, getFullString: function getFullString(collection) { + var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; var result = []; var coll = collection || this; coll.forEach(function (selector) { - return result.push(selector.getFullName()); + return result.push(selector.getFullName(opts)); }); return result.join('').trim(); } @@ -44934,15 +44972,12 @@ __webpack_require__.r(__webpack_exports__); properties: [] }, initialize: function initialize() { - var _this = this; - - var properties = this.get('properties'); + var prp = this.get('properties'); var value = this.get('value'); - this.set('properties', properties instanceof _Properties__WEBPACK_IMPORTED_MODULE_1__["default"] ? properties : new _Properties__WEBPACK_IMPORTED_MODULE_1__["default"](properties)); - this.get('properties').forEach(function (item) { - var collection = _this.collection; - item.parent = collection && collection.property; - }); // If there is no value I'll try to get it from values + this.set('properties', prp instanceof _Properties__WEBPACK_IMPORTED_MODULE_1__["default"] ? prp : new _Properties__WEBPACK_IMPORTED_MODULE_1__["default"](prp)); + var props = this.get('properties'); + props.forEach(this.onPropAdd, this); + this.listenTo(props, 'add', this.onPropAdd); // If there is no value I'll try to get it from values // I need value setted to make preview working if (!value) { @@ -44956,6 +44991,10 @@ __webpack_require__.r(__webpack_exports__); this.set('value', val.trim()); } }, + onPropAdd: function onPropAdd(prop) { + var coll = this.collection; + prop.parent = coll && coll.property; + }, /** * Get property at some index @@ -44996,9 +45035,11 @@ __webpack_require__.r(__webpack_exports__); __webpack_require__.r(__webpack_exports__); /* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ "./node_modules/@babel/runtime/helpers/defineProperty.js"); /* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__); -/* harmony import */ var backbone__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! backbone */ "./node_modules/backbone/backbone.js"); -/* harmony import */ var backbone__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(backbone__WEBPACK_IMPORTED_MODULE_1__); -/* harmony import */ var _Layer__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Layer */ "./src/style_manager/model/Layer.js"); +/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! underscore */ "./node_modules/underscore/underscore.js"); +/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(underscore__WEBPACK_IMPORTED_MODULE_1__); +/* harmony import */ var backbone__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! backbone */ "./node_modules/backbone/backbone.js"); +/* harmony import */ var backbone__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(backbone__WEBPACK_IMPORTED_MODULE_2__); +/* harmony import */ var _Layer__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Layer */ "./src/style_manager/model/Layer.js"); function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } @@ -45007,8 +45048,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va -/* harmony default export */ __webpack_exports__["default"] = (backbone__WEBPACK_IMPORTED_MODULE_1___default.a.Collection.extend({ - model: _Layer__WEBPACK_IMPORTED_MODULE_2__["default"], + +/* harmony default export */ __webpack_exports__["default"] = (backbone__WEBPACK_IMPORTED_MODULE_2___default.a.Collection.extend({ + model: _Layer__WEBPACK_IMPORTED_MODULE_3__["default"], initialize: function initialize() { this.idx = 1; this.on('add', this.onAdd); @@ -45016,6 +45058,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va }, onAdd: function onAdd(model, c, opts) { if (!opts.noIncrement) model.set('index', this.idx++); + opts.active && this.active(this.indexOf(model)); }, onReset: function onReset() { this.idx = 1; @@ -45118,11 +45161,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va }); return result.join(this.getSeparator()); }, - getPropertyValues: function getPropertyValues(property) { + getPropertyValues: function getPropertyValues(property, defValue) { var result = []; this.each(function (layer) { var value = layer.getPropertyValue(property); - value && result.push(value); + value ? result.push(value) : !Object(underscore__WEBPACK_IMPORTED_MODULE_1__["isUndefined"])(defValue) && result.push(defValue); }); return result.join(', '); } @@ -45404,14 +45447,8 @@ var Property = backbone__WEBPACK_IMPORTED_MODULE_1___default.a.Model.extend({ var opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; var parsed = this.parseValue(value); this.set(parsed, _objectSpread({}, opts, { - avoidStore: 1 - })); // It's important to set an empty value, otherwise the - // UndoManager won't see the change - - if (complete) { - this.set('value', '', opts); - this.set(parsed, opts); - } + avoidStore: !complete + })); }, /** @@ -45478,6 +45515,42 @@ var Property = backbone__WEBPACK_IMPORTED_MODULE_1___default.a.Model.extend({ return result; }, + /** + * Helper function to safely split a string of values. + * Useful when style values are inside functions + * eg: + * -> input: 'value(1,2,4), 123, value(4,5)' -- default separator: ',' + * -> output: ['value(1,2,4)', '123', 'value(4,5)'] + * @param {String} values Values to split + * @param {String} [separator] Separator + */ + splitValues: function splitValues(values) { + var separator = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ','; + var res = []; + var op = '('; + var cl = ')'; + var curr = ''; + var acc = 0; + (values || '').split('').forEach(function (str) { + if (str == op) { + acc++; + curr = curr + op; + } else if (str == cl && acc > 0) { + acc--; + curr = curr + cl; + } else if (str === separator && acc == 0) { + res.push(curr); + curr = ''; + } else { + curr = curr + str; + } + }); + curr !== '' && res.push(curr); + return res.map(function (i) { + return i.trim(); + }); + }, + /** * Get the default value * @return {string} @@ -45497,9 +45570,14 @@ var Property = backbone__WEBPACK_IMPORTED_MODULE_1___default.a.Model.extend({ */ getFullValue: function getFullValue(val) { var fn = this.get('functionName'); + var def = this.getDefaultValue(); var value = Object(underscore__WEBPACK_IMPORTED_MODULE_2__["isUndefined"])(val) ? this.get('value') : val; var hasValue = !Object(underscore__WEBPACK_IMPORTED_MODULE_2__["isUndefined"])(value) && value !== ''; + if (value && def && value === def) { + return def; + } + if (fn && hasValue) { value = "".concat(fn, "(").concat(value, ")"); } @@ -46781,6 +46859,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va layers: [], // The separator used to join layer values layerSeparator: ', ', + // Prepend new layers in the list + prepend: 0, // Layer preview preview: 0 }), @@ -46972,12 +47052,15 @@ __webpack_require__.r(__webpack_exports__); "use strict"; __webpack_require__.r(__webpack_exports__); -/* harmony import */ var backbone__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! backbone */ "./node_modules/backbone/backbone.js"); -/* harmony import */ var backbone__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(backbone__WEBPACK_IMPORTED_MODULE_0__); -/* harmony import */ var _PropertiesView__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./PropertiesView */ "./src/style_manager/view/PropertiesView.js"); +/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! underscore */ "./node_modules/underscore/underscore.js"); +/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(underscore__WEBPACK_IMPORTED_MODULE_0__); +/* harmony import */ var backbone__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! backbone */ "./node_modules/backbone/backbone.js"); +/* harmony import */ var backbone__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(backbone__WEBPACK_IMPORTED_MODULE_1__); +/* harmony import */ var _PropertiesView__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./PropertiesView */ "./src/style_manager/view/PropertiesView.js"); -/* harmony default export */ __webpack_exports__["default"] = (backbone__WEBPACK_IMPORTED_MODULE_0___default.a.View.extend({ + +/* harmony default export */ __webpack_exports__["default"] = (backbone__WEBPACK_IMPORTED_MODULE_1___default.a.View.extend({ events: { click: 'active', 'click [data-close-layer]': 'remove', @@ -46994,7 +47077,7 @@ __webpack_require__.r(__webpack_exports__); initialize: function initialize() { var o = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; var model = this.model; - this.stackModel = o.stackModel || {}; + this.stackModel = o.stackModel; this.config = o.config || {}; this.em = this.config.em; this.pfx = this.config.stylePrefix || ''; @@ -47026,7 +47109,7 @@ __webpack_require__.r(__webpack_exports__); var model = this.model; var collection = model.collection; var stackModel = this.stackModel; - backbone__WEBPACK_IMPORTED_MODULE_0___default.a.View.prototype.remove.apply(this, arguments); + backbone__WEBPACK_IMPORTED_MODULE_1___default.a.View.prototype.remove.apply(this, arguments); if (collection.contains(model)) { collection.remove(model); @@ -47048,11 +47131,15 @@ __webpack_require__.r(__webpack_exports__); * @param {Element} $el */ onPreview: function onPreview(value) { + var stackModel = this.stackModel; + var detach = stackModel && stackModel.get('detached'); var values = value.split(' '); var lim = 3; var result = []; + var resultObj = {}; this.model.get('properties').each(function (prop, index) { - var value = values[index] || ''; + var property = prop.get('property'); + var value = detach ? prop.getFullValue() : values[index] || ''; if (value) { if (prop.get('type') == 'integer') { @@ -47066,8 +47153,9 @@ __webpack_require__.r(__webpack_exports__); } result.push(value); + resultObj[property] = value; }); - return result.join(' '); + return detach ? resultObj : result.join(' '); }, updatePreview: function updatePreview() { var stackModel = this.stackModel; @@ -47077,7 +47165,17 @@ __webpack_require__.r(__webpack_exports__); var preview = customPreview ? customPreview(value) : this.onPreview(value); if (preview && stackModel && previewEl) { - previewEl.style[stackModel.get('property')] = preview; + var style = previewEl.style; + + if (Object(underscore__WEBPACK_IMPORTED_MODULE_0__["isString"])(preview)) { + style[stackModel.get('property')] = preview; + } else { + var prvStr = []; + Object(underscore__WEBPACK_IMPORTED_MODULE_0__["each"])(preview, function (val, prop) { + return prvStr.push("".concat(prop, ":").concat(val)); + }); + previewEl.setAttribute('style', prvStr.join(';')); + } } }, getPropertiesWrapper: function getPropertiesWrapper() { @@ -47112,7 +47210,7 @@ __webpack_require__.r(__webpack_exports__); el = this.el, pfx = this.pfx; var preview = model.get('preview'); - var properties = new _PropertiesView__WEBPACK_IMPORTED_MODULE_1__["default"]({ + var properties = new _PropertiesView__WEBPACK_IMPORTED_MODULE_2__["default"]({ collection: model.get('properties'), config: this.config, target: propsConfig.target, @@ -47317,13 +47415,15 @@ __webpack_require__.r(__webpack_exports__); render: function render() { var _this = this; + var $el = this.$el; this.properties = []; var fragment = document.createDocumentFragment(); this.collection.each(function (model) { return _this.add(model, fragment); }); - this.$el.append(fragment); - this.$el.attr('class', "".concat(this.pfx, "properties")); + $el.empty(); + $el.append(fragment); + $el.attr('class', "".concat(this.pfx, "properties")); return this; } })); @@ -47603,6 +47703,9 @@ var $ = backbone__WEBPACK_IMPORTED_MODULE_1___default.a.$; setPreviewView: function setPreviewView(v) { var pv = this.$previewBox; pv && pv[v ? 'addClass' : 'removeClass']("".concat(this.pfx, "show")); + pv && pv.css({ + display: v ? 'block' : 'none' + }); }, /** @@ -47766,16 +47869,18 @@ __webpack_require__.r(__webpack_exports__); var model = this.model; var prop = model.get('property'); var options = model.get('list') || model.get('options') || []; + var cid = model.cid; + var clsInput = "".concat(pfx, "radio ").concat(pfx, "radio-").concat(prop); if (!this.input) { if (options && options.length) { var inputStr = ''; options.forEach(function (el) { var cl = el.className ? "".concat(el.className, " ").concat(pfx, "icon ").concat(itemCls) : ''; - var id = "".concat(prop, "-").concat(el.value); + var id = "".concat(prop, "-").concat(el.value, "-").concat(cid); var labelTxt = el.name || el.value; var titleAttr = el.title ? "title=\"".concat(el.title, "\"") : ''; - inputStr += "\n