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
Split 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
* @private
*/
getJsContainer: function getJsContainer() {
if (!this.jsContainer) {
this.jsContainer = $("<div class=\"".concat(this.ppfx, "js-cont\">")).get(0);
}
return this.jsContainer;
getJsContainer: function getJsContainer(view) {
var frameView = this.getFrameView(view);
return frameView && frameView.getJsContainer();
},
getFrameView: function getFrameView(view) {
return view && view._getFrame() || this.em.get('currentFrame');
},
render: function render() {
var el = this.el,
@ -24397,12 +24397,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
ed.select(selAll);
sel.emitUpdate();
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', {
guidesInfo: 1,
mode: mode,
@ -28553,7 +28554,7 @@ __webpack_require__.r(__webpack_exports__);
var addSelector = this.get('selectorsAdd');
var isBody = wrapper && em && em.getConfig('wrapperIsBody');
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));
addSelector && !opts.skipAdd && result.push(addSelector);
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 _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 _view_ComponentSvgView__WEBPACK_IMPORTED_MODULE_34__ = __webpack_require__(/*! ./view/ComponentSvgView */ "./src/dom_components/view/ComponentSvgView.js");
/* harmony import */ var _model_ComponentComment__WEBPACK_IMPORTED_MODULE_35__ = __webpack_require__(/*! ./model/ComponentComment */ "./src/dom_components/model/ComponentComment.js");
/* harmony import */ var _view_ComponentCommentView__WEBPACK_IMPORTED_MODULE_36__ = __webpack_require__(/*! ./view/ComponentCommentView */ "./src/dom_components/view/ComponentCommentView.js");
/* harmony import */ var _model_ComponentTextNode__WEBPACK_IMPORTED_MODULE_37__ = __webpack_require__(/*! ./model/ComponentTextNode */ "./src/dom_components/model/ComponentTextNode.js");
/* harmony import */ var _view_ComponentTextNodeView__WEBPACK_IMPORTED_MODULE_38__ = __webpack_require__(/*! ./view/ComponentTextNodeView */ "./src/dom_components/view/ComponentTextNodeView.js");
/* harmony import */ var _model_ComponentText__WEBPACK_IMPORTED_MODULE_39__ = __webpack_require__(/*! ./model/ComponentText */ "./src/dom_components/model/ComponentText.js");
/* harmony import */ var _view_ComponentTextView__WEBPACK_IMPORTED_MODULE_40__ = __webpack_require__(/*! ./view/ComponentTextView */ "./src/dom_components/view/ComponentTextView.js");
/* harmony import */ var _model_ComponentWrapper__WEBPACK_IMPORTED_MODULE_41__ = __webpack_require__(/*! ./model/ComponentWrapper */ "./src/dom_components/model/ComponentWrapper.js");
/* harmony import */ var _model_ComponentSvgIn__WEBPACK_IMPORTED_MODULE_34__ = __webpack_require__(/*! ./model/ComponentSvgIn */ "./src/dom_components/model/ComponentSvgIn.js");
/* harmony import */ var _view_ComponentSvgView__WEBPACK_IMPORTED_MODULE_35__ = __webpack_require__(/*! ./view/ComponentSvgView */ "./src/dom_components/view/ComponentSvgView.js");
/* harmony import */ var _model_ComponentComment__WEBPACK_IMPORTED_MODULE_36__ = __webpack_require__(/*! ./model/ComponentComment */ "./src/dom_components/model/ComponentComment.js");
/* harmony import */ var _view_ComponentCommentView__WEBPACK_IMPORTED_MODULE_37__ = __webpack_require__(/*! ./view/ComponentCommentView */ "./src/dom_components/view/ComponentCommentView.js");
/* harmony import */ var _model_ComponentTextNode__WEBPACK_IMPORTED_MODULE_38__ = __webpack_require__(/*! ./model/ComponentTextNode */ "./src/dom_components/model/ComponentTextNode.js");
/* harmony import */ var _view_ComponentTextNodeView__WEBPACK_IMPORTED_MODULE_39__ = __webpack_require__(/*! ./view/ComponentTextNodeView */ "./src/dom_components/view/ComponentTextNodeView.js");
/* harmony import */ var _model_ComponentText__WEBPACK_IMPORTED_MODULE_40__ = __webpack_require__(/*! ./model/ComponentText */ "./src/dom_components/model/ComponentText.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 () {
@ -29510,25 +29513,29 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
id: 'script',
model: _model_ComponentScript__WEBPACK_IMPORTED_MODULE_31__["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',
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',
model: _model_ComponentComment__WEBPACK_IMPORTED_MODULE_35__["default"],
view: _view_ComponentCommentView__WEBPACK_IMPORTED_MODULE_36__["default"]
model: _model_ComponentComment__WEBPACK_IMPORTED_MODULE_36__["default"],
view: _view_ComponentCommentView__WEBPACK_IMPORTED_MODULE_37__["default"]
}, {
id: 'textnode',
model: _model_ComponentTextNode__WEBPACK_IMPORTED_MODULE_37__["default"],
view: _view_ComponentTextNodeView__WEBPACK_IMPORTED_MODULE_38__["default"]
model: _model_ComponentTextNode__WEBPACK_IMPORTED_MODULE_38__["default"],
view: _view_ComponentTextNodeView__WEBPACK_IMPORTED_MODULE_39__["default"]
}, {
id: 'text',
model: _model_ComponentText__WEBPACK_IMPORTED_MODULE_39__["default"],
view: _view_ComponentTextView__WEBPACK_IMPORTED_MODULE_40__["default"]
model: _model_ComponentText__WEBPACK_IMPORTED_MODULE_40__["default"],
view: _view_ComponentTextView__WEBPACK_IMPORTED_MODULE_41__["default"]
}, {
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"]
}, {
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({
defaults: _objectSpread({}, _Component__WEBPACK_IMPORTED_MODULE_1__["default"].prototype.defaults, {
resizable: {
ratioDefault: 1
},
highlightable: 0
}),
getName: function getName() {
@ -31984,14 +31994,51 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
}, {
isComponent: function isComponent(el) {
if (SVGElement && el instanceof SVGElement) {
// Some SVG elements require uppercase letters (eg. <linearGradient>)
var tagName = el.tagName; // Make the root resizable
return {
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 {
tagName: tagName,
type: 'svg',
resizable: resizable
tagName: el.tagName,
type: 'svg-in'
};
}
}
@ -37940,7 +37987,7 @@ var defaultConfig = {
editors: editors,
plugins: plugins,
// Will be replaced on build
version: '0.15.15',
version: '0.15.18',
/**
* Initialize the editor with passed options
@ -44235,7 +44282,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
* @return {Model}
*/
getModelToStyle: function getModelToStyle(model) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var em = c.em;
var skipAdd = options.skipAdd;
var classes = model.get('classes');
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 valid = classes.getStyleable();
var hasClasses = valid.length;
var useClasses = !smConf.componentFirst || options.useClasses;
var opts = {
state: state
};
@ -44258,16 +44308,16 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
um.stop();
if (hasClasses && !smConf.componentFirst) {
if (hasClasses && useClasses) {
var deviceW = em.getCurrentMedia();
rule = cssC.get(valid, state, deviceW);
if (!rule) {
if (!rule && !skipAdd) {
rule = cssC.add(valid, state, deviceW);
}
} else if (config.avoidInlineStyle) {
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);
}
@ -44448,7 +44498,7 @@ __webpack_require__.r(__webpack_exports__);
this.get('properties').each(function (prop) {
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({
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
});
}
@ -46857,13 +46907,21 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var backbone__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! backbone */ "./node_modules/backbone/backbone.js");
/* harmony import */ var backbone__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(backbone__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _PropertyView__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./PropertyView */ "./src/style_manager/view/PropertyView.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 _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var backbone__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! backbone */ "./node_modules/backbone/backbone.js");
/* harmony import */ var backbone__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(backbone__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _PropertyView__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./PropertyView */ "./src/style_manager/view/PropertyView.js");
var $ = backbone__WEBPACK_IMPORTED_MODULE_0___default.a.$;
/* harmony default export */ __webpack_exports__["default"] = (_PropertyView__WEBPACK_IMPORTED_MODULE_1__["default"].extend({
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; }
var $ = backbone__WEBPACK_IMPORTED_MODULE_1___default.a.$;
/* harmony default export */ __webpack_exports__["default"] = (_PropertyView__WEBPACK_IMPORTED_MODULE_2__["default"].extend({
templateInput: function templateInput() {
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 ");
@ -46876,7 +46934,7 @@ var $ = backbone__WEBPACK_IMPORTED_MODULE_0___default.a.$;
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) {
@ -46884,7 +46942,7 @@ var $ = backbone__WEBPACK_IMPORTED_MODULE_0___default.a.$;
props && props.forEach(function (propView) {
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 model = this.model;
var result = {
config: this.config,
config: _objectSpread({}, this.config, {
highlightComputed: 0
}),
collection: this.props,
target: this.target,
propTarget: this.propTarget,
@ -46985,7 +47045,7 @@ var $ = backbone__WEBPACK_IMPORTED_MODULE_0___default.a.$;
return value;
},
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.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 _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 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({
templateInput: function templateInput() {
var pfx = this.pfx;
@ -47442,6 +47505,10 @@ __webpack_require__.r(__webpack_exports__);
_PropertyCompositeView__WEBPACK_IMPORTED_MODULE_1__["default"].prototype.targetUpdated.apply(this, args);
} else {
var _this$_getTargetData = this._getTargetData(),
status = _this$_getTargetData.status;
this.setStatus(status);
this.checkVisibility();
}
@ -47512,30 +47579,144 @@ __webpack_require__.r(__webpack_exports__);
getLayerValues: function getLayerValues() {
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
* */
refreshLayers: function refreshLayers() {
var layersObj = [];
var model = this.model;
var model = this.model,
em = this.em;
var layers = this.getLayers();
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) {
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);
} else {
var value = this.getTargetValue({
var valueTrg = this.getTargetValue({
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;
resultValue = value;
layersObj = layers.getLayersFromValue(value);
}
var toAdd = model.getLayersFromTarget(target) || layersObj;
var toAdd = model.getLayersFromTarget(target, {
resultValue: resultValue
}) || layersObj;
layers.reset();
layers.add(toAdd);
model.set({
@ -47617,25 +47798,28 @@ __webpack_require__.r(__webpack_exports__);
"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 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 underscore__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! underscore */ "./node_modules/underscore/underscore.js");
/* harmony import */ var underscore__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(underscore__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var utils_mixins__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! utils/mixins */ "./src/utils/mixins.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_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_0__);
/* 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 _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var backbone__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! backbone */ "./node_modules/backbone/backbone.js");
/* harmony import */ var backbone__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(backbone__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var 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 _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';
/* 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) {
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 ");
@ -47657,14 +47841,14 @@ var clearProp = 'data-clear-style';
templateInput: function templateInput(model) {
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'
}, "click [".concat(clearProp, "]"), 'clear'),
initialize: function initialize() {
var _this = this;
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 || {};
var em = this.config.em;
this.em = em;
@ -47819,33 +48003,20 @@ var clearProp = 'data-clear-style';
var parent = this.model.parent;
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;
em && em.trigger('styleManager:update:target', this.getTarget());
}),
/**
* 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 value = '';
var status = '';
_getTargetData: function _getTargetData() {
var model = this.model,
config = this.config;
var targetValue = this.getTargetValue({
ignoreDefault: 1
});
var defaultValue = model.getDefaultValue();
var computedValue = this.getComputedValue();
var value = '';
var status = '';
if (targetValue) {
value = targetValue;
@ -47864,19 +48035,47 @@ var clearProp = 'data-clear-style';
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);
model.setValue(value, 0, _objectSpread({
fromTarget: 1
}, opts));
if (em) {
var data = {
var data = _objectSpread({
status: status,
targetValue: targetValue,
defaultValue: defaultValue,
computedValue: computedValue,
value: value
};
}, targetData);
em.trigger('styleManager:change', this, property, 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 notToSkip = avoid.indexOf(property) < 0;
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 || '';
},
@ -48095,12 +48294,12 @@ var clearProp = 'data-clear-style';
var stylable = trg.get('stylable'); // Stylable could also be an array indicating with which property
// 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;
} // 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;
} // Check if the property is available only if requested
@ -48114,9 +48313,9 @@ var clearProp = 'data-clear-style';
var properties = Object.keys(requires);
sectors.each(function (sector) {
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];
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) {
var styles = window.getComputedStyle(parentEl);
Object(underscore__WEBPACK_IMPORTED_MODULE_2__["each"])(requiresParent, function (values, property) {
stylable = stylable && styles[property] && Object(underscore__WEBPACK_IMPORTED_MODULE_2__["includes"])(values, styles[property]);
Object(underscore__WEBPACK_IMPORTED_MODULE_3__["each"])(requiresParent, function (values, property) {
stylable = stylable && styles[property] && Object(underscore__WEBPACK_IMPORTED_MODULE_3__["includes"])(values, styles[property]);
});
} else {
stylable = false;
@ -48175,7 +48374,7 @@ var clearProp = 'data-clear-style';
* */
setValue: function setValue(value) {
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();
input && (input.value = val);
},
@ -49702,10 +49901,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
config = _objectSpread({}, opts, {}, configDef);
em = config.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,
register: []
});
}, config));
um.changeUndoType('change', {
condition: false
});
@ -52879,7 +53078,7 @@ function () {
top = _target$getStyle.top,
position = _target$getStyle.position;
comp.setStyle({
comp.addStyle({
left: left,
top: top,
position: position
@ -54649,13 +54848,19 @@ var $ = backbone__WEBPACK_IMPORTED_MODULE_1___default.a.$;
this.selectTargetModel();
this.toggleSortCursor();
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,
parent: srcModel && srcModel.parent(),
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",
"version": "0.15.15",
"version": "0.15.18",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@ -9935,8 +9935,7 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"aproba": {
"version": "1.2.0",
@ -9957,14 +9956,12 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@ -9979,20 +9976,17 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"core-util-is": {
"version": "1.0.2",
@ -10109,8 +10103,7 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"ini": {
"version": "1.3.5",
@ -10122,7 +10115,6 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@ -10137,7 +10129,6 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@ -10145,14 +10136,12 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@ -10171,7 +10160,6 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@ -10252,8 +10240,7 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"object-assign": {
"version": "4.1.1",
@ -10265,7 +10252,6 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@ -10351,8 +10337,7 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"safer-buffer": {
"version": "2.1.2",
@ -10388,7 +10373,6 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@ -10408,7 +10392,6 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@ -10452,14 +10435,12 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
}
}
},

2
package.json
View File

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

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

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

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

@ -49,7 +49,9 @@ export default {
const { sender = {} } = this;
sender.set && sender.set('active', 0);
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();
panels.style.display = '';
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 isBody = wrapper && em && em.getConfig('wrapperIsBody');
const selectors = isBody ? 'body' : this.get('selectors').getFullString();
const stateStr = state ? `:${state}` : '';
const stateStr = state && !opts.skipState ? `:${state}` : '';
selectors && result.push(`${selectors}${stateStr}`);
addSelector && !opts.skipAdd && result.push(addSelector);
return result.join(', ');

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

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

10
src/style_manager/index.js
View File

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

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

@ -59,6 +59,6 @@ export default Backbone.Model.extend({
getFullValue() {
let result = [];
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;
var result = {
config: this.config,
config: { ...this.config, highlightComputed: 0 },
collection: this.props,
target: this.target,
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 LayersView from './LayersView';
import CssGenerator from 'code_manager/model/CssGenerator';
const cssGen = new CssGenerator();
export default PropertyCompositeView.extend({
templateInput() {
@ -33,6 +36,8 @@ export default PropertyCompositeView.extend({
if (!this.model.get('detached')) {
PropertyCompositeView.prototype.targetUpdated.apply(this, args);
} else {
const { status } = this._getTargetData();
this.setStatus(status);
this.checkVisibility();
}
@ -103,30 +108,140 @@ export default PropertyCompositeView.extend({
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
* */
refreshLayers() {
let layersObj = [];
const model = this.model;
const { model, em } = this;
const layers = this.getLayers();
const detached = model.get('detached');
const property = model.get('property');
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
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);
} 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;
resultValue = value;
layersObj = layers.getLayersFromValue(value);
}
const toAdd = model.getLayersFromTarget(target) || layersObj;
const toAdd =
model.getLayersFromTarget(target, { resultValue }) || layersObj;
layers.reset();
layers.add(toAdd);
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());
}),
/**
* 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');
_getTargetData() {
const { model, config } = this;
const targetValue = this.getTargetValue({ ignoreDefault: 1 });
const defaultValue = model.getDefaultValue();
const computedValue = this.getComputedValue();
let value = '';
let status = '';
let targetValue = this.getTargetValue({ ignoreDefault: 1 });
let defaultValue = model.getDefaultValue();
let computedValue = this.getComputedValue();
if (targetValue) {
value = targetValue;
@ -254,16 +242,39 @@ export default Backbone.View.extend({
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);
model.setValue(value, 0, { fromTarget: 1, ...opts });
if (em) {
const data = {
status,
targetValue,
defaultValue,
computedValue,
value
value,
...targetData
};
em.trigger('styleManager:change', this, property, 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) {
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 link = document.createElement('link');
link.href = href;

Write Preview
Loading…
Cancel
Save