diff --git a/README.md b/README.md
index b7f5ef917..99a35a6bb 100644
--- a/README.md
+++ b/README.md
@@ -2,12 +2,13 @@
[](https://travis-ci.org/artf/grapesjs)
[](https://discord.gg/QAbgGXq)
+[](https://cdnjs.com/libraries/grapesjs)
+[](https://www.npmjs.com/package/grapesjs)
-GrapesJS is a free and open source Web Builder Framework which helps you building HTML templates to be used inside sites, newsletters and mobile apps.
-Mainly GrapesJS was designed to be used inside a [CMS] to speed up a creation of dynamic templates. To better understand this concept check the image below
+GrapesJS is a free and open source Web Builder Framework which helps building HTML templates, faster and easily, to be delivered in sites, newsletters or mobile apps. Mainly, GrapesJS was designed to be used inside a [CMS] to speed up the creation of dynamic templates. To better understand this concept check the image below
@@ -186,6 +187,7 @@ $ npm test
* [grapesjs-navbar](https://github.com/artf/grapesjs-navbar) - Simple navbar component
* [grapesjs-component-countdown](https://github.com/artf/grapesjs-component-countdown) - Simple countdown component
* [grapesjs-style-gradient](https://github.com/artf/grapesjs-style-gradient) - Add a gradient type input
+* [grapesjs-blocks-flexbox](https://github.com/artf/grapesjs-blocks-flexbox) - Add the flexbox block
### Presets
* [grapesjs-preset-webpage](https://github.com/artf/grapesjs-preset-webpage) - Webpage Builder
@@ -209,11 +211,23 @@ If you like the project support it with a donation of your choice or become a ba
+ *
+ *
+ * You could have the children container more deeper
+ *
+ *
+ *
+ *
+ *
+ * @return HTMLElement
+ * @private
+ */
+ getChildrenContainer: function getChildrenContainer() {
+ var container = this.el;
+
+ if (typeof this.getChildrenSelector == 'function') {
+ container = this.el.querySelector(this.getChildrenSelector());
+ } else if (typeof this.getTemplate == 'function') {
+ // Need to find deepest first child
+ }
+
+ return container;
+ },
+
+
+ /**
+ * Render children components
+ * @private
+ */
+ renderChildren: function renderChildren() {
+ var container = this.getChildrenContainer();
+ var view = new ComponentsView({
+ collection: this.model.get('components'),
+ config: this.config,
+ componentTypes: this.opts.componentTypes
+ });
+
+ view.render(container);
+ this.childrenView = view;
+ var childNodes = Array.prototype.slice.call(view.el.childNodes);
+
+ for (var i = 0, len = childNodes.length; i < len; i++) {
+ container.appendChild(childNodes.shift());
+ }
+
+ // If the children container is not the same as the component
+ // (so likely fetched with getChildrenSelector()) is necessary
+ // to disable pointer-events for all nested components as they
+ // might prevent the component to be selected
+ if (container !== this.el) {
+ var disableNode = function disableNode(el) {
+ var children = Array.prototype.slice.call(el.children);
+ children.forEach(function (el) {
+ el.style['pointer-events'] = 'none';
+ if (container !== el) {
+ disableNode(el);
+ }
+ });
+ };
+ disableNode(this.el);
+ }
+ },
+ renderAttributes: function renderAttributes() {
+ this.updateAttributes();
+ this.updateClasses();
+ },
+ render: function render() {
+ this.renderAttributes();
+ this.updateContent();
+ this.renderChildren();
+ this.updateScript();
+ return this;
+ }
+});
+/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0)))
+
+/***/ }),
+/* 4 */
+/***/ (function(module, exports, __webpack_require__) {
+
"use strict";
@@ -3695,16 +4055,17 @@ var _underscore = __webpack_require__(1);
var _mixins = __webpack_require__(2);
-var _Styleable = __webpack_require__(46);
+var _Styleable = __webpack_require__(47);
var _Styleable2 = _interopRequireDefault(_Styleable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var Backbone = __webpack_require__(0);
-var Components = __webpack_require__(48);
+var Components = __webpack_require__(49);
+var Selector = __webpack_require__(7);
var Selectors = __webpack_require__(10);
-var Traits = __webpack_require__(147);
+var Traits = __webpack_require__(152);
var escapeRegExp = function escapeRegExp(str) {
return str.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');
@@ -3826,6 +4187,8 @@ module.exports = Backbone.Model.extend(_Styleable2.default).extend({
},
initialize: function initialize() {
+ var _this = this;
+
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var opt = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -3862,15 +4225,80 @@ module.exports = Backbone.Model.extend(_Styleable2.default).extend({
this.set('attributes', this.get('attributes') || {});
this.listenTo(this, 'change:script', this.scriptUpdated);
this.listenTo(this, 'change:traits', this.traitsUpdated);
+ this.listenTo(this, 'change:tagName', this.tagUpdated);
+ this.listenTo(this, 'change:attributes', this.attrUpdated);
this.loadTraits();
this.initClasses();
this.initComponents();
this.initToolbar();
this.set('status', '');
+ this.listenTo(this.get('classes'), 'add remove change', function () {
+ return _this.emitUpdate('classes');
+ });
this.init();
},
+ /**
+ * Check component's type
+ * @param {string} type Component type
+ * @return {Boolean}
+ * @example
+ * model.is('image')
+ * // -> false
+ */
+ is: function is(type) {
+ return !!(this.get('type') == type);
+ },
+
+
+ /**
+ * Find inner models by query string
+ * ATTENTION: this method works only with alredy rendered component
+ * @param {string} query Query string
+ * @return {Array} Array of models
+ * @example
+ * model.find('div > .class');
+ * // -> [Component, Component, ...]
+ */
+ find: function find(query) {
+ var result = [];
+
+ this.view.$el.find(query).each(function (el, i, $el) {
+ var model = $el.data('model');
+ model && result.push(model);
+ });
+
+ return result;
+ },
+
+
+ /**
+ * Once the tag is updated I have to remove the node and replace it
+ */
+ tagUpdated: function tagUpdated() {
+ var coll = this.collection;
+ var at = coll.indexOf(this);
+ coll.remove(this);
+ coll.add(this, { at: at });
+ },
+
+
+ /**
+ * Emit changes for each updated attribute
+ */
+ attrUpdated: function attrUpdated() {
+ var _this2 = this;
+
+ var attrPrev = _extends({}, this.previous('attributes'));
+ var attrCurrent = _extends({}, this.get('attributes'));
+ var diff = (0, _mixins.shallowDiff)(attrPrev, attrCurrent);
+ (0, _underscore.keys)(diff).forEach(function (pr) {
+ return _this2.trigger('change:attributes:' + pr);
+ });
+ },
+
+
/**
* Update attributes of the model
* @param {Object} attrs Key value attributes
@@ -3909,7 +4337,7 @@ module.exports = Backbone.Model.extend(_Styleable2.default).extend({
return _Styleable2.default.getStyle.call(this);
},
setStyle: function setStyle() {
- var _this = this;
+ var _this3 = this;
var prop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -3924,7 +4352,7 @@ module.exports = Backbone.Model.extend(_Styleable2.default).extend({
this.rule = cc.setIdRule(this.getId(), prop, _extends({}, opts, { state: state }));
var diff = (0, _mixins.shallowDiff)(propOrig, prop);
(0, _underscore.keys)(diff).forEach(function (pr) {
- return _this.trigger('change:style:' + pr);
+ return _this3.trigger('change:style:' + pr);
});
} else {
prop = _Styleable2.default.setStyle.apply(this, arguments);
@@ -3940,7 +4368,7 @@ module.exports = Backbone.Model.extend(_Styleable2.default).extend({
*/
getAttributes: function getAttributes() {
var classes = [];
- var attributes = this.get('attributes') || {};
+ var attributes = _extends({}, this.get('attributes'));
// Add classes
this.get('classes').each(function (cls) {
@@ -3987,6 +4415,34 @@ module.exports = Backbone.Model.extend(_Styleable2.default).extend({
this.get('classes').reset();
return this.addClass(classes);
},
+
+
+ /**
+ * Remove classes
+ * @param {Array|string} classes Array or string of classes
+ * @return {Array} Array of removed selectors
+ * @example
+ * model.removeClass('class1');
+ * model.removeClass('class1 class2');
+ * model.removeClass(['class1', 'class2']);
+ * // -> [SelectorObject, ...]
+ */
+ removeClass: function removeClass(classes) {
+ var removed = [];
+ classes = (0, _underscore.isArray)(classes) ? classes : [classes];
+ var selectors = this.get('classes');
+ var type = Selector.TYPE_CLASS;
+
+ classes.forEach(function (classe) {
+ var classes = classe.split(' ');
+ classes.forEach(function (name) {
+ var selector = selectors.where({ name: name, type: type })[0];
+ selector && removed.push(selectors.remove(selector));
+ });
+ });
+
+ return removed;
+ },
initClasses: function initClasses() {
var classes = this.normalizeClasses(this.get('classes') || []);
this.set('classes', new Selectors(classes));
@@ -4189,7 +4645,8 @@ module.exports = Backbone.Model.extend(_Styleable2.default).extend({
clone: function clone(reset) {
var em = this.em;
var style = this.getStyle();
- var attr = (0, _underscore.clone)(this.attributes);
+ var attr = _extends({}, this.attributes);
+ attr.attributes = _extends({}, attr.attributes);
delete attr.attributes.id;
attr.components = [];
attr.classes = [];
@@ -4330,7 +4787,7 @@ module.exports = Backbone.Model.extend(_Styleable2.default).extend({
* @private
*/
getScriptString: function getScriptString(script) {
- var _this2 = this;
+ var _this4 = this;
var scr = script || this.get('script');
@@ -4352,11 +4809,16 @@ module.exports = Backbone.Model.extend(_Styleable2.default).extend({
scr = scr.replace(reg, function (match, v) {
// If at least one match is found I have to track this change for a
// better optimization inside JS generator
- _this2.scriptUpdated();
- return _this2.attributes[v];
+ _this4.scriptUpdated();
+ return _this4.attributes[v];
});
return scr;
+ },
+ emitUpdate: function emitUpdate(property) {
+ var em = this.em;
+ var event = 'component:update' + (property ? ':' + property : '');
+ em && em.trigger(event, this.model);
}
}, {
@@ -4374,7 +4836,7 @@ module.exports = Backbone.Model.extend(_Styleable2.default).extend({
});
/***/ }),
-/* 4 */
+/* 5 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -4382,429 +4844,68 @@ module.exports = Backbone.Model.extend(_Styleable2.default).extend({
var _underscore = __webpack_require__(1);
-var ComponentsView = __webpack_require__(49);
+var _mixins = __webpack_require__(2);
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var clearProp = 'data-clear-style';
module.exports = Backbone.View.extend({
- className: function className() {
- return this.getClasses();
- },
- tagName: function tagName() {
- return this.model.get('tagName');
+ template: function template(model) {
+ var pfx = this.pfx;
+ return '\n \n ' + this.templateLabel(model) + '\n
\n \n ' + this.templateInput(model) + '\n
\n ';
},
- initialize: function initialize() {
- var opt = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
- var model = this.model;
- var config = opt.config || {};
- this.opts = opt;
- this.config = config;
- this.em = config.em || '';
- this.pfx = config.stylePrefix || '';
- this.ppfx = config.pStylePrefix || '';
- this.attr = model.get('attributes');
- 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);
- this.listenTo(model, 'change:status', this.updateStatus);
- this.listenTo(model, 'change:state', this.updateState);
- this.listenTo(model, 'change:script', this.render);
- this.listenTo(model, 'change', this.handleChange);
- this.listenTo(classes, 'add remove change', this.updateClasses);
- $el.data('model', model);
- $el.data('collection', model.get('components'));
- model.view = this;
- classes.length && this.importClasses();
- this.init();
+ templateLabel: function templateLabel(model) {
+ var pfx = this.pfx;
+ var icon = model.get('icon');
+ var info = model.get('info');
+ return '\n \n ' + model.get('name') + '\n \n ⨯ \n ';
},
- remove: function remove() {
- Backbone.View.prototype.remove.apply(this);
- var children = this.childrenView;
- children && children.stopListening();
+ templateInput: function templateInput(model) {
+ return '\n \n
\n ';
},
- /**
- * Initialize callback
- */
- init: function init() {},
+ events: _defineProperty({
+ 'change': 'inputValueChanged'
+ }, 'click [' + clearProp + ']', 'clear'),
+ initialize: function initialize() {
+ var o = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
- /**
- * Handle any property change
- * @private
- */
- handleChange: function handleChange() {
- var em = this.em;
- if (em) {
- var model = this.model;
- em.trigger('component:update', model);
+ (0, _underscore.bindAll)(this, 'targetUpdated');
+ this.config = o.config || {};
+ var em = this.config.em;
+ this.em = em;
+ this.pfx = this.config.stylePrefix || '';
+ this.ppfx = this.config.pStylePrefix || '';
+ this.target = o.target || {};
+ this.propTarget = o.propTarget || {};
+ this.onChange = o.onChange;
+ this.onInputRender = o.onInputRender || {};
+ this.customValue = o.customValue || {};
+ var model = this.model;
+ this.property = model.get('property');
+ this.input = null;
+ var pfx = this.pfx;
+ this.inputHolderId = '#' + pfx + 'input-holder';
+ this.sector = model.collection && model.collection.sector;
+ model.view = this;
- for (var prop in model.changed) {
- em.trigger('component:update:' + prop, model);
- }
+ if (!model.get('value')) {
+ model.set('value', model.getDefaultValue());
}
- },
-
-
- /**
- * Import, if possible, classes inside main container
- * @private
- * */
- importClasses: function importClasses() {
- var clm = this.config.em.get('SelectorManager');
-
- if (clm) {
- this.model.get('classes').each(function (m) {
- clm.add(m.get('name'));
- });
- }
- },
-
-
- /**
- * Fires on state update. If the state is not empty will add a helper class
- * @param {Event} e
- * @private
- * */
- updateState: function updateState(e) {
- var cl = 'hc-state';
- var state = this.model.get('state');
-
- if (state) {
- this.$el.addClass(cl);
- } else {
- this.$el.removeClass(cl);
- }
- },
-
-
- /**
- * Update item on status change
- * @param {Event} e
- * @private
- * */
- updateStatus: function updateStatus(e) {
- var el = this.el;
- var status = this.model.get('status');
- var pfx = this.pfx;
- var ppfx = this.ppfx;
- var selectedCls = pfx + 'selected';
- var selectedParentCls = selectedCls + '-parent';
- var freezedCls = ppfx + 'freezed';
- var actualCls = el.getAttribute('class') || '';
- var cls = '';
-
- switch (status) {
- case 'selected':
- cls = actualCls + ' ' + selectedCls;
- break;
- case 'selected-parent':
- cls = actualCls + ' ' + selectedParentCls;
- break;
- case 'freezed':
- cls = actualCls + ' ' + freezedCls;
- break;
- default:
- this.$el.removeClass(selectedCls + ' ' + selectedParentCls + ' ' + freezedCls);
- }
-
- cls = cls.trim();
-
- if (cls) {
- el.setAttribute('class', cls);
- }
- },
-
-
- /**
- * Update highlight attribute
- * @private
- * */
- updateHighlight: function updateHighlight() {
- var hl = this.model.get('highlightable');
- this.setAttribute('data-highlightable', hl ? 1 : '');
- },
-
-
- /**
- * Update style attribute
- * @private
- * */
- updateStyle: function updateStyle() {
- var em = this.em;
- var model = this.model;
-
- if (em && em.get('avoidInlineStyle')) {
- this.el.id = model.getId();
- model.setStyle(model.getStyle());
- } else {
- this.setAttribute('style', model.styleToString());
- }
- },
-
-
- /**
- * Update classe attribute
- * @private
- * */
- updateClasses: function updateClasses() {
- var str = this.model.get('classes').pluck('name').join(' ');
- this.setAttribute('class', str);
-
- // Regenerate status class
- this.updateStatus();
- },
-
-
- /**
- * Update single attribute
- * @param {[type]} name [description]
- * @param {[type]} value [description]
- */
- setAttribute: function setAttribute(name, value) {
- var el = this.$el;
- value ? el.attr(name, value) : el.removeAttr(name);
- },
-
-
- /**
- * Get classes from attributes.
- * This method is called before initialize
- *
- * @return {Array}|null
- * @private
- * */
- getClasses: function getClasses() {
- var attr = this.model.get("attributes"),
- classes = attr['class'] || [];
- classes = (0, _underscore.isArray)(classes) ? classes : [classes];
-
- if (classes.length) {
- return classes.join(' ');
- } else {
- return null;
- }
- },
-
-
- /**
- * Update attributes
- * @private
- * */
- updateAttributes: function updateAttributes() {
- var model = this.model;
- var attrs = {};
- var attr = model.get('attributes');
- var src = model.get('src');
-
- for (var key in attr) {
- attrs[key] = attr[key];
- }
-
- src && (attrs.src = src);
- this.$el.attr(attrs);
- this.updateHighlight();
- this.updateStyle();
- },
-
-
- /**
- * Update component content
- * @private
- * */
- updateContent: function updateContent() {
- this.getChildrenContainer().innerHTML = this.model.get('content');
- },
-
-
- /**
- * Prevent default helper
- * @param {Event} e
- * @private
- */
- prevDef: function prevDef(e) {
- e.preventDefault();
- },
-
-
- /**
- * Render component's script
- * @private
- */
- updateScript: function updateScript() {
- if (!this.model.get('script')) {
- return;
- }
-
- var em = this.em;
- if (em) {
- var canvas = em.get('Canvas');
- canvas.getCanvasView().updateScript(this);
- }
- },
-
-
- /**
- * Return children container
- * Differently from a simple component where children container is the
- * component itself
- *
- *
- *
- * You could have the children container more deeper
- *
- *
- *
- *
- *
- * @return HTMLElement
- * @private
- */
- getChildrenContainer: function getChildrenContainer() {
- var container = this.el;
-
- if (typeof this.getChildrenSelector == 'function') {
- container = this.el.querySelector(this.getChildrenSelector());
- } else if (typeof this.getTemplate == 'function') {
- // Need to find deepest first child
- }
-
- return container;
- },
-
-
- /**
- * Render children components
- * @private
- */
- renderChildren: function renderChildren() {
- var container = this.getChildrenContainer();
- var view = new ComponentsView({
- collection: this.model.get('components'),
- config: this.config,
- componentTypes: this.opts.componentTypes
- });
-
- view.render(container);
- this.childrenView = view;
- var childNodes = Array.prototype.slice.call(view.el.childNodes);
-
- for (var i = 0, len = childNodes.length; i < len; i++) {
- container.appendChild(childNodes.shift());
- }
-
- // If the children container is not the same as the component
- // (so likely fetched with getChildrenSelector()) is necessary
- // to disable pointer-events for all nested components as they
- // might prevent the component to be selected
- if (container !== this.el) {
- var disableNode = function disableNode(el) {
- var children = Array.prototype.slice.call(el.children);
- children.forEach(function (el) {
- el.style['pointer-events'] = 'none';
- if (container !== el) {
- disableNode(el);
- }
- });
- };
- disableNode(this.el);
- }
- },
- renderAttributes: function renderAttributes() {
- this.updateAttributes();
- this.updateClasses();
- },
- render: function render() {
- this.renderAttributes();
- this.updateContent();
- this.renderChildren();
- this.updateScript();
- return this;
- }
-});
-/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0)))
-
-/***/ }),
-/* 5 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/* WEBPACK VAR INJECTION */(function(Backbone) {
-
-var _underscore = __webpack_require__(1);
-
-var _mixins = __webpack_require__(2);
-
-module.exports = Backbone.View.extend({
- template: function template(model) {
- var pfx = this.pfx;
- return '\n \n ' + this.templateLabel(model) + '\n
\n \n ' + this.templateInput(model) + '\n
\n ';
- },
- templateLabel: function templateLabel(model) {
- var pfx = this.pfx;
- var icon = model.get('icon');
- var info = model.get('info');
- return '\n \n ' + model.get('name') + '\n \n ⨯ \n ';
- },
- templateInput: function templateInput(model) {
- return '\n \n
\n ';
- },
-
-
- events: {
- 'change': 'inputValueChanged'
- },
-
- initialize: function initialize() {
- var o = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
- (0, _underscore.bindAll)(this, 'targetUpdated');
- this.config = o.config || {};
- var em = this.config.em;
- this.em = em;
- this.pfx = this.config.stylePrefix || '';
- this.ppfx = this.config.pStylePrefix || '';
- this.target = o.target || {};
- this.propTarget = o.propTarget || {};
- this.onChange = o.onChange;
- this.onInputRender = o.onInputRender || {};
- this.customValue = o.customValue || {};
- var model = this.model;
- this.property = model.get('property');
- this.input = null;
- var pfx = this.pfx;
- this.inputHolderId = '#' + pfx + 'input-holder';
- this.sector = model.collection && model.collection.sector;
- model.view = this;
-
- if (!model.get('value')) {
- model.set('value', model.getDefaultValue());
- }
-
- em && em.on('update:component:style:' + this.property, this.targetUpdated);
- this.listenTo(this.propTarget, 'update', this.targetUpdated);
- this.listenTo(model, 'destroy remove', this.remove);
- this.listenTo(model, 'change:value', this.modelValueChanged);
- this.listenTo(model, 'targetUpdated', this.targetUpdated);
- this.listenTo(model, 'change:visible', this.updateVisibility);
- this.listenTo(model, 'change:status', this.updateStatus);
- this.events['click .' + pfx + 'clear'] = 'clear';
- this.delegateEvents();
-
- var init = this.init && this.init.bind(this);
- init && init();
+
+ em && em.on('update:component:style:' + this.property, this.targetUpdated);
+ this.listenTo(this.propTarget, 'update', this.targetUpdated);
+ this.listenTo(model, 'destroy remove', this.remove);
+ this.listenTo(model, 'change:value', this.modelValueChanged);
+ this.listenTo(model, 'targetUpdated', this.targetUpdated);
+ this.listenTo(model, 'change:visible', this.updateVisibility);
+ this.listenTo(model, 'change:status', this.updateStatus);
+
+ var init = this.init && this.init.bind(this);
+ init && init();
},
@@ -4855,7 +4956,7 @@ module.exports = Backbone.View.extend({
* @return {HTMLElement}
*/
getClearEl: function getClearEl() {
- return this.el.querySelector('.' + this.pfx + 'clear');
+ return this.el.querySelector('[' + clearProp + ']');
},
@@ -4901,10 +5002,7 @@ module.exports = Backbone.View.extend({
* Fired when the element of the property is updated
*/
elementUpdated: function elementUpdated() {
- this.model.set('status', 'updated');
- var parent = this.model.parent;
- var parentView = parent && parent.view;
- parentView && parentView.elementUpdated();
+ this.setStatus('updated');
},
setStatus: function setStatus(value) {
this.model.set('status', value);
@@ -14903,8 +15001,98 @@ return CodeMirror$1;
/***/ (function(module, exports, __webpack_require__) {
"use strict";
-/* WEBPACK VAR INJECTION */(function(Backbone, _) {
+
+var Backbone = __webpack_require__(0);
+
+var TYPE_CLASS = 1;
+var TYPE_ID = 2;
+
+var Selector = Backbone.Model.extend({
+
+ idAttribute: 'name',
+
+ defaults: {
+ name: '',
+
+ label: '',
+
+ // Type of the selector
+ type: TYPE_CLASS,
+
+ // If not active it's not selectable by the style manager (uncheckboxed)
+ active: true,
+
+ // Can't be seen by the style manager, therefore even by the user
+ // Will be rendered only in export code
+ private: false,
+
+ // If true, can't be removed from the attacched element
+ protected: false
+ },
+
+ initialize: function initialize() {
+ var name = this.get('name');
+ var label = this.get('label');
+
+ if (!name) {
+ this.set('name', label);
+ } else if (!label) {
+ this.set('label', name);
+ }
+
+ this.set('name', Selector.escapeName(this.get('name')));
+ },
+
+
+ /**
+ * Get full selector name
+ * @return {string}
+ */
+ getFullName: function getFullName() {
+ var init = '';
+
+ switch (this.get('type')) {
+ case TYPE_CLASS:
+ init = '.';
+ break;
+ case TYPE_ID:
+ init = '#';
+ break;
+ }
+
+ return init + this.get('name');
+ }
+}, {
+ // All type selectors: https://developer.mozilla.org/it/docs/Web/CSS/CSS_Selectors
+ // Here I define only what I need
+ TYPE_CLASS: TYPE_CLASS,
+
+ TYPE_ID: TYPE_ID,
+
+ /**
+ * Escape string
+ * @param {string} name
+ * @return {string}
+ * @private
+ */
+ escapeName: function escapeName(name) {
+ return ('' + name).trim().replace(/([^a-z0-9\w-]+)/gi, '-');
+ }
+});
+
+module.exports = Selector;
+
+/***/ }),
+/* 8 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _underscore = __webpack_require__(1);
+
+var Backbone = __webpack_require__(0);
var $ = Backbone.$;
module.exports = Backbone.View.extend({
@@ -14913,18 +15101,23 @@ module.exports = Backbone.View.extend({
'change': 'onChange'
},
+ attributes: function attributes() {
+ return this.model.get('attributes');
+ },
initialize: function initialize(o) {
- var md = this.model;
+ var model = this.model;
+ var name = model.get('name');
+ var target = model.target;
this.config = o.config || {};
this.pfx = this.config.stylePrefix || '';
this.ppfx = this.config.pStylePrefix || '';
- this.target = md.target;
+ this.target = target;
this.className = this.pfx + 'trait';
this.labelClass = this.ppfx + 'label';
- this.fieldClass = this.ppfx + 'field ' + this.ppfx + 'field-' + md.get('type');
+ this.fieldClass = this.ppfx + 'field ' + this.ppfx + 'field-' + model.get('type');
this.inputhClass = this.ppfx + 'input-holder';
- md.off('change:value', this.onValueChange);
- this.listenTo(md, 'change:value', this.onValueChange);
+ model.off('change:value', this.onValueChange);
+ this.listenTo(model, 'change:value', this.onValueChange);
this.tmpl = '';
},
@@ -14939,24 +15132,27 @@ module.exports = Backbone.View.extend({
getValueForTarget: function getValueForTarget() {
return this.model.get('value');
},
+ setInputValue: function setInputValue(value) {
+ this.getInputEl().value = value;
+ },
/**
* On change callback
* @private
*/
- onValueChange: function onValueChange() {
- var m = this.model;
+ onValueChange: function onValueChange(model, value) {
+ var opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+
+ var mod = this.model;
var trg = this.target;
- var name = m.get('name');
- var value = this.getValueForTarget();
- // Chabge property if requested otherwise attributes
- if (m.get('changeProp')) {
- trg.set(name, value);
+ var name = mod.get('name');
+
+ if (opts.fromTarget) {
+ this.setInputValue(mod.get('value'));
} else {
- var attrs = _.clone(trg.get('attributes'));
- attrs[name] = value;
- trg.set('attributes', attrs);
+ var _value = this.getValueForTarget();
+ mod.setTargetValue(_value);
}
},
@@ -15053,10 +15249,9 @@ module.exports = Backbone.View.extend({
return this;
}
});
-/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0), __webpack_require__(1)))
/***/ }),
-/* 8 */
+/* 9 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -16026,124 +16221,38 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__;
});
/***/ }),
-/* 9 */
+/* 10 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
-var Backbone = __webpack_require__(0);
-
-var TYPE_CLASS = 1;
-var TYPE_ID = 2;
-
-var Selector = Backbone.Model.extend({
-
- idAttribute: 'name',
-
- defaults: {
- name: '',
-
- label: '',
-
- // Type of the selector
- type: TYPE_CLASS,
-
- // If not active it's not selectable by the style manager (uncheckboxed)
- active: true,
-
- // Can't be seen by the style manager, therefore even by the user
- // Will be rendered only in export code
- private: false,
-
- // If true, can't be removed from the attacched element
- protected: false
- },
-
- initialize: function initialize() {
- var name = this.get('name');
- var label = this.get('label');
-
- if (!name) {
- this.set('name', label);
- } else if (!label) {
- this.set('label', name);
- }
-
- this.set('name', Selector.escapeName(this.get('name')));
- },
-
-
- /**
- * Get full selector name
- * @return {string}
- */
- getFullName: function getFullName() {
- var init = '';
-
- switch (this.get('type')) {
- case TYPE_CLASS:
- init = '.';
- break;
- case TYPE_ID:
- init = '#';
- break;
- }
-
- return init + this.get('name');
- }
-}, {
- // All type selectors: https://developer.mozilla.org/it/docs/Web/CSS/CSS_Selectors
- // Here I define only what I need
- TYPE_CLASS: TYPE_CLASS,
-
- TYPE_ID: TYPE_ID,
-
- /**
- * Escape string
- * @param {string} name
- * @return {string}
- * @private
- */
- escapeName: function escapeName(name) {
- return ('' + name).trim().replace(/([^a-z0-9\w-]+)/gi, '-');
- }
-});
-
-module.exports = Selector;
-
-/***/ }),
-/* 10 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/* WEBPACK VAR INJECTION */(function(_) {
+var _underscore = __webpack_require__(1);
-var Backbone = __webpack_require__(0);
-var Selector = __webpack_require__(9);
+var Selector = __webpack_require__(7);
-module.exports = Backbone.Collection.extend({
+module.exports = __webpack_require__(0).Collection.extend({
model: Selector,
getStyleable: function getStyleable() {
- return _.filter(this.models, function (item) {
+ return (0, _underscore.filter)(this.models, function (item) {
return item.get('active') && !item.get('private');
});
},
getValid: function getValid() {
- return _.filter(this.models, function (item) {
+ return (0, _underscore.filter)(this.models, function (item) {
return !item.get('private');
});
},
- getFullString: function getFullString() {
+ getFullString: function getFullString(collection) {
var result = [];
- this.each(function (selector) {
+ var coll = collection || this;
+ coll.forEach(function (selector) {
return result.push(selector.getFullName());
});
return result.join('').trim();
}
});
-/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(1)))
/***/ }),
/* 11 */
@@ -16154,7 +16263,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 _TypeableCollection = __webpack_require__(31);
+var _TypeableCollection = __webpack_require__(32);
var _TypeableCollection2 = _interopRequireDefault(_TypeableCollection);
@@ -16165,8 +16274,8 @@ var Property = __webpack_require__(12);
module.exports = __webpack_require__(0).Collection.extend(_TypeableCollection2.default).extend({
types: [{
id: 'stack',
- model: __webpack_require__(116),
- view: __webpack_require__(33),
+ model: __webpack_require__(121),
+ view: __webpack_require__(34),
isType: function isType(value) {
if (value && value.type == 'stack') {
return value;
@@ -16174,8 +16283,8 @@ module.exports = __webpack_require__(0).Collection.extend(_TypeableCollection2.d
}
}, {
id: 'composite',
- model: __webpack_require__(32),
- view: __webpack_require__(18),
+ model: __webpack_require__(33),
+ view: __webpack_require__(17),
isType: function isType(value) {
if (value && value.type == 'composite') {
return value;
@@ -16184,7 +16293,7 @@ module.exports = __webpack_require__(0).Collection.extend(_TypeableCollection2.d
}, {
id: 'file',
model: Property,
- view: __webpack_require__(39),
+ view: __webpack_require__(40),
isType: function isType(value) {
if (value && value.type == 'file') {
return value;
@@ -16193,7 +16302,7 @@ module.exports = __webpack_require__(0).Collection.extend(_TypeableCollection2.d
}, {
id: 'color',
model: Property,
- view: __webpack_require__(37),
+ view: __webpack_require__(38),
isType: function isType(value) {
if (value && value.type == 'color') {
return value;
@@ -16201,8 +16310,8 @@ module.exports = __webpack_require__(0).Collection.extend(_TypeableCollection2.d
}
}, {
id: 'select',
- model: __webpack_require__(40),
- view: __webpack_require__(36),
+ model: __webpack_require__(41),
+ view: __webpack_require__(37),
isType: function isType(value) {
if (value && value.type == 'select') {
return value;
@@ -16210,8 +16319,8 @@ module.exports = __webpack_require__(0).Collection.extend(_TypeableCollection2.d
}
}, {
id: 'radio',
- model: __webpack_require__(40),
- view: __webpack_require__(35),
+ model: __webpack_require__(41),
+ view: __webpack_require__(36),
isType: function isType(value) {
if (value && value.type == 'radio') {
return value;
@@ -16219,8 +16328,8 @@ module.exports = __webpack_require__(0).Collection.extend(_TypeableCollection2.d
}
}, {
id: 'slider',
- model: __webpack_require__(122),
- view: __webpack_require__(123),
+ model: __webpack_require__(127),
+ view: __webpack_require__(128),
isType: function isType(value) {
if (value && value.type == 'slider') {
return value;
@@ -16228,7 +16337,7 @@ module.exports = __webpack_require__(0).Collection.extend(_TypeableCollection2.d
}
}, {
id: 'integer',
- model: __webpack_require__(41),
+ model: __webpack_require__(42),
view: __webpack_require__(14),
isType: function isType(value) {
if (value && value.type == 'integer') {
@@ -16437,12 +16546,12 @@ module.exports = __webpack_require__(0).Model.extend({
var PropertyView = __webpack_require__(5);
var PropertyIntegerView = __webpack_require__(14);
-var PropertyRadioView = __webpack_require__(35);
-var PropertySelectView = __webpack_require__(36);
-var PropertyColorView = __webpack_require__(37);
-var PropertyFileView = __webpack_require__(39);
-var PropertyCompositeView = __webpack_require__(18);
-var PropertyStackView = __webpack_require__(33);
+var PropertyRadioView = __webpack_require__(36);
+var PropertySelectView = __webpack_require__(37);
+var PropertyColorView = __webpack_require__(38);
+var PropertyFileView = __webpack_require__(40);
+var PropertyCompositeView = __webpack_require__(17);
+var PropertyStackView = __webpack_require__(34);
module.exports = Backbone.View.extend({
initialize: function initialize(o) {
@@ -16506,7 +16615,7 @@ module.exports = Backbone.View.extend({
"use strict";
/* WEBPACK VAR INJECTION */(function(Backbone) {
-var InputNumber = __webpack_require__(19);
+var InputNumber = __webpack_require__(18);
var $ = Backbone.$;
module.exports = __webpack_require__(5).extend({
@@ -16548,7 +16657,7 @@ module.exports = __webpack_require__(5).extend({
var Backbone = __webpack_require__(0);
-var ComponentView = __webpack_require__(4);
+var ComponentView = __webpack_require__(3);
module.exports = ComponentView.extend({
@@ -16646,308 +16755,6 @@ module.exports = g;
/* 17 */
/***/ (function(module, exports, __webpack_require__) {
-// keymaster.js
-// (c) 2011-2013 Thomas Fuchs
-// keymaster.js may be freely distributed under the MIT license.
-
-;(function(global){
- var k,
- _handlers = {},
- _mods = { 16: false, 18: false, 17: false, 91: false },
- _scope = 'all',
- // modifier keys
- _MODIFIERS = {
- '⇧': 16, shift: 16,
- '⌥': 18, alt: 18, option: 18,
- '⌃': 17, ctrl: 17, control: 17,
- '⌘': 91, command: 91
- },
- // special keys
- _MAP = {
- backspace: 8, tab: 9, clear: 12,
- enter: 13, 'return': 13,
- esc: 27, escape: 27, space: 32,
- left: 37, up: 38,
- right: 39, down: 40,
- del: 46, 'delete': 46,
- home: 36, end: 35,
- pageup: 33, pagedown: 34,
- ',': 188, '.': 190, '/': 191,
- '`': 192, '-': 189, '=': 187,
- ';': 186, '\'': 222,
- '[': 219, ']': 221, '\\': 220
- },
- code = function(x){
- return _MAP[x] || x.toUpperCase().charCodeAt(0);
- },
- _downKeys = [];
-
- for(k=1;k<20;k++) _MAP['f'+k] = 111+k;
-
- // IE doesn't support Array#indexOf, so have a simple replacement
- function index(array, item){
- var i = array.length;
- while(i--) if(array[i]===item) return i;
- return -1;
- }
-
- // for comparing mods before unassignment
- function compareArray(a1, a2) {
- if (a1.length != a2.length) return false;
- for (var i = 0; i < a1.length; i++) {
- if (a1[i] !== a2[i]) return false;
- }
- return true;
- }
-
- var modifierMap = {
- 16:'shiftKey',
- 18:'altKey',
- 17:'ctrlKey',
- 91:'metaKey'
- };
- function updateModifierKey(event) {
- for(k in _mods) _mods[k] = event[modifierMap[k]];
- };
-
- // handle keydown event
- function dispatch(event) {
- var key, handler, k, i, modifiersMatch, scope;
- key = event.keyCode;
-
- if (index(_downKeys, key) == -1) {
- _downKeys.push(key);
- }
-
- // if a modifier key, set the key. property to true and return
- if(key == 93 || key == 224) key = 91; // right command on webkit, command on Gecko
- if(key in _mods) {
- _mods[key] = true;
- // 'assignKey' from inside this closure is exported to window.key
- for(k in _MODIFIERS) if(_MODIFIERS[k] == key) assignKey[k] = true;
- return;
- }
- updateModifierKey(event);
-
- // see if we need to ignore the keypress (filter() can can be overridden)
- // by default ignore key presses if a select, textarea, or input is focused
- if(!assignKey.filter.call(this, event)) return;
-
- // abort if no potentially matching shortcuts found
- if (!(key in _handlers)) return;
-
- scope = getScope();
-
- // for each potential shortcut
- for (i = 0; i < _handlers[key].length; i++) {
- handler = _handlers[key][i];
-
- // see if it's in the current scope
- if(handler.scope == scope || handler.scope == 'all'){
- // check if modifiers match if any
- modifiersMatch = handler.mods.length > 0;
- for(k in _mods)
- if((!_mods[k] && index(handler.mods, +k) > -1) ||
- (_mods[k] && index(handler.mods, +k) == -1)) modifiersMatch = false;
- // call the handler and stop the event if neccessary
- if((handler.mods.length == 0 && !_mods[16] && !_mods[18] && !_mods[17] && !_mods[91]) || modifiersMatch){
- if(handler.method(event, handler)===false){
- if(event.preventDefault) event.preventDefault();
- else event.returnValue = false;
- if(event.stopPropagation) event.stopPropagation();
- if(event.cancelBubble) event.cancelBubble = true;
- }
- }
- }
- }
- };
-
- // unset modifier keys on keyup
- function clearModifier(event){
- var key = event.keyCode, k,
- i = index(_downKeys, key);
-
- // remove key from _downKeys
- if (i >= 0) {
- _downKeys.splice(i, 1);
- }
-
- if(key == 93 || key == 224) key = 91;
- if(key in _mods) {
- _mods[key] = false;
- for(k in _MODIFIERS) if(_MODIFIERS[k] == key) assignKey[k] = false;
- }
- };
-
- function resetModifiers() {
- for(k in _mods) _mods[k] = false;
- for(k in _MODIFIERS) assignKey[k] = false;
- };
-
- // parse and assign shortcut
- function assignKey(key, scope, method){
- var keys, mods;
- keys = getKeys(key);
- if (method === undefined) {
- method = scope;
- scope = 'all';
- }
-
- // for each shortcut
- for (var i = 0; i < keys.length; i++) {
- // set modifier keys if any
- mods = [];
- key = keys[i].split('+');
- if (key.length > 1){
- mods = getMods(key);
- key = [key[key.length-1]];
- }
- // convert to keycode and...
- key = key[0]
- key = code(key);
- // ...store handler
- if (!(key in _handlers)) _handlers[key] = [];
- _handlers[key].push({ shortcut: keys[i], scope: scope, method: method, key: keys[i], mods: mods });
- }
- };
-
- // unbind all handlers for given key in current scope
- function unbindKey(key, scope) {
- var multipleKeys, keys,
- mods = [],
- i, j, obj;
-
- multipleKeys = getKeys(key);
-
- for (j = 0; j < multipleKeys.length; j++) {
- keys = multipleKeys[j].split('+');
-
- if (keys.length > 1) {
- mods = getMods(keys);
- key = keys[keys.length - 1];
- }
-
- key = code(key);
-
- if (scope === undefined) {
- scope = getScope();
- }
- if (!_handlers[key]) {
- return;
- }
- for (i = 0; i < _handlers[key].length; i++) {
- obj = _handlers[key][i];
- // only clear handlers if correct scope and mods match
- if (obj.scope === scope && compareArray(obj.mods, mods)) {
- _handlers[key][i] = {};
- }
- }
- }
- };
-
- // Returns true if the key with code 'keyCode' is currently down
- // Converts strings into key codes.
- function isPressed(keyCode) {
- if (typeof(keyCode)=='string') {
- keyCode = code(keyCode);
- }
- return index(_downKeys, keyCode) != -1;
- }
-
- function getPressedKeyCodes() {
- return _downKeys.slice(0);
- }
-
- function filter(event){
- var tagName = (event.target || event.srcElement).tagName;
- // ignore keypressed in any elements that support keyboard data input
- return !(tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA');
- }
-
- // initialize key. to false
- for(k in _MODIFIERS) assignKey[k] = false;
-
- // set current scope (default 'all')
- function setScope(scope){ _scope = scope || 'all' };
- function getScope(){ return _scope || 'all' };
-
- // delete all handlers for a given scope
- function deleteScope(scope){
- var key, handlers, i;
-
- for (key in _handlers) {
- handlers = _handlers[key];
- for (i = 0; i < handlers.length; ) {
- if (handlers[i].scope === scope) handlers.splice(i, 1);
- else i++;
- }
- }
- };
-
- // abstract key logic for assign and unassign
- function getKeys(key) {
- var keys;
- key = key.replace(/\s/g, '');
- keys = key.split(',');
- if ((keys[keys.length - 1]) == '') {
- keys[keys.length - 2] += ',';
- }
- return keys;
- }
-
- // abstract mods logic for assign and unassign
- function getMods(key) {
- var mods = key.slice(0, key.length - 1);
- for (var mi = 0; mi < mods.length; mi++)
- mods[mi] = _MODIFIERS[mods[mi]];
- return mods;
- }
-
- // cross-browser events
- function addEvent(object, event, method) {
- if (object.addEventListener)
- object.addEventListener(event, method, false);
- else if(object.attachEvent)
- object.attachEvent('on'+event, function(){ method(window.event) });
- };
-
- // set the handlers globally on document
- addEvent(document, 'keydown', function(event) { dispatch(event) }); // Passing _scope to a callback to ensure it remains the same by execution. Fixes #48
- addEvent(document, 'keyup', clearModifier);
-
- // reset modifiers to false whenever the window is (re)focused.
- addEvent(window, 'focus', resetModifiers);
-
- // store previously defined key
- var previousKey = global.key;
-
- // restore previously defined key and return reference to our key object
- function noConflict() {
- var k = global.key;
- global.key = previousKey;
- return k;
- }
-
- // set window.key and window.key.set/get/deleteScope, and the default filter
- global.key = assignKey;
- global.key.setScope = setScope;
- global.key.getScope = getScope;
- global.key.deleteScope = deleteScope;
- global.key.filter = filter;
- global.key.isPressed = isPressed;
- global.key.getPressedKeyCodes = getPressedKeyCodes;
- global.key.noConflict = noConflict;
- global.key.unbind = unbindKey;
-
- if(true) module.exports = assignKey;
-
-})(this);
-
-
-/***/ }),
-/* 18 */
-/***/ (function(module, exports, __webpack_require__) {
-
"use strict";
/* WEBPACK VAR INJECTION */(function(Backbone) {
@@ -17074,7 +16881,7 @@ module.exports = PropertyView.extend({
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0)))
/***/ }),
-/* 19 */
+/* 18 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -17084,7 +16891,7 @@ var _underscore = __webpack_require__(1);
var _mixins = __webpack_require__(2);
-var Input = __webpack_require__(34);
+var Input = __webpack_require__(35);
var Backbone = __webpack_require__(0);
var $ = Backbone.$;
@@ -17364,6 +17171,71 @@ module.exports = Input.extend({
});
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(1)))
+/***/ }),
+/* 19 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+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 Component = __webpack_require__(4);
+
+module.exports = Component.extend({
+
+ defaults: _extends({}, Component.prototype.defaults, {
+ type: 'tbody',
+ tagName: 'tbody',
+ draggable: ['table'],
+ droppable: ['tr'],
+ columns: 1,
+ rows: 1
+ }),
+
+ initialize: function initialize(o, opt) {
+ Component.prototype.initialize.apply(this, arguments);
+ var components = this.get('components');
+ var columns = this.get('columns');
+ var rows = this.get('rows');
+
+ // Init components if empty
+ if (!components.length) {
+ var rowsToAdd = [];
+
+ while (rows--) {
+ var columnsToAdd = [];
+ var clm = columns;
+
+ while (clm--) {
+ columnsToAdd.push({
+ type: 'cell',
+ classes: ['cell']
+ });
+ }
+
+ rowsToAdd.push({
+ type: 'row',
+ classes: ['row'],
+ components: columnsToAdd
+ });
+ }
+
+ components.add(rowsToAdd);
+ }
+ }
+}, {
+ isComponent: function isComponent(el) {
+ var result = '';
+
+ if (el.tagName == 'TBODY') {
+ result = { type: 'tbody' };
+ }
+
+ return result;
+ }
+});
+
/***/ }),
/* 20 */
/***/ (function(module, exports, __webpack_require__) {
@@ -17373,7 +17245,7 @@ module.exports = Input.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 Component = __webpack_require__(3);
+var Component = __webpack_require__(4);
module.exports = Component.extend({
@@ -17496,22 +17368,20 @@ var _underscore = __webpack_require__(1);
var _mixins = __webpack_require__(2);
-var ToolbarView = __webpack_require__(178);
-var Toolbar = __webpack_require__(180);
-var key = __webpack_require__(17);
-var Backbone = __webpack_require__(0);
+var ToolbarView = __webpack_require__(188);
+var Toolbar = __webpack_require__(190);
+var key = __webpack_require__(23);
+var $ = __webpack_require__(0).$;
var showOffsets = void 0;
-var $ = Backbone.$;
module.exports = {
init: function init(o) {
- (0, _underscore.bindAll)(this, 'onHover', 'onOut', 'onClick', 'onKeyPress', 'copyComp', 'pasteComp', 'onFrameScroll');
+ (0, _underscore.bindAll)(this, 'onHover', 'onOut', 'onClick', 'onKeyPress', 'onFrameScroll');
},
enable: function enable() {
this.frameOff = this.canvasOff = this.adjScroll = null;
var config = this.config.em.get('Config');
this.startSelectComponent();
- this.toggleClipboard(config.copyPaste);
var em = this.config.em;
showOffsets = 1;
@@ -17520,49 +17390,6 @@ module.exports = {
},
- /**
- * Toggle clipboard function
- * @param {Boolean} active
- * @return {this}
- * @private
- */
- toggleClipboard: function toggleClipboard(active) {
- var en = active || 0;
- if (en) {
- key('⌘+c, ctrl+c', this.copyComp);
- key('⌘+v, ctrl+v', this.pasteComp);
- } else {
- key.unbind('⌘+c, ctrl+c');
- key.unbind('⌘+v, ctrl+v');
- }
- },
-
-
- /**
- * Copy component to the clipboard
- * @private
- */
- copyComp: function copyComp() {
- var el = this.editorModel.get('selectedComponent');
- if (el && el.get('copyable')) this.editorModel.set('clipboard', el);
- },
-
-
- /**
- * Paste component from clipboard
- * @private
- */
- pasteComp: function pasteComp() {
- var clp = this.editorModel.get('clipboard'),
- sel = this.editorModel.get('selectedComponent');
- if (clp && sel && sel.collection) {
- var index = sel.collection.indexOf(sel),
- clone = clp.clone();
- sel.collection.add(clone, { at: index + 1 });
- }
- },
-
-
/**
* Start select component event
* @private
@@ -17633,6 +17460,7 @@ module.exports = {
onHover: function onHover(e) {
e.stopPropagation();
var trg = e.target;
+ var model = $(trg).data('model');
// Adjust tools scroll top
if (!this.adjScroll) {
@@ -17641,6 +17469,13 @@ module.exports = {
this.updateAttached();
}
+ if (model && !model.get('hoverable')) {
+ var comp = model && model.parent();
+ while (comp && !comp.get('hoverable')) {
+ comp = comp.parent();
+ }comp && (trg = comp.view.el);
+ }
+
var pos = this.getElementPos(trg);
this.updateBadge(trg, pos);
this.updateHighlighter(trg, pos);
@@ -17731,7 +17566,18 @@ module.exports = {
onClick: function onClick(e) {
e.stopPropagation();
var model = $(e.target).data('model');
- model && this.editor.select(model);
+ var editor = this.editor;
+
+ if (model) {
+ if (model.get('selectable')) {
+ editor.select(model);
+ } else {
+ var parent = model.parent();
+ while (parent && !parent.get('selectable')) {
+ parent = parent.parent();
+ }parent && editor.select(parent);
+ }
+ }
},
@@ -17978,6 +17824,7 @@ module.exports = {
var unit = 'px';
var toolbarEl = this.canvas.getToolbarEl();
var toolbarStyle = toolbarEl.style;
+ var origDisp = toolbarStyle.display;
toolbarStyle.display = 'block';
var pos = this.canvas.getTargetToElementDim(toolbarEl, el, {
elPos: elPos,
@@ -17986,7 +17833,7 @@ module.exports = {
var leftPos = pos.left + pos.elementWidth - pos.targetWidth;
toolbarStyle.top = pos.top + unit;
toolbarStyle.left = leftPos + unit;
- toolbarStyle.display = '';
+ toolbarStyle.display = origDisp;
},
@@ -18103,7 +17950,6 @@ module.exports = {
this.stopSelectComponent();
!opts.preserveSelected && em.setSelected(null);
this.clean();
- this.toggleClipboard();
this.hideBadge();
this.hideFixedElementOffset();
this.canvas.getToolbarEl().style.display = 'none';
@@ -18121,7 +17967,7 @@ module.exports = {
"use strict";
/* WEBPACK VAR INJECTION */(function(Backbone, _) {
-var SelectPosition = __webpack_require__(52);
+var SelectPosition = __webpack_require__(53);
var $ = Backbone.$;
module.exports = _.extend({}, SelectPosition, {
@@ -18359,6 +18205,308 @@ module.exports = _.extend({}, SelectPosition, {
/* 23 */
/***/ (function(module, exports, __webpack_require__) {
+// keymaster.js
+// (c) 2011-2013 Thomas Fuchs
+// keymaster.js may be freely distributed under the MIT license.
+
+;(function(global){
+ var k,
+ _handlers = {},
+ _mods = { 16: false, 18: false, 17: false, 91: false },
+ _scope = 'all',
+ // modifier keys
+ _MODIFIERS = {
+ '⇧': 16, shift: 16,
+ '⌥': 18, alt: 18, option: 18,
+ '⌃': 17, ctrl: 17, control: 17,
+ '⌘': 91, command: 91
+ },
+ // special keys
+ _MAP = {
+ backspace: 8, tab: 9, clear: 12,
+ enter: 13, 'return': 13,
+ esc: 27, escape: 27, space: 32,
+ left: 37, up: 38,
+ right: 39, down: 40,
+ del: 46, 'delete': 46,
+ home: 36, end: 35,
+ pageup: 33, pagedown: 34,
+ ',': 188, '.': 190, '/': 191,
+ '`': 192, '-': 189, '=': 187,
+ ';': 186, '\'': 222,
+ '[': 219, ']': 221, '\\': 220
+ },
+ code = function(x){
+ return _MAP[x] || x.toUpperCase().charCodeAt(0);
+ },
+ _downKeys = [];
+
+ for(k=1;k<20;k++) _MAP['f'+k] = 111+k;
+
+ // IE doesn't support Array#indexOf, so have a simple replacement
+ function index(array, item){
+ var i = array.length;
+ while(i--) if(array[i]===item) return i;
+ return -1;
+ }
+
+ // for comparing mods before unassignment
+ function compareArray(a1, a2) {
+ if (a1.length != a2.length) return false;
+ for (var i = 0; i < a1.length; i++) {
+ if (a1[i] !== a2[i]) return false;
+ }
+ return true;
+ }
+
+ var modifierMap = {
+ 16:'shiftKey',
+ 18:'altKey',
+ 17:'ctrlKey',
+ 91:'metaKey'
+ };
+ function updateModifierKey(event) {
+ for(k in _mods) _mods[k] = event[modifierMap[k]];
+ };
+
+ // handle keydown event
+ function dispatch(event) {
+ var key, handler, k, i, modifiersMatch, scope;
+ key = event.keyCode;
+
+ if (index(_downKeys, key) == -1) {
+ _downKeys.push(key);
+ }
+
+ // if a modifier key, set the key. property to true and return
+ if(key == 93 || key == 224) key = 91; // right command on webkit, command on Gecko
+ if(key in _mods) {
+ _mods[key] = true;
+ // 'assignKey' from inside this closure is exported to window.key
+ for(k in _MODIFIERS) if(_MODIFIERS[k] == key) assignKey[k] = true;
+ return;
+ }
+ updateModifierKey(event);
+
+ // see if we need to ignore the keypress (filter() can can be overridden)
+ // by default ignore key presses if a select, textarea, or input is focused
+ if(!assignKey.filter.call(this, event)) return;
+
+ // abort if no potentially matching shortcuts found
+ if (!(key in _handlers)) return;
+
+ scope = getScope();
+
+ // for each potential shortcut
+ for (i = 0; i < _handlers[key].length; i++) {
+ handler = _handlers[key][i];
+
+ // see if it's in the current scope
+ if(handler.scope == scope || handler.scope == 'all'){
+ // check if modifiers match if any
+ modifiersMatch = handler.mods.length > 0;
+ for(k in _mods)
+ if((!_mods[k] && index(handler.mods, +k) > -1) ||
+ (_mods[k] && index(handler.mods, +k) == -1)) modifiersMatch = false;
+ // call the handler and stop the event if neccessary
+ if((handler.mods.length == 0 && !_mods[16] && !_mods[18] && !_mods[17] && !_mods[91]) || modifiersMatch){
+ if(handler.method(event, handler)===false){
+ if(event.preventDefault) event.preventDefault();
+ else event.returnValue = false;
+ if(event.stopPropagation) event.stopPropagation();
+ if(event.cancelBubble) event.cancelBubble = true;
+ }
+ }
+ }
+ }
+ };
+
+ // unset modifier keys on keyup
+ function clearModifier(event){
+ var key = event.keyCode, k,
+ i = index(_downKeys, key);
+
+ // remove key from _downKeys
+ if (i >= 0) {
+ _downKeys.splice(i, 1);
+ }
+
+ if(key == 93 || key == 224) key = 91;
+ if(key in _mods) {
+ _mods[key] = false;
+ for(k in _MODIFIERS) if(_MODIFIERS[k] == key) assignKey[k] = false;
+ }
+ };
+
+ function resetModifiers() {
+ for(k in _mods) _mods[k] = false;
+ for(k in _MODIFIERS) assignKey[k] = false;
+ };
+
+ // parse and assign shortcut
+ function assignKey(key, scope, method){
+ var keys, mods;
+ keys = getKeys(key);
+ if (method === undefined) {
+ method = scope;
+ scope = 'all';
+ }
+
+ // for each shortcut
+ for (var i = 0; i < keys.length; i++) {
+ // set modifier keys if any
+ mods = [];
+ key = keys[i].split('+');
+ if (key.length > 1){
+ mods = getMods(key);
+ key = [key[key.length-1]];
+ }
+ // convert to keycode and...
+ key = key[0]
+ key = code(key);
+ // ...store handler
+ if (!(key in _handlers)) _handlers[key] = [];
+ _handlers[key].push({ shortcut: keys[i], scope: scope, method: method, key: keys[i], mods: mods });
+ }
+ };
+
+ // unbind all handlers for given key in current scope
+ function unbindKey(key, scope) {
+ var multipleKeys, keys,
+ mods = [],
+ i, j, obj;
+
+ multipleKeys = getKeys(key);
+
+ for (j = 0; j < multipleKeys.length; j++) {
+ keys = multipleKeys[j].split('+');
+
+ if (keys.length > 1) {
+ mods = getMods(keys);
+ key = keys[keys.length - 1];
+ }
+
+ key = code(key);
+
+ if (scope === undefined) {
+ scope = getScope();
+ }
+ if (!_handlers[key]) {
+ return;
+ }
+ for (i = 0; i < _handlers[key].length; i++) {
+ obj = _handlers[key][i];
+ // only clear handlers if correct scope and mods match
+ if (obj.scope === scope && compareArray(obj.mods, mods)) {
+ _handlers[key][i] = {};
+ }
+ }
+ }
+ };
+
+ // Returns true if the key with code 'keyCode' is currently down
+ // Converts strings into key codes.
+ function isPressed(keyCode) {
+ if (typeof(keyCode)=='string') {
+ keyCode = code(keyCode);
+ }
+ return index(_downKeys, keyCode) != -1;
+ }
+
+ function getPressedKeyCodes() {
+ return _downKeys.slice(0);
+ }
+
+ function filter(event){
+ var tagName = (event.target || event.srcElement).tagName;
+ // ignore keypressed in any elements that support keyboard data input
+ return !(tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA');
+ }
+
+ // initialize key. to false
+ for(k in _MODIFIERS) assignKey[k] = false;
+
+ // set current scope (default 'all')
+ function setScope(scope){ _scope = scope || 'all' };
+ function getScope(){ return _scope || 'all' };
+
+ // delete all handlers for a given scope
+ function deleteScope(scope){
+ var key, handlers, i;
+
+ for (key in _handlers) {
+ handlers = _handlers[key];
+ for (i = 0; i < handlers.length; ) {
+ if (handlers[i].scope === scope) handlers.splice(i, 1);
+ else i++;
+ }
+ }
+ };
+
+ // abstract key logic for assign and unassign
+ function getKeys(key) {
+ var keys;
+ key = key.replace(/\s/g, '');
+ keys = key.split(',');
+ if ((keys[keys.length - 1]) == '') {
+ keys[keys.length - 2] += ',';
+ }
+ return keys;
+ }
+
+ // abstract mods logic for assign and unassign
+ function getMods(key) {
+ var mods = key.slice(0, key.length - 1);
+ for (var mi = 0; mi < mods.length; mi++)
+ mods[mi] = _MODIFIERS[mods[mi]];
+ return mods;
+ }
+
+ // cross-browser events
+ function addEvent(object, event, method) {
+ if (object.addEventListener)
+ object.addEventListener(event, method, false);
+ else if(object.attachEvent)
+ object.attachEvent('on'+event, function(){ method(window.event) });
+ };
+
+ // set the handlers globally on document
+ addEvent(document, 'keydown', function(event) { dispatch(event) }); // Passing _scope to a callback to ensure it remains the same by execution. Fixes #48
+ addEvent(document, 'keyup', clearModifier);
+
+ // reset modifiers to false whenever the window is (re)focused.
+ addEvent(window, 'focus', resetModifiers);
+
+ // store previously defined key
+ var previousKey = global.key;
+
+ // restore previously defined key and return reference to our key object
+ function noConflict() {
+ var k = global.key;
+ global.key = previousKey;
+ return k;
+ }
+
+ // set window.key and window.key.set/get/deleteScope, and the default filter
+ global.key = assignKey;
+ global.key.setScope = setScope;
+ global.key.getScope = getScope;
+ global.key.deleteScope = deleteScope;
+ global.key.filter = filter;
+ global.key.isPressed = isPressed;
+ global.key.getPressedKeyCodes = getPressedKeyCodes;
+ global.key.noConflict = noConflict;
+ global.key.unbind = unbindKey;
+
+ if(true) module.exports = assignKey;
+
+})(this);
+
+
+/***/ }),
+/* 24 */
+/***/ (function(module, exports, __webpack_require__) {
+
"use strict";
@@ -18366,7 +18514,7 @@ Object.defineProperty(exports, "__esModule", {
value: true
});
-var _promisePolyfill = __webpack_require__(72);
+var _promisePolyfill = __webpack_require__(77);
var _promisePolyfill2 = _interopRequireDefault(_promisePolyfill);
@@ -18406,7 +18554,7 @@ exports.default = typeof fetch == 'function' ? fetch.bind() : function (url, opt
};
/***/ }),
-/* 24 */
+/* 25 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -18654,7 +18802,7 @@ module.exports = function (config) {
};
/***/ }),
-/* 25 */
+/* 26 */
/***/ (function(module, exports, __webpack_require__) {
// CodeMirror, copyright (c) by Marijn Haverbeke and others
@@ -19492,14 +19640,14 @@ CodeMirror.defineMode("css", function(config, parserConfig) {
/***/ }),
-/* 26 */
+/* 27 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var Backbone = __webpack_require__(0);
-var Buttons = __webpack_require__(27);
+var Buttons = __webpack_require__(28);
module.exports = Backbone.Model.extend({
@@ -19518,14 +19666,14 @@ module.exports = Backbone.Model.extend({
});
/***/ }),
-/* 27 */
+/* 28 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var Backbone = __webpack_require__(0);
-var Button = __webpack_require__(106);
+var Button = __webpack_require__(111);
module.exports = Backbone.Collection.extend({
@@ -19600,14 +19748,14 @@ module.exports = Backbone.Collection.extend({
});
/***/ }),
-/* 28 */
+/* 29 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var Backbone = __webpack_require__(0);
-var ButtonsView = __webpack_require__(29);
+var ButtonsView = __webpack_require__(30);
module.exports = Backbone.View.extend({
initialize: function initialize(o) {
@@ -19707,14 +19855,14 @@ module.exports = Backbone.View.extend({
});
/***/ }),
-/* 29 */
+/* 30 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
/* WEBPACK VAR INJECTION */(function(_) {
var Backbone = __webpack_require__(0);
-var ButtonView = __webpack_require__(108);
+var ButtonView = __webpack_require__(113);
module.exports = Backbone.View.extend({
initialize: function initialize(o) {
@@ -19781,7 +19929,7 @@ module.exports = Backbone.View.extend({
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(1)))
/***/ }),
-/* 30 */
+/* 31 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -19790,20 +19938,6 @@ module.exports = Backbone.View.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; };
/**
- *
- * * [addSector](#addsector)
- * * [getSector](#getsector)
- * * [getSectors](#getsectors)
- * * [addProperty](#addproperty)
- * * [getProperty](#getproperty)
- * * [getProperties](#getproperties)
- * * [getModelToStyle](#getmodeltostyle)
- * * [addType](#addtype)
- * * [getType](#gettype)
- * * [getTypes](#gettypes)
- * * [createType](#createtype)
- * * [render](#render)
- *
* With Style Manager you basically build categories (called sectors) of CSS properties which could
* be used to custom components and classes.
* You can init the editor with all sectors and properties via configuration
@@ -19845,10 +19979,10 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
*/
module.exports = function () {
var c = {},
- defaults = __webpack_require__(113),
- Sectors = __webpack_require__(114),
+ defaults = __webpack_require__(118),
+ Sectors = __webpack_require__(119),
Properties = __webpack_require__(11),
- SectorsView = __webpack_require__(125);
+ SectorsView = __webpack_require__(130);
var properties = void 0;
var sectors, SectView;
@@ -19934,6 +20068,18 @@ module.exports = function () {
},
+ /**
+ * Remove a sector by id
+ * @param {string} id Sector id
+ * @return {Sector} Removed sector
+ * @example
+ * const removed = styleManager.removeSector('mySector');
+ */
+ removeSector: function removeSector(id) {
+ return this.getSectors().remove(this.getSector(id));
+ },
+
+
/**
* Get all sectors
* @return {Sectors} Collection of sectors
@@ -20009,6 +20155,20 @@ module.exports = function () {
},
+ /**
+ * Remove a property from the sector
+ * @param {string} sectorId Sector id
+ * @param {string} name CSS property name, eg. 'min-height'
+ * @return {Property} Removed property
+ * @example
+ * const property = styleManager.removeProperty('mySector', 'min-height');
+ */
+ removeProperty: function removeProperty(sectorId, name) {
+ var props = this.getProperties(sectorId);
+ return props && props.remove(this.getProperty(sectorId, name));
+ },
+
+
/**
* Get properties of the sector
* @param {string} sectorId Sector id
@@ -20035,19 +20195,25 @@ module.exports = function () {
* @return {Model}
*/
getModelToStyle: function getModelToStyle(model) {
- var classes = model.get('classes');
var em = c.em;
+ var classes = model.get('classes');
+ var id = model.getId();
- if (em && classes && classes.length) {
- var conf = em.get('Config');
- var state = !conf.devicePreviewMode ? model.get('state') : '';
- var deviceW = em.getCurrentMedia();
+ if (em) {
+ var config = em.getConfig();
var cssC = em.get('CssComposer');
+ var state = !config.devicePreviewMode ? model.get('state') : '';
var valid = classes.getStyleable();
- var CssRule = cssC.get(valid, state, deviceW);
+ var hasClasses = valid.length;
+ var opts = { state: state };
- if (CssRule && valid.length) {
- return CssRule;
+ if (hasClasses) {
+ var deviceW = em.getCurrentMedia();
+ var CssRule = cssC.get(valid, state, deviceW);
+ if (CssRule) return CssRule;
+ } else if (config.avoidInlineStyle) {
+ var rule = cssC.getIdRule(id, opts);
+ return rule ? rule : cssC.setIdRule(id, {}, opts);
}
}
@@ -20140,7 +20306,7 @@ module.exports = function () {
};
/***/ }),
-/* 31 */
+/* 32 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -20298,7 +20464,7 @@ exports.default = {
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0)))
/***/ }),
-/* 32 */
+/* 33 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -20383,14 +20549,14 @@ module.exports = Property.extend({
});
/***/ }),
-/* 33 */
+/* 34 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
-var PropertyCompositeView = __webpack_require__(18);
-var LayersView = __webpack_require__(120);
+var PropertyCompositeView = __webpack_require__(17);
+var LayersView = __webpack_require__(125);
module.exports = PropertyCompositeView.extend({
templateInput: function templateInput() {
@@ -20570,7 +20736,7 @@ module.exports = PropertyCompositeView.extend({
});
/***/ }),
-/* 34 */
+/* 35 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -20599,7 +20765,7 @@ module.exports = Backbone.View.extend({
var ppfx = opts.ppfx || '';
this.opts = opts;
this.ppfx = ppfx;
- this.target = opts.target || {};
+ this.em = opts.target || {};
this.listenTo(this.model, 'change:value', this.handleModelChange);
},
@@ -20665,7 +20831,7 @@ module.exports = Backbone.View.extend({
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0)))
/***/ }),
-/* 35 */
+/* 36 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -20727,7 +20893,7 @@ module.exports = __webpack_require__(5).extend({
});
/***/ }),
-/* 36 */
+/* 37 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -20766,7 +20932,7 @@ module.exports = __webpack_require__(5).extend({
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0)))
/***/ }),
-/* 37 */
+/* 38 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -20774,7 +20940,7 @@ module.exports = __webpack_require__(5).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 InputColor = __webpack_require__(38);
+var InputColor = __webpack_require__(39);
module.exports = __webpack_require__(14).extend({
setValue: function setValue(value) {
@@ -20802,14 +20968,16 @@ module.exports = __webpack_require__(14).extend({
});
/***/ }),
-/* 38 */
+/* 39 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
/* WEBPACK VAR INJECTION */(function(Backbone) {
-__webpack_require__(119);
-var Input = __webpack_require__(34);
+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; };
+
+__webpack_require__(124);
+var Input = __webpack_require__(35);
var $ = Backbone.$;
module.exports = Input.extend({
@@ -20862,7 +21030,8 @@ module.exports = Input.extend({
var colorEl = $('
');
var cpStyle = colorEl.get(0).style;
- var elToAppend = this.target && this.target.config ? this.target.config.el : '';
+ var elToAppend = this.em && this.em.config ? this.em.config.el : '';
+ var colorPickerConfig = this.em && this.em.getConfig && this.em.getConfig("colorPicker") || {};
var getColor = function getColor(color) {
var cl = color.getAlpha() == 1 ? color.toHexString() : color.toRgbString();
return cl.replace(/ /g, '');
@@ -20871,7 +21040,7 @@ module.exports = Input.extend({
var changed = 0;
var previousColor = void 0;
this.$el.find('[data-colorp-c]').append(colorEl);
- colorEl.spectrum({
+ colorEl.spectrum(_extends({
containerClassName: ppfx + 'one-bg ' + ppfx + 'two-color',
appendTo: elToAppend || 'body',
maxSelectionSize: 8,
@@ -20879,7 +21048,9 @@ module.exports = Input.extend({
showAlpha: true,
chooseText: 'Ok',
cancelText: '⨯',
- palette: [],
+ palette: []
+
+ }, colorPickerConfig, {
move: function move(color) {
var cl = getColor(color);
cpStyle.backgroundColor = cl;
@@ -20906,7 +21077,7 @@ module.exports = Input.extend({
model.setValueFromInput(previousColor, 0);
}
}
- });
+ }));
this.colorEl = colorEl;
}
@@ -20922,7 +21093,7 @@ module.exports = Input.extend({
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0)))
/***/ }),
-/* 39 */
+/* 40 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -21056,7 +21227,7 @@ module.exports = PropertyView.extend({
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0)))
/***/ }),
-/* 40 */
+/* 41 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -21076,7 +21247,7 @@ module.exports = Property.extend({
});
/***/ }),
-/* 41 */
+/* 42 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -21085,7 +21256,7 @@ module.exports = Property.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 Property = __webpack_require__(12);
-var InputNumber = __webpack_require__(19);
+var InputNumber = __webpack_require__(18);
module.exports = Property.extend({
@@ -21133,13 +21304,13 @@ module.exports = Property.extend({
});
/***/ }),
-/* 42 */
+/* 43 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
-module.exports = __webpack_require__(43).extend({
+module.exports = __webpack_require__(44).extend({
events: {
'click [data-toggle=asset-remove]': 'onRemove',
@@ -21221,7 +21392,7 @@ module.exports = __webpack_require__(43).extend({
});
/***/ }),
-/* 43 */
+/* 44 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -21277,13 +21448,13 @@ module.exports = Backbone.View.extend({
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0), __webpack_require__(1)))
/***/ }),
-/* 44 */
+/* 45 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
/* WEBPACK VAR INJECTION */(function(Backbone, _) {
-var _fetch = __webpack_require__(23);
+var _fetch = __webpack_require__(24);
var _fetch2 = _interopRequireDefault(_fetch);
@@ -21636,13 +21807,13 @@ module.exports = Backbone.View.extend({
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0), __webpack_require__(1)))
/***/ }),
-/* 45 */
+/* 46 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
/* WEBPACK VAR INJECTION */(function(_) {
-var _Styleable = __webpack_require__(46);
+var _Styleable = __webpack_require__(47);
var _Styleable2 = _interopRequireDefault(_Styleable);
@@ -21790,7 +21961,7 @@ module.exports = Backbone.Model.extend(_Styleable2.default).extend({
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(1)))
/***/ }),
-/* 46 */
+/* 47 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -21806,7 +21977,7 @@ var _underscore = __webpack_require__(1);
var _mixins = __webpack_require__(2);
-var _ParserHtml = __webpack_require__(24);
+var _ParserHtml = __webpack_require__(25);
var _ParserHtml2 = _interopRequireDefault(_ParserHtml);
@@ -21924,7 +22095,7 @@ exports.default = {
};
/***/ }),
-/* 47 */
+/* 48 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -21992,7 +22163,7 @@ module.exports = Backbone.View.extend({
});
/***/ }),
-/* 48 */
+/* 49 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -22079,7 +22250,7 @@ module.exports = Backbone.Collection.extend({
});
/***/ }),
-/* 49 */
+/* 50 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -22126,7 +22297,7 @@ module.exports = Backbone.View.extend({
* @private
* */
addToCollection: function addToCollection(model, fragmentEl, index) {
- if (!this.compView) this.compView = __webpack_require__(4);
+ if (!this.compView) this.compView = __webpack_require__(3);
var fragment = fragmentEl || null,
viewObject = this.compView;
@@ -22204,7 +22375,7 @@ module.exports = Backbone.View.extend({
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0)))
/***/ }),
-/* 50 */
+/* 51 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -22212,7 +22383,7 @@ module.exports = Backbone.View.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 Component = __webpack_require__(3);
+var Component = __webpack_require__(4);
module.exports = Component.extend({
@@ -22225,7 +22396,7 @@ module.exports = Component.extend({
});
/***/ }),
-/* 51 */
+/* 52 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -22233,7 +22404,7 @@ module.exports = Component.extend({
var _mixins = __webpack_require__(2);
-var ComponentView = __webpack_require__(4);
+var ComponentView = __webpack_require__(3);
module.exports = ComponentView.extend({
@@ -22295,13 +22466,14 @@ module.exports = ComponentView.extend({
var content = this.getChildrenContainer().innerHTML;
var comps = model.get('components');
comps.length && comps.reset();
+ model.set('content', '');
// If there is a custom RTE the content is just baked staticly
// inside 'content'
if (rte.customRte) {
// Avoid double content by removing its children components
// and force to trigger change
- model.set('content', '').set('content', content);
+ model.set('content', content);
} else {
var clean = function clean(model) {
model.set({
@@ -22318,7 +22490,7 @@ module.exports = ComponentView.extend({
};
// Avoid re-render on reset with silent option
- model.set('content', '').trigger('change:content', model);
+ model.trigger('change:content', model);
comps.add(content);
comps.each(function (model) {
return clean(model);
@@ -22362,7 +22534,7 @@ module.exports = ComponentView.extend({
});
/***/ }),
-/* 52 */
+/* 53 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -22468,7 +22640,7 @@ module.exports = {
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0)))
/***/ }),
-/* 53 */
+/* 54 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -22527,8 +22699,6 @@ module.exports = _.extend({}, CreateComponent, {
if (!model) return;
- if (this.em) this.em.editor.initChildrenComp(model);
-
this.afterInsert(model, this);
},
@@ -22562,17 +22732,18 @@ module.exports = _.extend({}, CreateComponent, {
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(1)))
/***/ }),
-/* 54 */
+/* 55 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
-/* WEBPACK VAR INJECTION */(function(_) {
-var Backbone = __webpack_require__(0);
-var ComponentView = __webpack_require__(4);
-var ItemsView;
-module.exports = Backbone.View.extend({
+var _underscore = __webpack_require__(1);
+
+var ComponentView = __webpack_require__(3);
+var ItemsView = void 0;
+
+module.exports = __webpack_require__(0).View.extend({
events: {
'mousedown [data-toggle-move]': 'startSort',
@@ -22583,8 +22754,15 @@ module.exports = Backbone.View.extend({
'focusout input': 'handleEditEnd'
},
- template: _.template('\n <% if (hidable) { %>\n \n
\n
\n
\n
\n
<%= (count ? count : \'\') %>
\n\n \n
\n\n
'),
-
+ template: function template(model) {
+ var pfx = this.pfx;
+ var ppfx = this.ppfx;
+ var hidable = this.config.hidable;
+ var count = this.countChildren(model);
+ var addClass = !count ? pfx + 'no-chld' : '';
+ var level = this.level + 1;
+ return '\n ' + (hidable ? '\n
\n
\n
\n
\n
' + (count ? count : '') + '
\n \n
\n
\n ';
+ },
initialize: function initialize() {
var o = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -22846,27 +23024,12 @@ module.exports = Backbone.View.extend({
var model = this.model;
var pfx = this.pfx;
var vis = this.isVisible();
- var count = this.countChildren(model);
var el = this.$el;
var level = this.level + 1;
+ el.html(this.template(model));
- el.html(this.template({
- title: model.getName(),
- icon: model.getIcon(),
- addClass: count ? '' : pfx + 'no-chld',
- editBtnCls: this.editBtnCls,
- inputNameCls: this.inputNameCls,
- caretCls: this.caretCls,
- count: count,
- visible: vis,
- hidable: this.config.hidable,
- prefix: pfx,
- ppfx: this.ppfx,
- level: level
- }));
-
- if (typeof ItemsView == 'undefined') {
- ItemsView = __webpack_require__(55);
+ if ((0, _underscore.isUndefined)(ItemsView)) {
+ ItemsView = __webpack_require__(56);
}
var children = new ItemsView({
@@ -22883,25 +23046,24 @@ module.exports = Backbone.View.extend({
el.children('#' + pfx + 'move').remove();
}
- if (!vis) this.className += ' ' + pfx + 'hide';
- el.attr('class', _.result(this, 'className'));
+ !vis && (this.className += ' ' + pfx + 'hide');
+ el.attr('class', this.className);
this.updateOpening();
this.updateStatus();
this.updateVisibility();
return this;
}
});
-/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(1)))
/***/ }),
-/* 55 */
+/* 56 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var Backbone = __webpack_require__(0);
-var ItemView = __webpack_require__(54);
+var ItemView = __webpack_require__(55);
module.exports = Backbone.View.extend({
initialize: function initialize() {
@@ -23035,7 +23197,7 @@ module.exports = Backbone.View.extend({
});
/***/ }),
-/* 56 */
+/* 57 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -23055,33 +23217,39 @@ module.exports = Backbone.Model.extend({
});
/***/ }),
-/* 57 */
+/* 58 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
-module.exports = __webpack_require__(58);
+module.exports = __webpack_require__(59);
/***/ }),
-/* 58 */
+/* 59 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
-var _cashDom = __webpack_require__(8);
+var _cashDom = __webpack_require__(9);
var _cashDom2 = _interopRequireDefault(_cashDom);
var _underscore = __webpack_require__(1);
+var _polyfills = __webpack_require__(60);
+
+var _polyfills2 = _interopRequireDefault(_polyfills);
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+(0, _polyfills2.default)();
+
module.exports = function () {
- var defaultConfig = __webpack_require__(59);
- var Editor = __webpack_require__(60);
- var PluginManager = __webpack_require__(212);
+ var defaultConfig = __webpack_require__(61);
+ var Editor = __webpack_require__(62);
+ var PluginManager = __webpack_require__(220);
var plugins = new PluginManager();
var editors = [];
@@ -23094,7 +23262,7 @@ module.exports = function () {
plugins: plugins,
// Will be replaced on build
- version: '0.12.50',
+ version: '0.12.58',
/**
* Initializes an editor based on passed options
@@ -23103,7 +23271,6 @@ module.exports = function () {
* @param {Object|string} config.components='' HTML string or Component model in JSON format
* @param {Object|string} config.style='' CSS string or CSS model in JSON format
* @param {Boolean} [config.fromElement=false] If true, will fetch HTML and CSS from selected container
- * @param {Boolean} [config.copyPaste=true] Enable/Disable the possibility to copy(ctrl+c) & paste(ctrl+v) components
* @param {Boolean} [config.undoManager=true] Enable/Disable undo manager
* @param {Array} [config.plugins=[]] Array of plugins to execute on start
* @return {grapesjs.Editor} GrapesJS editor instance
@@ -23152,7 +23319,52 @@ module.exports = function () {
}();
/***/ }),
-/* 59 */
+/* 60 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+/**
+ * File made for IE/Edge support
+ * https://github.com/artf/grapesjs/issues/214
+ */
+
+exports.default = function () {
+
+ /**
+ * Check if IE/Edge
+ * @return {Boolean}
+ */
+ var isIE = function isIE() {
+ var match = void 0;
+ var agent = window.navigator.userAgent;
+ var rules = [['edge', /Edge\/([0-9\._]+)/], ['ie', /MSIE\s(7\.0)/], ['ie', /MSIE\s([0-9\.]+);.*Trident\/[4-7].0/], ['ie', /Trident\/7\.0.*rv\:([0-9\.]+).*\).*Gecko$/]];
+
+ for (var i = 0; i < rules.length; i++) {
+ var rule = rules[i];
+ match = rule[1].exec(agent);
+ if (match) break;
+ }
+
+ return !!match;
+ };
+
+ if (isIE()) {
+ var originalCreateHTMLDocument = DOMImplementation.prototype.createHTMLDocument;
+ DOMImplementation.prototype.createHTMLDocument = function (title) {
+ if (!title) title = '';
+ return originalCreateHTMLDocument.apply(document.implementation, [title]);
+ };
+ }
+};
+
+/***/ }),
+/* 61 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -23175,11 +23387,6 @@ module.exports = {
fromElement: 0,
// ---
- // Enable/Disable the possibility to copy(ctrl + c) & paste(ctrl + v) components
- copyPaste: true,
-
- // Enable/Disable undo manager
- undoManager: true,
// Storage Manager
storageManager: {},
@@ -23192,13 +23399,13 @@ module.exports = {
};
/***/ }),
-/* 60 */
+/* 62 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
-var _cashDom = __webpack_require__(8);
+var _cashDom = __webpack_require__(9);
var _cashDom2 = _interopRequireDefault(_cashDom);
@@ -23206,9 +23413,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
module.exports = function (config) {
var c = config || {},
- defaults = __webpack_require__(61),
- EditorModel = __webpack_require__(62),
- EditorView = __webpack_require__(211);
+ defaults = __webpack_require__(63),
+ EditorModel = __webpack_require__(64),
+ EditorView = __webpack_require__(219);
for (var name in defaults) {
if (!(name in c)) c[name] = defaults[name];
@@ -23716,9 +23923,12 @@ module.exports = function (config) {
* @return {HTMLElement}
*/
render: function render() {
+ var _this = this;
+
// Do post render stuff after the iframe is loaded otherwise it'll
// be empty during tests
em.on('loaded', function () {
+ _this.UndoManager.clear();
em.get('modules').forEach(function (module) {
module.postRender && module.postRender(editorView);
});
@@ -23781,6 +23991,8 @@ module.exports = function (config) {
* * `stop:{commandName}` - Triggered when some command is called to stop (eg. editor.stopCommand('preview'))
* ## General
* * `canvasScroll` - Triggered when the canvas is scrolle
+ * * `undo` - Undo executed
+ * * `redo` - Redo executed
* * `load` - When the editor is loaded
*
* @param {Object} config Configurations
@@ -23788,7 +24000,6 @@ module.exports = function (config) {
* @param {string|Array} [config.components=''] HTML string or object of components
* @param {string|Array} [config.style=''] CSS string or object of rules
* @param {Boolean} [config.fromElement=false] If true, will fetch HTML and CSS from selected container
- * @param {Boolean} [config.copyPaste=true] Enable/Disable the possibility to copy(ctrl + c) & paste(ctrl + v) components
* @param {Boolean} [config.undoManager=true] Enable/Disable undo manager
* @param {Boolean} [config.autorender=true] If true renders editor on init
* @param {Boolean} [config.noticeOnUnload=true] Enable/Disable alert message before unload the page
@@ -23812,7 +24023,7 @@ module.exports = function (config) {
*/
/***/ }),
-/* 61 */
+/* 63 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -23825,15 +24036,9 @@ module.exports = {
//TEMP
components: '',
- // Enable/Disable possibility to copy(ctrl + c) & paste(ctrl + v) components
- copyPaste: true,
-
// Show an alert before unload the page with unsaved changes
noticeOnUnload: true,
- // Enable/Disable undo manager
- undoManager: true,
-
// Show paddings and margins
showOffsets: false,
@@ -23900,6 +24105,9 @@ module.exports = {
// Dom element
el: '',
+ // Configurations for Undo Manager
+ undoManager: {},
+
//Configurations for Asset Manager
assetManager: {},
@@ -23996,7 +24204,7 @@ module.exports = {
};
/***/ }),
-/* 62 */
+/* 64 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -24006,14 +24214,12 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
var _underscore = __webpack_require__(1);
-var deps = [__webpack_require__(63), __webpack_require__(67), __webpack_require__(68), __webpack_require__(76), __webpack_require__(81), __webpack_require__(84), __webpack_require__(88), __webpack_require__(92), __webpack_require__(104), __webpack_require__(110), __webpack_require__(30), __webpack_require__(127), __webpack_require__(133), __webpack_require__(138), __webpack_require__(145), __webpack_require__(168), __webpack_require__(174), __webpack_require__(200)];
+var deps = [__webpack_require__(65), __webpack_require__(69), __webpack_require__(70), __webpack_require__(73), __webpack_require__(81), __webpack_require__(86), __webpack_require__(89), __webpack_require__(93), __webpack_require__(97), __webpack_require__(109), __webpack_require__(115), __webpack_require__(31), __webpack_require__(132), __webpack_require__(138), __webpack_require__(143), __webpack_require__(150), __webpack_require__(178), __webpack_require__(184), __webpack_require__(210)];
var Backbone = __webpack_require__(0);
-var UndoManager = __webpack_require__(208);
-var key = __webpack_require__(17);
var timedInterval = void 0;
-__webpack_require__(210)({
+__webpack_require__(218)({
Backbone: Backbone,
$: Backbone.$
});
@@ -24036,6 +24242,8 @@ module.exports = Backbone.Model.extend({
},
initialize: function initialize() {
+ var _this = this;
+
var c = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
this.config = c;
@@ -24046,11 +24254,8 @@ module.exports = Backbone.Model.extend({
// Load modules
deps.forEach(function (name) {
- this.loadModule(name);
- }, this);
-
- this.initUndoManager();
-
+ return _this.loadModule(name);
+ });
this.on('change:selectedComponent', this.componentSelected, this);
this.on('change:changesCount', this.updateChanges, this);
},
@@ -24074,7 +24279,7 @@ module.exports = Backbone.Model.extend({
* @private
*/
loadOnStart: function loadOnStart() {
- var _this = this;
+ var _this2 = this;
var clb = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
@@ -24086,15 +24291,11 @@ module.exports = Backbone.Model.extend({
module.onLoad();
});
- // Stuff to do post load (eg. init undo manager for loaded components)
+ // Stuff to do post load
var postLoad = function postLoad() {
- // I've initialized undo manager in initialize() because otherwise the
- // editor will unable to fetch the instance via 'editor.UndoManager' but
- // I need to cleare the stack now as it was dirtied by 'onLoad' method
- _this.um.clear();
- _this.initUndoManager();
- _this.get('modules').forEach(function (module) {
- return module.postLoad && module.postLoad(_this);
+ var modules = _this2.get('modules');
+ modules.forEach(function (module) {
+ return module.postLoad && module.postLoad(_this2);
});
clb && clb();
};
@@ -24145,20 +24346,20 @@ module.exports = Backbone.Model.extend({
// Check if module is storable
var sm = this.get('StorageManager');
+
if (Mod.storageKey && Mod.store && Mod.load && sm) {
cfg.stm = sm;
var storables = this.get('storables');
storables.push(Mod);
this.set('storables', storables);
}
+
cfg.em = this;
Mod.init(_extends({}, cfg));
// Bind the module to the editor model if public
- if (!Mod.private) this.set(Mod.name, Mod);
-
- if (Mod.onLoad) this.get('toLoad').push(Mod);
-
+ !Mod.private && this.set(Mod.name, Mod);
+ Mod.onLoad && this.get('toLoad').push(Mod);
this.get('modules').push(Mod);
return this;
},
@@ -24178,31 +24379,6 @@ module.exports = Backbone.Model.extend({
},
- /**
- * Listen for new rules
- * @param {Object} collection
- * @private
- */
- listenRules: function listenRules(collection) {
- this.stopListening(collection, 'add remove', this.listenRule);
- this.listenTo(collection, 'add remove', this.listenRule);
- collection.each(function (model) {
- this.listenRule(model);
- }, this);
- },
-
-
- /**
- * Listen for rule changes
- * @param {Object} model
- * @private
- */
- listenRule: function listenRule(model) {
- this.stopListening(model, 'change:style', this.handleUpdates);
- this.listenTo(model, 'change:style', this.handleUpdates);
- },
-
-
/**
* This method handles updates on the editor and tries to store them
* if requested and if the changesCount is exceeded
@@ -24212,7 +24388,7 @@ module.exports = Backbone.Model.extend({
* @private
* */
handleUpdates: function handleUpdates(model, val) {
- var _this2 = this;
+ var _this3 = this;
var opt = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
@@ -24224,90 +24400,12 @@ module.exports = Backbone.Model.extend({
timedInterval && clearInterval(timedInterval);
timedInterval = setTimeout(function () {
if (!opt.avoidStore) {
- _this2.set('changesCount', _this2.get('changesCount') + 1, opt);
+ _this3.set('changesCount', _this3.get('changesCount') + 1, opt);
}
}, 0);
},
- /**
- * Initialize Undo manager
- * @private
- * */
- initUndoManager: function initUndoManager() {
- var canvas = this.get('Canvas');
-
- if (this.um) {
- return;
- }
-
- var cmp = this.get('DomComponents');
- if (cmp && this.config.undoManager) {
- var that = this;
- this.um = new UndoManager({
- register: [cmp.getComponents(), this.get('CssComposer').getAll()],
- track: true
- });
- this.UndoManager = this.um;
- this.set('UndoManager', this.um);
-
- key('⌘+z, ctrl+z', function () {
- if (canvas.isInputFocused()) {
- return;
- }
-
- that.um.undo(true);
- that.trigger('component:update');
- });
-
- key('⌘+shift+z, ctrl+shift+z', function () {
- if (canvas.isInputFocused()) {
- return;
- }
- that.um.redo(true);
- that.trigger('component:update');
- });
-
- var beforeCache;
- var customUndoType = {
- on: function on(model, value, opts) {
- var opt = opts || {};
- if (!beforeCache) {
- beforeCache = model.previousAttributes();
- }
- if (opt && opt.avoidStore) {
- return;
- } else {
- var obj = {
- object: model,
- before: beforeCache,
- after: model.toJSON()
- };
- beforeCache = null;
- return obj;
- }
- },
- undo: function undo(model, bf, af, opt) {
- model.set(bf);
- // Update also inputs inside Style Manager
- that.trigger('change:selectedComponent');
- },
- redo: function redo(model, bf, af, opt) {
- model.set(af);
- // Update also inputs inside Style Manager
- that.trigger('change:selectedComponent');
- }
- };
-
- UndoManager.removeUndoType("change");
- UndoManager.addUndoType("change:style", customUndoType);
- UndoManager.addUndoType("change:attributes", customUndoType);
- UndoManager.addUndoType("change:content", customUndoType);
- UndoManager.addUndoType("change:src", customUndoType);
- }
- },
-
-
/**
* Callback on component selection
* @param {Object} Model
@@ -24325,67 +24423,6 @@ module.exports = Backbone.Model.extend({
},
- /**
- * Triggered when components are updated
- * @param {Object} model
- * @param {Mixed} val Value
- * @param {Object} opt Options
- * @private
- * */
- updateComponents: function updateComponents(model, val, opt) {
- var comps = model.get('components'),
- classes = model.get('classes'),
- avSt = opt ? opt.avoidStore : 0;
-
- // Observe component with Undo Manager
- if (this.um) this.um.register(comps);
-
- // Call stopListening for not creating nested listeners
- this.stopListening(comps, 'add', this.updateComponents);
- this.stopListening(comps, 'remove', this.rmComponents);
- this.listenTo(comps, 'add', this.updateComponents);
- this.listenTo(comps, 'remove', this.rmComponents);
-
- this.stopListening(classes, 'add remove', this.handleUpdates);
- this.listenTo(classes, 'add remove', this.handleUpdates);
-
- var evn = 'change:style change:content change:attributes change:src';
- this.stopListening(model, evn, this.handleUpdates);
- this.listenTo(model, evn, this.handleUpdates);
-
- if (!avSt) this.handleUpdates(model, val, opt);
- },
-
-
- /**
- * Init stuff like storage for already existing elements
- * @param {Object} model
- * @private
- */
- initChildrenComp: function initChildrenComp(model) {
- var comps = model.get('components');
- this.updateComponents(model, null, { avoidStore: 1 });
- comps.each(function (md) {
- this.initChildrenComp(md);
- if (this.um) this.um.register(md);
- }, this);
- },
-
-
- /**
- * Triggered when some component is removed updated
- * @param {Object} model
- * @param {Mixed} val Value
- * @param {Object} opt Options
- * @private
- * */
- rmComponents: function rmComponents(model, val, opt) {
- var avSt = opt ? opt.avoidStore : 0;
-
- if (!avSt) this.handleUpdates(model, val, opt);
- },
-
-
/**
* Returns model of the selected component
* @return {Component|null}
@@ -24530,7 +24567,7 @@ module.exports = Backbone.Model.extend({
* @private
*/
store: function store(clb) {
- var _this3 = this;
+ var _this4 = this;
var sm = this.get('StorageManager');
var store = {};
@@ -24546,8 +24583,8 @@ module.exports = Backbone.Model.extend({
sm.store(store, function () {
clb && clb();
- _this3.set('changesCount', 0);
- _this3.trigger('storage:store', store);
+ _this4.set('changesCount', 0);
+ _this4.trigger('storage:store', store);
});
return store;
@@ -24560,12 +24597,12 @@ module.exports = Backbone.Model.extend({
* @private
*/
load: function load() {
- var _this4 = this;
+ var _this5 = this;
var clb = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
this.getCacheLoad(1, function (res) {
- _this4.get('storables').forEach(function (module) {
+ _this5.get('storables').forEach(function (module) {
return module.load(res);
});
clb && clb(res);
@@ -24581,7 +24618,7 @@ module.exports = Backbone.Model.extend({
* @private
*/
getCacheLoad: function getCacheLoad(force, clb) {
- var _this5 = this;
+ var _this6 = this;
var f = force ? 1 : 0;
if (this.cacheLoad && !f) return this.cacheLoad;
@@ -24600,9 +24637,9 @@ module.exports = Backbone.Model.extend({
});
sm.load(load, function (res) {
- _this5.cacheLoad = res;
+ _this6.cacheLoad = res;
clb && clb(res);
- _this5.trigger('storage:load', res);
+ _this6.trigger('storage:load', res);
});
},
@@ -24708,7 +24745,7 @@ module.exports = Backbone.Model.extend({
});
/***/ }),
-/* 63 */
+/* 65 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -24716,9 +24753,9 @@ module.exports = Backbone.Model.extend({
module.exports = function () {
- var Sorter = __webpack_require__(64);
- var Resizer = __webpack_require__(65);
- var Dragger = __webpack_require__(66);
+ var Sorter = __webpack_require__(66);
+ var Resizer = __webpack_require__(67);
+ var Dragger = __webpack_require__(68);
return {
/**
@@ -24743,7 +24780,7 @@ module.exports = function () {
};
/***/ }),
-/* 64 */
+/* 66 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -24846,18 +24883,17 @@ module.exports = Backbone.View.extend({
var pfx = this.ppfx || this.pfx;
var sortCls = pfx + 'grabbing';
var emBody = em ? em.get('Canvas').getBody() : '';
+
+ // Avoid updating body className as it causes a huge repaint
+ // Noticeable with "fast" drag of blocks
if (active) {
em && em.get('Canvas').startAutoscroll();
- body.className += ' ' + sortCls;
- if (em) {
- emBody.className += ' ' + sortCls;
- }
+ //body.className += ' ' + sortCls;
+ //if (em) emBody.className += ' ' + sortCls;
} else {
em && em.get('Canvas').stopAutoscroll();
- body.className = body.className.replace(sortCls, '').trim();
- if (em) {
- emBody.className = emBody.className.replace(sortCls, '').trim();
- }
+ //body.className = body.className.replace(sortCls, '').trim();
+ //if(em) emBody.className = emBody.className.replace(sortCls, '').trim();
}
},
@@ -25676,7 +25712,7 @@ module.exports = Backbone.View.extend({
var dragHelper = this.dragHelper;
if (dragHelper) {
- dragHelper.remove();
+ dragHelper.parentNode.removeChild(dragHelper);
this.dragHelper = null;
}
@@ -25774,7 +25810,7 @@ module.exports = Backbone.View.extend({
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0), __webpack_require__(1)))
/***/ }),
-/* 65 */
+/* 67 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -26315,7 +26351,7 @@ module.exports = {
};
/***/ }),
-/* 66 */
+/* 68 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -26662,7 +26698,7 @@ module.exports = {
/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(0)))
/***/ }),
-/* 67 */
+/* 69 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
@@ -26683,12 +26719,32 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
var _underscore = __webpack_require__(1);
-var keymaster = __webpack_require__(17);
+var keymaster = __webpack_require__(23);
module.exports = function () {
+ var em = void 0;
var config = void 0;
- var configDef = {};
var keymaps = {};
+ var configDef = {
+ defaults: {
+ 'core:undo': {
+ keys: '⌘+z, ctrl+z',
+ handler: 'core:undo'
+ },
+ 'core:redo': {
+ keys: '⌘+shift+z, ctrl+shift+z',
+ handler: 'core:redo'
+ },
+ 'core:copy': {
+ keys: '⌘+c, ctrl+c',
+ handler: 'core:copy'
+ },
+ 'core:paste': {
+ keys: '⌘+v, ctrl+v',
+ handler: 'core:paste'
+ }
+ }
+ };
return {
@@ -26713,10 +26769,19 @@ module.exports = function () {
init: function init() {
var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
- config = _extends({}, opts, configDef);
- this.em = config.em;
+ config = _extends({}, configDef, opts);
+ em = config.em;
+ this.em = em;
return this;
},
+ onLoad: function onLoad() {
+ var defKeys = config.defaults;
+
+ for (var id in defKeys) {
+ var value = defKeys[id];
+ this.add(id, value.keys, value.handler);
+ }
+ },
/**
@@ -26808,5009 +26873,5475 @@ module.exports = function () {
};
/***/ }),
-/* 68 */
+/* 70 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
-/**
- * Before using methods you should get first the module from the editor instance, in this way:
- *
- * ```js
- * var storageManager = editor.StorageManager;
- * ```
- */
-module.exports = function () {
- var c = {},
- defaults = __webpack_require__(69),
- LocalStorage = __webpack_require__(70),
- RemoteStorage = __webpack_require__(71);
+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; }; /**
+ * This module allows to manage the stack of changes applied in canvas
+ *
+ * You can access the module in this way
+ * ```js
+ * const um = editor.UndoManager;
+ * ```
+ *
+ */
- var storages = {};
- var defaultStorages = {};
+
+var _backboneUndo = __webpack_require__(71);
+
+var _backboneUndo2 = _interopRequireDefault(_backboneUndo);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+module.exports = function () {
+ var em = void 0;
+ var um = void 0;
+ var config = void 0;
+ var beforeCache = void 0;
+ var configDef = {};
return {
- /**
- * Name of the module
- * @type {String}
- * @private
- */
- name: 'StorageManager',
+ name: 'UndoManager',
/**
- * Initialize module. Automatically called with a new instance of the editor
+ * Initialize module
* @param {Object} config Configurations
- * @param {string} [config.id='gjs-'] The prefix for the fields, useful to differentiate storing/loading
- * with multiple editors on the same page. For example, in local storage, the item of HTML will be saved like 'gjs-html'
- * @param {Boolean} [config.autosave=true] Indicates if autosave mode is enabled, works in conjunction with stepsBeforeSave
- * @param {number} [config.stepsBeforeSave=1] If autosave enabled, indicates how many steps/changes are necessary
- * before autosave is triggered
- * @param {string} [config.type='local'] Default storage type. Available: 'local' | 'remote' | ''(do not store)
* @private
- * @example
- * ...
- * {
- * autosave: false,
- * type: 'remote',
- * }
- * ...
*/
- init: function init(config) {
- c = config || {};
+ init: function init() {
+ var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
- for (var name in defaults) {
- if (!(name in c)) c[name] = defaults[name];
- }
+ config = _extends({}, opts, configDef);
+ em = config.em;
+ this.em = em;
+ um = new _backboneUndo2.default({ track: true, register: [] });
+ um.changeUndoType('change', { condition: false });
+ var customUndoType = {
+ on: function on(object, value) {
+ var opt = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+
+ !beforeCache && (beforeCache = object.previousAttributes());
+
+ if (opt.avoidStore) {
+ return;
+ } else {
+ var result = {
+ object: object,
+ before: beforeCache,
+ after: object.toJSON()
+ };
+ beforeCache = null;
+ return result;
+ }
+ },
+ undo: function undo(model, bf, af, opt) {
+ model.set(bf);
+ },
+ redo: function redo(model, bf, af, opt) {
+ model.set(af);
+ }
+ };
+
+ var events = ['style', 'attributes', 'content', 'src'];
+ events.forEach(function (ev) {
+ return um.addUndoType('change:' + ev, customUndoType);
+ });
+ um.on('undo redo', function () {
+ return em.trigger('change:selectedComponent change:canvasOffset');
+ });
+ ['undo', 'redo'].forEach(function (ev) {
+ return um.on(ev, function () {
+ return em.trigger(ev);
+ });
+ });
- defaultStorages.remote = new RemoteStorage(c);
- defaultStorages.local = new LocalStorage(c);
- c.currentStorage = c.type;
- this.loadDefaultProviders().setCurrent(c.type);
return this;
},
/**
- * Checks if autosave is enabled
- * @return {Boolean}
- * */
- isAutosave: function isAutosave() {
- return !!c.autosave;
+ * Get module configurations
+ * @return {Object} Configuration object
+ * @example
+ * const config = um.getConfig();
+ * // { ... }
+ */
+ getConfig: function getConfig() {
+ return config;
},
/**
- * Set autosave value
- * @param {Boolean} v
+ * Add an entity (Model/Collection) to track
+ * Note: New Components and CSSRules will be added automatically
+ * @param {Model|Collection} entity Entity to track
* @return {this}
- * */
- setAutosave: function setAutosave(v) {
- c.autosave = !!v;
+ * @example
+ * um.add(someModelOrCollection);
+ */
+ add: function add(entity) {
+ um.register(entity);
return this;
},
/**
- * Returns number of steps required before trigger autosave
- * @return {number}
- * */
- getStepsBeforeSave: function getStepsBeforeSave() {
- return c.stepsBeforeSave;
+ * Remove and stop tracking the entity (Model/Collection)
+ * @param {Model|Collection} entity Entity to remove
+ * @return {this}
+ * @example
+ * um.remove(someModelOrCollection);
+ */
+ remove: function remove(entity) {
+ um.unregister(entity);
+ return this;
},
/**
- * Set steps required before trigger autosave
- * @param {number} v
+ * Remove all entities
* @return {this}
- * */
- setStepsBeforeSave: function setStepsBeforeSave(v) {
- c.stepsBeforeSave = v;
+ * @example
+ * um.removeAll();
+ */
+ removeAll: function removeAll() {
+ um.unregisterAll();
return this;
},
/**
- * Add new storage
- * @param {string} id Storage ID
- * @param {Object} storage Storage wrapper
- * @param {Function} storage.load Load method
- * @param {Function} storage.store Store method
+ * Start/resume tracking changes
* @return {this}
* @example
- * storageManager.add('local2', {
- * load: function(keys, clb) {
- * var res = {};
- * for (var i = 0, len = keys.length; i < len; i++){
- * var v = localStorage.getItem(keys[i]);
- * if(v) res[keys[i]] = v;
- * }
- * clb(res); // might be called inside some async method
- * },
- * store: function(data, clb) {
- * for(var key in data)
- * localStorage.setItem(key, data[key]);
- * clb(); // might be called inside some async method
- * }
- * });
- * */
- add: function add(id, storage) {
- storages[id] = storage;
+ * um.start();
+ */
+ start: function start() {
+ um.startTracking();
return this;
},
/**
- * Returns storage by id
- * @param {string} id Storage ID
- * @return {Object|null}
- * */
- get: function get(id) {
- return storages[id] || null;
+ * Stop tracking changes
+ * @return {this}
+ * @example
+ * um.stop();
+ */
+ stop: function stop() {
+ um.stopTracking();
+ return this;
},
/**
- * Returns all storages
- * @return {Array}
- * */
- getStorages: function getStorages() {
- return storages;
+ * Undo last change
+ * @return {this}
+ * @example
+ * um.undo();
+ */
+ undo: function undo() {
+ if (!em.get('Canvas').isInputFocused()) um.undo(1);
+ return this;
},
/**
- * Returns current storage type
- * @return {string}
- * */
- getCurrent: function getCurrent() {
- return c.currentStorage;
+ * Undo all changes
+ * @return {this}
+ * @example
+ * um.undoAll();
+ */
+ undoAll: function undoAll() {
+ um.undoAll();
+ return this;
},
/**
- * Set current storage type
- * @param {string} id Storage ID
+ * Redo last change
* @return {this}
- * */
- setCurrent: function setCurrent(id) {
- c.currentStorage = id;
+ * @example
+ * um.redo();
+ */
+ redo: function redo() {
+ if (!em.get('Canvas').isInputFocused()) um.redo(1);
return this;
},
/**
- * Store key-value resources in the current storage
- * @param {Object} data Data in key-value format, eg. {item1: value1, item2: value2}
- * @param {Function} clb Callback function
- * @return {Object|null}
+ * Redo all changes
+ * @return {this}
* @example
- * storageManager.store({item1: value1, item2: value2});
- * */
- store: function store(data, clb) {
- var st = this.get(this.getCurrent());
- var dataF = {};
-
- for (var key in data) {
- dataF[c.id + key] = data[key];
- }return st ? st.store(dataF, clb) : null;
+ * um.redoAll();
+ */
+ redoAll: function redoAll() {
+ um.redoAll();
+ return this;
},
/**
- * Load resource from the current storage by keys
- * @param {string|Array} keys Keys to load
- * @param {Function} clb Callback function
+ * Checks if exists an available undo
+ * @return {Boolean}
* @example
- * storageManager.load(['item1', 'item2'], res => {
- * // res -> {item1: value1, item2: value2}
- * });
- * storageManager.load('item1', res => {
- * // res -> {item1: value1}
- * });
- * */
- load: function load(keys, clb) {
- var st = this.get(this.getCurrent());
- var keysF = [];
- var result = {};
-
- if (typeof keys === 'string') keys = [keys];
+ * um.hasUndo();
+ */
+ hasUndo: function hasUndo() {
+ return um.isAvailable('undo');
+ },
- for (var i = 0, len = keys.length; i < len; i++) {
- keysF.push(c.id + keys[i]);
- }st && st.load(keysF, function (res) {
- // Restore keys name
- for (var itemKey in res) {
- var reg = new RegExp('^' + c.id + '');
- var itemKeyR = itemKey.replace(reg, '');
- result[itemKeyR] = res[itemKey];
- }
- clb && clb(result);
- });
+ /**
+ * Checks if exists an available redo
+ * @return {Boolean}
+ * @example
+ * um.hasRedo();
+ */
+ hasRedo: function hasRedo() {
+ return um.isAvailable('redo');
},
/**
- * Load default storages
- * @return {this}
- * @private
- * */
- loadDefaultProviders: function loadDefaultProviders() {
- for (var id in defaultStorages) {
- this.add(id, defaultStorages[id]);
- }return this;
+ * Get stack of changes
+ * @return {Collection}
+ * @example
+ * const stack = um.getStack();
+ * stack.each(item => ...);
+ */
+ getStack: function getStack() {
+ return um.stack;
},
/**
- * Get configuration object
- * @return {Object}
- * @private
- * */
- getConfig: function getConfig() {
- return c;
+ * Clear the stack
+ * @return {this}
+ * @example
+ * um.clear();
+ */
+ clear: function clear() {
+ um.clear();
+ return this;
+ },
+ getInstance: function getInstance() {
+ return um;
}
};
};
/***/ }),
-/* 69 */
+/* 71 */
/***/ (function(module, exports, __webpack_require__) {
-"use strict";
-
-
-module.exports = {
- // Prefix identifier that will be used inside storing and loading
- id: 'gjs-',
+var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
+ * Backbone.Undo.js v0.2
+ *
+ * Copyright (c)2013 Oliver Sartun
+ * Released under the MIT License
+ *
+ * Documentation and full license available at
+ * https://github.com/osartun/Backbone.Undo.js
+ */
- // Enable/Disable autosaving
- autosave: 1,
- // Indicates if load data inside editor after init
- autoload: 1,
+(function (factory) {
+ if (true) {
+ // AMD support
+ !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(1), __webpack_require__(72)], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
+ __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
+ (__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
+ __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+ } else if (typeof exports !== 'undefined') {
+ // CommonJS support
+ module.exports = factory(
+ require("underscore"),
+ require("backbone")
+ );
+ } else {
+ // Non-modular execution
+ factory(_, Backbone);
+ }
+})(function (_, Backbone) {
- // Indicates which storage to use. Available: local | remote
- type: 'local',
+ var core_slice = Array.prototype.slice;
- // If autosave enabled, indicates how many steps (general changes to structure)
- // need to be done before save. Useful with remoteStorage to reduce remote calls
- stepsBeforeSave: 1,
+ /**
+ * As call is faster than apply, this is a faster version of apply as it uses call.
+ *
+ * @param {Function} fn The function to execute
+ * @param {Object} ctx The context the function should be called in
+ * @param {Array} args The array of arguments that should be applied to the function
+ * @return Forwards whatever the called function returns
+ */
+ function apply (fn, ctx, args) {
+ return args.length <= 4 ?
+ fn.call(ctx, args[0], args[1], args[2], args[3]) :
+ fn.apply(ctx, args);
+ }
- //Enable/Disable components model (JSON format)
- storeComponents: 1,
+ /**
+ * Uses slice on an array or an array-like object.
+ *
+ * @param {Array|Object} arr The array or array-like object.
+ * @param {Number} [index] The index from where the array should be sliced. Default is 0.
+ * @return {Array} The sliced array
+ */
+ function slice (arr, index) {
+ return core_slice.call(arr, index);
+ }
- //Enable/Disable styles model (JSON format)
- storeStyles: 1,
+ /**
+ * Checks if an object has one or more specific keys. The keys
+ * don't have to be an owned property.
+ * You can call this function either this way:
+ * hasKeys(obj, ["a", "b", "c"])
+ * or this way:
+ * hasKeys(obj, "a", "b", "c")
+ *
+ * @param {Object} obj The object to check on
+ * @param {Array} keys The keys to check for
+ * @return {Boolean} True, if the object has all those keys
+ */
+ function hasKeys (obj, keys) {
+ if (obj == null) return false;
+ if (!_.isArray(keys)) {
+ keys = slice(arguments, 1);
+ }
+ return _.all(keys, function (key) {
+ return key in obj;
+ });
+ }
- //Enable/Disable saving HTML template
- storeHtml: 1,
+ /**
+ * Returns a number that is unique per call stack. The number gets
+ * changed after the call stack has been completely processed.
+ *
+ * @return {number} MagicFusionIndex
+ */
+ var getMagicFusionIndex = (function () {
+ // If you add several models to a collection or set several
+ // attributes on a model all in sequence and yet all for
+ // example in one function, then several Undo-Actions are
+ // generated.
+ // If you want to undo your last action only the last model
+ // would be removed from the collection or the last set
+ // attribute would be changed back to its previous value.
+ // To prevent that we have to figure out a way to combine
+ // all those actions that happened "at the same time".
+ // Timestamps aren't exact enough. A complex routine could
+ // run several milliseconds and in that time produce a lot
+ // of actions with different timestamps.
+ // Instead we take advantage of the single-threadedness of
+ // JavaScript:
- //Enable/Disable saving CSS template
- storeCss: 1,
+ var callstackWasIndexed = false, magicFusionIndex = -1;
+ function indexCycle() {
+ magicFusionIndex++;
+ callstackWasIndexed = true;
+ _.defer(function () {
+ // Here comes the magic. With a Timeout of 0
+ // milliseconds this function gets called whenever
+ // the current callstack is completed
+ callstackWasIndexed = false;
+ })
+ }
+ return function () {
+ if (!callstackWasIndexed) {
+ indexCycle();
+ }
+ return magicFusionIndex;
+ }
+ })();
- // ONLY FOR LOCAL STORAGE
- // If enabled, checks if browser supports Local Storage
- checkLocal: 1,
+ /**
+ * To prevent binding a listener several times to one
+ * object, we register the objects in an ObjectRegistry
+ *
+ * @constructor
+ */
+ function ObjectRegistry () {
+ // This uses two different ways of storing
+ // objects: In case the object has a cid
+ // (which Backbone objects typically have)
+ // it uses this cid as an index. That way
+ // the Array's length attribute doesn't
+ // change and the object isn't an item
+ // in the array, but an object-property.
+ // Otherwise it's added to the Array as an
+ // item.
+ // That way we can use the fast property-
+ // lookup and only have to fall back to
+ // iterating over the array in case
+ // non-Backbone-objects are registered.
+ this.registeredObjects = [];
+ // To return a list of all registered
+ // objects in the 'get' method we have to
+ // store the objects that have a cid in
+ // an additional array.
+ this.cidIndexes = [];
+ }
+ ObjectRegistry.prototype = {
+ /**
+ * Returns whether the object is already registered in this ObjectRegistry or not.
+ *
+ * @this {ObjectRegistry}
+ * @param {Object} obj The object to check
+ * @return {Boolean} True if the object is already registered
+ */
+ isRegistered: function (obj) {
+ // This is where we get a performance boost
+ // by using the two different ways of storing
+ // objects.
+ return obj && obj.cid ? this.registeredObjects[obj.cid] : _.contains(this.registeredObjects, obj);
+ },
+ /**
+ * Registers an object in this ObjectRegistry.
+ *
+ * @this {ObjectRegistry}
+ * @param {Object} obj The object to register
+ * @return {undefined}
+ */
+ register: function (obj) {
+ if (!this.isRegistered(obj)) {
+ if (obj && obj.cid) {
+ this.registeredObjects[obj.cid] = obj;
+ this.cidIndexes.push(obj.cid);
+ } else {
+ this.registeredObjects.push(obj);
+ }
+ return true;
+ }
+ return false;
+ },
+ /**
+ * Unregisters an object from this ObjectRegistry.
+ *
+ * @this {ObjectRegistry}
+ * @param {Object} obj The object to unregister
+ * @return {undefined}
+ */
+ unregister: function (obj) {
+ if (this.isRegistered(obj)) {
+ if (obj && obj.cid) {
+ delete this.registeredObjects[obj.cid];
+ this.cidIndexes.splice(_.indexOf(this.cidIndexes, obj.cid), 1);
+ } else {
+ var i = _.indexOf(this.registeredObjects, obj);
+ this.registeredObjects.splice(i, 1);
+ }
+ return true;
+ }
+ return false;
+ },
+ /**
+ * Returns an array of all objects that are currently in this ObjectRegistry.
+ *
+ * @return {Array} An array of all the objects which are currently in the ObjectRegistry
+ */
+ get: function () {
+ return (_.map(this.cidIndexes, function (cid) {return this.registeredObjects[cid];}, this)).concat(this.registeredObjects);
+ }
+ }
- // ONLY FOR REMOTE STORAGE
- // Custom parameters to pass with the remote storage request, eg. csrf token
- params: {},
+ /**
+ * Binds or unbinds the "all"-listener for one or more objects.
+ *
+ * @param {String} which Either "on" or "off"
+ * @param {Object[]} objects Array of the objects on which the "all"-listener should be bound / unbound to
+ * @param {Function} [fn] The function that should be bound / unbound. Optional in case of "off"
+ * @param {Object} [ctx] The context the function should be called in
+ * @return {undefined}
+ */
+ function onoff(which, objects, fn, ctx) {
+ for (var i = 0, l = objects.length, obj; i < l; i++) {
+ obj = objects[i];
+ if (!obj) continue;
+ if (which === "on") {
+ if (!ctx.objectRegistry.register(obj)) {
+ // register returned false, so obj was already registered
+ continue;
+ }
+ } else {
+ if (!ctx.objectRegistry.unregister(obj)) {
+ // unregister returned false, so obj wasn't registered
+ continue;
+ }
+ }
+ if (_.isFunction(obj[which])) {
+ obj[which]("all", fn, ctx);
+ }
+ }
+ }
- // Custom headers for the remote storage request
- headers: {},
+ /**
+ * Calls the undo/redo-function for a specific action.
+ *
+ * @param {String} which Either "undo" or "redo"
+ * @param {Object} action The Action's attributes
+ * @return {undefined}
+ */
+ function actionUndoRedo (which, action) {
+ var type = action.type, undoTypes = action.undoTypes, fn = !undoTypes[type] || undoTypes[type][which];
+ if (_.isFunction(fn)) {
+ fn(action.object, action.before, action.after, action.options);
+ }
+ }
- // Endpoint where to save all stuff
- urlStore: '',
+ /**
+ * The main undo/redo function.
+ *
+ * @param {String} which Either "undo" or "redo"
+ * @param {UndoManager} manager The UndoManager-instance on which an "undo"/"redo"-Event is triggered afterwards
+ * @param {UndoStack} stack The UndoStack on which we perform
+ * @param {Boolean} magic If true, undoes / redoes all actions with the same magicFusionIndex
+ * @param {Boolean} everything If true, undoes / redoes every action that had been tracked
+ * @return {undefined}
+ */
+ function managerUndoRedo (which, manager, stack, magic, everything) {
+ if (stack.isCurrentlyUndoRedoing ||
+ (which === "undo" && stack.pointer === -1) ||
+ (which === "redo" && stack.pointer === stack.length - 1)) {
+ // We're either currently in an undo- / redo-process or
+ // we reached the end of the stack
+ return;
+ }
+ stack.isCurrentlyUndoRedoing = true;
+ var action, actions, isUndo = which === "undo";
+ if (everything) {
+ // Undo / Redo all steps until you reach the stack's beginning / end
+ actions = isUndo && stack.pointer === stack.length - 1 || // If at the stack's end calling undo
+ !isUndo && stack.pointer === -1 ? // or at the stack's beginning calling redo
+ _.clone(stack.models) : // => Take all the models. Otherwise:
+ core_slice.apply(stack.models, isUndo ? [0, stack.pointer] : [stack.pointer, stack.length - 1]);
+ } else {
+ // Undo / Redo only one step
+ action = stack.at(isUndo ? stack.pointer : stack.pointer + 1);
+ actions = magic ? stack.where({"magicFusionIndex": action.get("magicFusionIndex")}) : [action];
+ }
+
+ stack.pointer += (isUndo ? -1 : 1) * actions.length;
+ while (action = isUndo ? actions.pop() : actions.shift()) {
+ // Here we're calling the Action's undo / redo method
+ action[which]();
+ }
+ stack.isCurrentlyUndoRedoing = false;
- // Endpoint where to fetch data
- urlLoad: '',
+ manager.trigger(which, manager);
+ }
- //Callback before request
- beforeSend: function beforeSend(jqXHR, settings) {},
+ /**
+ * Checks whether an UndoAction should be created or not. Therefore it checks
+ * whether a "condition" property is set in the undoTypes-object of the specific
+ * event type. If not, it returns true. If it's set and a boolean, it returns it.
+ * If it's a function, it returns its result, converting it into a boolean.
+ * Otherwise it returns true.
+ *
+ * @param {Object} undoTypesType The object within the UndoTypes that holds the function for this event type (i.e. "change")
+ * @param {Arguments} args The arguments the "condition" function is called with
+ * @return {Boolean} True, if an UndoAction should be created
+ */
+ function validateUndoActionCreation (undoTypesType, args) {
+ var condition = undoTypesType.condition, type = typeof condition;
+ return type === "function" ? !!apply(condition, undoTypesType, args) :
+ type === "boolean" ? condition : true;
+ }
+ /**
+ * Adds an Undo-Action to the stack.
+ *
+ * @param {UndoStack} stack The undostack the action should be added to.
+ * @param {String} type The event type (i.e. "change")
+ * @param {Arguments} args The arguments passed to the undoTypes' "on"-handler
+ * @param {OwnedUndoTypes} undoTypes The undoTypes-object which has the "on"-handler
+ * @return {undefined}
+ */
+ function addToStack(stack, type, args, undoTypes) {
+ if (stack.track && !stack.isCurrentlyUndoRedoing && type in undoTypes &&
+ validateUndoActionCreation(undoTypes[type], args)) {
+ // An UndoAction should be created
+ var res = apply(undoTypes[type]["on"], undoTypes[type], args), diff;
+ if (hasKeys(res, "object", "before", "after")) {
+ res.type = type;
+ res.magicFusionIndex = getMagicFusionIndex();
+ res.undoTypes = undoTypes;
+ if (stack.pointer < stack.length - 1) {
+ // New Actions must always be added to the end of the stack.
+ // If the pointer is not pointed to the last action in the
+ // stack, presumably because actions were undone before, then
+ // all following actions must be discarded
+ var diff = stack.length - stack.pointer - 1;
+ while (diff--) {
+ stack.pop();
+ }
+ }
+ stack.pointer = stack.length;
+ stack.add(res);
+ if (stack.length > stack.maximumStackLength) {
+ stack.shift();
+ stack.pointer--;
+ }
+ }
+ }
+ }
- //Callback after request
- onComplete: function onComplete(jqXHR, status) {},
+ /**
+ * Predefined UndoTypes object with default handlers for the most common events.
+ * @type {Object}
+ */
+ var UndoTypes = {
+ "add": {
+ "undo": function (collection, ignore, model, options) {
+ // Undo add = remove
+ collection.remove(model, options);
+ },
+ "redo": function (collection, ignore, model, options) {
+ // Redo add = add
+ if (options.index) {
+ options.at = options.index;
+ }
+ collection.add(model, options);
+ },
+ "on": function (model, collection, options) {
+ return {
+ object: collection,
+ before: undefined,
+ after: model,
+ options: _.clone(options)
+ };
+ }
+ },
+ "remove": {
+ "undo": function (collection, model, ignore, options) {
+ if ("index" in options) {
+ options.at = options.index;
+ }
+ collection.add(model, options);
+ },
+ "redo": function (collection, model, ignore, options) {
+ collection.remove(model, options);
+ },
+ "on": function (model, collection, options) {
+ return {
+ object: collection,
+ before: model,
+ after: undefined,
+ options: _.clone(options)
+ };
+ }
+ },
+ "change": {
+ "undo": function (model, before, after, options) {
+ if (_.isEmpty(before)) {
+ _.each(_.keys(after), model.unset, model);
+ } else {
+ model.set(before);
+ if (options && options.unsetData && options.unsetData.before && options.unsetData.before.length) {
+ _.each(options.unsetData.before, model.unset, model);
+ }
+ }
+ },
+ "redo": function (model, before, after, options) {
+ if (_.isEmpty(after)) {
+ _.each(_.keys(before), model.unset, model);
+ } else {
+ model.set(after);
+ if (options && options.unsetData && options.unsetData.after && options.unsetData.after.length) {
+ _.each(options.unsetData.after, model.unset, model);
+ }
+ }
+ },
+ "on": function (model, options) {
+ var
+ afterAttributes = model.changedAttributes(),
+ keysAfter = _.keys(afterAttributes),
+ previousAttributes = _.pick(model.previousAttributes(), keysAfter),
+ keysPrevious = _.keys(previousAttributes),
+ unsetData = (options || (options = {})).unsetData = {
+ after: [],
+ before: []
+ };
- // set contentType paramater of $.ajax
- // true: application/json; charset=utf-8'
- // false: 'x-www-form-urlencoded'
- contentTypeJson: false
+ if (keysAfter.length != keysPrevious.length) {
+ // There are new attributes or old attributes have been unset
+ if (keysAfter.length > keysPrevious.length) {
+ // New attributes have been added
+ _.each(keysAfter, function (val) {
+ if (!(val in previousAttributes)) {
+ unsetData.before.push(val);
+ }
+ }, this);
+ } else {
+ // Old attributes have been unset
+ _.each(keysPrevious, function (val) {
+ if (!(val in afterAttributes)) {
+ unsetData.after.push(val);
+ }
+ })
+ }
+ }
+ return {
+ object: model,
+ before: previousAttributes,
+ after: afterAttributes,
+ options: _.clone(options)
+ };
+ }
+ },
+ "reset": {
+ "undo": function (collection, before, after) {
+ collection.reset(before);
+ },
+ "redo": function (collection, before, after) {
+ collection.reset(after);
+ },
+ "on": function (collection, options) {
+ return {
+ object: collection,
+ before: options.previousModels,
+ after: _.clone(collection.models)
+ };
+ }
+ }
+ };
-};
+ /**
+ * Every UndoManager instance has an own undoTypes object
+ * which is an instance of OwnedUndoTypes. OwnedUndoTypes'
+ * prototype is the global UndoTypes object. Changes to the
+ * global UndoTypes object take effect on every instance of
+ * UndoManager as the object is its prototype. And yet every
+ * local UndoTypes object can be changed individually.
+ *
+ * @constructor
+ */
+ function OwnedUndoTypes () {}
+ OwnedUndoTypes.prototype = UndoTypes;
-/***/ }),
-/* 70 */
-/***/ (function(module, exports, __webpack_require__) {
+ /**
+ * Adds, changes or removes an undo-type from an UndoTypes-object.
+ * You can call it this way:
+ * manipulateUndoType (1, "reset", {"on": function () {}}, undoTypes)
+ * or this way to perform bulk actions:
+ * manipulateUndoType (1, {"reset": {"on": function () {}}}, undoTypes)
+ * In case of removing undo-types you can pass an Array for performing
+ * bulk actions:
+ * manipulateUndoType(2, ["reset", "change"], undoTypes)
+ *
+ * @param {Number} manipType Indicates the kind of action to execute: 0 for add, 1 for change, 2 for remove
+ * @param {String|Object|Array} undoType The type of undoType that should be added/changed/removed. Can be an object / array to perform bulk actions
+ * @param {Object} [fns] Object with the functions to add / change. Is optional in case you passed an object as undoType that contains these functions
+ * @param {OwnedUndoTypes|UndoTypes} undoTypesInstance The undoTypes object to act on
+ * @return {undefined}
+ */
+ function manipulateUndoType (manipType, undoType, fns, undoTypesInstance) {
+ // manipType, passed by the calling function
+ // 0: add
+ // 1: change
+ // 2: remove
+ if (typeof undoType === "object") {
+ // bulk action. Iterate over this data.
+ return _.each(undoType, function (val, key) {
+ if (manipType === 2) { // remove
+ // undoType is an array
+ manipulateUndoType (manipType, val, fns, undoTypesInstance);
+ } else {
+ // undoType is an object
+ manipulateUndoType (manipType, key, val, fns);
+ }
+ })
+ }
-"use strict";
+ switch (manipType) {
+ case 0: // add
+ if (hasKeys(fns, "undo", "redo", "on") && _.all(_.pick(fns, "undo", "redo", "on"), _.isFunction)) {
+ undoTypesInstance[undoType] = fns;
+ }
+ break;
+ case 1: // change
+ if (undoTypesInstance[undoType] && _.isObject(fns)) {
+ // undoTypeInstance[undoType] may be a prototype's property
+ // So, if we did this _.extend(undoTypeInstance[undoType], fns)
+ // we would extend the object on the prototype which means
+ // that this change would have a global effect
+ // Instead we just want to manipulate this instance. That's why
+ // we're doing this:
+ undoTypesInstance[undoType] = _.extend({}, undoTypesInstance[undoType], fns);
+ }
+ break;
+ case 2: // remove
+ delete undoTypesInstance[undoType];
+ break;
+ }
+ return this;
+ }
+ /**
+ * Instantiating "Action" creates the UndoActions that
+ * are collected in an UndoStack. It holds all relevant
+ * data to undo / redo an action and has an undo / redo
+ * method.
+ */
+ var Action = Backbone.Model.extend({
+ defaults: {
+ type: null, // "add", "change", "reset", etc.
+ object: null, // The object on which the action occurred
+ before: null, // The previous values which were changed with this action
+ after: null, // The values after this action
+ magicFusionIndex: null // The magicFusionIndex helps to combine
+ // all actions that occurred "at the same time" to undo/redo them altogether
+ },
+ /**
+ * Undoes this action.
+ * @param {OwnedUndoTypes|UndoTypes} undoTypes The undoTypes object which contains the "undo"-handler that should be used
+ * @return {undefined}
+ */
+ undo: function (undoTypes) {
+ actionUndoRedo("undo", this.attributes);
+ },
+ /**
+ * Redoes this action.
+ * @param {OwnedUndoTypes|UndoTypes} undoTypes The undoTypes object which contains the "redo"-handler that should be used
+ * @return {undefined}
+ */
+ redo: function (undoTypes) {
+ actionUndoRedo("redo", this.attributes);
+ }
+ }),
+ /**
+ * An UndoStack is a collection of UndoActions in
+ * chronological order.
+ */
+ UndoStack = Backbone.Collection.extend({
+ model: Action,
+ pointer: -1, // The pointer indicates the index where we are located within the stack. We start at -1
+ track: false,
+ isCurrentlyUndoRedoing: false,
+ maximumStackLength: Infinity,
+ setMaxLength: function (val) {
+ this.maximumStackLength = val;
+ }
+ }),
+ /**
+ * An instance of UndoManager can keep track of
+ * changes to objects and helps to undo them.
+ */
+ UndoManager = Backbone.Model.extend({
+ defaults: {
+ maximumStackLength: Infinity,
+ track: false
+ },
+ /**
+ * The constructor function.
+ * @param {attr} [attr] Object with parameters. The available parameters are:
+ * - maximumStackLength {number} Set the undo-stack's maximum size
+ * - track {boolean} Start tracking changes right away
+ * @return {undefined}
+ */
+ initialize: function (attr) {
+ this.stack = new UndoStack;
+ this.objectRegistry = new ObjectRegistry();
+ this.undoTypes = new OwnedUndoTypes();
-var Backbone = __webpack_require__(0);
+ // sync the maximumStackLength attribute with our stack
+ this.stack.setMaxLength(this.get("maximumStackLength"));
+ this.on("change:maximumStackLength", function (model, value) {
+ this.stack.setMaxLength(value);
+ }, this);
-module.exports = Backbone.Model.extend({
+ // Start tracking, if attr.track == true
+ if (attr && attr.track) {
+ this.startTracking();
+ }
- defaults: {
- checkLocal: true
- },
+ // Register objects passed in the "register" attribute
+ if (attr && attr.register) {
+ if (_.isArray(attr.register) || _.isArguments(attr.register)) {
+ apply(this.register, this, attr.register);
+ } else {
+ this.register(attr.register);
+ }
+ }
+ },
+ /**
+ * Starts tracking. Changes of registered objects won't be processed until you've called this function
+ * @return {undefined}
+ */
+ startTracking: function () {
+ this.set("track", true);
+ this.stack.track = true;
+ },
+ /**
+ * Stops tracking. Afterwards changes of registered objects won't be processed.
+ * @return {undefined}
+ */
+ stopTracking: function () {
+ this.set("track", false);
+ this.stack.track = false;
+ },
+ /**
+ * Return the state of the tracking
+ * @return {boolean}
+ */
+ isTracking: function () {
+ return this.get("track");
+ },
+ /**
+ * This is the "all"-handler which is bound to registered
+ * objects. It creates an UndoAction from the event and adds
+ * it to the stack.
+ *
+ * @param {String} type The event type
+ * @return {undefined}
+ */
+ _addToStack: function (type) {
+ addToStack(this.stack, type, slice(arguments, 1), this.undoTypes);
+ },
+ /**
+ * Registers one or more objects to track their changes.
+ * @param {...Object} obj The object or objects of which changes should be tracked
+ * @return {undefined}
+ */
+ register: function () {
+ onoff("on", arguments, this._addToStack, this);
+ },
+ /**
+ * Unregisters one or more objects.
+ * @param {...Object} obj The object or objects of which changes shouldn't be tracked any longer
+ * @return {undefined}
+ */
+ unregister: function () {
+ onoff("off", arguments, this._addToStack, this);
+ },
+ /**
+ * Unregisters all previously registered objects.
+ * @return {undefined}
+ */
+ unregisterAll: function () {
+ apply(this.unregister, this, this.objectRegistry.get());
+ },
+ /**
+ * Undoes the last action or the last set of actions in case 'magic' is true.
+ * @param {Boolean} [magic] If true, all actions that happened basically at the same time are undone together
+ * @return {undefined}
+ */
+ undo: function (magic) {
+ managerUndoRedo("undo", this, this.stack, magic);
+ },
- /**
- * @private
- */
- store: function store(data, clb) {
- this.checkStorageEnvironment();
+ /**
+ * Undoes all actions ever tracked by the undo manager
+ * @return {undefined}
+ */
+ undoAll: function () {
+ managerUndoRedo("undo", this, this.stack, false, true);
+ },
- for (var key in data) {
- localStorage.setItem(key, data[key]);
- }if (typeof clb == 'function') {
- clb();
- }
- },
-
-
- /**
- * @private
- */
- load: function load(keys, clb) {
- this.checkStorageEnvironment();
- var result = {};
-
- for (var i = 0, len = keys.length; i < len; i++) {
- var value = localStorage.getItem(keys[i]);
- if (value) result[keys[i]] = value;
- }
-
- if (typeof clb == 'function') {
- clb(result);
- }
+ /**
+ * Redoes a previously undone action or a set of actions.
+ * @param {Boolean} [magic] If true, all actions that happened basically at the same time are redone together
+ * @return {undefined}
+ */
+ redo: function (magic) {
+ managerUndoRedo("redo", this, this.stack, magic);
+ },
- return result;
- },
+ /**
+ * Redoes all actions ever tracked by the undo manager
+ * @return {undefined}
+ */
+ redoAll: function () {
+ managerUndoRedo("redo", this, this.stack, false, true);
+ },
+ /**
+ * Checks if there's an action in the stack that can be undone / redone
+ * @param {String} type Either "undo" or "redo"
+ * @return {Boolean} True if there is a set of actions which can be undone / redone
+ */
+ isAvailable: function (type) {
+ var s = this.stack, l = s.length;
+ switch (type) {
+ case "undo": return l > 0 && s.pointer > -1;
+ case "redo": return l > 0 && s.pointer < l - 1;
+ default: return false;
+ }
+ },
+ /**
+ * Sets the stack-reference to the stack of another undoManager.
+ * @param {UndoManager} undoManager The undoManager whose stack-reference is set to this stack
+ * @return {undefined}
+ */
+ merge: function (undoManager) {
+ // This sets the stack-reference to the stack of another
+ // undoManager so that the stack of this other undoManager
+ // is used by two different managers.
+ // This enables to set up a main-undoManager and besides it
+ // several others for special, exceptional cases (by using
+ // instance-based custom UndoTypes). Models / collections
+ // which need this special treatment are only registered at
+ // those special undoManagers. Those special ones are then
+ // merged into the main-undoManager to write on its stack.
+ // That way it's easier to manage exceptional cases.
+ var args = _.isArray(undoManager) ? undoManager : slice(arguments), manager;
+ while (manager = args.pop()) {
+ if (manager instanceof UndoManager &&
+ manager.stack instanceof UndoStack) {
+ // set the stack reference to our stack
+ manager.stack = this.stack;
+ }
+ }
+ },
+ /**
+ * Add an UndoType to this specific UndoManager-instance.
+ * @param {String} type The event this UndoType is made for
+ * @param {Object} fns An object of functions that are called to generate the data for an UndoAction or to process it. Must have the properties "undo", "redo" and "on". Can have the property "condition".
+ * @return {undefined}
+ */
+ addUndoType: function (type, fns) {
+ manipulateUndoType(0, type, fns, this.undoTypes);
+ },
+ /**
+ * Overwrite properties of an existing UndoType for this specific UndoManager-instance.
+ * @param {String} type The event the UndoType is made for
+ * @param {Object} fns An object of functions that are called to generate the data for an UndoAction or to process it. It extends the existing object.
+ * @return {undefined}
+ */
+ changeUndoType: function (type, fns) {
+ manipulateUndoType(1, type, fns, this.undoTypes);
+ },
+ /**
+ * Remove one or more UndoTypes of this specific UndoManager-instance to fall back to the global UndoTypes.
+ * @param {String|Array} type The event the UndoType that should be removed is made for. You can also pass an array of events.
+ * @return {undefined}
+ */
+ removeUndoType: function (type) {
+ manipulateUndoType(2, type, undefined, this.undoTypes);
+ },
- /**
- * @private
- */
- remove: function remove(keys) {
- this.checkStorageEnvironment();
+ /**
+ * Removes all actions from the stack.
+ * @return {undefined}
+ */
+ clear: function() {
+ this.stack.reset();
+ this.stack.pointer = -1;
+ }
+ });
- for (var i = 0, len = keys.length; i < len; i++) {
- localStorage.removeItem(keys[i]);
- }
- },
+ _.extend(UndoManager, {
+ /**
+ * Change the UndoManager's default attributes
+ * @param {Object} defaultAttributes An object with the new default values.
+ * @return {undefined}
+ */
+ defaults: function (defaultAttributes) {
+ _.extend(UndoManager.prototype.defaults, defaultAttributes);
+ },
+ /**
+ * Add an UndoType to the global UndoTypes-object.
+ * @param {String} type The event this UndoType is made for
+ * @param {Object} fns An object of functions that are called to generate the data for an UndoAction or to process it. Must have the properties "undo", "redo" and "on". Can have the property "condition".
+ * @return {undefined}
+ */
+ "addUndoType": function (type, fns) {
+ manipulateUndoType(0, type, fns, UndoTypes);
+ },
+ /**
+ * Overwrite properties of an existing UndoType in the global UndoTypes-object.
+ * @param {String} type The event the UndoType is made for
+ * @param {Object} fns An object of functions that are called to generate the data for an UndoAction or to process it. It extends the existing object.
+ * @return {undefined}
+ */
+ "changeUndoType": function (type, fns) {
+ manipulateUndoType(1, type, fns, UndoTypes)
+ },
+ /**
+ * Remove one or more UndoTypes of this specific UndoManager-instance to fall back to the global UndoTypes.
+ * @param {String|Array} type The event the UndoType that should be removed is made for. You can also pass an array of events.
+ * @return {undefined}
+ */
+ "removeUndoType": function (type) {
+ manipulateUndoType(2, type, undefined, UndoTypes);
+ }
+ })
+ return Backbone.UndoManager = UndoManager;
- /**
- * Check storage environment
- * @private
- * */
- checkStorageEnvironment: function checkStorageEnvironment() {
- if (this.get('checkLocal') && !localStorage) console.warn("Your browser doesn't support localStorage");
- }
});
+
/***/ }),
-/* 71 */
+/* 72 */
/***/ (function(module, exports, __webpack_require__) {
-"use strict";
-
+/* WEBPACK VAR INJECTION */(function(global) {var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;// Backbone.js 1.2.1
-var _fetch = __webpack_require__(23);
+// (c) 2010-2015 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+// Backbone may be freely distributed under the MIT license.
+// For all details and documentation:
+// http://backbonejs.org
-var _fetch2 = _interopRequireDefault(_fetch);
+(function(factory) {
-var _underscore = __webpack_require__(1);
+ // Establish the root object, `window` (`self`) in the browser, or `global` on the server.
+ // We use `self` instead of `window` for `WebWorker` support.
+ var root = (typeof self == 'object' && self.self == self && self) ||
+ (typeof global == 'object' && global.global == global && global);
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+ // Set up Backbone appropriately for the environment. Start with AMD.
+ if (true) {
+ !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(1), __webpack_require__(9), exports], __WEBPACK_AMD_DEFINE_RESULT__ = function(_, $, exports) {
+ // Export global even in AMD case in case this script is loaded with
+ // others that may still expect a global Backbone.
+ root.Backbone = factory(root, exports, _, $);
+ }.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),
+ __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
-module.exports = __webpack_require__(0).Model.extend({
+ // Next for Node.js or CommonJS. jQuery may not be needed as a module.
+ } else if (typeof exports !== 'undefined') {
+ var _ = require('underscore'), $;
+ try { $ = require('jquery'); } catch(e) {}
+ factory(root, exports, _, $);
- fetch: _fetch2.default,
+ // Finally, as a browser global.
+ } else {
+ root.Backbone = factory(root, {}, root._, (root.jQuery || root.Zepto || root.ender || root.$));
+ }
- defaults: {
- urlStore: '',
- urlLoad: '',
- params: {},
- beforeSend: function beforeSend() {},
- onComplete: function onComplete() {},
+}(function(root, Backbone, _, $) {
- contentTypeJson: false
- },
+ // Initial Setup
+ // -------------
- /**
- * Triggered before the request is started
- * @private
- */
- onStart: function onStart() {
- var em = this.get('em');
- var before = this.get('beforeSend');
- before && before();
- em && em.trigger('storage:start');
- },
+ // Save the previous value of the `Backbone` variable, so that it can be
+ // restored later on, if `noConflict` is used.
+ var previousBackbone = root.Backbone;
+ // Create a local reference to a common array method we'll want to use later.
+ var slice = [].slice;
- /**
- * Triggered on request error
- * @param {Object} err Error
- * @private
- */
- onError: function onError(err) {
- var em = this.get('em');
- console.error(err);
- em && em.trigger('storage:error', err);
- this.onEnd(err);
- },
+ // Current version of the library. Keep in sync with `package.json`.
+ Backbone.VERSION = '1.2.1';
+ // For Backbone's purposes, jQuery, Zepto, Ender, or My Library (kidding) owns
+ // the `$` variable.
+ Backbone.$ = $;
- /**
- * Triggered after the request is ended
- * @param {Object|string} res End result
- * @private
- */
- onEnd: function onEnd(res) {
- var em = this.get('em');
- em && em.trigger('storage:end', res);
- },
+ // Runs Backbone.js in *noConflict* mode, returning the `Backbone` variable
+ // to its previous owner. Returns a reference to this Backbone object.
+ Backbone.noConflict = function() {
+ root.Backbone = previousBackbone;
+ return this;
+ };
+ // Turn on `emulateHTTP` to support legacy HTTP servers. Setting this option
+ // will fake `"PATCH"`, `"PUT"` and `"DELETE"` requests via the `_method` parameter and
+ // set a `X-Http-Method-Override` header.
+ Backbone.emulateHTTP = false;
- /**
- * Triggered on request response
- * @param {string} text Response text
- * @private
- */
- onResponse: function onResponse(text, clb) {
- var em = this.get('em');
- var complete = this.get('onComplete');
- var typeJson = this.get('contentTypeJson');
- var res = typeJson && typeof text === 'string' ? JSON.parse(text) : text;
- complete && complete(res);
- clb && clb(res);
- em && em.trigger('storage:response', res);
- this.onEnd(text);
- },
- store: function store(data, clb) {
- var body = {};
+ // Turn on `emulateJSON` to support legacy servers that can't deal with direct
+ // `application/json` requests ... this will encode the body as
+ // `application/x-www-form-urlencoded` instead and will send the model in a
+ // form param named `model`.
+ Backbone.emulateJSON = false;
- for (var key in data) {
- body[key] = data[key];
+ // Proxy Underscore methods to a Backbone class' prototype using a
+ // particular attribute as the data argument
+ var addMethod = function(length, method, attribute) {
+ switch (length) {
+ case 1: return function() {
+ return _[method](this[attribute]);
+ };
+ case 2: return function(value) {
+ return _[method](this[attribute], value);
+ };
+ case 3: return function(iteratee, context) {
+ return _[method](this[attribute], iteratee, context);
+ };
+ case 4: return function(iteratee, defaultVal, context) {
+ return _[method](this[attribute], iteratee, defaultVal, context);
+ };
+ default: return function() {
+ var args = slice.call(arguments);
+ args.unshift(this[attribute]);
+ return _[method].apply(_, args);
+ };
}
+ };
+ var addUnderscoreMethods = function(Class, methods, attribute) {
+ _.each(methods, function(length, method) {
+ if (_[method]) Class.prototype[method] = addMethod(length, method, attribute);
+ });
+ };
- this.request(this.get('urlStore'), { body: body }, clb);
- },
- load: function load(keys, clb) {
- this.request(this.get('urlLoad'), { method: 'get' }, clb);
- },
+ // Backbone.Events
+ // ---------------
+ // A module that can be mixed in to *any object* in order to provide it with
+ // custom events. You may bind with `on` or remove with `off` callback
+ // functions to an event; `trigger`-ing an event fires all callbacks in
+ // succession.
+ //
+ // var object = {};
+ // _.extend(object, Backbone.Events);
+ // object.on('expand', function(){ alert('expanded'); });
+ // object.trigger('expand');
+ //
+ var Events = Backbone.Events = {};
- /**
- * Execute remote request
- * @param {string} url Url
- * @param {Object} [opts={}] Options
- * @param {[type]} [clb=null] Callback
- * @private
- */
- request: function request(url) {
- var _this = this;
+ // Regular expression used to split event strings.
+ var eventSplitter = /\s+/;
- var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
- var clb = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+ // Iterates over the standard `event, callback` (as well as the fancy multiple
+ // space-separated events `"change blur", callback` and jQuery-style event
+ // maps `{event: callback}`), reducing them by manipulating `memo`.
+ // Passes a normalized single event name and callback, as well as any
+ // optional `opts`.
+ var eventsApi = function(iteratee, memo, name, callback, opts) {
+ var i = 0, names;
+ if (name && typeof name === 'object') {
+ // Handle event maps.
+ if (callback !== void 0 && 'context' in opts && opts.context === void 0) opts.context = callback;
+ for (names = _.keys(name); i < names.length ; i++) {
+ memo = iteratee(memo, names[i], name[names[i]], opts);
+ }
+ } else if (name && eventSplitter.test(name)) {
+ // Handle space separated event names.
+ for (names = name.split(eventSplitter); i < names.length; i++) {
+ memo = iteratee(memo, names[i], callback, opts);
+ }
+ } else {
+ memo = iteratee(memo, name, callback, opts);
+ }
+ return memo;
+ };
- var typeJson = this.get('contentTypeJson');
- var headers = this.get('headers') || {};
- var params = this.get('params');
- var reqHead = 'X-Requested-With';
- var typeHead = 'Content-Type';
- var bodyObj = opts.body || {};
- var fetchOptions = void 0;
- var body = void 0;
+ // Bind an event to a `callback` function. Passing `"all"` will bind
+ // the callback to all events fired.
+ Events.on = function(name, callback, context) {
+ return internalOn(this, name, callback, context);
+ };
- for (var param in params) {
- bodyObj[param] = params[param];
- }
+ // An internal use `on` function, used to guard the `listening` argument from
+ // the public API.
+ var internalOn = function(obj, name, callback, context, listening) {
+ obj._events = eventsApi(onApi, obj._events || {}, name, callback, {
+ context: context,
+ ctx: obj,
+ listening: listening
+ });
- if ((0, _underscore.isUndefined)(headers[reqHead])) {
- headers[reqHead] = 'XMLHttpRequest';
+ if (listening) {
+ var listeners = obj._listeners || (obj._listeners = {});
+ listeners[listening.id] = listening;
}
- // With `fetch`, have to send FormData without any 'Content-Type'
- // https://stackoverflow.com/questions/39280438/fetch-missing-boundary-in-multipart-form-data-post
+ return obj;
+ };
- if ((0, _underscore.isUndefined)(headers[typeHead]) && typeJson) {
- headers[typeHead] = 'application/json; charset=utf-8';
+ // Inversion-of-control versions of `on`. Tell *this* object to listen to
+ // an event in another object... keeping track of what it's listening to.
+ Events.listenTo = function(obj, name, callback) {
+ if (!obj) return this;
+ var id = obj._listenId || (obj._listenId = _.uniqueId('l'));
+ var listeningTo = this._listeningTo || (this._listeningTo = {});
+ var listening = listeningTo[id];
+
+ // This object is not listening to any other events on `obj` yet.
+ // Setup the necessary references to track the listening callbacks.
+ if (!listening) {
+ var thisId = this._listenId || (this._listenId = _.uniqueId('l'));
+ listening = listeningTo[id] = {obj: obj, objId: id, id: thisId, listeningTo: listeningTo, count: 0};
}
- if (typeJson) {
- body = JSON.stringify(bodyObj);
- } else {
- body = new FormData();
+ // Bind callbacks on obj, and keep track of them on listening.
+ internalOn(obj, name, callback, this, listening);
+ return this;
+ };
- for (var bodyKey in bodyObj) {
- body.append(bodyKey, bodyObj[bodyKey]);
- }
- }
- fetchOptions = {
- method: opts.method || 'post',
- credentials: 'include',
- headers: headers
- };
+ // The reducing API that adds a callback to the `events` object.
+ var onApi = function(events, name, callback, options) {
+ if (callback) {
+ var handlers = events[name] || (events[name] = []);
+ var context = options.context, ctx = options.ctx, listening = options.listening;
+ if (listening) listening.count++;
- // Body should only be included on POST method
- if (fetchOptions.method === 'post') {
- fetchOptions.body = body;
+ handlers.push({ callback: callback, context: context, ctx: context || ctx, listening: listening });
}
+ return events;
+ };
- this.onStart();
- this.fetch(url, fetchOptions).then(function (res) {
- return (res.status / 200 | 0) == 1 ? res.text() : res.text().then(function (text) {
- return Promise.reject(text);
- });
- }).then(function (text) {
- return _this.onResponse(text, clb);
- }).catch(function (err) {
- return _this.onError(err);
+ // Remove one or many callbacks. If `context` is null, removes all
+ // callbacks with that function. If `callback` is null, removes all
+ // callbacks for the event. If `name` is null, removes all bound
+ // callbacks for all events.
+ Events.off = function(name, callback, context) {
+ if (!this._events) return this;
+ this._events = eventsApi(offApi, this._events, name, callback, {
+ context: context,
+ listeners: this._listeners
});
- }
-});
+ return this;
+ };
-/***/ }),
-/* 72 */
-/***/ (function(module, exports, __webpack_require__) {
+ // Tell this object to stop listening to either specific events ... or
+ // to every object it's currently listening to.
+ Events.stopListening = function(obj, name, callback) {
+ var listeningTo = this._listeningTo;
+ if (!listeningTo) return this;
-/* WEBPACK VAR INJECTION */(function(setImmediate) {(function (root) {
+ var ids = obj ? [obj._listenId] : _.keys(listeningTo);
- // Store setTimeout reference so promise-polyfill will be unaffected by
- // other code modifying setTimeout (like sinon.useFakeTimers())
- var setTimeoutFunc = setTimeout;
+ for (var i = 0; i < ids.length; i++) {
+ var listening = listeningTo[ids[i]];
- function noop() {}
-
- // Polyfill for Function.prototype.bind
- function bind(fn, thisArg) {
- return function () {
- fn.apply(thisArg, arguments);
- };
- }
+ // If listening doesn't exist, this object is not currently
+ // listening to obj. Break out early.
+ if (!listening) break;
- function Promise(fn) {
- if (typeof this !== 'object') throw new TypeError('Promises must be constructed via new');
- if (typeof fn !== 'function') throw new TypeError('not a function');
- this._state = 0;
- this._handled = false;
- this._value = undefined;
- this._deferreds = [];
+ listening.obj.off(name, callback, this);
+ }
+ if (_.isEmpty(listeningTo)) this._listeningTo = void 0;
- doResolve(fn, this);
- }
+ return this;
+ };
- function handle(self, deferred) {
- while (self._state === 3) {
- self = self._value;
- }
- if (self._state === 0) {
- self._deferreds.push(deferred);
- return;
- }
- self._handled = true;
- Promise._immediateFn(function () {
- var cb = self._state === 1 ? deferred.onFulfilled : deferred.onRejected;
- if (cb === null) {
- (self._state === 1 ? resolve : reject)(deferred.promise, self._value);
- return;
- }
- var ret;
- try {
- ret = cb(self._value);
- } catch (e) {
- reject(deferred.promise, e);
- return;
- }
- resolve(deferred.promise, ret);
- });
- }
+ // The reducing API that removes a callback from the `events` object.
+ var offApi = function(events, name, callback, options) {
+ // No events to consider.
+ if (!events) return;
- function resolve(self, newValue) {
- try {
- // Promise Resolution Procedure: https://github.com/promises-aplus/promises-spec#the-promise-resolution-procedure
- if (newValue === self) throw new TypeError('A promise cannot be resolved with itself.');
- if (newValue && (typeof newValue === 'object' || typeof newValue === 'function')) {
- var then = newValue.then;
- if (newValue instanceof Promise) {
- self._state = 3;
- self._value = newValue;
- finale(self);
- return;
- } else if (typeof then === 'function') {
- doResolve(bind(then, newValue), self);
- return;
- }
+ var i = 0, listening;
+ var context = options.context, listeners = options.listeners;
+
+ // Delete all events listeners and "drop" events.
+ if (!name && !callback && !context) {
+ var ids = _.keys(listeners);
+ for (; i < ids.length; i++) {
+ listening = listeners[ids[i]];
+ delete listeners[listening.id];
+ delete listening.listeningTo[listening.objId];
}
- self._state = 1;
- self._value = newValue;
- finale(self);
- } catch (e) {
- reject(self, e);
+ return;
}
- }
-
- function reject(self, newValue) {
- self._state = 2;
- self._value = newValue;
- finale(self);
- }
- function finale(self) {
- if (self._state === 2 && self._deferreds.length === 0) {
- Promise._immediateFn(function() {
- if (!self._handled) {
- Promise._unhandledRejectionFn(self._value);
- }
- });
- }
+ var names = name ? [name] : _.keys(events);
+ for (; i < names.length; i++) {
+ name = names[i];
+ var handlers = events[name];
- for (var i = 0, len = self._deferreds.length; i < len; i++) {
- handle(self, self._deferreds[i]);
- }
- self._deferreds = null;
- }
+ // Bail out if there are no events stored.
+ if (!handlers) break;
- function Handler(onFulfilled, onRejected, promise) {
- this.onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : null;
- this.onRejected = typeof onRejected === 'function' ? onRejected : null;
- this.promise = promise;
- }
+ // Replace events if there are any remaining. Otherwise, clean up.
+ var remaining = [];
+ for (var j = 0; j < handlers.length; j++) {
+ var handler = handlers[j];
+ if (
+ callback && callback !== handler.callback &&
+ callback !== handler.callback._callback ||
+ context && context !== handler.context
+ ) {
+ remaining.push(handler);
+ } else {
+ listening = handler.listening;
+ if (listening && --listening.count === 0) {
+ delete listeners[listening.id];
+ delete listening.listeningTo[listening.objId];
+ }
+ }
+ }
- /**
- * Take a potentially misbehaving resolver function and make sure
- * onFulfilled and onRejected are only called once.
- *
- * Makes no guarantees about asynchrony.
- */
- function doResolve(fn, self) {
- var done = false;
- try {
- fn(function (value) {
- if (done) return;
- done = true;
- resolve(self, value);
- }, function (reason) {
- if (done) return;
- done = true;
- reject(self, reason);
- });
- } catch (ex) {
- if (done) return;
- done = true;
- reject(self, ex);
+ // Update tail event if the list has any events. Otherwise, clean up.
+ if (remaining.length) {
+ events[name] = remaining;
+ } else {
+ delete events[name];
+ }
}
- }
-
- Promise.prototype['catch'] = function (onRejected) {
- return this.then(null, onRejected);
+ if (_.size(events)) return events;
};
- Promise.prototype.then = function (onFulfilled, onRejected) {
- var prom = new (this.constructor)(noop);
+ // Bind an event to only be triggered a single time. After the first time
+ // the callback is invoked, it will be removed. When multiple events are
+ // passed in using the space-separated syntax, the event will fire once for every
+ // event you passed in, not once for a combination of all events
+ Events.once = function(name, callback, context) {
+ // Map the event into a `{event: once}` object.
+ var events = eventsApi(onceMap, {}, name, callback, _.bind(this.off, this));
+ return this.on(events, void 0, context);
+ };
- handle(this, new Handler(onFulfilled, onRejected, prom));
- return prom;
+ // Inversion-of-control versions of `once`.
+ Events.listenToOnce = function(obj, name, callback) {
+ // Map the event into a `{event: once}` object.
+ var events = eventsApi(onceMap, {}, name, callback, _.bind(this.stopListening, this, obj));
+ return this.listenTo(obj, events);
};
- Promise.all = function (arr) {
- var args = Array.prototype.slice.call(arr);
+ // Reduces the event callbacks into a map of `{event: onceWrapper}`.
+ // `offer` unbinds the `onceWrapper` after it has been called.
+ var onceMap = function(map, name, callback, offer) {
+ if (callback) {
+ var once = map[name] = _.once(function() {
+ offer(name, once);
+ callback.apply(this, arguments);
+ });
+ once._callback = callback;
+ }
+ return map;
+ };
- return new Promise(function (resolve, reject) {
- if (args.length === 0) return resolve([]);
- var remaining = args.length;
+ // Trigger one or many events, firing all bound callbacks. Callbacks are
+ // passed the same arguments as `trigger` is, apart from the event name
+ // (unless you're listening on `"all"`, which will cause your callback to
+ // receive the true name of the event as the first argument).
+ Events.trigger = function(name) {
+ if (!this._events) return this;
- function res(i, val) {
- try {
- if (val && (typeof val === 'object' || typeof val === 'function')) {
- var then = val.then;
- if (typeof then === 'function') {
- then.call(val, function (val) {
- res(i, val);
- }, reject);
- return;
- }
- }
- args[i] = val;
- if (--remaining === 0) {
- resolve(args);
- }
- } catch (ex) {
- reject(ex);
- }
- }
+ var length = Math.max(0, arguments.length - 1);
+ var args = Array(length);
+ for (var i = 0; i < length; i++) args[i] = arguments[i + 1];
- for (var i = 0; i < args.length; i++) {
- res(i, args[i]);
- }
- });
+ eventsApi(triggerApi, this._events, name, void 0, args);
+ return this;
};
- Promise.resolve = function (value) {
- if (value && typeof value === 'object' && value.constructor === Promise) {
- return value;
+ // Handles triggering the appropriate event callbacks.
+ var triggerApi = function(objEvents, name, cb, args) {
+ if (objEvents) {
+ var events = objEvents[name];
+ var allEvents = objEvents.all;
+ if (events && allEvents) allEvents = allEvents.slice();
+ if (events) triggerEvents(events, args);
+ if (allEvents) triggerEvents(allEvents, [name].concat(args));
}
-
- return new Promise(function (resolve) {
- resolve(value);
- });
+ return objEvents;
};
- Promise.reject = function (value) {
- return new Promise(function (resolve, reject) {
- reject(value);
- });
+ // A difficult-to-believe, but optimized internal dispatch function for
+ // triggering events. Tries to keep the usual cases speedy (most internal
+ // Backbone events have 3 arguments).
+ var triggerEvents = function(events, args) {
+ var ev, i = -1, l = events.length, a1 = args[0], a2 = args[1], a3 = args[2];
+ switch (args.length) {
+ case 0: while (++i < l) (ev = events[i]).callback.call(ev.ctx); return;
+ case 1: while (++i < l) (ev = events[i]).callback.call(ev.ctx, a1); return;
+ case 2: while (++i < l) (ev = events[i]).callback.call(ev.ctx, a1, a2); return;
+ case 3: while (++i < l) (ev = events[i]).callback.call(ev.ctx, a1, a2, a3); return;
+ default: while (++i < l) (ev = events[i]).callback.apply(ev.ctx, args); return;
+ }
};
- Promise.race = function (values) {
- return new Promise(function (resolve, reject) {
- for (var i = 0, len = values.length; i < len; i++) {
- values[i].then(resolve, reject);
- }
- });
- };
+ // Aliases for backwards compatibility.
+ Events.bind = Events.on;
+ Events.unbind = Events.off;
- // Use polyfill for setImmediate for performance gains
- Promise._immediateFn = (typeof setImmediate === 'function' && function (fn) { setImmediate(fn); }) ||
- function (fn) {
- setTimeoutFunc(fn, 0);
- };
+ // Allow the `Backbone` object to serve as a global event bus, for folks who
+ // want global "pubsub" in a convenient place.
+ _.extend(Backbone, Events);
- Promise._unhandledRejectionFn = function _unhandledRejectionFn(err) {
- if (typeof console !== 'undefined' && console) {
- console.warn('Possible Unhandled Promise Rejection:', err); // eslint-disable-line no-console
- }
- };
+ // Backbone.Model
+ // --------------
- /**
- * Set the immediate function to execute callbacks
- * @param fn {function} Function to execute
- * @deprecated
- */
- Promise._setImmediateFn = function _setImmediateFn(fn) {
- Promise._immediateFn = fn;
- };
+ // Backbone **Models** are the basic data object in the framework --
+ // frequently representing a row in a table in a database on your server.
+ // A discrete chunk of data and a bunch of useful, related methods for
+ // performing computations and transformations on that data.
- /**
- * Change the function to execute on unhandled rejection
- * @param {function} fn Function to execute on unhandled rejection
- * @deprecated
- */
- Promise._setUnhandledRejectionFn = function _setUnhandledRejectionFn(fn) {
- Promise._unhandledRejectionFn = fn;
+ // Create a new model with the specified attributes. A client id (`cid`)
+ // is automatically generated and assigned for you.
+ var Model = Backbone.Model = function(attributes, options) {
+ var attrs = attributes || {};
+ options || (options = {});
+ this.cid = _.uniqueId(this.cidPrefix);
+ this.attributes = {};
+ if (options.collection) this.collection = options.collection;
+ if (options.parse) attrs = this.parse(attrs, options) || {};
+ attrs = _.defaults({}, attrs, _.result(this, 'defaults'));
+ this.set(attrs, options);
+ this.changed = {};
+ this.initialize.apply(this, arguments);
};
-
- if (typeof module !== 'undefined' && module.exports) {
- module.exports = Promise;
- } else if (!root.Promise) {
- root.Promise = Promise;
- }
-})(this);
+ // Attach all inheritable methods to the Model prototype.
+ _.extend(Model.prototype, Events, {
-/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(73).setImmediate))
+ // A hash of attributes whose current and previous value differ.
+ changed: null,
-/***/ }),
-/* 73 */
-/***/ (function(module, exports, __webpack_require__) {
+ // The value returned during the last failed validation.
+ validationError: null,
-var apply = Function.prototype.apply;
+ // The default name for the JSON `id` attribute is `"id"`. MongoDB and
+ // CouchDB users may want to set this to `"_id"`.
+ idAttribute: 'id',
-// DOM APIs, for completeness
+ // The prefix is used to create the client id which is used to identify models locally.
+ // You may want to override this if you're experiencing name clashes with model ids.
+ cidPrefix: 'c',
-exports.setTimeout = function() {
- return new Timeout(apply.call(setTimeout, window, arguments), clearTimeout);
-};
-exports.setInterval = function() {
- return new Timeout(apply.call(setInterval, window, arguments), clearInterval);
-};
-exports.clearTimeout =
-exports.clearInterval = function(timeout) {
- if (timeout) {
- timeout.close();
- }
-};
+ // Initialize is an empty function by default. Override it with your own
+ // initialization logic.
+ initialize: function(){},
-function Timeout(id, clearFn) {
- this._id = id;
- this._clearFn = clearFn;
-}
-Timeout.prototype.unref = Timeout.prototype.ref = function() {};
-Timeout.prototype.close = function() {
- this._clearFn.call(window, this._id);
-};
+ // Return a copy of the model's `attributes` object.
+ toJSON: function(options) {
+ return _.clone(this.attributes);
+ },
-// Does not start the time, just sets up the members needed.
-exports.enroll = function(item, msecs) {
- clearTimeout(item._idleTimeoutId);
- item._idleTimeout = msecs;
-};
+ // Proxy `Backbone.sync` by default -- but override this if you need
+ // custom syncing semantics for *this* particular model.
+ sync: function() {
+ return Backbone.sync.apply(this, arguments);
+ },
-exports.unenroll = function(item) {
- clearTimeout(item._idleTimeoutId);
- item._idleTimeout = -1;
-};
+ // Get the value of an attribute.
+ get: function(attr) {
+ return this.attributes[attr];
+ },
-exports._unrefActive = exports.active = function(item) {
- clearTimeout(item._idleTimeoutId);
+ // Get the HTML-escaped value of an attribute.
+ escape: function(attr) {
+ return _.escape(this.get(attr));
+ },
- var msecs = item._idleTimeout;
- if (msecs >= 0) {
- item._idleTimeoutId = setTimeout(function onTimeout() {
- if (item._onTimeout)
- item._onTimeout();
- }, msecs);
- }
-};
+ // Returns `true` if the attribute contains a value that is not null
+ // or undefined.
+ has: function(attr) {
+ return this.get(attr) != null;
+ },
-// setimmediate attaches itself to the global object
-__webpack_require__(74);
-exports.setImmediate = setImmediate;
-exports.clearImmediate = clearImmediate;
+ // Special-cased proxy to underscore's `_.matches` method.
+ matches: function(attrs) {
+ return !!_.iteratee(attrs, this)(this.attributes);
+ },
+ // Set a hash of model attributes on the object, firing `"change"`. This is
+ // the core primitive operation of a model, updating the data and notifying
+ // anyone who needs to know about the change in state. The heart of the beast.
+ set: function(key, val, options) {
+ if (key == null) return this;
-/***/ }),
-/* 74 */
-/***/ (function(module, exports, __webpack_require__) {
+ // Handle both `"key", value` and `{key: value}` -style arguments.
+ var attrs;
+ if (typeof key === 'object') {
+ attrs = key;
+ options = val;
+ } else {
+ (attrs = {})[key] = val;
+ }
-/* WEBPACK VAR INJECTION */(function(global, process) {(function (global, undefined) {
- "use strict";
+ options || (options = {});
- if (global.setImmediate) {
- return;
- }
+ // Run validation.
+ if (!this._validate(attrs, options)) return false;
- var nextHandle = 1; // Spec says greater than zero
- var tasksByHandle = {};
- var currentlyRunningATask = false;
- var doc = global.document;
- var registerImmediate;
+ // Extract attributes and options.
+ var unset = options.unset;
+ var silent = options.silent;
+ var changes = [];
+ var changing = this._changing;
+ this._changing = true;
- function setImmediate(callback) {
- // Callback can either be a function or a string
- if (typeof callback !== "function") {
- callback = new Function("" + callback);
- }
- // Copy function arguments
- var args = new Array(arguments.length - 1);
- for (var i = 0; i < args.length; i++) {
- args[i] = arguments[i + 1];
+ if (!changing) {
+ this._previousAttributes = _.clone(this.attributes);
+ this.changed = {};
}
- // Store and register the task
- var task = { callback: callback, args: args };
- tasksByHandle[nextHandle] = task;
- registerImmediate(nextHandle);
- return nextHandle++;
- }
- function clearImmediate(handle) {
- delete tasksByHandle[handle];
- }
+ var current = this.attributes;
+ var changed = this.changed;
+ var prev = this._previousAttributes;
- function run(task) {
- var callback = task.callback;
- var args = task.args;
- switch (args.length) {
- case 0:
- callback();
- break;
- case 1:
- callback(args[0]);
- break;
- case 2:
- callback(args[0], args[1]);
- break;
- case 3:
- callback(args[0], args[1], args[2]);
- break;
- default:
- callback.apply(undefined, args);
- break;
- }
- }
+ // Check for changes of `id`.
+ if (this.idAttribute in attrs) this.id = attrs[this.idAttribute];
- function runIfPresent(handle) {
- // From the spec: "Wait until any invocations of this algorithm started before this one have completed."
- // So if we're currently running a task, we'll need to delay this invocation.
- if (currentlyRunningATask) {
- // Delay by doing a setTimeout. setImmediate was tried instead, but in Firefox 7 it generated a
- // "too much recursion" error.
- setTimeout(runIfPresent, 0, handle);
+ // For each `set` attribute, update or delete the current value.
+ for (var attr in attrs) {
+ val = attrs[attr];
+ if (!_.isEqual(current[attr], val)) changes.push(attr);
+ if (!_.isEqual(prev[attr], val)) {
+ changed[attr] = val;
} else {
- var task = tasksByHandle[handle];
- if (task) {
- currentlyRunningATask = true;
- try {
- run(task);
- } finally {
- clearImmediate(handle);
- currentlyRunningATask = false;
- }
- }
+ delete changed[attr];
}
- }
+ unset ? delete current[attr] : current[attr] = val;
+ }
- function installNextTickImplementation() {
- registerImmediate = function(handle) {
- process.nextTick(function () { runIfPresent(handle); });
- };
- }
+ // Trigger all relevant attribute changes.
+ if (!silent) {
+ if (changes.length) this._pending = options;
+ for (var i = 0; i < changes.length; i++) {
+ this.trigger('change:' + changes[i], this, current[changes[i]], options);
+ }
+ }
- function canUsePostMessage() {
- // The test against `importScripts` prevents this implementation from being installed inside a web worker,
- // where `global.postMessage` means something completely different and can't be used for this purpose.
- if (global.postMessage && !global.importScripts) {
- var postMessageIsAsynchronous = true;
- var oldOnMessage = global.onmessage;
- global.onmessage = function() {
- postMessageIsAsynchronous = false;
- };
- global.postMessage("", "*");
- global.onmessage = oldOnMessage;
- return postMessageIsAsynchronous;
+ // You might be wondering why there's a `while` loop here. Changes can
+ // be recursively nested within `"change"` events.
+ if (changing) return this;
+ if (!silent) {
+ while (this._pending) {
+ options = this._pending;
+ this._pending = false;
+ this.trigger('change', this, options);
}
- }
-
- function installPostMessageImplementation() {
- // Installs an event handler on `global` for the `message` event: see
- // * https://developer.mozilla.org/en/DOM/window.postMessage
- // * http://www.whatwg.org/specs/web-apps/current-work/multipage/comms.html#crossDocumentMessages
-
- var messagePrefix = "setImmediate$" + Math.random() + "$";
- var onGlobalMessage = function(event) {
- if (event.source === global &&
- typeof event.data === "string" &&
- event.data.indexOf(messagePrefix) === 0) {
- runIfPresent(+event.data.slice(messagePrefix.length));
- }
- };
+ }
+ this._pending = false;
+ this._changing = false;
+ return this;
+ },
- if (global.addEventListener) {
- global.addEventListener("message", onGlobalMessage, false);
- } else {
- global.attachEvent("onmessage", onGlobalMessage);
- }
+ // Remove an attribute from the model, firing `"change"`. `unset` is a noop
+ // if the attribute doesn't exist.
+ unset: function(attr, options) {
+ return this.set(attr, void 0, _.extend({}, options, {unset: true}));
+ },
- registerImmediate = function(handle) {
- global.postMessage(messagePrefix + handle, "*");
- };
- }
+ // Clear all attributes on the model, firing `"change"`.
+ clear: function(options) {
+ var attrs = {};
+ for (var key in this.attributes) attrs[key] = void 0;
+ return this.set(attrs, _.extend({}, options, {unset: true}));
+ },
- function installMessageChannelImplementation() {
- var channel = new MessageChannel();
- channel.port1.onmessage = function(event) {
- var handle = event.data;
- runIfPresent(handle);
- };
+ // Determine if the model has changed since the last `"change"` event.
+ // If you specify an attribute name, determine if that attribute has changed.
+ hasChanged: function(attr) {
+ if (attr == null) return !_.isEmpty(this.changed);
+ return _.has(this.changed, attr);
+ },
- registerImmediate = function(handle) {
- channel.port2.postMessage(handle);
- };
- }
+ // Return an object containing all the attributes that have changed, or
+ // false if there are no changed attributes. Useful for determining what
+ // parts of a view need to be updated and/or what attributes need to be
+ // persisted to the server. Unset attributes will be set to undefined.
+ // You can also pass an attributes object to diff against the model,
+ // determining if there *would be* a change.
+ changedAttributes: function(diff) {
+ if (!diff) return this.hasChanged() ? _.clone(this.changed) : false;
+ var old = this._changing ? this._previousAttributes : this.attributes;
+ var changed = {};
+ for (var attr in diff) {
+ var val = diff[attr];
+ if (_.isEqual(old[attr], val)) continue;
+ changed[attr] = val;
+ }
+ return _.size(changed) ? changed : false;
+ },
- function installReadyStateChangeImplementation() {
- var html = doc.documentElement;
- registerImmediate = function(handle) {
- // Create a 
