diff --git a/README.md b/README.md
index d4c05c9de..5cca10d31 100644
--- a/README.md
+++ b/README.md
@@ -210,11 +210,23 @@ If you like the project support it with a donation of your choice or become a ba
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/dist/grapes.js b/dist/grapes.js
index 243d4d62e..2d78524c8 100644
--- a/dist/grapes.js
+++ b/dist/grapes.js
@@ -93,7 +93,7 @@ return /******/ (function(modules) { // webpackBootstrap
// Set up Backbone appropriately for the environment. Start with AMD.
if (true) {
- !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(1), __webpack_require__(8), exports], __WEBPACK_AMD_DEFINE_RESULT__ = function(_, $, exports) {
+ !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(1), __webpack_require__(9), exports], __WEBPACK_AMD_DEFINE_RESULT__ = function(_, $, exports) {
// Export global even in AMD case in case this script is loaded with
// others that may still expect a global Backbone.
root.Backbone = factory(root, exports, _, $);
@@ -3686,6 +3686,369 @@ exports.getUnitFromValue = getUnitFromValue;
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
+"use strict";
+/* WEBPACK VAR INJECTION */(function(Backbone) {
+
+var _underscore = __webpack_require__(1);
+
+var ComponentsView = __webpack_require__(50);
+
+module.exports = Backbone.View.extend({
+ className: function className() {
+ return this.getClasses();
+ },
+ tagName: function tagName() {
+ return this.model.get('tagName');
+ },
+ initialize: function initialize() {
+ var opt = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+ var model = this.model;
+ var config = opt.config || {};
+ this.opts = opt;
+ this.config = config;
+ this.em = config.em || '';
+ this.pfx = config.stylePrefix || '';
+ this.ppfx = config.pStylePrefix || '';
+ this.attr = model.get('attributes');
+ this.classe = this.attr.class || [];
+ var $el = this.$el;
+ var classes = model.get('classes');
+ this.listenTo(model, 'destroy remove', this.remove);
+ this.listenTo(model, 'change:style', this.updateStyle);
+ this.listenTo(model, 'change:attributes', this.updateAttributes);
+ this.listenTo(model, 'change:highlightable', this.updateHighlight);
+ this.listenTo(model, 'change:status', this.updateStatus);
+ this.listenTo(model, 'change:state', this.updateState);
+ this.listenTo(model, 'change:script', this.render);
+ this.listenTo(model, 'change', this.handleChange);
+ this.listenTo(classes, 'add remove change', this.updateClasses);
+ $el.data('model', model);
+ $el.data('collection', model.get('components'));
+ model.view = this;
+ classes.length && this.importClasses();
+ this.init();
+ },
+ remove: function remove() {
+ Backbone.View.prototype.remove.apply(this);
+ var children = this.childrenView;
+ children && children.stopListening();
+ },
+
+
+ /**
+ * Initialize callback
+ */
+ init: function init() {},
+
+
+ /**
+ * Handle any property change
+ * @private
+ */
+ handleChange: function handleChange() {
+ var em = this.em;
+ if (em) {
+ var model = this.model;
+ em.trigger('component:update', model);
+
+ for (var prop in model.changed) {
+ em.trigger('component:update:' + prop, model);
+ }
+ }
+ },
+
+
+ /**
+ * Import, if possible, classes inside main container
+ * @private
+ * */
+ importClasses: function importClasses() {
+ var clm = this.config.em.get('SelectorManager');
+
+ if (clm) {
+ this.model.get('classes').each(function (m) {
+ clm.add(m.get('name'));
+ });
+ }
+ },
+
+
+ /**
+ * Fires on state update. If the state is not empty will add a helper class
+ * @param {Event} e
+ * @private
+ * */
+ updateState: function updateState(e) {
+ var cl = 'hc-state';
+ var state = this.model.get('state');
+
+ if (state) {
+ this.$el.addClass(cl);
+ } else {
+ this.$el.removeClass(cl);
+ }
+ },
+
+
+ /**
+ * Update item on status change
+ * @param {Event} e
+ * @private
+ * */
+ updateStatus: function updateStatus(e) {
+ var el = this.el;
+ var status = this.model.get('status');
+ var pfx = this.pfx;
+ var ppfx = this.ppfx;
+ var selectedCls = pfx + 'selected';
+ var selectedParentCls = selectedCls + '-parent';
+ var freezedCls = ppfx + 'freezed';
+ var actualCls = el.getAttribute('class') || '';
+ var cls = '';
+
+ switch (status) {
+ case 'selected':
+ cls = actualCls + ' ' + selectedCls;
+ break;
+ case 'selected-parent':
+ cls = actualCls + ' ' + selectedParentCls;
+ break;
+ case 'freezed':
+ cls = actualCls + ' ' + freezedCls;
+ break;
+ default:
+ this.$el.removeClass(selectedCls + ' ' + selectedParentCls + ' ' + freezedCls);
+ }
+
+ cls = cls.trim();
+
+ if (cls) {
+ el.setAttribute('class', cls);
+ }
+ },
+
+
+ /**
+ * Update highlight attribute
+ * @private
+ * */
+ updateHighlight: function updateHighlight() {
+ var hl = this.model.get('highlightable');
+ this.setAttribute('data-highlightable', hl ? 1 : '');
+ },
+
+
+ /**
+ * Update style attribute
+ * @private
+ * */
+ updateStyle: function updateStyle() {
+ var em = this.em;
+ var model = this.model;
+
+ if (em && em.get('avoidInlineStyle')) {
+ this.el.id = model.getId();
+ model.setStyle(model.getStyle());
+ } else {
+ this.setAttribute('style', model.styleToString());
+ }
+ },
+
+
+ /**
+ * Update classe attribute
+ * @private
+ * */
+ updateClasses: function updateClasses() {
+ var str = this.model.get('classes').pluck('name').join(' ');
+ this.setAttribute('class', str);
+
+ // Regenerate status class
+ this.updateStatus();
+ },
+
+
+ /**
+ * Update single attribute
+ * @param {[type]} name [description]
+ * @param {[type]} value [description]
+ */
+ setAttribute: function setAttribute(name, value) {
+ var el = this.$el;
+ value ? el.attr(name, value) : el.removeAttr(name);
+ },
+
+
+ /**
+ * Get classes from attributes.
+ * This method is called before initialize
+ *
+ * @return {Array}|null
+ * @private
+ * */
+ getClasses: function getClasses() {
+ var attr = this.model.get("attributes"),
+ classes = attr['class'] || [];
+ classes = (0, _underscore.isArray)(classes) ? classes : [classes];
+
+ if (classes.length) {
+ return classes.join(' ');
+ } else {
+ return null;
+ }
+ },
+
+
+ /**
+ * Update attributes
+ * @private
+ * */
+ updateAttributes: function updateAttributes() {
+ var model = this.model;
+ var attrs = {};
+ var attr = model.get('attributes');
+ var src = model.get('src');
+
+ for (var key in attr) {
+ attrs[key] = attr[key];
+ }
+
+ src && (attrs.src = src);
+ this.$el.attr(attrs);
+ this.updateHighlight();
+ this.updateStyle();
+ },
+
+
+ /**
+ * Update component content
+ * @private
+ * */
+ updateContent: function updateContent() {
+ this.getChildrenContainer().innerHTML = this.model.get('content');
+ },
+
+
+ /**
+ * Prevent default helper
+ * @param {Event} e
+ * @private
+ */
+ prevDef: function prevDef(e) {
+ e.preventDefault();
+ },
+
+
+ /**
+ * Render component's script
+ * @private
+ */
+ updateScript: function updateScript() {
+ if (!this.model.get('script')) {
+ return;
+ }
+
+ var em = this.em;
+ if (em) {
+ var canvas = em.get('Canvas');
+ canvas.getCanvasView().updateScript(this);
+ }
+ },
+
+
+ /**
+ * Return children container
+ * Differently from a simple component where children container is the
+ * component itself
+ *
+ *
+ *
+ * You could have the children container more deeper
+ *
+ *
+ *
+ *
+ *
+ * @return HTMLElement
+ * @private
+ */
+ getChildrenContainer: function getChildrenContainer() {
+ var container = this.el;
+
+ if (typeof this.getChildrenSelector == 'function') {
+ container = this.el.querySelector(this.getChildrenSelector());
+ } else if (typeof this.getTemplate == 'function') {
+ // Need to find deepest first child
+ }
+
+ return container;
+ },
+
+
+ /**
+ * Render children components
+ * @private
+ */
+ renderChildren: function renderChildren() {
+ var container = this.getChildrenContainer();
+ var view = new ComponentsView({
+ collection: this.model.get('components'),
+ config: this.config,
+ componentTypes: this.opts.componentTypes
+ });
+
+ view.render(container);
+ this.childrenView = view;
+ var childNodes = Array.prototype.slice.call(view.el.childNodes);
+
+ for (var i = 0, len = childNodes.length; i < len; i++) {
+ container.appendChild(childNodes.shift());
+ }
+
+ // If the children container is not the same as the component
+ // (so likely fetched with getChildrenSelector()) is necessary
+ // to disable pointer-events for all nested components as they
+ // might prevent the component to be selected
+ if (container !== this.el) {
+ var disableNode = function disableNode(el) {
+ var children = Array.prototype.slice.call(el.children);
+ children.forEach(function (el) {
+ el.style['pointer-events'] = 'none';
+ if (container !== el) {
+ disableNode(el);
+ }
+ });
+ };
+ disableNode(this.el);
+ }
+ },
+ renderAttributes: function renderAttributes() {
+ this.updateAttributes();
+ this.updateClasses();
+ },
+ render: function render() {
+ this.renderAttributes();
+ this.updateContent();
+ this.renderChildren();
+ this.updateScript();
+ return this;
+ }
+});
+/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0)))
+
+/***/ }),
+/* 4 */
+/***/ (function(module, exports, __webpack_require__) {
+
"use strict";
@@ -3703,8 +4066,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
var Backbone = __webpack_require__(0);
var Components = __webpack_require__(49);
+var Selector = __webpack_require__(7);
var Selectors = __webpack_require__(10);
-var Traits = __webpack_require__(151);
+var Traits = __webpack_require__(152);
var escapeRegExp = function escapeRegExp(str) {
return str.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');
@@ -3885,6 +4249,27 @@ module.exports = Backbone.Model.extend(_Styleable2.default).extend({
},
+ /**
+ * Find inner models by query string
+ * ATTENTION: this method works only with alredy rendered component
+ * @param {string} query Query string
+ * @return {Array} Array of models
+ * @example
+ * model.find('div > .class');
+ * // -> [Component, Component, ...]
+ */
+ find: function find(query) {
+ var result = [];
+
+ this.view.$el.find(query).each(function (el, i, $el) {
+ var model = $el.data('model');
+ model && result.push(model);
+ });
+
+ return result;
+ },
+
+
/**
* Once the tag is updated I have to remove the node and replace it
*/
@@ -4012,6 +4397,34 @@ module.exports = Backbone.Model.extend(_Styleable2.default).extend({
this.get('classes').reset();
return this.addClass(classes);
},
+
+
+ /**
+ * Remove classes
+ * @param {Array|string} classes Array or string of classes
+ * @return {Array} Array of removed selectors
+ * @example
+ * model.removeClass('class1');
+ * model.removeClass('class1 class2');
+ * model.removeClass(['class1', 'class2']);
+ * // -> [SelectorObject, ...]
+ */
+ removeClass: function removeClass(classes) {
+ var removed = [];
+ classes = (0, _underscore.isArray)(classes) ? classes : [classes];
+ var selectors = this.get('classes');
+ var type = Selector.TYPE_CLASS;
+
+ classes.forEach(function (classe) {
+ var classes = classe.split(' ');
+ classes.forEach(function (name) {
+ var selector = selectors.where({ name: name, type: type })[0];
+ selector && removed.push(selectors.remove(selector));
+ });
+ });
+
+ return removed;
+ },
initClasses: function initClasses() {
var classes = this.normalizeClasses(this.get('classes') || []);
this.set('classes', new Selectors(classes));
@@ -4398,369 +4811,6 @@ module.exports = Backbone.Model.extend(_Styleable2.default).extend({
}
});
-/***/ }),
-/* 4 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/* WEBPACK VAR INJECTION */(function(Backbone) {
-
-var _underscore = __webpack_require__(1);
-
-var ComponentsView = __webpack_require__(50);
-
-module.exports = Backbone.View.extend({
- className: function className() {
- return this.getClasses();
- },
- tagName: function tagName() {
- return this.model.get('tagName');
- },
- initialize: function initialize() {
- var opt = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
- var model = this.model;
- var config = opt.config || {};
- this.opts = opt;
- this.config = config;
- this.em = config.em || '';
- this.pfx = config.stylePrefix || '';
- this.ppfx = config.pStylePrefix || '';
- this.attr = model.get('attributes');
- this.classe = this.attr.class || [];
- var $el = this.$el;
- var classes = model.get('classes');
- this.listenTo(model, 'destroy remove', this.remove);
- this.listenTo(model, 'change:style', this.updateStyle);
- this.listenTo(model, 'change:attributes', this.updateAttributes);
- this.listenTo(model, 'change:highlightable', this.updateHighlight);
- this.listenTo(model, 'change:status', this.updateStatus);
- this.listenTo(model, 'change:state', this.updateState);
- this.listenTo(model, 'change:script', this.render);
- this.listenTo(model, 'change', this.handleChange);
- this.listenTo(classes, 'add remove change', this.updateClasses);
- $el.data('model', model);
- $el.data('collection', model.get('components'));
- model.view = this;
- classes.length && this.importClasses();
- this.init();
- },
- remove: function remove() {
- Backbone.View.prototype.remove.apply(this);
- var children = this.childrenView;
- children && children.stopListening();
- },
-
-
- /**
- * Initialize callback
- */
- init: function init() {},
-
-
- /**
- * Handle any property change
- * @private
- */
- handleChange: function handleChange() {
- var em = this.em;
- if (em) {
- var model = this.model;
- em.trigger('component:update', model);
-
- for (var prop in model.changed) {
- em.trigger('component:update:' + prop, model);
- }
- }
- },
-
-
- /**
- * Import, if possible, classes inside main container
- * @private
- * */
- importClasses: function importClasses() {
- var clm = this.config.em.get('SelectorManager');
-
- if (clm) {
- this.model.get('classes').each(function (m) {
- clm.add(m.get('name'));
- });
- }
- },
-
-
- /**
- * Fires on state update. If the state is not empty will add a helper class
- * @param {Event} e
- * @private
- * */
- updateState: function updateState(e) {
- var cl = 'hc-state';
- var state = this.model.get('state');
-
- if (state) {
- this.$el.addClass(cl);
- } else {
- this.$el.removeClass(cl);
- }
- },
-
-
- /**
- * Update item on status change
- * @param {Event} e
- * @private
- * */
- updateStatus: function updateStatus(e) {
- var el = this.el;
- var status = this.model.get('status');
- var pfx = this.pfx;
- var ppfx = this.ppfx;
- var selectedCls = pfx + 'selected';
- var selectedParentCls = selectedCls + '-parent';
- var freezedCls = ppfx + 'freezed';
- var actualCls = el.getAttribute('class') || '';
- var cls = '';
-
- switch (status) {
- case 'selected':
- cls = actualCls + ' ' + selectedCls;
- break;
- case 'selected-parent':
- cls = actualCls + ' ' + selectedParentCls;
- break;
- case 'freezed':
- cls = actualCls + ' ' + freezedCls;
- break;
- default:
- this.$el.removeClass(selectedCls + ' ' + selectedParentCls + ' ' + freezedCls);
- }
-
- cls = cls.trim();
-
- if (cls) {
- el.setAttribute('class', cls);
- }
- },
-
-
- /**
- * Update highlight attribute
- * @private
- * */
- updateHighlight: function updateHighlight() {
- var hl = this.model.get('highlightable');
- this.setAttribute('data-highlightable', hl ? 1 : '');
- },
-
-
- /**
- * Update style attribute
- * @private
- * */
- updateStyle: function updateStyle() {
- var em = this.em;
- var model = this.model;
-
- if (em && em.get('avoidInlineStyle')) {
- this.el.id = model.getId();
- model.setStyle(model.getStyle());
- } else {
- this.setAttribute('style', model.styleToString());
- }
- },
-
-
- /**
- * Update classe attribute
- * @private
- * */
- updateClasses: function updateClasses() {
- var str = this.model.get('classes').pluck('name').join(' ');
- this.setAttribute('class', str);
-
- // Regenerate status class
- this.updateStatus();
- },
-
-
- /**
- * Update single attribute
- * @param {[type]} name [description]
- * @param {[type]} value [description]
- */
- setAttribute: function setAttribute(name, value) {
- var el = this.$el;
- value ? el.attr(name, value) : el.removeAttr(name);
- },
-
-
- /**
- * Get classes from attributes.
- * This method is called before initialize
- *
- * @return {Array}|null
- * @private
- * */
- getClasses: function getClasses() {
- var attr = this.model.get("attributes"),
- classes = attr['class'] || [];
- classes = (0, _underscore.isArray)(classes) ? classes : [classes];
-
- if (classes.length) {
- return classes.join(' ');
- } else {
- return null;
- }
- },
-
-
- /**
- * Update attributes
- * @private
- * */
- updateAttributes: function updateAttributes() {
- var model = this.model;
- var attrs = {};
- var attr = model.get('attributes');
- var src = model.get('src');
-
- for (var key in attr) {
- attrs[key] = attr[key];
- }
-
- src && (attrs.src = src);
- this.$el.attr(attrs);
- this.updateHighlight();
- this.updateStyle();
- },
-
-
- /**
- * Update component content
- * @private
- * */
- updateContent: function updateContent() {
- this.getChildrenContainer().innerHTML = this.model.get('content');
- },
-
-
- /**
- * Prevent default helper
- * @param {Event} e
- * @private
- */
- prevDef: function prevDef(e) {
- e.preventDefault();
- },
-
-
- /**
- * Render component's script
- * @private
- */
- updateScript: function updateScript() {
- if (!this.model.get('script')) {
- return;
- }
-
- var em = this.em;
- if (em) {
- var canvas = em.get('Canvas');
- canvas.getCanvasView().updateScript(this);
- }
- },
-
-
- /**
- * Return children container
- * Differently from a simple component where children container is the
- * component itself
- *
- *
- *
- * You could have the children container more deeper
- *
- *
- *
- *
- *
- * @return HTMLElement
- * @private
- */
- getChildrenContainer: function getChildrenContainer() {
- var container = this.el;
-
- if (typeof this.getChildrenSelector == 'function') {
- container = this.el.querySelector(this.getChildrenSelector());
- } else if (typeof this.getTemplate == 'function') {
- // Need to find deepest first child
- }
-
- return container;
- },
-
-
- /**
- * Render children components
- * @private
- */
- renderChildren: function renderChildren() {
- var container = this.getChildrenContainer();
- var view = new ComponentsView({
- collection: this.model.get('components'),
- config: this.config,
- componentTypes: this.opts.componentTypes
- });
-
- view.render(container);
- this.childrenView = view;
- var childNodes = Array.prototype.slice.call(view.el.childNodes);
-
- for (var i = 0, len = childNodes.length; i < len; i++) {
- container.appendChild(childNodes.shift());
- }
-
- // If the children container is not the same as the component
- // (so likely fetched with getChildrenSelector()) is necessary
- // to disable pointer-events for all nested components as they
- // might prevent the component to be selected
- if (container !== this.el) {
- var disableNode = function disableNode(el) {
- var children = Array.prototype.slice.call(el.children);
- children.forEach(function (el) {
- el.style['pointer-events'] = 'none';
- if (container !== el) {
- disableNode(el);
- }
- });
- };
- disableNode(this.el);
- }
- },
- renderAttributes: function renderAttributes() {
- this.updateAttributes();
- this.updateClasses();
- },
- render: function render() {
- this.renderAttributes();
- this.updateContent();
- this.renderChildren();
- this.updateScript();
- return this;
- }
-});
-/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0)))
-
/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {
@@ -14927,6 +14977,93 @@ return CodeMirror$1;
/* 7 */
/***/ (function(module, exports, __webpack_require__) {
+"use strict";
+
+
+var Backbone = __webpack_require__(0);
+
+var TYPE_CLASS = 1;
+var TYPE_ID = 2;
+
+var Selector = Backbone.Model.extend({
+
+ idAttribute: 'name',
+
+ defaults: {
+ name: '',
+
+ label: '',
+
+ // Type of the selector
+ type: TYPE_CLASS,
+
+ // If not active it's not selectable by the style manager (uncheckboxed)
+ active: true,
+
+ // Can't be seen by the style manager, therefore even by the user
+ // Will be rendered only in export code
+ private: false,
+
+ // If true, can't be removed from the attacched element
+ protected: false
+ },
+
+ initialize: function initialize() {
+ var name = this.get('name');
+ var label = this.get('label');
+
+ if (!name) {
+ this.set('name', label);
+ } else if (!label) {
+ this.set('label', name);
+ }
+
+ this.set('name', Selector.escapeName(this.get('name')));
+ },
+
+
+ /**
+ * Get full selector name
+ * @return {string}
+ */
+ getFullName: function getFullName() {
+ var init = '';
+
+ switch (this.get('type')) {
+ case TYPE_CLASS:
+ init = '.';
+ break;
+ case TYPE_ID:
+ init = '#';
+ break;
+ }
+
+ return init + this.get('name');
+ }
+}, {
+ // All type selectors: https://developer.mozilla.org/it/docs/Web/CSS/CSS_Selectors
+ // Here I define only what I need
+ TYPE_CLASS: TYPE_CLASS,
+
+ TYPE_ID: TYPE_ID,
+
+ /**
+ * Escape string
+ * @param {string} name
+ * @return {string}
+ * @private
+ */
+ escapeName: function escapeName(name) {
+ return ('' + name).trim().replace(/([^a-z0-9\w-]+)/gi, '-');
+ }
+});
+
+module.exports = Selector;
+
+/***/ }),
+/* 8 */
+/***/ (function(module, exports, __webpack_require__) {
+
"use strict";
/* WEBPACK VAR INJECTION */(function(Backbone, _) {
@@ -15084,7 +15221,7 @@ module.exports = Backbone.View.extend({
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0), __webpack_require__(1)))
/***/ }),
-/* 8 */
+/* 9 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -16053,93 +16190,6 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__;
return cash;
});
-/***/ }),
-/* 9 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var Backbone = __webpack_require__(0);
-
-var TYPE_CLASS = 1;
-var TYPE_ID = 2;
-
-var Selector = Backbone.Model.extend({
-
- idAttribute: 'name',
-
- defaults: {
- name: '',
-
- label: '',
-
- // Type of the selector
- type: TYPE_CLASS,
-
- // If not active it's not selectable by the style manager (uncheckboxed)
- active: true,
-
- // Can't be seen by the style manager, therefore even by the user
- // Will be rendered only in export code
- private: false,
-
- // If true, can't be removed from the attacched element
- protected: false
- },
-
- initialize: function initialize() {
- var name = this.get('name');
- var label = this.get('label');
-
- if (!name) {
- this.set('name', label);
- } else if (!label) {
- this.set('label', name);
- }
-
- this.set('name', Selector.escapeName(this.get('name')));
- },
-
-
- /**
- * Get full selector name
- * @return {string}
- */
- getFullName: function getFullName() {
- var init = '';
-
- switch (this.get('type')) {
- case TYPE_CLASS:
- init = '.';
- break;
- case TYPE_ID:
- init = '#';
- break;
- }
-
- return init + this.get('name');
- }
-}, {
- // All type selectors: https://developer.mozilla.org/it/docs/Web/CSS/CSS_Selectors
- // Here I define only what I need
- TYPE_CLASS: TYPE_CLASS,
-
- TYPE_ID: TYPE_ID,
-
- /**
- * Escape string
- * @param {string} name
- * @return {string}
- * @private
- */
- escapeName: function escapeName(name) {
- return ('' + name).trim().replace(/([^a-z0-9\w-]+)/gi, '-');
- }
-});
-
-module.exports = Selector;
-
/***/ }),
/* 10 */
/***/ (function(module, exports, __webpack_require__) {
@@ -16148,7 +16198,7 @@ module.exports = Selector;
/* WEBPACK VAR INJECTION */(function(_) {
var Backbone = __webpack_require__(0);
-var Selector = __webpack_require__(9);
+var Selector = __webpack_require__(7);
module.exports = Backbone.Collection.extend({
model: Selector,
@@ -16193,7 +16243,7 @@ var Property = __webpack_require__(12);
module.exports = __webpack_require__(0).Collection.extend(_TypeableCollection2.default).extend({
types: [{
id: 'stack',
- model: __webpack_require__(120),
+ model: __webpack_require__(121),
view: __webpack_require__(34),
isType: function isType(value) {
if (value && value.type == 'stack') {
@@ -16247,8 +16297,8 @@ module.exports = __webpack_require__(0).Collection.extend(_TypeableCollection2.d
}
}, {
id: 'slider',
- model: __webpack_require__(126),
- view: __webpack_require__(127),
+ model: __webpack_require__(127),
+ view: __webpack_require__(128),
isType: function isType(value) {
if (value && value.type == 'slider') {
return value;
@@ -16576,7 +16626,7 @@ module.exports = __webpack_require__(5).extend({
var Backbone = __webpack_require__(0);
-var ComponentView = __webpack_require__(4);
+var ComponentView = __webpack_require__(3);
module.exports = ComponentView.extend({
@@ -17099,7 +17149,7 @@ module.exports = Input.extend({
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-var Component = __webpack_require__(3);
+var Component = __webpack_require__(4);
module.exports = Component.extend({
@@ -17164,7 +17214,7 @@ module.exports = Component.extend({
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-var Component = __webpack_require__(3);
+var Component = __webpack_require__(4);
module.exports = Component.extend({
@@ -17287,22 +17337,20 @@ var _underscore = __webpack_require__(1);
var _mixins = __webpack_require__(2);
-var ToolbarView = __webpack_require__(187);
-var Toolbar = __webpack_require__(189);
+var ToolbarView = __webpack_require__(188);
+var Toolbar = __webpack_require__(190);
var key = __webpack_require__(23);
-var Backbone = __webpack_require__(0);
+var $ = __webpack_require__(0).$;
var showOffsets = void 0;
-var $ = Backbone.$;
module.exports = {
init: function init(o) {
- (0, _underscore.bindAll)(this, 'onHover', 'onOut', 'onClick', 'onKeyPress', 'copyComp', 'pasteComp', 'onFrameScroll');
+ (0, _underscore.bindAll)(this, 'onHover', 'onOut', 'onClick', 'onKeyPress', 'onFrameScroll');
},
enable: function enable() {
this.frameOff = this.canvasOff = this.adjScroll = null;
var config = this.config.em.get('Config');
this.startSelectComponent();
- this.toggleClipboard(config.copyPaste);
var em = this.config.em;
showOffsets = 1;
@@ -17311,49 +17359,6 @@ module.exports = {
},
- /**
- * Toggle clipboard function
- * @param {Boolean} active
- * @return {this}
- * @private
- */
- toggleClipboard: function toggleClipboard(active) {
- var en = active || 0;
- if (en) {
- key('⌘+c, ctrl+c', this.copyComp);
- key('⌘+v, ctrl+v', this.pasteComp);
- } else {
- key.unbind('⌘+c, ctrl+c');
- key.unbind('⌘+v, ctrl+v');
- }
- },
-
-
- /**
- * Copy component to the clipboard
- * @private
- */
- copyComp: function copyComp() {
- var el = this.editorModel.get('selectedComponent');
- if (el && el.get('copyable')) this.editorModel.set('clipboard', el);
- },
-
-
- /**
- * Paste component from clipboard
- * @private
- */
- pasteComp: function pasteComp() {
- var clp = this.editorModel.get('clipboard'),
- sel = this.editorModel.get('selectedComponent');
- if (clp && sel && sel.collection) {
- var index = sel.collection.indexOf(sel),
- clone = clp.clone();
- sel.collection.add(clone, { at: index + 1 });
- }
- },
-
-
/**
* Start select component event
* @private
@@ -17894,7 +17899,6 @@ module.exports = {
this.stopSelectComponent();
!opts.preserveSelected && em.setSelected(null);
this.clean();
- this.toggleClipboard();
this.hideBadge();
this.hideFixedElementOffset();
this.canvas.getToolbarEl().style.display = 'none';
@@ -18459,7 +18463,7 @@ Object.defineProperty(exports, "__esModule", {
value: true
});
-var _promisePolyfill = __webpack_require__(76);
+var _promisePolyfill = __webpack_require__(77);
var _promisePolyfill2 = _interopRequireDefault(_promisePolyfill);
@@ -19618,7 +19622,7 @@ module.exports = Backbone.Model.extend({
var Backbone = __webpack_require__(0);
-var Button = __webpack_require__(110);
+var Button = __webpack_require__(111);
module.exports = Backbone.Collection.extend({
@@ -19807,7 +19811,7 @@ module.exports = Backbone.View.extend({
/* WEBPACK VAR INJECTION */(function(_) {
var Backbone = __webpack_require__(0);
-var ButtonView = __webpack_require__(112);
+var ButtonView = __webpack_require__(113);
module.exports = Backbone.View.extend({
initialize: function initialize(o) {
@@ -19924,10 +19928,10 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
*/
module.exports = function () {
var c = {},
- defaults = __webpack_require__(117),
- Sectors = __webpack_require__(118),
+ defaults = __webpack_require__(118),
+ Sectors = __webpack_require__(119),
Properties = __webpack_require__(11),
- SectorsView = __webpack_require__(129);
+ SectorsView = __webpack_require__(130);
var properties = void 0;
var sectors, SectView;
@@ -20140,19 +20144,25 @@ module.exports = function () {
* @return {Model}
*/
getModelToStyle: function getModelToStyle(model) {
- var classes = model.get('classes');
var em = c.em;
+ var classes = model.get('classes');
+ var id = model.getId();
- if (em && classes && classes.length) {
- var conf = em.get('Config');
- var state = !conf.devicePreviewMode ? model.get('state') : '';
- var deviceW = em.getCurrentMedia();
+ if (em) {
+ var config = em.getConfig();
var cssC = em.get('CssComposer');
+ var state = !config.devicePreviewMode ? model.get('state') : '';
var valid = classes.getStyleable();
- var CssRule = cssC.get(valid, state, deviceW);
+ var hasClasses = valid.length;
+ var opts = { state: state };
- if (CssRule && valid.length) {
- return CssRule;
+ if (hasClasses) {
+ var deviceW = em.getCurrentMedia();
+ var CssRule = cssC.get(valid, state, deviceW);
+ if (CssRule) return CssRule;
+ } else if (config.avoidInlineStyle) {
+ var rule = cssC.getIdRule(id, opts);
+ return rule ? rule : cssC.setIdRule(id, {}, opts);
}
}
@@ -20495,7 +20505,7 @@ module.exports = Property.extend({
var PropertyCompositeView = __webpack_require__(17);
-var LayersView = __webpack_require__(124);
+var LayersView = __webpack_require__(125);
module.exports = PropertyCompositeView.extend({
templateInput: function templateInput() {
@@ -20704,7 +20714,7 @@ module.exports = Backbone.View.extend({
var ppfx = opts.ppfx || '';
this.opts = opts;
this.ppfx = ppfx;
- this.target = opts.target || {};
+ this.em = opts.target || {};
this.listenTo(this.model, 'change:value', this.handleModelChange);
},
@@ -20913,7 +20923,9 @@ module.exports = __webpack_require__(14).extend({
"use strict";
/* WEBPACK VAR INJECTION */(function(Backbone) {
-__webpack_require__(123);
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+__webpack_require__(124);
var Input = __webpack_require__(35);
var $ = Backbone.$;
@@ -20967,7 +20979,8 @@ module.exports = Input.extend({
var colorEl = $('');
var cpStyle = colorEl.get(0).style;
- var elToAppend = this.target && this.target.config ? this.target.config.el : '';
+ var elToAppend = this.em && this.em.config ? this.em.config.el : '';
+ var colorPickerConfig = this.em && this.em.getConfig && this.em.getConfig("colorPicker") || {};
var getColor = function getColor(color) {
var cl = color.getAlpha() == 1 ? color.toHexString() : color.toRgbString();
return cl.replace(/ /g, '');
@@ -20976,7 +20989,7 @@ module.exports = Input.extend({
var changed = 0;
var previousColor = void 0;
this.$el.find('[data-colorp-c]').append(colorEl);
- colorEl.spectrum({
+ colorEl.spectrum(_extends({
containerClassName: ppfx + 'one-bg ' + ppfx + 'two-color',
appendTo: elToAppend || 'body',
maxSelectionSize: 8,
@@ -20984,7 +20997,9 @@ module.exports = Input.extend({
showAlpha: true,
chooseText: 'Ok',
cancelText: '⨯',
- palette: [],
+ palette: []
+
+ }, colorPickerConfig, {
move: function move(color) {
var cl = getColor(color);
cpStyle.backgroundColor = cl;
@@ -21011,7 +21026,7 @@ module.exports = Input.extend({
model.setValueFromInput(previousColor, 0);
}
}
- });
+ }));
this.colorEl = colorEl;
}
@@ -22231,7 +22246,7 @@ module.exports = Backbone.View.extend({
* @private
* */
addToCollection: function addToCollection(model, fragmentEl, index) {
- if (!this.compView) this.compView = __webpack_require__(4);
+ if (!this.compView) this.compView = __webpack_require__(3);
var fragment = fragmentEl || null,
viewObject = this.compView;
@@ -22317,7 +22332,7 @@ module.exports = Backbone.View.extend({
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-var Component = __webpack_require__(3);
+var Component = __webpack_require__(4);
module.exports = Component.extend({
@@ -22338,7 +22353,7 @@ module.exports = Component.extend({
var _mixins = __webpack_require__(2);
-var ComponentView = __webpack_require__(4);
+var ComponentView = __webpack_require__(3);
module.exports = ComponentView.extend({
@@ -22670,13 +22685,14 @@ module.exports = _.extend({}, CreateComponent, {
/***/ (function(module, exports, __webpack_require__) {
"use strict";
-/* WEBPACK VAR INJECTION */(function(_) {
-var Backbone = __webpack_require__(0);
-var ComponentView = __webpack_require__(4);
-var ItemsView;
-module.exports = Backbone.View.extend({
+var _underscore = __webpack_require__(1);
+
+var ComponentView = __webpack_require__(3);
+var ItemsView = void 0;
+
+module.exports = __webpack_require__(0).View.extend({
events: {
'mousedown [data-toggle-move]': 'startSort',
@@ -22687,8 +22703,15 @@ module.exports = Backbone.View.extend({
'focusout input': 'handleEditEnd'
},
- template: _.template('\n <% if (hidable) { %>\n \n <% } %>\n\n \n
\n
\n \n <%= icon %>\n \n
\n
\n
<%= (count ? count : \'\') %>
\n\n \n \n
\n\n '),
-
+ template: function template(model) {
+ var pfx = this.pfx;
+ var ppfx = this.ppfx;
+ var hidable = this.config.hidable;
+ var count = this.countChildren(model);
+ var addClass = !count ? pfx + 'no-chld' : '';
+ var level = this.level + 1;
+ return '\n ' + (hidable ? '' : '') + '\n\n \n
\n
\n \n ' + model.getIcon() + '\n \n
\n
\n
' + (count ? count : '') + '
\n \n \n
\n \n ';
+ },
initialize: function initialize() {
var o = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -22950,26 +22973,11 @@ module.exports = Backbone.View.extend({
var model = this.model;
var pfx = this.pfx;
var vis = this.isVisible();
- var count = this.countChildren(model);
var el = this.$el;
var level = this.level + 1;
+ el.html(this.template(model));
- el.html(this.template({
- title: model.getName(),
- icon: model.getIcon(),
- addClass: count ? '' : pfx + 'no-chld',
- editBtnCls: this.editBtnCls,
- inputNameCls: this.inputNameCls,
- caretCls: this.caretCls,
- count: count,
- visible: vis,
- hidable: this.config.hidable,
- prefix: pfx,
- ppfx: this.ppfx,
- level: level
- }));
-
- if (typeof ItemsView == 'undefined') {
+ if ((0, _underscore.isUndefined)(ItemsView)) {
ItemsView = __webpack_require__(56);
}
@@ -22987,15 +22995,14 @@ module.exports = Backbone.View.extend({
el.children('#' + pfx + 'move').remove();
}
- if (!vis) this.className += ' ' + pfx + 'hide';
- el.attr('class', _.result(this, 'className'));
+ !vis && (this.className += ' ' + pfx + 'hide');
+ el.attr('class', this.className);
this.updateOpening();
this.updateStatus();
this.updateVisibility();
return this;
}
});
-/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(1)))
/***/ }),
/* 56 */
@@ -23174,18 +23181,24 @@ module.exports = __webpack_require__(59);
"use strict";
-var _cashDom = __webpack_require__(8);
+var _cashDom = __webpack_require__(9);
var _cashDom2 = _interopRequireDefault(_cashDom);
var _underscore = __webpack_require__(1);
+var _polyfills = __webpack_require__(60);
+
+var _polyfills2 = _interopRequireDefault(_polyfills);
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+(0, _polyfills2.default)();
+
module.exports = function () {
- var defaultConfig = __webpack_require__(60);
- var Editor = __webpack_require__(61);
- var PluginManager = __webpack_require__(219);
+ var defaultConfig = __webpack_require__(61);
+ var Editor = __webpack_require__(62);
+ var PluginManager = __webpack_require__(220);
var plugins = new PluginManager();
var editors = [];
@@ -23198,7 +23211,7 @@ module.exports = function () {
plugins: plugins,
// Will be replaced on build
- version: '0.12.53',
+ version: '0.12.55',
/**
* Initializes an editor based on passed options
@@ -23207,7 +23220,6 @@ module.exports = function () {
* @param {Object|string} config.components='' HTML string or Component model in JSON format
* @param {Object|string} config.style='' CSS string or CSS model in JSON format
* @param {Boolean} [config.fromElement=false] If true, will fetch HTML and CSS from selected container
- * @param {Boolean} [config.copyPaste=true] Enable/Disable the possibility to copy(ctrl+c) & paste(ctrl+v) components
* @param {Boolean} [config.undoManager=true] Enable/Disable undo manager
* @param {Array} [config.plugins=[]] Array of plugins to execute on start
* @return {grapesjs.Editor} GrapesJS editor instance
@@ -23262,6 +23274,51 @@ module.exports = function () {
"use strict";
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+/**
+ * File made for IE/Edge support
+ * https://github.com/artf/grapesjs/issues/214
+ */
+
+exports.default = function () {
+
+ /**
+ * Check if IE/Edge
+ * @return {Boolean}
+ */
+ var isIE = function isIE() {
+ var match = void 0;
+ var agent = window.navigator.userAgent;
+ var rules = [['edge', /Edge\/([0-9\._]+)/], ['ie', /MSIE\s(7\.0)/], ['ie', /MSIE\s([0-9\.]+);.*Trident\/[4-7].0/], ['ie', /Trident\/7\.0.*rv\:([0-9\.]+).*\).*Gecko$/]];
+
+ for (var i = 0; i < rules.length; i++) {
+ var rule = rules[i];
+ match = rule[1].exec(agent);
+ if (match) break;
+ }
+
+ return !!match;
+ };
+
+ if (isIE()) {
+ var originalCreateHTMLDocument = DOMImplementation.prototype.createHTMLDocument;
+ DOMImplementation.prototype.createHTMLDocument = function (title) {
+ if (!title) title = '';
+ return originalCreateHTMLDocument.apply(document.implementation, [title]);
+ };
+ }
+};
+
+/***/ }),
+/* 61 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
module.exports = {
// If true renders editor on init
autorender: 1,
@@ -23279,8 +23336,6 @@ module.exports = {
fromElement: 0,
// ---
- // Enable/Disable the possibility to copy(ctrl + c) & paste(ctrl + v) components
- copyPaste: true,
// Storage Manager
storageManager: {},
@@ -23293,13 +23348,13 @@ module.exports = {
};
/***/ }),
-/* 61 */
+/* 62 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
-var _cashDom = __webpack_require__(8);
+var _cashDom = __webpack_require__(9);
var _cashDom2 = _interopRequireDefault(_cashDom);
@@ -23307,9 +23362,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
module.exports = function (config) {
var c = config || {},
- defaults = __webpack_require__(62),
- EditorModel = __webpack_require__(63),
- EditorView = __webpack_require__(218);
+ defaults = __webpack_require__(63),
+ EditorModel = __webpack_require__(64),
+ EditorView = __webpack_require__(219);
for (var name in defaults) {
if (!(name in c)) c[name] = defaults[name];
@@ -23894,7 +23949,6 @@ module.exports = function (config) {
* @param {string|Array