diff --git a/dist/grapes.js b/dist/grapes.js index 47ccf41c9..f4c8cf645 100644 --- a/dist/grapes.js +++ b/dist/grapes.js @@ -70,7 +70,7 @@ return /******/ (function(modules) { // webpackBootstrap /******/ __webpack_require__.p = ""; /******/ /******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 61); +/******/ return __webpack_require__(__webpack_require__.s = 60); /******/ }) /************************************************************************/ /******/ ([ @@ -3695,7 +3695,7 @@ return /******/ (function(modules) { // webpackBootstrap } }()); -/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(7), __webpack_require__(65)(module))) +/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(7), __webpack_require__(64)(module))) /***/ }), /* 2 */ @@ -3707,7 +3707,7 @@ return /******/ (function(modules) { // webpackBootstrap Object.defineProperty(exports, "__esModule", { value: true }); -exports.getUnitFromValue = exports.normalizeFloat = exports.shallowDiff = exports.getElement = exports.camelCase = exports.matches = exports.upFirst = exports.hasDnd = exports.off = exports.on = undefined; +exports.getUnitFromValue = exports.normalizeFloat = exports.shallowDiff = exports.getElement = exports.camelCase = exports.getModel = exports.matches = exports.upFirst = exports.hasDnd = exports.off = exports.on = undefined; var _underscore = __webpack_require__(1); @@ -3826,16 +3826,28 @@ var hasDnd = function hasDnd(em) { var getElement = function getElement(el) { if ((0, _underscore.isElement)(el)) { return el; - } else if (el.getEl) { + } else if (el && el.getEl) { return el.getEl(); } }; +/** + * Ensure to fetch the model from the input argument + * @param {HTMLElement|Component} el Component or HTML element + * @return {Component} + */ +var getModel = function getModel(el, $) { + var model = el; + (0, _underscore.isElement)(el) && (model = $(el).data('model')); + return model; +}; + exports.on = on; exports.off = off; exports.hasDnd = hasDnd; exports.upFirst = upFirst; exports.matches = matches; +exports.getModel = getModel; exports.camelCase = camelCase; exports.getElement = getElement; exports.shallowDiff = shallowDiff; @@ -3880,7 +3892,6 @@ module.exports = _backbone2.default.View.extend({ this.classe = this.attr.class || []; var $el = this.$el; var classes = model.get('classes'); - this.listenTo(model, 'destroy remove', this.remove); this.listenTo(model, 'change:style', this.updateStyle); this.listenTo(model, 'change:attributes', this.updateAttributes); this.listenTo(model, 'change:highlightable', this.updateHighlight); @@ -3895,11 +3906,6 @@ module.exports = _backbone2.default.View.extend({ classes.length && this.importClasses(); this.init(); }, - remove: function remove() { - _backbone2.default.View.prototype.remove.apply(this); - var children = this.childrenView; - children && children.stopListening(); - }, /** @@ -4240,7 +4246,7 @@ var Backbone = __webpack_require__(0); var Components = __webpack_require__(51); var Selector = __webpack_require__(8); var Selectors = __webpack_require__(11); -var Traits = __webpack_require__(155); +var Traits = __webpack_require__(154); var componentList = {}; var componentIndex = 0; @@ -4709,10 +4715,10 @@ var Component = Backbone.Model.extend(_Styleable2.default).extend({ * @param {Object} [opts={}] Options, same as in `model.add()`(from backbone) * @return {Array} Array of appended components * @example - * someModel.get('components').lenght // -> 0 + * someModel.get('components').length // -> 0 * const videoComponent = someModel.append('
')[0]; * // This will add 2 components (`video` and `div`) to your `someModel` - * someModel.get('components').lenght // -> 2 + * someModel.get('components').length // -> 2 * // You can pass components directly * otherModel.append(otherModel2); * otherModel.append([otherModel3, otherModel4]); @@ -5564,7 +5570,7 @@ module.exports = _backbone2.default.View.extend({ */ isComponentStylable: function isComponentStylable() { var em = this.em; - var component = em && em.get('selectedComponent'); + var component = em && em.getSelected(); if (!component) { return true; @@ -16639,7 +16645,7 @@ var Property = __webpack_require__(13); module.exports = __webpack_require__(0).Collection.extend(_TypeableCollection2.default).extend({ types: [{ id: 'stack', - model: __webpack_require__(124), + model: __webpack_require__(123), view: __webpack_require__(35), isType: function isType(value) { if (value && value.type == 'stack') { @@ -16693,8 +16699,8 @@ module.exports = __webpack_require__(0).Collection.extend(_TypeableCollection2.d } }, { id: 'slider', - model: __webpack_require__(130), - view: __webpack_require__(131), + model: __webpack_require__(129), + view: __webpack_require__(130), isType: function isType(value) { if (value && value.type == 'slider') { return value; @@ -16743,6 +16749,7 @@ module.exports = __webpack_require__(0).Collection.extend(_TypeableCollection2.d var values = value.split(' '); values.forEach(function (value, i) { var property = _this.at(i); + if (!property) return; properties.push(_extends({}, property.attributes, { value: value })); }); return properties; @@ -16781,6 +16788,9 @@ module.exports = __webpack_require__(0).Model.extend({ visible: true, fixedValues: ['initial', 'inherit'], + // If true to the value will be added '!important' + important: 0, + // If true, will be hidden by default and will show up only for targets // which require this property (via `stylable-require`) // Use case: @@ -16864,13 +16874,19 @@ module.exports = __webpack_require__(0).Model.extend({ */ parseValue: function parseValue(value) { var result = { value: value }; + var imp = '!important'; + + if ((0, _underscore.isString)(value) && value.indexOf(imp) !== -1) { + result.value = value.replace(imp, '').trim(); + result.important = 1; + } if (!this.get('functionName')) { return result; } var args = []; - var valueStr = '' + value; + var valueStr = '' + result.value; var start = valueStr.indexOf('(') + 1; var end = valueStr.lastIndexOf(')'); args.push(start); @@ -16911,6 +16927,10 @@ module.exports = __webpack_require__(0).Model.extend({ value = fn + '(' + value + ')'; } + if (this.get('important')) { + value = value + ' !important'; + } + return value || ''; } }); @@ -17858,7 +17878,7 @@ module.exports = { methods[method](body, 'click', this.onClick); methods[method](win, 'scroll resize', this.onFrameScroll); methods[method](win, 'keydown', this.onKeyPress); - em[method]('change:selectedComponent', this.onSelect, this); + em[method]('component:toggled', this.onSelect, this); em[method]('change:componentHovered', this.onHovered, this); }, @@ -17869,7 +17889,7 @@ module.exports = { * */ onKeyPress: function onKeyPress(e) { var key = e.which || e.keyCode; - var comp = this.editorModel.get('selectedComponent'); + var comp = this.editorModel.getSelected(); var focused = this.frameEl.contentDocument.activeElement.tagName !== 'BODY'; // On CANC (46) or Backspace (8) @@ -18015,18 +18035,81 @@ module.exports = { if (model) { if (model.get('selectable')) { - editor.select(model); - this.initResize(model); + this.select(model, e); } else { var _parent = model.parent(); while (_parent && !_parent.get('selectable')) { _parent = _parent.parent(); - }_parent && editor.select(_parent); + }this.select(_parent, e); } } }, + /** + * Select component + * @param {Component} model + * @param {Event} event + */ + select: function select(model) { + var event = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + + if (!model) return; + var ctrlKey = event.ctrlKey || event.metaKey; + var shiftKey = event.shiftKey; + var editor = this.editor; + + var multiple = editor.getConfig('multipleSelection'); + var em = this.em; + + if (ctrlKey && multiple) { + editor.selectToggle(model); + } else if (shiftKey && multiple) { + em.clearSelection(editor.Canvas.getWindow()); + var coll = model.collection; + var index = coll.indexOf(model); + var selAll = editor.getSelectedAll(); + var min = void 0, + max = void 0; + + // Fin min and max siblings + editor.getSelectedAll().forEach(function (sel) { + var selColl = sel.collection; + var selIndex = selColl.indexOf(sel); + if (selColl === coll) { + if (selIndex < index) { + // First model BEFORE the selected one + min = (0, _underscore.isUndefined)(min) ? selIndex : Math.max(min, selIndex); + } else if (selIndex > index) { + // First model AFTER the selected one + max = (0, _underscore.isUndefined)(max) ? selIndex : Math.min(max, selIndex); + } + } + }); + + if (!(0, _underscore.isUndefined)(min)) { + while (min !== index) { + editor.selectAdd(coll.at(min)); + min++; + } + } + + if (!(0, _underscore.isUndefined)(max)) { + while (max !== index) { + editor.selectAdd(coll.at(max)); + max--; + } + } + + editor.selectAdd(model); + } else { + editor.select(model); + } + + this.initResize(model); + }, + + /** * Update badge for the component * @param {Object} Component @@ -18228,7 +18311,7 @@ module.exports = { */ updateToolbar: function updateToolbar(mod) { var em = this.config.em; - var model = mod == em ? em.get('selectedComponent') : mod; + var model = mod == em ? em.getSelected() : mod; var toolbarEl = this.canvas.getToolbarEl(); var toolbarStyle = toolbarEl.style; @@ -18327,7 +18410,7 @@ module.exports = { if (el) { var elPos = this.getElementPos(el); this.updateBadge(el, elPos); - var model = this.em.get('selectedComponent'); + var model = this.em.getSelected(); if (model) { this.updateToolbarPos(model.view.el); @@ -18409,7 +18492,6 @@ module.exports = { em.off('component:update', this.updateAttached, this); em.off('change:canvasOffset', this.updateAttached, this); - em.off('change:selectedComponent', this.updateToolbar, this); } }; @@ -18430,7 +18512,7 @@ var _backbone2 = _interopRequireDefault(_backbone); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } -var SelectPosition = __webpack_require__(58); +var SelectPosition = __webpack_require__(57); var $ = _backbone2.default.$; module.exports = _underscore2.default.extend({}, SelectPosition, { @@ -20531,7 +20613,7 @@ Object.defineProperty(exports, "__esModule", { value: true }); -var _promisePolyfill = __webpack_require__(78); +var _promisePolyfill = __webpack_require__(77); var _promisePolyfill2 = _interopRequireDefault(_promisePolyfill); @@ -21689,7 +21771,7 @@ module.exports = Backbone.Model.extend({ var Backbone = __webpack_require__(0); -var Button = __webpack_require__(113); +var Button = __webpack_require__(112); module.exports = Backbone.Collection.extend({ model: Button, @@ -21772,7 +21854,7 @@ module.exports = Backbone.Collection.extend({ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; var Backbone = __webpack_require__(0); -var ButtonsView = __webpack_require__(115); +var ButtonsView = __webpack_require__(114); module.exports = Backbone.View.extend({ initialize: function initialize(o) { @@ -21947,10 +22029,10 @@ var _underscore = __webpack_require__(1); module.exports = function () { var c = {}, - defaults = __webpack_require__(121), - Sectors = __webpack_require__(122), + defaults = __webpack_require__(120), + Sectors = __webpack_require__(121), Properties = __webpack_require__(12), - SectorsView = __webpack_require__(133); + SectorsView = __webpack_require__(132); var properties = void 0; var sectors, SectView; @@ -22560,7 +22642,7 @@ module.exports = Property.extend({ var PropertyCompositeView = __webpack_require__(17); -var LayersView = __webpack_require__(128); +var LayersView = __webpack_require__(127); module.exports = PropertyCompositeView.extend({ templateInput: function templateInput() { @@ -22997,7 +23079,7 @@ var _backbone2 = _interopRequireDefault(_backbone); var _underscore = __webpack_require__(1); -var _ColorPicker = __webpack_require__(127); +var _ColorPicker = __webpack_require__(126); var _ColorPicker2 = _interopRequireDefault(_ColorPicker); @@ -24429,6 +24511,13 @@ module.exports = _backbone2.default.View.extend({ var coll = this.collection; this.listenTo(coll, 'add', this.addTo); this.listenTo(coll, 'reset', this.resetChildren); + this.listenTo(coll, 'remove', this.removeChildren); + }, + removeChildren: function removeChildren(removed) { + var view = removed.view; + view.remove.apply(view); + var children = view.childrenView; + children && children.stopListening(); }, @@ -24725,7 +24814,7 @@ module.exports = ComponentView.extend({ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; -var _config = __webpack_require__(182); +var _config = __webpack_require__(181); var _config2 = _interopRequireDefault(_config); @@ -24733,10 +24822,6 @@ var _ItemView = __webpack_require__(56); var _ItemView2 = _interopRequireDefault(_ItemView); -var _ItemsView = __webpack_require__(57); - -var _ItemsView2 = _interopRequireDefault(_ItemsView); - var _underscore = __webpack_require__(1); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } @@ -24745,7 +24830,6 @@ module.exports = function () { var em = void 0; var layers = void 0; var config = {}; - var View = _ItemsView2.default; return { name: 'LayerManager', @@ -24759,29 +24843,23 @@ module.exports = function () { return this; }, + getConfig: function getConfig() { + return config; + }, onLoad: function onLoad() { - var collection = em.get('DomComponents').getComponents(); - var parent = collection.parent; - var options = { + layers = new _ItemView2.default({ level: 0, config: config, - opened: config.opened || {} - }; - - // Show wrapper if requested - if (config.showWrapper && parent) { - View = _ItemView2.default; - options.model = parent; - } else { - options.collection = collection; - } - - layers = new View(options); + opened: config.opened || {}, + model: em.get('DomComponents').getWrapper() + }); em && em.on('component:selected', this.componentChanged); this.componentChanged(); }, postRender: function postRender() { var elTo = config.appendTo; + var root = config.root; + root && this.setRoot(root); if (elTo) { var el = (0, _underscore.isElement)(elTo) ? elTo : document.querySelector(elTo); @@ -24790,6 +24868,26 @@ module.exports = function () { }, + /** + * Set new root for layers + * @param {HTMLElement|Component|String} el Component to be set as the root + * @return {self} + */ + setRoot: function setRoot(el) { + layers.setRoot(el); + return this; + }, + + + /** + * Get the root of layers + * @return {Component} + */ + getRoot: function getRoot() { + return layers.model; + }, + + /** * Return the view of layers * @return {View} @@ -24839,11 +24937,20 @@ module.exports = function () { var _underscore = __webpack_require__(1); +var _mixins = __webpack_require__(2); + +var _backbone = __webpack_require__(0); + +var _backbone2 = _interopRequireDefault(_backbone); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + var ComponentView = __webpack_require__(3); var inputProp = 'contentEditable'; +var $ = _backbone2.default.$; var ItemsView = void 0; -module.exports = __webpack_require__(0).View.extend({ +module.exports = _backbone2.default.View.extend({ events: { 'mousedown [data-toggle-move]': 'startSort', 'click [data-toggle-visible]': 'toggleVisibility', @@ -24867,7 +24974,8 @@ module.exports = __webpack_require__(0).View.extend({ var level = this.level + 1; var gut = 30 + level * 10 + 'px'; var name = model.getName(); - return '\n ' + (hidable ? '' : '') + '\n\n