diff --git a/dist/grapes.js b/dist/grapes.js index 8cb6af7ba..e7db5cd45 100644 --- a/dist/grapes.js +++ b/dist/grapes.js @@ -4233,7 +4233,7 @@ 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('destroy', this.handleRemove); + 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); @@ -4851,7 +4851,7 @@ var Component = Backbone.Model.extend(_Styleable2.default).extend({ emitUpdate: function emitUpdate(property) { var em = this.em; var event = 'component:update' + (property ? ':' + property : ''); - em && em.trigger(event, this.model); + em && em.trigger(event, this); } }, { /** @@ -5274,9 +5274,6 @@ module.exports = Backbone.View.extend({ * @return {Boolean} */ isTargetStylable: function isTargetStylable(target) { - if (this.model.get('id') == 'flex-width') { - //debugger; - } var trg = target || this.getTarget(); var model = this.model; var property = model.get('property'); @@ -20272,20 +20269,35 @@ module.exports = function () { if (em) { var config = em.getConfig(); + var um = em.get('UndoManager'); var cssC = em.get('CssComposer'); var state = !config.devicePreviewMode ? model.get('state') : ''; var valid = classes.getStyleable(); var hasClasses = valid.length; var opts = { state: state }; + var rule = void 0; if (hasClasses) { var deviceW = em.getCurrentMedia(); - var CssRule = cssC.get(valid, state, deviceW); - if (CssRule) return CssRule; + rule = cssC.get(valid, state, deviceW); + + if (!rule) { + // I stop undo manager here as after adding the CSSRule (generally after + // selecting the component) and calling undo() it will remove the rule from + // the collection, therefore updating it in style manager will not affect it + // #268 + um.stop(); + rule = cssC.add(valid, state, deviceW); + rule.setStyle(model.getStyle()); + model.setStyle({}); + um.start(); + } } else if (config.avoidInlineStyle) { - var rule = cssC.getIdRule(id, opts); - return rule ? rule : cssC.setIdRule(id, {}, opts); + rule = cssC.getIdRule(id, opts); + !rule && (rule = cssC.setIdRule(id, {}, opts)); } + + rule && (model = rule); } return model; @@ -21388,7 +21400,7 @@ module.exports = __webpack_require__(44).extend({ getPreview: function getPreview() { var pfx = this.pfx; var src = this.model.get('src'); - return '\n
\n \n '; + return '\n \n \n '; }, getInfo: function getInfo() { var pfx = this.pfx; @@ -23370,7 +23382,7 @@ module.exports = function () { plugins: plugins, // Will be replaced on build - version: '0.13.5', + version: '0.13.6', /** * Initializes an editor based on passed options @@ -24185,6 +24197,16 @@ module.exports = { // When `avoidInlineStyle` is true all styles are inserted inside the css rule avoidInlineStyle: 0, + // (experimental) + // The structure of components is always on the screen but it's not the same + // for style rules. When you delete a component you might leave a lot of styles + // which will never be used again, therefore they might be removed. + // With this option set to true, styles not used from the CSS generator (so in + // any case where `CssGenerator.build` is used) will be removed automatically. + // But be careful, not always leaving the style not used mean you wouldn't + // use it later, but this option comes really handy when deal with big templates. + clearStyles: 0, + // Dom element el: '', @@ -24329,6 +24351,7 @@ module.exports = Backbone.Model.extend({ this.config = c; this.set('Config', c); this.set('modules', []); + this.set('toLoad', []); if (c.el && c.fromElement) this.config.components = c.el.innerHTML; @@ -30402,7 +30425,8 @@ module.exports = __webpack_require__(0).Model.extend({ var em = this.get('em'); var complete = this.get('onComplete'); var typeJson = this.get('contentTypeJson'); - var res = typeJson && typeof text === 'string' ? JSON.parse(text) : text; + var parsable = text && typeof text === 'string'; + var res = typeJson && parsable ? JSON.parse(text) : text; complete && complete(res); clb && clb(res); em && em.trigger('storage:response', res); @@ -33043,44 +33067,50 @@ module.exports = __webpack_require__(0).Model.extend({ var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; var cssc = opts.cssc; - this.em = opts.em || ''; + var em = opts.em || ''; + this.em = em; this.compCls = []; this.ids = []; var code = this.buildFromModel(model, opts); if (cssc) { - var rules = cssc.getAll(); - var mediaRules = {}; + (function () { + var rules = cssc.getAll(); + var mediaRules = {}; + var dump = []; + + rules.each(function (rule) { + var media = rule.get('mediaText'); + + // If media is setted, I'll render it later + if (media) { + var mRules = mediaRules[media]; + if (mRules) { + mRules.push(rule); + } else { + mediaRules[media] = [rule]; + } + return; + } - rules.each(function (rule) { - var media = rule.get('mediaText'); + code += _this2.buildFromRule(rule, dump); + }); - // If media is setted, I'll render it later - if (media) { + // Get media rules + for (var media in mediaRules) { + var rulesStr = ''; var mRules = mediaRules[media]; - if (mRules) { - mRules.push(rule); - } else { - mediaRules[media] = [rule]; + mRules.forEach(function (rule) { + return rulesStr += _this2.buildFromRule(rule, dump); + }); + + if (rulesStr) { + code += '@media ' + media + '{' + rulesStr + '}'; } - return; } - code += _this2.buildFromRule(rule); - }); - - // Get media rules - for (var media in mediaRules) { - var rulesStr = ''; - var mRules = mediaRules[media]; - mRules.forEach(function (rule) { - return rulesStr += _this2.buildFromRule(rule); - }); - - if (rulesStr) { - code += '@media ' + media + '{' + rulesStr + '}'; - } - } + em && em.getConfig('clearStyles') && rules.remove(dump); + })(); } return code; @@ -33092,7 +33122,7 @@ module.exports = __webpack_require__(0).Model.extend({ * @param {Model} rule * @return {string} CSS string */ - buildFromRule: function buildFromRule(rule) { + buildFromRule: function buildFromRule(rule, dump) { var _this3 = this; var result = ''; @@ -33114,6 +33144,8 @@ module.exports = __webpack_require__(0).Model.extend({ if (style) { result += selectorStr + '{' + style + '}'; } + } else { + dump.push(rule); } return result; @@ -39793,7 +39825,7 @@ module.exports = Backbone.View.extend({ body.removeChild(dummy); this.propTarget = target; var coll = this.collection; - var events = 'change:selectedComponent component:update:classes change:device'; + var events = 'change:selectedComponent component:update:classes component:update:state change:device'; this.listenTo(coll, 'add', this.addTo); this.listenTo(coll, 'reset', this.render); this.listenTo(this.target, events, this.targetUpdated); @@ -39817,42 +39849,34 @@ module.exports = Backbone.View.extend({ */ targetUpdated: function targetUpdated() { var em = this.target; + var pt = this.propTarget; var model = em.getSelected(); - var um = em.get('UndoManager'); - var cc = em.get('CssComposer'); - var avoidInline = em.getConfig('avoidInlineStyle'); - - if (!model) { - return; - } + if (!model) return; - var id = model.getId(); var config = em.get('Config'); - var classes = model.get('classes'); - var pt = this.propTarget; var state = !config.devicePreviewMode ? model.get('state') : ''; - var opts = { state: state }; - var stateStr = state ? ':' + state : null; - var view = model.view; - var media = em.getCurrentMedia(); + var el = model.getEl(); pt.helper = null; - if (view) { - pt.computed = window.getComputedStyle(view.el, state ? ':' + state : null); + // Create computed style container + if (el) { + var stateStr = state ? ':' + state : null; + pt.computed = window.getComputedStyle(el, stateStr); } + // Create a new rule for the state as a helper var appendStateRule = function appendStateRule() { var style = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; - var sm = em.get('SelectorManager'); - var helperClass = sm.add('hc-state'); - var helperRule = cc.get([helperClass]); + var cc = em.get('CssComposer'); + var helperCls = 'hc-state'; + var rules = cc.getAll(); + var helperRule = cc.getClassRule(helperCls); if (!helperRule) { - helperRule = cc.add([helperClass]); + helperRule = cc.setClassRule(helperCls); } else { // I will make it last again, otherwise it could be overridden - var rules = cc.getAll(); rules.remove(helperRule); rules.add(helperRule); } @@ -39862,54 +39886,8 @@ module.exports = Backbone.View.extend({ pt.helper = helperRule; }; - // If true the model will be always a rule - if (avoidInline) { - var ruleId = cc.getIdRule(id, opts); - - if (!ruleId) { - model = cc.setIdRule(id, {}, opts); - } else { - model = ruleId; - } - } - - if (classes.length) { - var valid = classes.getStyleable(); - var iContainer = cc.get(valid, state, media); - - if (!iContainer && valid.length) { - // I stop undo manager here as after adding the CSSRule (generally after - // selecting the component) and calling undo() it will remove the rule from - // the collection, therefore updating it in style manager will not affect it - // #268 - um.stop(); - iContainer = cc.add(valid, state, media); - iContainer.setStyle(model.getStyle()); - model.setStyle({}); - um.start(); - } - - if (!iContainer) { - // In this case it's just a Component without any valid selector - pt.model = model; - pt.trigger('update'); - return; - } - - // If the state is not empty, there should be a helper rule in play - // The helper rule will get the same style of the iContainer - state && appendStateRule(iContainer.getStyle()); - - pt.model = iContainer; - pt.trigger('update'); - return; - } - - if (state) { - var ruleState = cc.getIdRule(id, opts); - state && appendStateRule(ruleState && ruleState.getStyle()); - } - + model = em.get('StyleManager').getModelToStyle(model); + state && appendStateRule(model.getStyle()); pt.model = model; pt.trigger('update'); }, diff --git a/dist/grapes.min.js b/dist/grapes.min.js index b3375c07b..101e529ed 100644 --- a/dist/grapes.min.js +++ b/dist/grapes.min.js @@ -1,5 +1,5 @@ -/*! grapesjs - 0.13.5 */ -!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.grapesjs=e():t.grapesjs=e()}(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var r=n[i]={i:i,l:!1,exports:{}};return t[i].call(r.exports,r,r.exports,e),r.l=!0,r.exports}var n={};return e.m=t,e.c=n,e.d=function(t,n,i){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:i})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=58)}([function(t,e,n){(function(i){var r,o;!function(s){var a="object"==typeof self&&self.self===self&&self||"object"==typeof i&&i.global===i&&i;r=[n(1),n(9),e],void 0!==(o=function(t,e,n){a.Backbone=s(a,n,t,e)}.apply(e,r))&&(t.exports=o)}(function(t,e,n,i){var r=t.Backbone,o=Array.prototype.slice;e.VERSION="1.3.3",e.$=i,e.noConflict=function(){return t.Backbone=r,this},e.emulateHTTP=!1,e.emulateJSON=!1;var s=function(t,e,i){switch(t){case 1:return function(){return n[e](this[i])};case 2:return function(t){return n[e](this[i],t)};case 3:return function(t,r){return n[e](this[i],l(t,this),r)};case 4:return function(t,r,o){return n[e](this[i],l(t,this),r,o)};default:return function(){var t=o.call(arguments);return t.unshift(this[i]),n[e].apply(n,t)}}},a=function(t,e,i){n.each(e,function(e,r){n[r]&&(t.prototype[r]=s(e,r,i))})},l=function(t,e){return n.isFunction(t)?t:n.isObject(t)&&!e._isModel(t)?c(t):n.isString(t)?function(e){return e.get(t)}:t},c=function(t){var e=n.matches(t);return function(t){return e(t.attributes)}},u=e.Events={},h=/\s+/,d=function(t,e,i,r,o){var s,a=0;if(i&&"object"==typeof i){void 0!==r&&"context"in o&&void 0===o.context&&(o.context=r);for(s=n.keys(i);a