diff --git a/dist/grapes.js b/dist/grapes.js index f06db288b..5619ff8fd 100644 --- a/dist/grapes.js +++ b/dist/grapes.js @@ -3898,6 +3898,7 @@ module.exports = _backbone2.default.View.extend({ 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:content', this.updateContent); this.listenTo(model, 'change', this.handleChange); this.listenTo(classes, 'add remove change', this.updateClasses); $el.data('model', model); @@ -4408,7 +4409,6 @@ var Component = Backbone.Model.extend(_Styleable2.default).extend({ this.config = opt.config || {}; this.ccid = Component.createId(this); this.set('attributes', this.get('attributes') || {}); - this.on('remove', this.handleRemove); this.listenTo(this, 'change:script', this.scriptUpdated); this.listenTo(this, 'change:traits', this.traitsUpdated); this.listenTo(this, 'change:tagName', this.tagUpdated); @@ -4429,17 +4429,6 @@ var Component = Backbone.Model.extend(_Styleable2.default).extend({ }, - /** - * Triggered on model remove - * @param {Model} removed Removed model - * @private - */ - handleRemove: function handleRemove(removed) { - var em = this.em; - em && em.trigger('component:remove', removed); - }, - - /** * Check component's type * @param {string} type Component type @@ -4611,8 +4600,12 @@ var Component = Backbone.Model.extend(_Styleable2.default).extend({ * @return {Object} */ getAttributes: function getAttributes() { + var em = this.em; + var classes = []; var attributes = _extends({}, this.get('attributes')); + var sm = em && em.get('SelectorManager'); + var id = this.getId(); // Add classes this.get('classes').each(function (cls) { @@ -4620,8 +4613,8 @@ var Component = Backbone.Model.extend(_Styleable2.default).extend({ }); classes.length && (attributes.class = classes.join(' ')); - // If style is not empty I need an ID attached to the component - if (!(0, _underscore.isEmpty)(this.getStyle()) && !(0, _underscore.has)(attributes, 'id')) { + // If the rule is setted we need an ID attached to the component + if (!(0, _underscore.has)(attributes, 'id') && sm && sm.get(id, sm.Selector.TYPE_ID)) { attributes.id = this.getId(); } @@ -4952,14 +4945,26 @@ var Component = Backbone.Model.extend(_Styleable2.default).extend({ * @return {string} HTML string * @private */ - toHTML: function toHTML(opts) { + toHTML: function toHTML() { + var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; + var model = this; var attrs = []; var classes = []; var tag = model.get('tagName'); var sTag = model.get('void'); + var customAttr = opts.attributes; var attributes = this.getAttrToHTML(); + // Get custom attributes if requested + if (customAttr) { + if ((0, _underscore.isFunction)(customAttr)) { + attributes = customAttr(model, attributes) || {}; + } else if ((0, _underscore.isObject)(customAttr)) { + attributes = customAttr; + } + } + for (var attr in attributes) { var val = attributes[attr]; var value = (0, _underscore.isString)(val) ? val.replace(/"/g, '"') : val; @@ -4976,7 +4981,7 @@ var Component = Backbone.Model.extend(_Styleable2.default).extend({ var attrString = attrs.length ? ' ' + attrs.join(' ') : ''; var code = '<' + tag + attrString + (sTag ? '/' : '') + '>' + model.get('content'); model.get('components').each(function (comp) { - return code += comp.toHTML(); + return code += comp.toHTML(opts); }); !sTag && (code += '' + tag + '>'); @@ -5013,7 +5018,7 @@ var Component = Backbone.Model.extend(_Styleable2.default).extend({ delete obj.toolbar; if (this.em.getConfig('avoidDefaults')) { - var defaults = this.defaults; + var defaults = (0, _underscore.result)(this, 'defaults'); (0, _underscore.forEach)(defaults, function (value, key) { if (['type', 'content'].indexOf(key) === -1 && obj[key] === value) { @@ -5052,6 +5057,19 @@ var Component = Backbone.Model.extend(_Styleable2.default).extend({ }, + /** + * Return model id + * @param {String} id + * @return {self} + */ + setId: function setId(id) { + var attrs = _extends({}, this.get('attributes')); + attrs.id = id; + this.set('attributes', attrs); + return this; + }, + + /** * Get the DOM element of the model. This works only of the * model is alredy rendered @@ -5102,6 +5120,42 @@ var Component = Backbone.Model.extend(_Styleable2.default).extend({ var em = this.em; var event = 'component:update' + (property ? ':' + property : ''); em && em.trigger(event, this); + }, + + + /** + * Execute callback function on all components + * @param {Function} clb Callback function, the model is passed as an argument + * @return {self} + */ + onAll: function onAll(clb) { + if ((0, _underscore.isFunction)(clb)) { + clb(this); + this.components().forEach(function (model) { + return model.onAll(clb); + }); + } + return this; + }, + + + /** + * Reset id of the component and any of its style rule + * @param {Object} [opts={}] Options + * @return {self} + */ + resetId: function resetId() { + var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; + var em = this.em; + + var oldId = this.getId(); + if (!oldId) return; + var newId = Component.createId(this); + this.setId(newId); + var rule = em && em.get('CssComposer').getIdRule(oldId); + var selector = rule && rule.get('selectors').at(0); + selector && selector.set('name', newId); + return this; } }, { /** @@ -17121,10 +17175,13 @@ module.exports = ComponentView.extend({ * @private * */ updateSrc: function updateSrc() { - var src = this.model.get('src'); - var el = this.$el; - el.attr('src', src); - el[src ? 'removeClass' : 'addClass'](this.classEmpty); + var model = this.model, + classEmpty = this.classEmpty, + $el = this.$el; + + var src = model.get('src'); + model.addAttributes({ src: src }); + $el[src ? 'removeClass' : 'addClass'](classEmpty); }, @@ -20731,15 +20788,21 @@ module.exports = function (config) { // Start with understanding what kind of component it is if (ct) { var obj = ''; + var type = node.getAttribute && node.getAttribute(modelAttrStart + 'type'); - // Iterate over all available Component Types and - // the first with a valid result will be that component - for (var it = 0; it < ct.length; it++) { - obj = ct[it].model.isComponent(node); - if (obj) break; - } + // If the type is already defined, use it + if (type) { + model = { type: type }; + } else { + // Iterate over all available Component Types and + // the first with a valid result will be that component + for (var it = 0; it < ct.length; it++) { + obj = ct[it].model.isComponent(node); + if (obj) break; + } - model = obj; + model = obj; + } } // Set tag name if not yet done @@ -22995,20 +23058,35 @@ var _backbone = __webpack_require__(0); var _backbone2 = _interopRequireDefault(_backbone); +var _PropertyView = __webpack_require__(5); + +var _PropertyView2 = _interopRequireDefault(_PropertyView); + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } var $ = _backbone2.default.$; -module.exports = __webpack_require__(5).extend({ +module.exports = _PropertyView2.default.extend({ templateInput: function templateInput() { var pfx = this.pfx; var ppfx = this.ppfx; return '\n