tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge remote-tracking branch 'github/dev' into optional-url-input

pull/2602/head
Juan 7 years ago
parent
c22e3ec06e 84fa97b622
commit
c8ed3307a2
15 changed files with 514 additions and 184 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 413
      dist/grapes.js
  2. 8
      dist/grapes.min.js
  3. 2
      dist/grapes.min.js.map
  4. 43
      package-lock.json
  5. 2
      package.json
  6. 12
      src/canvas/view/CanvasView.js
  7. 4
      src/commands/view/Preview.js
  8. 2
      src/css_composer/model/CssRule.js
  9. 13
      src/navigator/view/ItemView.js
  10. 10
      src/style_manager/index.js
  11. 2
      src/style_manager/model/Layer.js
  12. 2
      src/style_manager/view/PropertyCompositeView.js
  13. 127
      src/style_manager/view/PropertyStackView.js
  14. 53
      src/style_manager/view/PropertyView.js
  15. 5
      src/utils/mixins.js

413
dist/grapes.js
View File

@ -22772,12 +22772,12 @@ var timerZoom;
* Get javascript container * Get javascript container
* @private * @private
*/ */
getJsContainer: function getJsContainer() { getJsContainer: function getJsContainer(view) {
if (!this.jsContainer) { var frameView = this.getFrameView(view);
this.jsContainer = $("<div class=\"".concat(this.ppfx, "js-cont\">")).get(0); return frameView && frameView.getJsContainer();
} },
getFrameView: function getFrameView(view) {
return this.jsContainer; return view && view._getFrame() || this.em.get('currentFrame');
}, },
render: function render() { render: function render() {
var el = this.el, var el = this.el,
@ -24397,12 +24397,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
ed.select(selAll); ed.select(selAll);
sel.emitUpdate(); sel.emitUpdate();
em.trigger("".concat(dom_components_model_Component__WEBPACK_IMPORTED_MODULE_5__["eventDrag"], ":end"), data); em.trigger("".concat(dom_components_model_Component__WEBPACK_IMPORTED_MODULE_5__["eventDrag"], ":end"), data);
}; }; // Dirty patch to prevent parent selection on drop
if (Object(underscore__WEBPACK_IMPORTED_MODULE_2__["includes"])(modes, mode)) {
// Dirty patch to prevent parent selection on drop
em.set('_cmpDrag', 1); // TODO move grabbing func in editor/canvas from the Sorter
em.set('_cmpDrag', 1);
if (Object(underscore__WEBPACK_IMPORTED_MODULE_2__["includes"])(modes, mode)) {
// TODO move grabbing func in editor/canvas from the Sorter
dragger = ed.runCommand('core:component-drag', { dragger = ed.runCommand('core:component-drag', {
guidesInfo: 1, guidesInfo: 1,
mode: mode, mode: mode,
@ -28553,7 +28554,7 @@ __webpack_require__.r(__webpack_exports__);
var addSelector = this.get('selectorsAdd'); var addSelector = this.get('selectorsAdd');
var isBody = wrapper && em && em.getConfig('wrapperIsBody'); var isBody = wrapper && em && em.getConfig('wrapperIsBody');
var selectors = isBody ? 'body' : this.get('selectors').getFullString(); var selectors = isBody ? 'body' : this.get('selectors').getFullString();
var stateStr = state ? ":".concat(state) : ''; var stateStr = state && !opts.skipState ? ":".concat(state) : '';
selectors && result.push("".concat(selectors).concat(stateStr)); selectors && result.push("".concat(selectors).concat(stateStr));
addSelector && !opts.skipAdd && result.push(addSelector); addSelector && !opts.skipAdd && result.push(addSelector);
return result.join(', '); return result.join(', ');
@ -29373,14 +29374,15 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _model_ComponentScript__WEBPACK_IMPORTED_MODULE_31__ = __webpack_require__(/*! ./model/ComponentScript */ "./src/dom_components/model/ComponentScript.js"); /* harmony import */ var _model_ComponentScript__WEBPACK_IMPORTED_MODULE_31__ = __webpack_require__(/*! ./model/ComponentScript */ "./src/dom_components/model/ComponentScript.js");
/* harmony import */ var _view_ComponentScriptView__WEBPACK_IMPORTED_MODULE_32__ = __webpack_require__(/*! ./view/ComponentScriptView */ "./src/dom_components/view/ComponentScriptView.js"); /* harmony import */ var _view_ComponentScriptView__WEBPACK_IMPORTED_MODULE_32__ = __webpack_require__(/*! ./view/ComponentScriptView */ "./src/dom_components/view/ComponentScriptView.js");
/* harmony import */ var _model_ComponentSvg__WEBPACK_IMPORTED_MODULE_33__ = __webpack_require__(/*! ./model/ComponentSvg */ "./src/dom_components/model/ComponentSvg.js"); /* harmony import */ var _model_ComponentSvg__WEBPACK_IMPORTED_MODULE_33__ = __webpack_require__(/*! ./model/ComponentSvg */ "./src/dom_components/model/ComponentSvg.js");
/* harmony import */ var _view_ComponentSvgView__WEBPACK_IMPORTED_MODULE_34__ = __webpack_require__(/*! ./view/ComponentSvgView */ "./src/dom_components/view/ComponentSvgView.js"); /* harmony import */ var _model_ComponentSvgIn__WEBPACK_IMPORTED_MODULE_34__ = __webpack_require__(/*! ./model/ComponentSvgIn */ "./src/dom_components/model/ComponentSvgIn.js");
/* harmony import */ var _model_ComponentComment__WEBPACK_IMPORTED_MODULE_35__ = __webpack_require__(/*! ./model/ComponentComment */ "./src/dom_components/model/ComponentComment.js"); /* harmony import */ var _view_ComponentSvgView__WEBPACK_IMPORTED_MODULE_35__ = __webpack_require__(/*! ./view/ComponentSvgView */ "./src/dom_components/view/ComponentSvgView.js");
/* harmony import */ var _view_ComponentCommentView__WEBPACK_IMPORTED_MODULE_36__ = __webpack_require__(/*! ./view/ComponentCommentView */ "./src/dom_components/view/ComponentCommentView.js"); /* harmony import */ var _model_ComponentComment__WEBPACK_IMPORTED_MODULE_36__ = __webpack_require__(/*! ./model/ComponentComment */ "./src/dom_components/model/ComponentComment.js");
/* harmony import */ var _model_ComponentTextNode__WEBPACK_IMPORTED_MODULE_37__ = __webpack_require__(/*! ./model/ComponentTextNode */ "./src/dom_components/model/ComponentTextNode.js"); /* harmony import */ var _view_ComponentCommentView__WEBPACK_IMPORTED_MODULE_37__ = __webpack_require__(/*! ./view/ComponentCommentView */ "./src/dom_components/view/ComponentCommentView.js");
/* harmony import */ var _view_ComponentTextNodeView__WEBPACK_IMPORTED_MODULE_38__ = __webpack_require__(/*! ./view/ComponentTextNodeView */ "./src/dom_components/view/ComponentTextNodeView.js"); /* harmony import */ var _model_ComponentTextNode__WEBPACK_IMPORTED_MODULE_38__ = __webpack_require__(/*! ./model/ComponentTextNode */ "./src/dom_components/model/ComponentTextNode.js");
/* harmony import */ var _model_ComponentText__WEBPACK_IMPORTED_MODULE_39__ = __webpack_require__(/*! ./model/ComponentText */ "./src/dom_components/model/ComponentText.js"); /* harmony import */ var _view_ComponentTextNodeView__WEBPACK_IMPORTED_MODULE_39__ = __webpack_require__(/*! ./view/ComponentTextNodeView */ "./src/dom_components/view/ComponentTextNodeView.js");
/* harmony import */ var _view_ComponentTextView__WEBPACK_IMPORTED_MODULE_40__ = __webpack_require__(/*! ./view/ComponentTextView */ "./src/dom_components/view/ComponentTextView.js"); /* harmony import */ var _model_ComponentText__WEBPACK_IMPORTED_MODULE_40__ = __webpack_require__(/*! ./model/ComponentText */ "./src/dom_components/model/ComponentText.js");
/* harmony import */ var _model_ComponentWrapper__WEBPACK_IMPORTED_MODULE_41__ = __webpack_require__(/*! ./model/ComponentWrapper */ "./src/dom_components/model/ComponentWrapper.js"); /* harmony import */ var _view_ComponentTextView__WEBPACK_IMPORTED_MODULE_41__ = __webpack_require__(/*! ./view/ComponentTextView */ "./src/dom_components/view/ComponentTextView.js");
/* harmony import */ var _model_ComponentWrapper__WEBPACK_IMPORTED_MODULE_42__ = __webpack_require__(/*! ./model/ComponentWrapper */ "./src/dom_components/model/ComponentWrapper.js");
@ -29455,6 +29457,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
/* harmony default export */ __webpack_exports__["default"] = (function () { /* harmony default export */ __webpack_exports__["default"] = (function () {
@ -29510,25 +29513,29 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
id: 'script', id: 'script',
model: _model_ComponentScript__WEBPACK_IMPORTED_MODULE_31__["default"], model: _model_ComponentScript__WEBPACK_IMPORTED_MODULE_31__["default"],
view: _view_ComponentScriptView__WEBPACK_IMPORTED_MODULE_32__["default"] view: _view_ComponentScriptView__WEBPACK_IMPORTED_MODULE_32__["default"]
}, {
id: 'svg-in',
model: _model_ComponentSvgIn__WEBPACK_IMPORTED_MODULE_34__["default"],
view: _view_ComponentSvgView__WEBPACK_IMPORTED_MODULE_35__["default"]
}, { }, {
id: 'svg', id: 'svg',
model: _model_ComponentSvg__WEBPACK_IMPORTED_MODULE_33__["default"], model: _model_ComponentSvg__WEBPACK_IMPORTED_MODULE_33__["default"],
view: _view_ComponentSvgView__WEBPACK_IMPORTED_MODULE_34__["default"] view: _view_ComponentSvgView__WEBPACK_IMPORTED_MODULE_35__["default"]
}, { }, {
id: 'comment', id: 'comment',
model: _model_ComponentComment__WEBPACK_IMPORTED_MODULE_35__["default"], model: _model_ComponentComment__WEBPACK_IMPORTED_MODULE_36__["default"],
view: _view_ComponentCommentView__WEBPACK_IMPORTED_MODULE_36__["default"] view: _view_ComponentCommentView__WEBPACK_IMPORTED_MODULE_37__["default"]
}, { }, {
id: 'textnode', id: 'textnode',
model: _model_ComponentTextNode__WEBPACK_IMPORTED_MODULE_37__["default"], model: _model_ComponentTextNode__WEBPACK_IMPORTED_MODULE_38__["default"],
view: _view_ComponentTextNodeView__WEBPACK_IMPORTED_MODULE_38__["default"] view: _view_ComponentTextNodeView__WEBPACK_IMPORTED_MODULE_39__["default"]
}, { }, {
id: 'text', id: 'text',
model: _model_ComponentText__WEBPACK_IMPORTED_MODULE_39__["default"], model: _model_ComponentText__WEBPACK_IMPORTED_MODULE_40__["default"],
view: _view_ComponentTextView__WEBPACK_IMPORTED_MODULE_40__["default"] view: _view_ComponentTextView__WEBPACK_IMPORTED_MODULE_41__["default"]
}, { }, {
id: 'wrapper', id: 'wrapper',
model: _model_ComponentWrapper__WEBPACK_IMPORTED_MODULE_41__["default"], model: _model_ComponentWrapper__WEBPACK_IMPORTED_MODULE_42__["default"],
view: _view_ComponentView__WEBPACK_IMPORTED_MODULE_7__["default"] view: _view_ComponentView__WEBPACK_IMPORTED_MODULE_7__["default"]
}, { }, {
id: 'default', id: 'default',
@ -31973,6 +31980,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
/* harmony default export */ __webpack_exports__["default"] = (_Component__WEBPACK_IMPORTED_MODULE_1__["default"].extend({ /* harmony default export */ __webpack_exports__["default"] = (_Component__WEBPACK_IMPORTED_MODULE_1__["default"].extend({
defaults: _objectSpread({}, _Component__WEBPACK_IMPORTED_MODULE_1__["default"].prototype.defaults, { defaults: _objectSpread({}, _Component__WEBPACK_IMPORTED_MODULE_1__["default"].prototype.defaults, {
resizable: {
ratioDefault: 1
},
highlightable: 0 highlightable: 0
}), }),
getName: function getName() { getName: function getName() {
@ -31984,14 +31994,51 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
}, { }, {
isComponent: function isComponent(el) { isComponent: function isComponent(el) {
if (SVGElement && el instanceof SVGElement) { if (SVGElement && el instanceof SVGElement) {
// Some SVG elements require uppercase letters (eg. <linearGradient>) return {
var tagName = el.tagName; // Make the root resizable tagName: el.tagName,
type: 'svg'
};
}
}
}));
/***/ }),
var resizable = tagName == 'svg' ? true : false; /***/ "./src/dom_components/model/ComponentSvgIn.js":
/*!****************************************************!*\
!*** ./src/dom_components/model/ComponentSvgIn.js ***!
\****************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__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 _ComponentSvg__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ComponentSvg */ "./src/dom_components/model/ComponentSvg.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; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
/**
* Component for inner SVG elements
*/
/* harmony default export */ __webpack_exports__["default"] = (_ComponentSvg__WEBPACK_IMPORTED_MODULE_1__["default"].extend({
defaults: _objectSpread({}, _ComponentSvg__WEBPACK_IMPORTED_MODULE_1__["default"].prototype.defaults, {
selectable: false,
hoverable: false,
layerable: false
})
}, {
isComponent: function isComponent(el) {
if (_ComponentSvg__WEBPACK_IMPORTED_MODULE_1__["default"].isComponent(el) && el.tagName.toLowerCase() !== 'svg') {
return { return {
tagName: tagName, tagName: el.tagName,
type: 'svg', type: 'svg-in'
resizable: resizable
}; };
} }
} }
@ -37940,7 +37987,7 @@ var defaultConfig = {
editors: editors, editors: editors,
plugins: plugins, plugins: plugins,
// Will be replaced on build // Will be replaced on build
version: '0.15.15', version: '0.15.18',
/** /**
* Initialize the editor with passed options * Initialize the editor with passed options
@ -44235,7 +44282,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
* @return {Model} * @return {Model}
*/ */
getModelToStyle: function getModelToStyle(model) { getModelToStyle: function getModelToStyle(model) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var em = c.em; var em = c.em;
var skipAdd = options.skipAdd;
var classes = model.get('classes'); var classes = model.get('classes');
var id = model.getId(); var id = model.getId();
@ -44248,6 +44297,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
var state = !config.devicePreviewMode ? em.get('state') : ''; var state = !config.devicePreviewMode ? em.get('state') : '';
var valid = classes.getStyleable(); var valid = classes.getStyleable();
var hasClasses = valid.length; var hasClasses = valid.length;
var useClasses = !smConf.componentFirst || options.useClasses;
var opts = { var opts = {
state: state state: state
}; };
@ -44258,16 +44308,16 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
um.stop(); um.stop();
if (hasClasses && !smConf.componentFirst) { if (hasClasses && useClasses) {
var deviceW = em.getCurrentMedia(); var deviceW = em.getCurrentMedia();
rule = cssC.get(valid, state, deviceW); rule = cssC.get(valid, state, deviceW);
if (!rule) { if (!rule && !skipAdd) {
rule = cssC.add(valid, state, deviceW); rule = cssC.add(valid, state, deviceW);
} }
} else if (config.avoidInlineStyle) { } else if (config.avoidInlineStyle) {
rule = cssC.getIdRule(id, opts); rule = cssC.getIdRule(id, opts);
!rule && (rule = cssC.setIdRule(id, {}, opts)); !rule && !skipAdd && (rule = cssC.setIdRule(id, {}, opts));
if (model.is('wrapper')) rule.set('wrapper', 1); if (model.is('wrapper')) rule.set('wrapper', 1);
} }
@ -44448,7 +44498,7 @@ __webpack_require__.r(__webpack_exports__);
this.get('properties').each(function (prop) { this.get('properties').each(function (prop) {
return result.push(prop.getFullValue()); return result.push(prop.getFullValue());
}); });
return result.join(' '); return result.join(' ').trim();
} }
})); }));
@ -46188,7 +46238,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
/* harmony default export */ __webpack_exports__["default"] = (_PropertyRadio__WEBPACK_IMPORTED_MODULE_1__["default"].extend({ /* harmony default export */ __webpack_exports__["default"] = (_PropertyRadio__WEBPACK_IMPORTED_MODULE_1__["default"].extend({
defaults: function defaults() { defaults: function defaults() {
return _objectSpread({}, _PropertyRadio__WEBPACK_IMPORTED_MODULE_1__["default"].prototype.defaults, { return _objectSpread({}, _PropertyRadio__WEBPACK_IMPORTED_MODULE_1__["default"].prototype.defaults(), {
full: 0 full: 0
}); });
} }
@ -46857,13 +46907,21 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
"use strict"; "use strict";
__webpack_require__.r(__webpack_exports__); __webpack_require__.r(__webpack_exports__);
/* harmony import */ var backbone__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! backbone */ "./node_modules/backbone/backbone.js"); /* 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 backbone__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(backbone__WEBPACK_IMPORTED_MODULE_0__); /* 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 _PropertyView__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./PropertyView */ "./src/style_manager/view/PropertyView.js"); /* 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 _PropertyView__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./PropertyView */ "./src/style_manager/view/PropertyView.js");
var $ = backbone__WEBPACK_IMPORTED_MODULE_0___default.a.$; 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; }
/* harmony default export */ __webpack_exports__["default"] = (_PropertyView__WEBPACK_IMPORTED_MODULE_1__["default"].extend({
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
var $ = backbone__WEBPACK_IMPORTED_MODULE_1___default.a.$;
/* harmony default export */ __webpack_exports__["default"] = (_PropertyView__WEBPACK_IMPORTED_MODULE_2__["default"].extend({
templateInput: function templateInput() { templateInput: function templateInput() {
var pfx = this.pfx; var pfx = this.pfx;
return "\n <div class=\"".concat(pfx, "field ").concat(pfx, "composite\">\n <span id=\"").concat(pfx, "input-holder\"></span>\n </div>\n "); return "\n <div class=\"".concat(pfx, "field ").concat(pfx, "composite\">\n <span id=\"").concat(pfx, "input-holder\"></span>\n </div>\n ");
@ -46876,7 +46934,7 @@ var $ = backbone__WEBPACK_IMPORTED_MODULE_0___default.a.$;
args[_key] = arguments[_key]; args[_key] = arguments[_key];
} }
_PropertyView__WEBPACK_IMPORTED_MODULE_1__["default"].prototype.inputValueChanged.apply(this, args); _PropertyView__WEBPACK_IMPORTED_MODULE_2__["default"].prototype.inputValueChanged.apply(this, args);
} }
}, },
clear: function clear(e) { clear: function clear(e) {
@ -46884,7 +46942,7 @@ var $ = backbone__WEBPACK_IMPORTED_MODULE_0___default.a.$;
props && props.forEach(function (propView) { props && props.forEach(function (propView) {
return propView.clear(); return propView.clear();
}); });
_PropertyView__WEBPACK_IMPORTED_MODULE_1__["default"].prototype.clear.apply(this, arguments); _PropertyView__WEBPACK_IMPORTED_MODULE_2__["default"].prototype.clear.apply(this, arguments);
}, },
/** /**
@ -46936,7 +46994,9 @@ var $ = backbone__WEBPACK_IMPORTED_MODULE_0___default.a.$;
var that = this; var that = this;
var model = this.model; var model = this.model;
var result = { var result = {
config: this.config, config: _objectSpread({}, this.config, {
highlightComputed: 0
}),
collection: this.props, collection: this.props,
target: this.target, target: this.target,
propTarget: this.propTarget, propTarget: this.propTarget,
@ -46985,7 +47045,7 @@ var $ = backbone__WEBPACK_IMPORTED_MODULE_0___default.a.$;
return value; return value;
}, },
clearCached: function clearCached() { clearCached: function clearCached() {
_PropertyView__WEBPACK_IMPORTED_MODULE_1__["default"].prototype.clearCached.apply(this, arguments); _PropertyView__WEBPACK_IMPORTED_MODULE_2__["default"].prototype.clearCached.apply(this, arguments);
this.$input = null; this.$input = null;
this.props = null; this.props = null;
this.$props = null; this.$props = null;
@ -47410,9 +47470,12 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(underscore__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(underscore__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _PropertyCompositeView__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./PropertyCompositeView */ "./src/style_manager/view/PropertyCompositeView.js"); /* harmony import */ var _PropertyCompositeView__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./PropertyCompositeView */ "./src/style_manager/view/PropertyCompositeView.js");
/* harmony import */ var _LayersView__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./LayersView */ "./src/style_manager/view/LayersView.js"); /* harmony import */ var _LayersView__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./LayersView */ "./src/style_manager/view/LayersView.js");
/* harmony import */ var code_manager_model_CssGenerator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! code_manager/model/CssGenerator */ "./src/code_manager/model/CssGenerator.js");
var cssGen = new code_manager_model_CssGenerator__WEBPACK_IMPORTED_MODULE_3__["default"]();
/* harmony default export */ __webpack_exports__["default"] = (_PropertyCompositeView__WEBPACK_IMPORTED_MODULE_1__["default"].extend({ /* harmony default export */ __webpack_exports__["default"] = (_PropertyCompositeView__WEBPACK_IMPORTED_MODULE_1__["default"].extend({
templateInput: function templateInput() { templateInput: function templateInput() {
var pfx = this.pfx; var pfx = this.pfx;
@ -47442,6 +47505,10 @@ __webpack_require__.r(__webpack_exports__);
_PropertyCompositeView__WEBPACK_IMPORTED_MODULE_1__["default"].prototype.targetUpdated.apply(this, args); _PropertyCompositeView__WEBPACK_IMPORTED_MODULE_1__["default"].prototype.targetUpdated.apply(this, args);
} else { } else {
var _this$_getTargetData = this._getTargetData(),
status = _this$_getTargetData.status;
this.setStatus(status);
this.checkVisibility(); this.checkVisibility();
} }
@ -47512,30 +47579,144 @@ __webpack_require__.r(__webpack_exports__);
getLayerValues: function getLayerValues() { getLayerValues: function getLayerValues() {
return this.getLayers().getFullValue(); return this.getLayers().getFullValue();
}, },
_getClassRule: function _getClassRule() {
var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var em = this.em;
var _opts$skipAdd = opts.skipAdd,
skipAdd = _opts$skipAdd === void 0 ? 1 : _opts$skipAdd;
var selected = em.getSelected();
var targetAlt = em.get('StyleManager').getModelToStyle(selected, {
skipAdd: skipAdd,
useClasses: 1
});
return targetAlt !== selected && targetAlt;
},
/**
* Return the parent style rule of the passed one
* @private
*/
_getParentTarget: function _getParentTarget(target) {
var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var em = this.em,
model = this.model;
var property = model.get('property');
var isValid = opts.isValid || function (rule) {
return rule.getStyle()[property];
};
var targetsDevice = em.get('CssComposer').getAll().filter(function (rule) {
return rule.selectorsToString() === target.getSelectorsString();
});
var map = targetsDevice.reduce(function (acc, rule) {
acc[rule.getAtRule()] = rule;
return acc;
}, {});
var mapSorted = cssGen.sortMediaObject(map);
var sortedRules = mapSorted.map(function (item) {
return item.value;
});
var currIndex = sortedRules.indexOf(target);
var rulesToCheck = sortedRules.splice(0, currIndex);
var result;
for (var i = rulesToCheck.length - 1; i > -1; i--) {
var rule = rulesToCheck[i];
if (isValid(rule)) {
// only for not detached
result = rule;
break;
}
}
return result;
},
/** /**
* Refresh layers * Refresh layers
* */ * */
refreshLayers: function refreshLayers() { refreshLayers: function refreshLayers() {
var layersObj = []; var layersObj = [];
var model = this.model; var model = this.model,
em = this.em;
var layers = this.getLayers(); var layers = this.getLayers();
var detached = model.get('detached'); var detached = model.get('detached');
var target = this.getTarget(); // With detached layers values will be assigned to their properties var property = model.get('property');
var target = this.getTarget();
var valueComput = this.getComputedValue();
var selected = em.getSelected();
var resultValue, style, targetAlt, targetAltDevice, valueTargetAlt, valueTrgAltDvc; // With detached layers values will be assigned to their properties
if (detached) { if (detached) {
var style = target ? target.getStyle() : {}; style = target ? target.getStyle() : {};
var hasDetachedStyle = function hasDetachedStyle(rule) {
var name = model.get('properties').at(0).get('property');
return rule && !Object(underscore__WEBPACK_IMPORTED_MODULE_0__["isUndefined"])(rule.getStyle()[name]);
}; // If the style object is empty but the target has a computed value,
// that means the style might exist in some other place
if (!Object(underscore__WEBPACK_IMPORTED_MODULE_0__["keys"])(style).length && valueComput && selected) {
// Styles of the same target but with a higher rule
var parentOpts = {
isValid: function isValid(rule) {
return hasDetachedStyle(rule);
}
};
targetAltDevice = this._getParentTarget(target, parentOpts);
if (targetAltDevice) {
style = targetAltDevice.getStyle();
} else {
// The target is a component but the style is in the class rules
targetAlt = this._getClassRule();
valueTargetAlt = hasDetachedStyle(targetAlt) && targetAlt.getStyle();
targetAltDevice = !valueTargetAlt && this._getParentTarget(this._getClassRule({
skipAdd: 0
}), parentOpts);
valueTrgAltDvc = hasDetachedStyle(targetAltDevice) && targetAltDevice.getStyle();
style = valueTargetAlt || valueTrgAltDvc || {};
}
}
resultValue = style;
layersObj = layers.getLayersFromStyle(style); layersObj = layers.getLayersFromStyle(style);
} else { } else {
var value = this.getTargetValue({ var valueTrg = this.getTargetValue({
ignoreDefault: 1 ignoreDefault: 1
}); });
if (!value) value = this.getComputedValue(); var value = valueTrg; // Try to check if the style is in another rule
if (!value && valueComput) {
// Styles of the same target but with a higher rule
targetAltDevice = this._getParentTarget(target);
if (targetAltDevice) {
value = targetAltDevice.getStyle()[property];
} else {
// Computed value is not always reliable due to the browser's CSSOM parser
// here we try to look for the style in class rules
targetAlt = this._getClassRule();
valueTargetAlt = targetAlt && targetAlt.getStyle()[property];
targetAltDevice = !valueTargetAlt && this._getParentTarget(this._getClassRule({
skipAdd: 0
}));
valueTrgAltDvc = targetAltDevice && targetAltDevice.getStyle()[property];
value = valueTargetAlt || valueTrgAltDvc || valueComput;
}
}
value = value == model.getDefaultValue() ? '' : value; value = value == model.getDefaultValue() ? '' : value;
resultValue = value;
layersObj = layers.getLayersFromValue(value); layersObj = layers.getLayersFromValue(value);
} }
var toAdd = model.getLayersFromTarget(target) || layersObj; var toAdd = model.getLayersFromTarget(target, {
resultValue: resultValue
}) || layersObj;
layers.reset(); layers.reset();
layers.add(toAdd); layers.add(toAdd);
model.set({ model.set({
@ -47617,25 +47798,28 @@ __webpack_require__.r(__webpack_exports__);
"use strict"; "use strict";
__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_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/objectWithoutProperties */ "./node_modules/@babel/runtime/helpers/objectWithoutProperties.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 _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var backbone__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! backbone */ "./node_modules/backbone/backbone.js"); /* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ "./node_modules/@babel/runtime/helpers/defineProperty.js");
/* harmony import */ var backbone__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(backbone__WEBPACK_IMPORTED_MODULE_1__); /* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! underscore */ "./node_modules/underscore/underscore.js"); /* harmony import */ var backbone__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! backbone */ "./node_modules/backbone/backbone.js");
/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(underscore__WEBPACK_IMPORTED_MODULE_2__); /* harmony import */ var backbone__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(backbone__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var utils_mixins__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! utils/mixins */ "./src/utils/mixins.js"); /* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! underscore */ "./node_modules/underscore/underscore.js");
/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(underscore__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var utils_mixins__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! utils/mixins */ "./src/utils/mixins.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; } 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; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default()(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
var clearProp = 'data-clear-style'; var clearProp = 'data-clear-style';
/* harmony default export */ __webpack_exports__["default"] = (backbone__WEBPACK_IMPORTED_MODULE_1___default.a.View.extend({ /* harmony default export */ __webpack_exports__["default"] = (backbone__WEBPACK_IMPORTED_MODULE_2___default.a.View.extend({
template: function template(model) { template: function template(model) {
var pfx = this.pfx; var pfx = this.pfx;
return "\n <div class=\"".concat(pfx, "label\">\n ").concat(this.templateLabel(model), "\n </div>\n <div class=\"").concat(this.ppfx, "fields\">\n ").concat(this.templateInput(model), "\n </div>\n "); return "\n <div class=\"".concat(pfx, "label\">\n ").concat(this.templateLabel(model), "\n </div>\n <div class=\"").concat(this.ppfx, "fields\">\n ").concat(this.templateInput(model), "\n </div>\n ");
@ -47657,14 +47841,14 @@ var clearProp = 'data-clear-style';
templateInput: function templateInput(model) { templateInput: function templateInput(model) {
return "\n <div class=\"".concat(this.ppfx, "field\">\n <input placeholder=\"").concat(model.getDefaultValue(), "\"/>\n </div>\n "); return "\n <div class=\"".concat(this.ppfx, "field\">\n <input placeholder=\"").concat(model.getDefaultValue(), "\"/>\n </div>\n ");
}, },
events: _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()({ events: _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default()({
change: 'inputValueChanged' change: 'inputValueChanged'
}, "click [".concat(clearProp, "]"), 'clear'), }, "click [".concat(clearProp, "]"), 'clear'),
initialize: function initialize() { initialize: function initialize() {
var _this = this; var _this = this;
var o = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; var o = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
Object(underscore__WEBPACK_IMPORTED_MODULE_2__["bindAll"])(this, 'targetUpdated'); Object(underscore__WEBPACK_IMPORTED_MODULE_3__["bindAll"])(this, 'targetUpdated');
this.config = o.config || {}; this.config = o.config || {};
var em = this.config.em; var em = this.config.em;
this.em = em; this.em = em;
@ -47819,33 +48003,20 @@ var clearProp = 'data-clear-style';
var parent = this.model.parent; var parent = this.model.parent;
parent && value == 'updated' && parent.set('status', value); parent && value == 'updated' && parent.set('status', value);
}, },
emitUpdateTarget: Object(underscore__WEBPACK_IMPORTED_MODULE_2__["debounce"])(function () { emitUpdateTarget: Object(underscore__WEBPACK_IMPORTED_MODULE_3__["debounce"])(function () {
var em = this.config.em; var em = this.config.em;
em && em.trigger('styleManager:update:target', this.getTarget()); em && em.trigger('styleManager:update:target', this.getTarget());
}), }),
_getTargetData: function _getTargetData() {
/** var model = this.model,
* Fired when the target is changed config = this.config;
* */
targetUpdated: function targetUpdated(mod, val) {
var opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
this.emitUpdateTarget();
if (!this.checkVisibility()) {
return;
}
var config = this.config;
var em = config.em;
var model = this.model;
var property = model.get('property');
var value = '';
var status = '';
var targetValue = this.getTargetValue({ var targetValue = this.getTargetValue({
ignoreDefault: 1 ignoreDefault: 1
}); });
var defaultValue = model.getDefaultValue(); var defaultValue = model.getDefaultValue();
var computedValue = this.getComputedValue(); var computedValue = this.getComputedValue();
var value = '';
var status = '';
if (targetValue) { if (targetValue) {
value = targetValue; value = targetValue;
@ -47864,19 +48035,47 @@ var clearProp = 'data-clear-style';
status = ''; status = '';
} }
return {
value: value,
status: status,
targetValue: targetValue,
defaultValue: defaultValue,
computedValue: computedValue
};
},
/**
* Fired when the target is changed
* */
targetUpdated: function targetUpdated(mod, val) {
var opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
this.emitUpdateTarget();
if (!this.checkVisibility()) {
return;
}
var config = this.config;
var em = config.em;
var model = this.model;
var property = model.get('property');
var _this$_getTargetData = this._getTargetData(),
status = _this$_getTargetData.status,
value = _this$_getTargetData.value,
targetData = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_0___default()(_this$_getTargetData, ["status", "value"]);
this.setStatus(status); this.setStatus(status);
model.setValue(value, 0, _objectSpread({ model.setValue(value, 0, _objectSpread({
fromTarget: 1 fromTarget: 1
}, opts)); }, opts));
if (em) { if (em) {
var data = { var data = _objectSpread({
status: status, status: status,
targetValue: targetValue,
defaultValue: defaultValue,
computedValue: computedValue,
value: value value: value
}; }, targetData);
em.trigger('styleManager:change', this, property, value, data); em.trigger('styleManager:change', this, property, value, data);
em.trigger("styleManager:change:".concat(property), this, value, data); em.trigger("styleManager:change:".concat(property), this, value, data);
@ -47978,7 +48177,7 @@ var clearProp = 'data-clear-style';
var property = this.model.get('property'); var property = this.model.get('property');
var notToSkip = avoid.indexOf(property) < 0; var notToSkip = avoid.indexOf(property) < 0;
var value = computed[property]; var value = computed[property];
var valueDef = computedDef[Object(utils_mixins__WEBPACK_IMPORTED_MODULE_3__["camelCase"])(property)]; var valueDef = computedDef[Object(utils_mixins__WEBPACK_IMPORTED_MODULE_4__["camelCase"])(property)];
return computed && notToSkip && valueDef !== value && value || ''; return computed && notToSkip && valueDef !== value && value || '';
}, },
@ -48095,12 +48294,12 @@ var clearProp = 'data-clear-style';
var stylable = trg.get('stylable'); // Stylable could also be an array indicating with which property var stylable = trg.get('stylable'); // Stylable could also be an array indicating with which property
// the target could be styled // the target could be styled
if (Object(underscore__WEBPACK_IMPORTED_MODULE_2__["isArray"])(stylable)) { if (Object(underscore__WEBPACK_IMPORTED_MODULE_3__["isArray"])(stylable)) {
stylable = stylable.indexOf(property) >= 0; stylable = stylable.indexOf(property) >= 0;
} // Check if the property was signed as unstylable } // Check if the property was signed as unstylable
if (Object(underscore__WEBPACK_IMPORTED_MODULE_2__["isArray"])(unstylable)) { if (Object(underscore__WEBPACK_IMPORTED_MODULE_3__["isArray"])(unstylable)) {
stylable = unstylable.indexOf(property) < 0; stylable = unstylable.indexOf(property) < 0;
} // Check if the property is available only if requested } // Check if the property is available only if requested
@ -48114,9 +48313,9 @@ var clearProp = 'data-clear-style';
var properties = Object.keys(requires); var properties = Object.keys(requires);
sectors.each(function (sector) { sectors.each(function (sector) {
sector.get('properties').each(function (model) { sector.get('properties').each(function (model) {
if (Object(underscore__WEBPACK_IMPORTED_MODULE_2__["includes"])(properties, model.id)) { if (Object(underscore__WEBPACK_IMPORTED_MODULE_3__["includes"])(properties, model.id)) {
var values = requires[model.id]; var values = requires[model.id];
stylable = stylable && Object(underscore__WEBPACK_IMPORTED_MODULE_2__["includes"])(values, model.get('value')); stylable = stylable && Object(underscore__WEBPACK_IMPORTED_MODULE_3__["includes"])(values, model.get('value'));
} }
}); });
}); });
@ -48129,8 +48328,8 @@ var clearProp = 'data-clear-style';
if (parentEl) { if (parentEl) {
var styles = window.getComputedStyle(parentEl); var styles = window.getComputedStyle(parentEl);
Object(underscore__WEBPACK_IMPORTED_MODULE_2__["each"])(requiresParent, function (values, property) { Object(underscore__WEBPACK_IMPORTED_MODULE_3__["each"])(requiresParent, function (values, property) {
stylable = stylable && styles[property] && Object(underscore__WEBPACK_IMPORTED_MODULE_2__["includes"])(values, styles[property]); stylable = stylable && styles[property] && Object(underscore__WEBPACK_IMPORTED_MODULE_3__["includes"])(values, styles[property]);
}); });
} else { } else {
stylable = false; stylable = false;
@ -48175,7 +48374,7 @@ var clearProp = 'data-clear-style';
* */ * */
setValue: function setValue(value) { setValue: function setValue(value) {
var model = this.model; var model = this.model;
var val = Object(underscore__WEBPACK_IMPORTED_MODULE_2__["isUndefined"])(value) ? model.getDefaultValue() : value; var val = Object(underscore__WEBPACK_IMPORTED_MODULE_3__["isUndefined"])(value) ? model.getDefaultValue() : value;
var input = this.getInputEl(); var input = this.getInputEl();
input && (input.value = val); input && (input.value = val);
}, },
@ -49702,10 +49901,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
config = _objectSpread({}, opts, {}, configDef); config = _objectSpread({}, opts, {}, configDef);
em = config.em; em = config.em;
this.em = em; this.em = em;
um = new backbone_undo__WEBPACK_IMPORTED_MODULE_1___default.a({ um = new backbone_undo__WEBPACK_IMPORTED_MODULE_1___default.a(_objectSpread({
track: true, track: true,
register: [] register: []
}); }, config));
um.changeUndoType('change', { um.changeUndoType('change', {
condition: false condition: false
}); });
@ -52879,7 +53078,7 @@ function () {
top = _target$getStyle.top, top = _target$getStyle.top,
position = _target$getStyle.position; position = _target$getStyle.position;
comp.setStyle({ comp.addStyle({
left: left, left: left,
top: top, top: top,
position: position position: position
@ -54649,13 +54848,19 @@ var $ = backbone__WEBPACK_IMPORTED_MODULE_1___default.a.$;
this.selectTargetModel(); this.selectTargetModel();
this.toggleSortCursor(); this.toggleSortCursor();
this.toMove = null; this.toMove = null;
Object(underscore__WEBPACK_IMPORTED_MODULE_2__["isFunction"])(onEndMove) && moved.forEach(function (m) {
return onEndMove(m, _this3, { if (Object(underscore__WEBPACK_IMPORTED_MODULE_2__["isFunction"])(onEndMove)) {
var data = {
target: srcModel, target: srcModel,
parent: srcModel && srcModel.parent(), parent: srcModel && srcModel.parent(),
index: srcModel && srcModel.index() index: srcModel && srcModel.index()
}); };
}); moved.length ? moved.forEach(function (m) {
return onEndMove(m, _this3, data);
}) : onEndMove(null, this, _objectSpread({}, data, {
cancelled: 1
}));
}
}, },
/** /**

8
dist/grapes.min.js
View File

File diff suppressed because one or more lines are too long

2
dist/grapes.min.js.map
View File

File diff suppressed because one or more lines are too long

43
package-lock.json
View File

@ -1,6 +1,6 @@
{ {
"name": "grapesjs", "name": "grapesjs",
"version": "0.15.15", "version": "0.15.18",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {
@ -9935,8 +9935,7 @@
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
@ -9957,14 +9956,12 @@
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
@ -9979,20 +9976,17 @@
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
@ -10109,8 +10103,7 @@
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
@ -10122,7 +10115,6 @@
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
@ -10137,7 +10129,6 @@
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
@ -10145,14 +10136,12 @@
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.3.5", "version": "2.3.5",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.2", "safe-buffer": "^5.1.2",
"yallist": "^3.0.0" "yallist": "^3.0.0"
@ -10171,7 +10160,6 @@
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
@ -10252,8 +10240,7 @@
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
@ -10265,7 +10252,6 @@
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
@ -10351,8 +10337,7 @@
"safe-buffer": { "safe-buffer": {
"version": "5.1.2", "version": "5.1.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
@ -10388,7 +10373,6 @@
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
@ -10408,7 +10392,6 @@
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
@ -10452,14 +10435,12 @@
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.3", "version": "3.0.3",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
} }
} }
}, },

2
package.json
View File

@ -1,7 +1,7 @@
{ {
"name": "grapesjs", "name": "grapesjs",
"description": "Free and Open Source Web Builder Framework", "description": "Free and Open Source Web Builder Framework",
"version": "0.15.15", "version": "0.15.18",
"author": "Artur Arseniev", "author": "Artur Arseniev",
"license": "BSD-3-Clause", "license": "BSD-3-Clause",
"homepage": "http://grapesjs.com", "homepage": "http://grapesjs.com",

12
src/canvas/view/CanvasView.js
View File

@ -298,11 +298,13 @@ export default Backbone.View.extend({
* Get javascript container * Get javascript container
* @private * @private
*/ */
getJsContainer() { getJsContainer(view) {
if (!this.jsContainer) { const frameView = this.getFrameView(view);
this.jsContainer = $(`<div class="${this.ppfx}js-cont">`).get(0); return frameView && frameView.getJsContainer();
} },
return this.jsContainer;
getFrameView(view) {
return (view && view._getFrame()) || this.em.get('currentFrame');
}, },
render() { render() {

4
src/commands/view/Preview.js
View File

@ -49,7 +49,9 @@ export default {
const { sender = {} } = this; const { sender = {} } = this;
sender.set && sender.set('active', 0); sender.set && sender.set('active', 0);
const panels = this.getPanels(editor); const panels = this.getPanels(editor);
editor.runCommand('sw-visibility'); if (editor.Panels.getButton('options', 'sw-visibility').get('active')) {
editor.runCommand('sw-visibility');
}
editor.getModel().runDefault(); editor.getModel().runDefault();
panels.style.display = ''; panels.style.display = '';
const canvas = editor.Canvas.getElement(); const canvas = editor.Canvas.getElement();

2
src/css_composer/model/CssRule.js
View File

@ -80,7 +80,7 @@ export default Backbone.Model.extend(Styleable).extend({
const addSelector = this.get('selectorsAdd'); const addSelector = this.get('selectorsAdd');
const isBody = wrapper && em && em.getConfig('wrapperIsBody'); const isBody = wrapper && em && em.getConfig('wrapperIsBody');
const selectors = isBody ? 'body' : this.get('selectors').getFullString(); const selectors = isBody ? 'body' : this.get('selectors').getFullString();
const stateStr = state ? `:${state}` : ''; const stateStr = state && !opts.skipState ? `:${state}` : '';
selectors && result.push(`${selectors}${stateStr}`); selectors && result.push(`${selectors}${stateStr}`);
addSelector && !opts.skipAdd && result.push(addSelector); addSelector && !opts.skipAdd && result.push(addSelector);
return result.join(', '); return result.join(', ');

13
src/navigator/view/ItemView.js
View File

@ -122,13 +122,22 @@ export default Backbone.View.extend({
* */ * */
toggleVisibility(e) { toggleVisibility(e) {
e && e.stopPropagation(); e && e.stopPropagation();
const model = this.model; const { model } = this;
const prevDspKey = '__prev-display';
const prevDisplay = model.get(prevDspKey);
const style = model.getStyle(); const style = model.getStyle();
const hidden = style.display == 'none'; const { display } = style;
const hidden = display == 'none';
if (hidden) { if (hidden) {
delete style.display; delete style.display;
if (prevDisplay) {
style.display = prevDisplay;
model.unset(prevDspKey);
}
} else { } else {
display && model.set(prevDspKey, display);
style.display = 'none'; style.display = 'none';
} }

10
src/style_manager/index.js
View File

@ -256,8 +256,9 @@ export default () => {
* @param {Model} model * @param {Model} model
* @return {Model} * @return {Model}
*/ */
getModelToStyle(model) { getModelToStyle(model, options = {}) {
const em = c.em; const em = c.em;
const { skipAdd } = options;
const classes = model.get('classes'); const classes = model.get('classes');
const id = model.getId(); const id = model.getId();
@ -270,6 +271,7 @@ export default () => {
const state = !config.devicePreviewMode ? em.get('state') : ''; const state = !config.devicePreviewMode ? em.get('state') : '';
const valid = classes.getStyleable(); const valid = classes.getStyleable();
const hasClasses = valid.length; const hasClasses = valid.length;
const useClasses = !smConf.componentFirst || options.useClasses;
const opts = { state }; const opts = { state };
let rule; let rule;
@ -279,16 +281,16 @@ export default () => {
// #268 // #268
um.stop(); um.stop();
if (hasClasses && !smConf.componentFirst) { if (hasClasses && useClasses) {
const deviceW = em.getCurrentMedia(); const deviceW = em.getCurrentMedia();
rule = cssC.get(valid, state, deviceW); rule = cssC.get(valid, state, deviceW);
if (!rule) { if (!rule && !skipAdd) {
rule = cssC.add(valid, state, deviceW); rule = cssC.add(valid, state, deviceW);
} }
} else if (config.avoidInlineStyle) { } else if (config.avoidInlineStyle) {
rule = cssC.getIdRule(id, opts); rule = cssC.getIdRule(id, opts);
!rule && (rule = cssC.setIdRule(id, {}, opts)); !rule && !skipAdd && (rule = cssC.setIdRule(id, {}, opts));
if (model.is('wrapper')) rule.set('wrapper', 1); if (model.is('wrapper')) rule.set('wrapper', 1);
} }

2
src/style_manager/model/Layer.js
View File

@ -59,6 +59,6 @@ export default Backbone.Model.extend({
getFullValue() { getFullValue() {
let result = []; let result = [];
this.get('properties').each(prop => result.push(prop.getFullValue())); this.get('properties').each(prop => result.push(prop.getFullValue()));
return result.join(' '); return result.join(' ').trim();
} }
}); });

2
src/style_manager/view/PropertyCompositeView.js
View File

@ -75,7 +75,7 @@ export default PropertyView.extend({
const model = this.model; const model = this.model;
var result = { var result = {
config: this.config, config: { ...this.config, highlightComputed: 0 },
collection: this.props, collection: this.props,
target: this.target, target: this.target,
propTarget: this.propTarget, propTarget: this.propTarget,

127
src/style_manager/view/PropertyStackView.js
View File

@ -1,6 +1,9 @@
import { isUndefined } from 'underscore'; import { isUndefined, keys } from 'underscore';
import PropertyCompositeView from './PropertyCompositeView'; import PropertyCompositeView from './PropertyCompositeView';
import LayersView from './LayersView'; import LayersView from './LayersView';
import CssGenerator from 'code_manager/model/CssGenerator';
const cssGen = new CssGenerator();
export default PropertyCompositeView.extend({ export default PropertyCompositeView.extend({
templateInput() { templateInput() {
@ -33,6 +36,8 @@ export default PropertyCompositeView.extend({
if (!this.model.get('detached')) { if (!this.model.get('detached')) {
PropertyCompositeView.prototype.targetUpdated.apply(this, args); PropertyCompositeView.prototype.targetUpdated.apply(this, args);
} else { } else {
const { status } = this._getTargetData();
this.setStatus(status);
this.checkVisibility(); this.checkVisibility();
} }
@ -103,30 +108,140 @@ export default PropertyCompositeView.extend({
return this.getLayers().getFullValue(); return this.getLayers().getFullValue();
}, },
_getClassRule(opts = {}) {
const { em } = this;
const { skipAdd = 1 } = opts;
const selected = em.getSelected();
const targetAlt = em.get('StyleManager').getModelToStyle(selected, {
skipAdd,
useClasses: 1
});
return targetAlt !== selected && targetAlt;
},
/**
* Return the parent style rule of the passed one
* @private
*/
_getParentTarget(target, opts = {}) {
const { em, model } = this;
const property = model.get('property');
const isValid = opts.isValid || (rule => rule.getStyle()[property]);
const targetsDevice = em
.get('CssComposer')
.getAll()
.filter(rule => rule.selectorsToString() === target.getSelectorsString());
const map = targetsDevice.reduce((acc, rule) => {
acc[rule.getAtRule()] = rule;
return acc;
}, {});
const mapSorted = cssGen.sortMediaObject(map);
const sortedRules = mapSorted.map(item => item.value);
const currIndex = sortedRules.indexOf(target);
const rulesToCheck = sortedRules.splice(0, currIndex);
let result;
for (let i = rulesToCheck.length - 1; i > -1; i--) {
const rule = rulesToCheck[i];
if (isValid(rule)) {
// only for not detached
result = rule;
break;
}
}
return result;
},
/** /**
* Refresh layers * Refresh layers
* */ * */
refreshLayers() { refreshLayers() {
let layersObj = []; let layersObj = [];
const model = this.model; const { model, em } = this;
const layers = this.getLayers(); const layers = this.getLayers();
const detached = model.get('detached'); const detached = model.get('detached');
const property = model.get('property');
const target = this.getTarget(); const target = this.getTarget();
const valueComput = this.getComputedValue();
const selected = em.getSelected();
let resultValue,
style,
targetAlt,
targetAltDevice,
valueTargetAlt,
valueTrgAltDvc;
// With detached layers values will be assigned to their properties // With detached layers values will be assigned to their properties
if (detached) { if (detached) {
const style = target ? target.getStyle() : {}; style = target ? target.getStyle() : {};
const hasDetachedStyle = rule => {
const name = model
.get('properties')
.at(0)
.get('property');
return rule && !isUndefined(rule.getStyle()[name]);
};
// If the style object is empty but the target has a computed value,
// that means the style might exist in some other place
if (!keys(style).length && valueComput && selected) {
// Styles of the same target but with a higher rule
const parentOpts = { isValid: rule => hasDetachedStyle(rule) };
targetAltDevice = this._getParentTarget(target, parentOpts);
if (targetAltDevice) {
style = targetAltDevice.getStyle();
} else {
// The target is a component but the style is in the class rules
targetAlt = this._getClassRule();
valueTargetAlt = hasDetachedStyle(targetAlt) && targetAlt.getStyle();
targetAltDevice =
!valueTargetAlt &&
this._getParentTarget(
this._getClassRule({ skipAdd: 0 }),
parentOpts
);
valueTrgAltDvc =
hasDetachedStyle(targetAltDevice) && targetAltDevice.getStyle();
style = valueTargetAlt || valueTrgAltDvc || {};
}
}
resultValue = style;
layersObj = layers.getLayersFromStyle(style); layersObj = layers.getLayersFromStyle(style);
} else { } else {
let value = this.getTargetValue({ ignoreDefault: 1 }); const valueTrg = this.getTargetValue({ ignoreDefault: 1 });
let value = valueTrg;
// Try to check if the style is in another rule
if (!value && valueComput) {
// Styles of the same target but with a higher rule
targetAltDevice = this._getParentTarget(target);
if (!value) value = this.getComputedValue(); if (targetAltDevice) {
value = targetAltDevice.getStyle()[property];
} else {
// Computed value is not always reliable due to the browser's CSSOM parser
// here we try to look for the style in class rules
targetAlt = this._getClassRule();
valueTargetAlt = targetAlt && targetAlt.getStyle()[property];
targetAltDevice =
!valueTargetAlt &&
this._getParentTarget(this._getClassRule({ skipAdd: 0 }));
valueTrgAltDvc =
targetAltDevice && targetAltDevice.getStyle()[property];
value = valueTargetAlt || valueTrgAltDvc || valueComput;
}
}
value = value == model.getDefaultValue() ? '' : value; value = value == model.getDefaultValue() ? '' : value;
resultValue = value;
layersObj = layers.getLayersFromValue(value); layersObj = layers.getLayersFromValue(value);
} }
const toAdd = model.getLayersFromTarget(target) || layersObj; const toAdd =
model.getLayersFromTarget(target, { resultValue }) || layersObj;
layers.reset(); layers.reset();
layers.add(toAdd); layers.add(toAdd);
model.set({ stackIndex: null }, { silent: true }); model.set({ stackIndex: null }, { silent: true });

53
src/style_manager/view/PropertyView.js
View File

@ -213,25 +213,13 @@ export default Backbone.View.extend({
em && em.trigger('styleManager:update:target', this.getTarget()); em && em.trigger('styleManager:update:target', this.getTarget());
}), }),
/** _getTargetData() {
* Fired when the target is changed const { model, config } = this;
* */ const targetValue = this.getTargetValue({ ignoreDefault: 1 });
targetUpdated(mod, val, opts = {}) { const defaultValue = model.getDefaultValue();
this.emitUpdateTarget(); const computedValue = this.getComputedValue();
if (!this.checkVisibility()) {
return;
}
const config = this.config;
const em = config.em;
const { model } = this;
const property = model.get('property');
let value = ''; let value = '';
let status = ''; let status = '';
let targetValue = this.getTargetValue({ ignoreDefault: 1 });
let defaultValue = model.getDefaultValue();
let computedValue = this.getComputedValue();
if (targetValue) { if (targetValue) {
value = targetValue; value = targetValue;
@ -254,16 +242,39 @@ export default Backbone.View.extend({
status = ''; status = '';
} }
return {
value,
status,
targetValue,
defaultValue,
computedValue
};
},
/**
* Fired when the target is changed
* */
targetUpdated(mod, val, opts = {}) {
this.emitUpdateTarget();
if (!this.checkVisibility()) {
return;
}
const config = this.config;
const em = config.em;
const { model } = this;
const property = model.get('property');
const { status, value, ...targetData } = this._getTargetData();
this.setStatus(status); this.setStatus(status);
model.setValue(value, 0, { fromTarget: 1, ...opts }); model.setValue(value, 0, { fromTarget: 1, ...opts });
if (em) { if (em) {
const data = { const data = {
status, status,
targetValue, value,
defaultValue, ...targetData
computedValue,
value
}; };
em.trigger('styleManager:change', this, property, value, data); em.trigger('styleManager:change', this, property, value, data);
em.trigger(`styleManager:change:${property}`, this, value, data); em.trigger(`styleManager:change:${property}`, this, value, data);

5
src/utils/mixins.js
View File

@ -17,7 +17,10 @@ const appendStyles = (styles, opts = {}) => {
if (stls.length) { if (stls.length) {
const href = stls.shift(); const href = stls.shift();
if (!opts.unique || !document.querySelector(`link[href="${href}"]`)) { if (
href &&
(!opts.unique || !document.querySelector(`link[href="${href}"]`))
) {
const { head } = document; const { head } = document;
const link = document.createElement('link'); const link = document.createElement('link');
link.href = href; link.href = href;

Write Preview
Loading…
Cancel
Save