@@ -15,7 +14,7 @@ module.exports = Backbone.View.extend({
`),
events: {
- 'change': 'updateDevice'
+ change: 'updateDevice'
},
initialize(o) {
@@ -40,7 +39,7 @@ module.exports = Backbone.View.extend({
*/
updateDevice() {
var em = this.em;
- if(em){
+ if (em) {
var devEl = this.devicesEl;
var val = devEl ? devEl.val() : '';
em.set('device', val);
@@ -54,7 +53,7 @@ module.exports = Backbone.View.extend({
updateSelect() {
var em = this.em;
var devEl = this.devicesEl;
- if(em && em.getDeviceModel && devEl){
+ if (em && em.getDeviceModel && devEl) {
var device = em.getDeviceModel();
var name = device ? device.get('name') : '';
devEl.val(name);
@@ -70,21 +69,22 @@ module.exports = Backbone.View.extend({
var result = '';
this.collection.each(device => {
var name = device.get('name');
- result += '
';
+ result += '
';
});
return result;
},
render() {
var pfx = this.ppfx;
- this.$el.html(this.template({
- ppfx: pfx,
- deviceLabel: this.config.deviceLabel
- }));
+ this.$el.html(
+ this.template({
+ ppfx: pfx,
+ deviceLabel: this.config.deviceLabel
+ })
+ );
this.devicesEl = this.$el.find('.' + pfx + 'devices');
this.devicesEl.append(this.getOptions());
this.el.className = pfx + 'devices-c';
return this;
- },
-
+ }
});
diff --git a/src/dom_components/config/config.js b/src/dom_components/config/config.js
index 5098e51d2f..7b92d98b17 100644
--- a/src/dom_components/config/config.js
+++ b/src/dom_components/config/config.js
@@ -12,9 +12,15 @@ module.exports = {
draggable: false,
components: [],
traits: [],
- stylable: ['background','background-color','background-image',
- 'background-repeat','background-attachment','background-position',
- 'background-size'],
+ stylable: [
+ 'background',
+ 'background-color',
+ 'background-image',
+ 'background-repeat',
+ 'background-attachment',
+ 'background-position',
+ 'background-size'
+ ]
},
// Could be used for default components
@@ -32,7 +38,22 @@ module.exports = {
storeWrapper: 0,
// List of void elements
- voidElements: ['area', 'base', 'br', 'col', 'embed', 'hr', 'img',
- 'input', 'keygen', 'link', 'menuitem', 'meta', 'param', 'source',
- 'track', 'wbr'],
+ voidElements: [
+ 'area',
+ 'base',
+ 'br',
+ 'col',
+ 'embed',
+ 'hr',
+ 'img',
+ 'input',
+ 'keygen',
+ 'link',
+ 'menuitem',
+ 'meta',
+ 'param',
+ 'source',
+ 'track',
+ 'wbr'
+ ]
};
diff --git a/src/dom_components/index.js b/src/dom_components/index.js
index eddbe820a9..d8e5a56681 100644
--- a/src/dom_components/index.js
+++ b/src/dom_components/index.js
@@ -46,82 +46,81 @@ module.exports = () => {
{
id: 'cell',
model: require('./model/ComponentTableCell'),
- view: require('./view/ComponentTableCellView'),
+ view: require('./view/ComponentTableCellView')
},
{
id: 'row',
model: require('./model/ComponentTableRow'),
- view: require('./view/ComponentTableRowView'),
+ view: require('./view/ComponentTableRowView')
},
{
id: 'table',
model: require('./model/ComponentTable'),
- view: require('./view/ComponentTableView'),
+ view: require('./view/ComponentTableView')
},
{
id: 'thead',
model: require('./model/ComponentTableHead'),
- view: require('./view/ComponentTableHeadView'),
+ view: require('./view/ComponentTableHeadView')
},
{
id: 'tbody',
model: require('./model/ComponentTableBody'),
- view: require('./view/ComponentTableBodyView'),
+ view: require('./view/ComponentTableBodyView')
},
{
id: 'tfoot',
model: require('./model/ComponentTableFoot'),
- view: require('./view/ComponentTableFootView'),
+ view: require('./view/ComponentTableFootView')
},
{
id: 'map',
model: require('./model/ComponentMap'),
- view: require('./view/ComponentMapView'),
+ view: require('./view/ComponentMapView')
},
{
id: 'link',
model: require('./model/ComponentLink'),
- view: require('./view/ComponentLinkView'),
+ view: require('./view/ComponentLinkView')
},
{
id: 'video',
model: require('./model/ComponentVideo'),
- view: require('./view/ComponentVideoView'),
+ view: require('./view/ComponentVideoView')
},
{
id: 'image',
model: require('./model/ComponentImage'),
- view: require('./view/ComponentImageView'),
+ view: require('./view/ComponentImageView')
},
{
id: 'script',
model: require('./model/ComponentScript'),
- view: require('./view/ComponentScriptView'),
+ view: require('./view/ComponentScriptView')
},
{
id: 'svg',
model: require('./model/ComponentSvg'),
- view: require('./view/ComponentSvgView'),
+ view: require('./view/ComponentSvgView')
},
{
id: 'textnode',
model: require('./model/ComponentTextNode'),
- view: require('./view/ComponentTextNodeView'),
+ view: require('./view/ComponentTextNodeView')
},
{
id: 'text',
model: require('./model/ComponentText'),
- view: require('./view/ComponentTextView'),
+ view: require('./view/ComponentTextView')
},
{
id: 'default',
model: Component,
- view: ComponentView,
- },
+ view: ComponentView
+ }
];
return {
-
Component,
Components,
@@ -143,7 +142,7 @@ module.exports = () => {
* @private
*/
getConfig() {
- return c;
+ return c;
},
/**
@@ -154,10 +153,8 @@ module.exports = () => {
storageKey() {
var keys = [];
var smc = (c.stm && c.stm.getConfig()) || {};
- if(smc.storeHtml)
- keys.push('html');
- if(smc.storeComponents)
- keys.push('components');
+ if (smc.storeHtml) keys.push('html');
+ if (smc.storeComponents) keys.push('components');
return keys;
},
@@ -176,13 +173,11 @@ module.exports = () => {
}
for (var name in defaults) {
- if (!(name in c))
- c[name] = defaults[name];
+ if (!(name in c)) c[name] = defaults[name];
}
var ppfx = c.pStylePrefix;
- if(ppfx)
- c.stylePrefix = ppfx + c.stylePrefix;
+ if (ppfx) c.stylePrefix = ppfx + c.stylePrefix;
// Load dependencies
if (em) {
@@ -199,7 +194,11 @@ module.exports = () => {
wrapper.wrapper = 1;
// Components might be a wrapper
- if (components && components.constructor === Object && components.wrapper) {
+ if (
+ components &&
+ components.constructor === Object &&
+ components.wrapper
+ ) {
wrapper = { ...components };
components = components.components || [];
wrapper.components = [];
@@ -214,14 +213,14 @@ module.exports = () => {
component = new Component(wrapper, {
sm: em,
config: c,
- componentTypes,
+ componentTypes
});
- component.set({ attributes: {id: 'wrapper'}});
+ component.set({ attributes: { id: 'wrapper' } });
componentView = new ComponentView({
model: component,
config: c,
- componentTypes,
+ componentTypes
});
return this;
},
@@ -243,7 +242,6 @@ module.exports = () => {
this.handleChanges(this.getWrapper(), null, { avoidStore: 1 });
},
-
/**
* Handle component changes
* @private
@@ -258,10 +256,11 @@ module.exports = () => {
um && comps && um.add(comps);
const evn = 'change:style change:content change:attributes change:src';
- [ [model, evn, handleUpdates],
+ [
+ [model, evn, handleUpdates],
[comps, 'add', handleChanges],
[comps, 'remove', handleRemoves],
- [model.get('classes'), 'add remove', handleUpdates],
+ [model.get('classes'), 'add remove', handleUpdates]
].forEach(els => {
em.stopListening(els[0], els[1], els[2]);
em.listenTo(els[0], els[1], els[2]);
@@ -271,7 +270,6 @@ module.exports = () => {
comps.each(model => this.handleChanges(model, value, opts));
},
-
/**
* Triggered when some component is removed
* @private
@@ -280,7 +278,6 @@ module.exports = () => {
!opts.avoidStore && em.handleUpdates(model, value, opts);
},
-
/**
* Load components from the passed object, if the object is empty will try to fetch them
* autonomously from the selected storage
@@ -311,8 +308,11 @@ module.exports = () => {
// If the result is an object I consider it the wrapper
if (isObj) {
- this.getWrapper().set(result)
- .initComponents().initClasses().loadTraits();
+ this.getWrapper()
+ .set(result)
+ .initComponents()
+ .initClasses()
+ .loadTraits();
} else {
this.getComponents().add(result);
}
@@ -327,7 +327,7 @@ module.exports = () => {
* @return {Object} Data to store
*/
store(noStore) {
- if(!c.stm) {
+ if (!c.stm) {
return;
}
@@ -339,8 +339,9 @@ module.exports = () => {
}
if (keys.indexOf('components') >= 0) {
- const toStore = c.storeWrapper ?
- this.getWrapper() : this.getComponents();
+ const toStore = c.storeWrapper
+ ? this.getWrapper()
+ : this.getComponents();
obj.components = JSON.stringify(toStore);
}
@@ -454,8 +455,7 @@ module.exports = () => {
*/
clear() {
var c = this.getComponents();
- for(var i = 0, len = c.length; i < len; i++)
- c.pop();
+ for (var i = 0, len = c.length; i < len; i++) c.pop();
return this;
},
@@ -477,7 +477,7 @@ module.exports = () => {
*/
addType(type, methods) {
var compType = this.getType(type);
- if(compType) {
+ if (compType) {
compType.model = methods.model;
compType.view = methods.view;
} else {
@@ -496,7 +496,7 @@ module.exports = () => {
for (var it = 0; it < df.length; it++) {
var dfId = df[it].id;
- if(dfId == type) {
+ if (dfId == type) {
return df[it];
}
}
@@ -516,12 +516,11 @@ module.exports = () => {
if (previousModel) {
previousModel.set({
status: '',
- state: '',
+ state: ''
});
}
- model && model.set('status','selected');
+ model && model.set('status', 'selected');
}
-
};
};
diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js
index cd9b1b1c13..3486c9965c 100644
--- a/src/dom_components/model/Component.js
+++ b/src/dom_components/model/Component.js
@@ -1,4 +1,12 @@
-import { isUndefined, isArray, isEmpty, has, clone, isString, keys } from 'underscore';
+import {
+ isUndefined,
+ isArray,
+ isEmpty,
+ has,
+ clone,
+ isString,
+ keys
+} from 'underscore';
import { shallowDiff } from 'utils/mixins';
import Styleable from 'domain_abstract/model/Styleable';
@@ -10,774 +18,745 @@ const Traits = require('trait_manager/model/Traits');
const componentList = {};
let componentIndex = 0;
-const escapeRegExp = (str) => {
+const escapeRegExp = str => {
return str.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');
-}
+};
-const Component = Backbone.Model.extend(Styleable).extend({
+const Component = Backbone.Model.extend(Styleable).extend(
+ {
+ defaults: {
+ // HTML tag of the component
+ tagName: 'div',
- defaults: {
- // HTML tag of the component
- tagName: 'div',
+ // Component type, eg. 'text', 'image', 'video', etc.
+ type: '',
- // Component type, eg. 'text', 'image', 'video', etc.
- type: '',
+ // Name of the component. Will be used, for example, in layers and badges
+ name: '',
- // Name of the component. Will be used, for example, in layers and badges
- name: '',
+ // True if the component is removable from the canvas
+ removable: true,
- // True if the component is removable from the canvas
- removable: true,
+ // Indicates if it's possible to drag the component inside others
+ // Tip: Indicate an array of selectors where it could be dropped inside
+ draggable: true,
- // Indicates if it's possible to drag the component inside others
- // Tip: Indicate an array of selectors where it could be dropped inside
- draggable: true,
+ // Indicates if it's possible to drop other components inside
+ // Tip: Indicate an array of selectors which could be dropped inside
+ droppable: true,
- // Indicates if it's possible to drop other components inside
- // Tip: Indicate an array of selectors which could be dropped inside
- droppable: true,
+ // Set false if don't want to see the badge (with the name) over the component
+ badgable: true,
- // Set false if don't want to see the badge (with the name) over the component
- badgable: true,
-
- // True if it's possible to style it
- // Tip:
- // Indicate an array of CSS properties which is possible to style, eg. ['color', 'width']
- // All other properties will be hidden from the style manager
- stylable: true,
-
- // Indicate an array of style properties to show up which has been marked as `toRequire`
- 'stylable-require': '',
-
- // Indicate an array of style properties which should be hidden from the style manager
- unstylable: '',
-
- // Highlightable with 'dotted' style if true
- highlightable: true,
-
- // True if it's possible to clone the component
- copyable: true,
-
- // Indicates if it's possible to resize the component (at the moment implemented only on Image Components)
- // It's also possible to pass an object as options for the Resizer
- resizable: false,
-
- // Allow to edit the content of the component (used on Text components)
- editable: false,
-
- // Hide the component inside Layers
- layerable: true,
-
- // Allow component to be selected when clicked
- selectable: true,
-
- // Shows a highlight outline when hovering on the element if true
- hoverable: true,
-
- // This property is used by the HTML exporter as void elements do not
- // have closing tag, eg.
,
, etc.
- void: false,
-
- // Indicates if the component is in some CSS state like ':hover', ':active', etc.
- state: '',
-
- // State, eg. 'selected'
- status: '',
-
- // Content of the component (not escaped) which will be appended before children rendering
- content: '',
-
- // Component icon, this string will be inserted before the name, eg. '
'
- icon: '',
-
- // Component related style
- style: '',
-
- // Key-value object of the component's attributes
- attributes: '',
-
- // Array of classes
- classes: '',
-
- // Component's javascript
- script: '',
-
- // Traits
- traits: ['id', 'title'],
-
- // Indicates an array of properties which will be inhereted by
- // all NEW appended children
- //
- // If you create a model likes this
- // removable: false,
- // draggable: false,
- // propagate: ['removable', 'draggable']
- // When you append some new component inside, the new added model
- // will get the exact same properties indicated in `propagate` array
- // (as the `propagate` property itself)
- //
- propagate: '',
-
- /**
- * Set an array of items to show up inside the toolbar (eg. move, clone, delete)
- * when the component is selected
- * toolbar: [{
- * attributes: {class: 'fa fa-arrows'},
- * command: 'tlb-move',
- * },{
- * attributes: {class: 'fa fa-clone'},
- * command: 'tlb-clone',
- * }]
- */
- toolbar: null,
- },
-
-
- initialize(props = {}, opt = {}) {
- const em = opt.sm || opt.em || '';
-
- // Propagate properties from parent if indicated
- const parent = this.parent();
- const parentAttr = parent && parent.attributes;
-
- if (parentAttr && parentAttr.propagate) {
- let newAttr = {};
- const toPropagate = parentAttr.propagate;
- toPropagate.forEach(prop => newAttr[prop] = parent.get(prop));
- newAttr.propagate = toPropagate;
- newAttr = {...newAttr, ...props};
- this.set(newAttr);
- }
-
- const propagate = this.get('propagate');
- propagate && this.set('propagate', isArray(propagate) ? propagate : [propagate]);
+ // True if it's possible to style it
+ // Tip:
+ // Indicate an array of CSS properties which is possible to style, eg. ['color', 'width']
+ // All other properties will be hidden from the style manager
+ stylable: true,
+
+ // Indicate an array of style properties to show up which has been marked as `toRequire`
+ 'stylable-require': '',
+
+ // Indicate an array of style properties which should be hidden from the style manager
+ unstylable: '',
+
+ // Highlightable with 'dotted' style if true
+ highlightable: true,
+
+ // True if it's possible to clone the component
+ copyable: true,
+
+ // Indicates if it's possible to resize the component (at the moment implemented only on Image Components)
+ // It's also possible to pass an object as options for the Resizer
+ resizable: false,
+
+ // Allow to edit the content of the component (used on Text components)
+ editable: false,
+
+ // Hide the component inside Layers
+ layerable: true,
+
+ // Allow component to be selected when clicked
+ selectable: true,
+
+ // Shows a highlight outline when hovering on the element if true
+ hoverable: true,
+
+ // This property is used by the HTML exporter as void elements do not
+ // have closing tag, eg.
,
, etc.
+ void: false,
+
+ // Indicates if the component is in some CSS state like ':hover', ':active', etc.
+ state: '',
+
+ // State, eg. 'selected'
+ status: '',
+
+ // Content of the component (not escaped) which will be appended before children rendering
+ content: '',
+
+ // Component icon, this string will be inserted before the name, eg. '
'
+ icon: '',
+
+ // Component related style
+ style: '',
+
+ // Key-value object of the component's attributes
+ attributes: '',
+
+ // Array of classes
+ classes: '',
+
+ // Component's javascript
+ script: '',
+
+ // Traits
+ traits: ['id', 'title'],
+
+ // Indicates an array of properties which will be inhereted by
+ // all NEW appended children
+ //
+ // If you create a model likes this
+ // removable: false,
+ // draggable: false,
+ // propagate: ['removable', 'draggable']
+ // When you append some new component inside, the new added model
+ // will get the exact same properties indicated in `propagate` array
+ // (as the `propagate` property itself)
+ //
+ propagate: '',
+
+ /**
+ * Set an array of items to show up inside the toolbar (eg. move, clone, delete)
+ * when the component is selected
+ * toolbar: [{
+ * attributes: {class: 'fa fa-arrows'},
+ * command: 'tlb-move',
+ * },{
+ * attributes: {class: 'fa fa-clone'},
+ * command: 'tlb-clone',
+ * }]
+ */
+ toolbar: null
+ },
+
+ initialize(props = {}, opt = {}) {
+ const em = opt.sm || opt.em || '';
+
+ // Propagate properties from parent if indicated
+ const parent = this.parent();
+ const parentAttr = parent && parent.attributes;
+
+ if (parentAttr && parentAttr.propagate) {
+ let newAttr = {};
+ const toPropagate = parentAttr.propagate;
+ toPropagate.forEach(prop => (newAttr[prop] = parent.get(prop)));
+ newAttr.propagate = toPropagate;
+ newAttr = { ...newAttr, ...props };
+ this.set(newAttr);
+ }
+ const propagate = this.get('propagate');
+ propagate &&
+ this.set('propagate', isArray(propagate) ? propagate : [propagate]);
- // Check void elements
- if(opt && opt.config &&
- opt.config.voidElements.indexOf(this.get('tagName')) >= 0) {
+ // Check void elements
+ if (
+ opt &&
+ opt.config &&
+ opt.config.voidElements.indexOf(this.get('tagName')) >= 0
+ ) {
this.set('void', true);
- }
-
- opt.em = em;
- this.opt = opt;
- this.sm = em;
- this.em = em;
- this.config = opt.config || {};
- this.ccid = Component.createId(this);
- 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.initClasses();
- this.loadTraits();
- this.initComponents();
- this.initToolbar();
- this.set('status', '');
- this.listenTo(this.get('classes'), 'add remove change',
- () => this.emitUpdate('classes'));
- this.init();
- },
-
- /**
- * Check component's type
- * @param {string} type Component type
- * @return {Boolean}
- * @example
- * model.is('image')
- * // -> false
- */
- 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(query) {
- const result = [];
-
- this.view.$el.find(query).each((el, i, $els) => {
- const $el = $els.eq(i);
- const 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() {
- const coll = this.collection;
- const at = coll.indexOf(this);
- coll.remove(this);
- coll.add(this, { at });
- },
-
-
- /**
- * Emit changes for each updated attribute
- */
- attrUpdated() {
- const attrPrev = { ...this.previous('attributes') };
- const attrCurrent = { ...this.get('attributes') };
- const diff = shallowDiff(attrPrev, attrCurrent);
- keys(diff).forEach(pr => this.trigger(`change:attributes:${pr}`));
- },
-
-
- /**
- * Update attributes of the model
- * @param {Object} attrs Key value attributes
- * @example
- * model.setAttributes({id: 'test', 'data-key': 'value'});
- */
- setAttributes(attrs) {
- attrs = { ...attrs };
-
- // Handle classes
- const classes = attrs.class;
- classes && this.setClass(classes);
- delete attrs.class;
-
- // Handle style
- const style = attrs.style;
- style && this.setStyle(style);
- delete attrs.style;
-
- this.set('attributes', attrs);
- },
-
-
- getStyle() {
- const em = this.em;
-
- if (em && em.getConfig('avoidInlineStyle')) {
- const state = this.get('state');
- const cc = em.get('CssComposer');
- const rule = cc.getIdRule(this.getId(), { state });
- this.rule = rule;
-
- if (rule) {
- return rule.getStyle();
}
- }
-
- return Styleable.getStyle.call(this);
- },
-
-
- setStyle(prop = {}, opts = {}) {
- const em = this.em;
-
- if (em && em.getConfig('avoidInlineStyle')) {
- prop = isString(prop) ? this.parseStyle(prop) : prop;
- const state = this.get('state');
- const cc = em.get('CssComposer');
- const propOrig = this.getStyle();
- this.rule = cc.setIdRule(this.getId(), prop, { ...opts, state });
- const diff = shallowDiff(propOrig, prop);
- keys(diff).forEach(pr => this.trigger(`change:style:${pr}`));
- } else {
- prop = Styleable.setStyle.apply(this, arguments);
- }
-
- return prop;
- },
-
-
- /**
- * Return attributes
- * @return {Object}
- */
- getAttributes() {
- const classes = [];
- const attributes = { ...this.get('attributes') };
-
- // Add classes
- this.get('classes').each(cls => classes.push(cls.get('name')));
- classes.length && (attributes.class = classes.join(' '));
-
- // If style is not empty I need an ID attached to the component
- if (!isEmpty(this.getStyle()) && !has(attributes, 'id')) {
- attributes.id = this.getId();
- }
-
- return attributes;
- },
+ opt.em = em;
+ this.opt = opt;
+ this.sm = em;
+ this.em = em;
+ this.config = opt.config || {};
+ this.ccid = Component.createId(this);
+ 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.initClasses();
+ this.loadTraits();
+ this.initComponents();
+ this.initToolbar();
+ this.set('status', '');
+ this.listenTo(this.get('classes'), 'add remove change', () =>
+ this.emitUpdate('classes')
+ );
+ this.init();
+ },
- /**
- * Add classes
- * @param {Array|string} classes Array or string of classes
- * @return {Array} Array of added selectors
- * @example
- * model.addClass('class1');
- * model.addClass('class1 class2');
- * model.addClass(['class1', 'class2']);
- * // -> [SelectorObject, ...]
- */
- addClass(classes) {
- const added = this.em.get('SelectorManager').addClass(classes);
- return this.get('classes').add(added);
- },
+ /**
+ * Check component's type
+ * @param {string} type Component type
+ * @return {Boolean}
+ * @example
+ * model.is('image')
+ * // -> false
+ */
+ 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(query) {
+ const result = [];
+
+ this.view.$el.find(query).each((el, i, $els) => {
+ const $el = $els.eq(i);
+ const model = $el.data('model');
+ model && result.push(model);
+ });
+
+ return result;
+ },
- /**
- * Set classes (resets current collection)
- * @param {Array|string} classes Array or string of classes
- * @return {Array} Array of added selectors
- * @example
- * model.setClass('class1');
- * model.setClass('class1 class2');
- * model.setClass(['class1', 'class2']);
- * // -> [SelectorObject, ...]
- */
- setClass(classes) {
- this.get('classes').reset();
- return this.addClass(classes);
- },
+ /**
+ * Once the tag is updated I have to remove the node and replace it
+ */
+ tagUpdated() {
+ const coll = this.collection;
+ const at = coll.indexOf(this);
+ coll.remove(this);
+ coll.add(this, { at });
+ },
+ /**
+ * Emit changes for each updated attribute
+ */
+ attrUpdated() {
+ const attrPrev = { ...this.previous('attributes') };
+ const attrCurrent = { ...this.get('attributes') };
+ const diff = shallowDiff(attrPrev, attrCurrent);
+ keys(diff).forEach(pr => this.trigger(`change:attributes:${pr}`));
+ },
- /**
- * 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(classes) {
- const removed = [];
- classes = isArray(classes) ? classes : [classes];
- const selectors = this.get('classes');
- const type = Selector.TYPE_CLASS;
-
- classes.forEach(classe => {
- const classes = classe.split(' ');
- classes.forEach(name => {
- const selector = selectors.where({ name, type })[0];
- selector && removed.push(selectors.remove(selector));
- })
- });
-
- return removed;
- },
+ /**
+ * Update attributes of the model
+ * @param {Object} attrs Key value attributes
+ * @example
+ * model.setAttributes({id: 'test', 'data-key': 'value'});
+ */
+ setAttributes(attrs) {
+ attrs = { ...attrs };
+
+ // Handle classes
+ const classes = attrs.class;
+ classes && this.setClass(classes);
+ delete attrs.class;
+
+ // Handle style
+ const style = attrs.style;
+ style && this.setStyle(style);
+ delete attrs.style;
+
+ this.set('attributes', attrs);
+ },
+
+ getStyle() {
+ const em = this.em;
+
+ if (em && em.getConfig('avoidInlineStyle')) {
+ const state = this.get('state');
+ const cc = em.get('CssComposer');
+ const rule = cc.getIdRule(this.getId(), { state });
+ this.rule = rule;
+
+ if (rule) {
+ return rule.getStyle();
+ }
+ }
+ return Styleable.getStyle.call(this);
+ },
+
+ setStyle(prop = {}, opts = {}) {
+ const em = this.em;
+
+ if (em && em.getConfig('avoidInlineStyle')) {
+ prop = isString(prop) ? this.parseStyle(prop) : prop;
+ const state = this.get('state');
+ const cc = em.get('CssComposer');
+ const propOrig = this.getStyle();
+ this.rule = cc.setIdRule(this.getId(), prop, { ...opts, state });
+ const diff = shallowDiff(propOrig, prop);
+ keys(diff).forEach(pr => this.trigger(`change:style:${pr}`));
+ } else {
+ prop = Styleable.setStyle.apply(this, arguments);
+ }
- initClasses() {
- const classes = this.normalizeClasses(this.get('classes') || []);
- this.set('classes', new Selectors(classes));
- return this;
- },
+ return prop;
+ },
+ /**
+ * Return attributes
+ * @return {Object}
+ */
+ getAttributes() {
+ const classes = [];
+ const attributes = { ...this.get('attributes') };
+
+ // Add classes
+ this.get('classes').each(cls => classes.push(cls.get('name')));
+ classes.length && (attributes.class = classes.join(' '));
+
+ // If style is not empty I need an ID attached to the component
+ if (!isEmpty(this.getStyle()) && !has(attributes, 'id')) {
+ attributes.id = this.getId();
+ }
- initComponents() {
- // Have to add components after the init, otherwise the parent
- // is not visible
- const comps = new Components(null, this.opt);
- comps.parent = this;
- comps.reset(this.get('components'));
- this.set('components', comps);
- return this;
- },
+ return attributes;
+ },
+ /**
+ * Add classes
+ * @param {Array|string} classes Array or string of classes
+ * @return {Array} Array of added selectors
+ * @example
+ * model.addClass('class1');
+ * model.addClass('class1 class2');
+ * model.addClass(['class1', 'class2']);
+ * // -> [SelectorObject, ...]
+ */
+ addClass(classes) {
+ const added = this.em.get('SelectorManager').addClass(classes);
+ return this.get('classes').add(added);
+ },
- /**
- * Initialize callback
- */
- init() {},
-
-
- /**
- * Add new component children
- * @param {Component|string} components Component to add
- * @param {Object} [opts={}] Options, same as in `model.add()`(from backbone)
- * @return {Array} Array of appended components
- * @example
- * someModel.get('components').lenght // -> 0
- * const videoComponent = someModel.append('
')[0];
- * // This will add 2 components (`video` and `div`) to your `someModel`
- * someModel.get('components').lenght // -> 2
- * // You can pass components directly
- * otherModel.append(otherModel2);
- * otherModel.append([otherModel3, otherModel4]);
- */
- append(components, opts = {}) {
- const result = this.components().add(components, opts);
- return isArray(result) ? result : [result];
- },
+ /**
+ * Set classes (resets current collection)
+ * @param {Array|string} classes Array or string of classes
+ * @return {Array} Array of added selectors
+ * @example
+ * model.setClass('class1');
+ * model.setClass('class1 class2');
+ * model.setClass(['class1', 'class2']);
+ * // -> [SelectorObject, ...]
+ */
+ setClass(classes) {
+ 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(classes) {
+ const removed = [];
+ classes = isArray(classes) ? classes : [classes];
+ const selectors = this.get('classes');
+ const type = Selector.TYPE_CLASS;
+
+ classes.forEach(classe => {
+ const classes = classe.split(' ');
+ classes.forEach(name => {
+ const selector = selectors.where({ name, type })[0];
+ selector && removed.push(selectors.remove(selector));
+ });
+ });
+
+ return removed;
+ },
+
+ initClasses() {
+ const classes = this.normalizeClasses(this.get('classes') || []);
+ this.set('classes', new Selectors(classes));
+ return this;
+ },
+
+ initComponents() {
+ // Have to add components after the init, otherwise the parent
+ // is not visible
+ const comps = new Components(null, this.opt);
+ comps.parent = this;
+ comps.reset(this.get('components'));
+ this.set('components', comps);
+ return this;
+ },
- /**
- * Set new collection if `components` are provided, otherwise the
- * current collection is returned
- * @param {Component|string} [components] Components to set
- * @return {Collection|undefined}
- * @example
- * // Get current collection
- * const collection = model.components();
- * // Set new collection
- * model.components('
');
- */
- components(components) {
- const coll = this.get('components');
-
- if (isUndefined(components)) {
- return coll;
- } else {
- coll.reset();
- components && this.append(components);
- }
- },
+ /**
+ * Initialize callback
+ */
+ init() {},
+ /**
+ * Add new component children
+ * @param {Component|string} components Component to add
+ * @param {Object} [opts={}] Options, same as in `model.add()`(from backbone)
+ * @return {Array} Array of appended components
+ * @example
+ * someModel.get('components').lenght // -> 0
+ * const videoComponent = someModel.append('
')[0];
+ * // This will add 2 components (`video` and `div`) to your `someModel`
+ * someModel.get('components').lenght // -> 2
+ * // You can pass components directly
+ * otherModel.append(otherModel2);
+ * otherModel.append([otherModel3, otherModel4]);
+ */
+ append(components, opts = {}) {
+ const result = this.components().add(components, opts);
+ return isArray(result) ? result : [result];
+ },
- /**
- * Get parent model
- * @return {Component}
- */
- parent() {
- const coll = this.collection;
- return coll && coll.parent;
- },
+ /**
+ * Set new collection if `components` are provided, otherwise the
+ * current collection is returned
+ * @param {Component|string} [components] Components to set
+ * @return {Collection|undefined}
+ * @example
+ * // Get current collection
+ * const collection = model.components();
+ * // Set new collection
+ * model.components('
');
+ */
+ components(components) {
+ const coll = this.get('components');
+
+ if (isUndefined(components)) {
+ return coll;
+ } else {
+ coll.reset();
+ components && this.append(components);
+ }
+ },
+ /**
+ * Get parent model
+ * @return {Component}
+ */
+ parent() {
+ const coll = this.collection;
+ return coll && coll.parent;
+ },
- /**
- * Script updated
- */
- scriptUpdated() {
- this.set('scriptUpdated', 1);
- },
+ /**
+ * Script updated
+ */
+ scriptUpdated() {
+ this.set('scriptUpdated', 1);
+ },
+ /**
+ * Once traits are updated I have to populates model's attributes
+ */
+ traitsUpdated() {
+ let found = 0;
+ const attrs = { ...this.get('attributes') };
+ const traits = this.get('traits');
+
+ if (!(traits instanceof Traits)) {
+ this.loadTraits();
+ return;
+ }
- /**
- * Once traits are updated I have to populates model's attributes
- */
- traitsUpdated() {
- let found = 0;
- const attrs = { ...this.get('attributes') };
- const traits = this.get('traits');
+ traits.each(trait => {
+ found = 1;
+ if (!trait.get('changeProp')) {
+ const value = trait.getInitValue();
+ if (value) {
+ attrs[trait.get('name')] = value;
+ }
+ }
+ });
- if (!(traits instanceof Traits)) {
- this.loadTraits();
- return;
- }
+ found && this.set('attributes', attrs);
+ },
- traits.each((trait) => {
- found = 1;
- if (!trait.get('changeProp')) {
- const value = trait.getInitValue();
- if (value) {
- attrs[trait.get('name')] = value;
+ /**
+ * Init toolbar
+ */
+ initToolbar() {
+ var model = this;
+ if (!model.get('toolbar')) {
+ var tb = [];
+ if (model.collection) {
+ tb.push({
+ attributes: { class: 'fa fa-arrow-up' },
+ command: 'select-parent'
+ });
+ }
+ if (model.get('draggable')) {
+ tb.push({
+ attributes: { class: 'fa fa-arrows' },
+ command: 'tlb-move'
+ });
+ }
+ if (model.get('copyable')) {
+ tb.push({
+ attributes: { class: 'fa fa-clone' },
+ command: 'tlb-clone'
+ });
}
+ if (model.get('removable')) {
+ tb.push({
+ attributes: { class: 'fa fa-trash-o' },
+ command: 'tlb-delete'
+ });
+ }
+ model.set('toolbar', tb);
}
- });
-
- found && this.set('attributes', attrs);
- },
+ },
-
- /**
- * Init toolbar
- */
- initToolbar() {
- var model = this;
- if(!model.get('toolbar')) {
- var tb = [];
- if(model.collection) {
- tb.push({
- attributes: {class: 'fa fa-arrow-up'},
- command: 'select-parent',
- });
- }
- if(model.get('draggable')) {
- tb.push({
- attributes: {class: 'fa fa-arrows'},
- command: 'tlb-move',
- });
- }
- if(model.get('copyable')) {
- tb.push({
- attributes: {class: 'fa fa-clone'},
- command: 'tlb-clone',
- });
- }
- if(model.get('removable')) {
- tb.push({
- attributes: {class: 'fa fa-trash-o'},
- command: 'tlb-delete',
- });
+ /**
+ * Load traits
+ * @param {Array} traits
+ * @private
+ */
+ loadTraits(traits, opts = {}) {
+ var trt = new Traits([], this.opt);
+ trt.setTarget(this);
+ traits = traits || this.get('traits');
+
+ if (traits.length) {
+ trt.add(traits);
}
- model.set('toolbar', tb);
- }
- },
-
-
- /**
- * Load traits
- * @param {Array} traits
- * @private
- */
- loadTraits(traits, opts = {}) {
- var trt = new Traits([], this.opt);
- trt.setTarget(this);
- traits = traits || this.get('traits');
-
- if (traits.length) {
- trt.add(traits);
- }
-
- this.set('traits', trt, opts);
- return this;
- },
-
-
- /**
- * Normalize input classes from array to array of objects
- * @param {Array} arr
- * @return {Array}
- * @private
- */
- normalizeClasses(arr) {
- var res = [];
- if(!this.sm.get)
- return;
+ this.set('traits', trt, opts);
+ return this;
+ },
- var clm = this.sm.get('SelectorManager');
- if(!clm)
- return;
-
- arr.forEach(val => {
- var name = '';
+ /**
+ * Normalize input classes from array to array of objects
+ * @param {Array} arr
+ * @return {Array}
+ * @private
+ */
+ normalizeClasses(arr) {
+ var res = [];
- if(typeof val === 'string')
- name = val;
- else
- name = val.name;
+ if (!this.sm.get) return;
- var model = clm.add(name);
- res.push(model);
- });
- return res;
- },
+ var clm = this.sm.get('SelectorManager');
+ if (!clm) return;
+ arr.forEach(val => {
+ var name = '';
- /**
- * Override original clone method
- * @private
- */
- clone(reset) {
- const em = this.em;
- const style = this.getStyle();
- const attr = { ...this.attributes };
- attr.attributes = { ...attr.attributes };
- delete attr.attributes.id;
- attr.components = [];
- attr.classes = [];
- attr.traits = [];
-
- this.get('components').each((md, i) => {
- attr.components[i] = md.clone(1);
- });
- this.get('traits').each((md, i) => {
- attr.traits[i] = md.clone();
- });
- this.get('classes').each((md, i) => {
- attr.classes[i] = md.get('name');
- });
-
- attr.status = '';
- attr.view = '';
-
- if(reset){
- this.opt.collection = null;
- }
+ if (typeof val === 'string') name = val;
+ else name = val.name;
- if (em && em.getConfig('avoidInlineStyle') && !isEmpty(style)) {
- attr.style = style;
- }
-
- return new this.constructor(attr, this.opt);
- },
+ var model = clm.add(name);
+ res.push(model);
+ });
+ return res;
+ },
+ /**
+ * Override original clone method
+ * @private
+ */
+ clone(reset) {
+ const em = this.em;
+ const style = this.getStyle();
+ const attr = { ...this.attributes };
+ attr.attributes = { ...attr.attributes };
+ delete attr.attributes.id;
+ attr.components = [];
+ attr.classes = [];
+ attr.traits = [];
+
+ this.get('components').each((md, i) => {
+ attr.components[i] = md.clone(1);
+ });
+ this.get('traits').each((md, i) => {
+ attr.traits[i] = md.clone();
+ });
+ this.get('classes').each((md, i) => {
+ attr.classes[i] = md.get('name');
+ });
+
+ attr.status = '';
+ attr.view = '';
+
+ if (reset) {
+ this.opt.collection = null;
+ }
- /**
- * Get the name of the component
- * @return {string}
- * */
- getName() {
- let customName = this.get('name') || this.get('custom-name');
- let tag = this.get('tagName');
- tag = tag == 'div' ? 'box' : tag;
- let name = this.get('type') || tag;
- name = name.charAt(0).toUpperCase() + name.slice(1);
- return customName || name;
- },
+ if (em && em.getConfig('avoidInlineStyle') && !isEmpty(style)) {
+ attr.style = style;
+ }
+ return new this.constructor(attr, this.opt);
+ },
- /**
- * Get the icon string
- * @return {string}
- */
- getIcon() {
- let icon = this.get('icon');
- return icon ? icon + ' ' : '';
- },
+ /**
+ * Get the name of the component
+ * @return {string}
+ * */
+ getName() {
+ let customName = this.get('name') || this.get('custom-name');
+ let tag = this.get('tagName');
+ tag = tag == 'div' ? 'box' : tag;
+ let name = this.get('type') || tag;
+ name = name.charAt(0).toUpperCase() + name.slice(1);
+ return customName || name;
+ },
+ /**
+ * Get the icon string
+ * @return {string}
+ */
+ getIcon() {
+ let icon = this.get('icon');
+ return icon ? icon + ' ' : '';
+ },
- /**
- * Return HTML string of the component
- * @param {Object} opts Options
- * @return {string} HTML string
- * @private
- */
- toHTML(opts) {
- const model = this;
- const attrs = [];
- const classes = [];
- const tag = model.get('tagName');
- const sTag = model.get('void');
- const attributes = this.getAttrToHTML();
-
- for (let attr in attributes) {
- const value = attributes[attr];
-
- if (!isUndefined(value)) {
+ /**
+ * Return HTML string of the component
+ * @param {Object} opts Options
+ * @return {string} HTML string
+ * @private
+ */
+ toHTML(opts) {
+ const model = this;
+ const attrs = [];
+ const classes = [];
+ const tag = model.get('tagName');
+ const sTag = model.get('void');
+ const attributes = this.getAttrToHTML();
+
+ for (let attr in attributes) {
+ const value = attributes[attr];
+
+ if (!isUndefined(value)) {
attrs.push(`${attr}="${value}"`);
+ }
}
- }
- let attrString = attrs.length ? ` ${attrs.join(' ')}` : '';
- let code = `<${tag}${attrString}${sTag ? '/' : ''}>${model.get('content')}`;
- model.get('components').each(comp => code += comp.toHTML());
- !sTag && (code += ``);
-
- return code;
- },
+ let attrString = attrs.length ? ` ${attrs.join(' ')}` : '';
+ let code = `<${tag}${attrString}${sTag ? '/' : ''}>${model.get(
+ 'content'
+ )}`;
+ model.get('components').each(comp => (code += comp.toHTML()));
+ !sTag && (code += ``);
+ return code;
+ },
- /**
- * Returns object of attributes for HTML
- * @return {Object}
- * @private
- */
- getAttrToHTML() {
- var attr = this.getAttributes();
- delete attr.style;
- return attr;
- },
-
+ /**
+ * Returns object of attributes for HTML
+ * @return {Object}
+ * @private
+ */
+ getAttrToHTML() {
+ var attr = this.getAttributes();
+ delete attr.style;
+ return attr;
+ },
- /**
- * Return a shallow copy of the model's attributes for JSON
- * stringification.
- * @return {Object}
- * @private
- */
- toJSON(...args) {
- const obj = Backbone.Model.prototype.toJSON.apply(this, args);
- const scriptStr = this.getScriptString();
- obj.attributes = this.getAttributes();
- delete obj.attributes.class;
- delete obj.toolbar;
- scriptStr && (obj.script = scriptStr);
-
- return obj;
- },
+ /**
+ * Return a shallow copy of the model's attributes for JSON
+ * stringification.
+ * @return {Object}
+ * @private
+ */
+ toJSON(...args) {
+ const obj = Backbone.Model.prototype.toJSON.apply(this, args);
+ const scriptStr = this.getScriptString();
+ obj.attributes = this.getAttributes();
+ delete obj.attributes.class;
+ delete obj.toolbar;
+ scriptStr && (obj.script = scriptStr);
+
+ return obj;
+ },
+ /**
+ * Return model id
+ * @return {string}
+ */
+ getId() {
+ let attrs = this.get('attributes') || {};
+ return attrs.id || this.ccid || this.cid;
+ },
- /**
- * Return model id
- * @return {string}
- */
- getId() {
- let attrs = this.get('attributes') || {};
- return attrs.id || this.ccid || this.cid;
- },
+ /**
+ * Return script in string format, cleans 'function() {..' from scripts
+ * if it's a function
+ * @param {string|Function} script
+ * @return {string}
+ * @private
+ */
+ getScriptString(script) {
+ var scr = script || this.get('script');
+
+ if (!scr) {
+ return scr;
+ }
+ // Need to convert script functions to strings
+ if (typeof scr == 'function') {
+ var scrStr = scr.toString().trim();
+ scrStr = scrStr
+ .replace(/^function[\s\w]*\(\)\s?\{/, '')
+ .replace(/\}$/, '');
+ scr = scrStr.trim();
+ }
- /**
- * Return script in string format, cleans 'function() {..' from scripts
- * if it's a function
- * @param {string|Function} script
- * @return {string}
- * @private
- */
- getScriptString(script) {
- var scr = script || this.get('script');
+ var config = this.sm.config || {};
+ var tagVarStart = escapeRegExp(config.tagVarStart || '{[ ');
+ var tagVarEnd = escapeRegExp(config.tagVarEnd || ' ]}');
+ var reg = new RegExp(`${tagVarStart}([\\w\\d-]*)${tagVarEnd}`, 'g');
+ scr = scr.replace(reg, (match, v) => {
+ // If at least one match is found I have to track this change for a
+ // better optimization inside JS generator
+ this.scriptUpdated();
+ return this.attributes[v] || '';
+ });
- if (!scr) {
return scr;
- }
+ },
- // Need to convert script functions to strings
- if (typeof scr == 'function') {
- var scrStr = scr.toString().trim();
- scrStr = scrStr.replace(/^function[\s\w]*\(\)\s?\{/, '').replace(/\}$/, '');
- scr = scrStr.trim();
+ emitUpdate(property) {
+ const em = this.em;
+ const event = 'component:update' + (property ? `:${property}` : '');
+ em && em.trigger(event, this.model);
}
-
- var config = this.sm.config || {};
- var tagVarStart = escapeRegExp(config.tagVarStart || '{[ ');
- var tagVarEnd = escapeRegExp(config.tagVarEnd || ' ]}');
- var reg = new RegExp(`${tagVarStart}([\\w\\d-]*)${tagVarEnd}`, 'g');
- scr = scr.replace(reg, (match, v) => {
- // If at least one match is found I have to track this change for a
- // better optimization inside JS generator
- this.scriptUpdated();
- return this.attributes[v] || '';
- });
-
- return scr;
},
-
-
- emitUpdate(property) {
- const em = this.em;
- const event = 'component:update' + (property ? `:${property}` : '');
- em && em.trigger(event, this.model);
- },
-
-},{
-
- /**
- * Detect if the passed element is a valid component.
- * In case the element is valid an object abstracted
- * from the element will be returned
- * @param {HTMLElement}
- * @return {Object}
- * @private
- */
- isComponent(el) {
- return {tagName: el.tagName ? el.tagName.toLowerCase() : ''};
- },
-
-
- createId(model) {
- componentIndex++;
- const nextId = 'i' + componentIndex;
- componentList[nextId] = model;
- return nextId;
- },
-
-
- getList() {
- return componentList;
+ {
+ /**
+ * Detect if the passed element is a valid component.
+ * In case the element is valid an object abstracted
+ * from the element will be returned
+ * @param {HTMLElement}
+ * @return {Object}
+ * @private
+ */
+ isComponent(el) {
+ return { tagName: el.tagName ? el.tagName.toLowerCase() : '' };
+ },
+
+ createId(model) {
+ componentIndex++;
+ const nextId = 'i' + componentIndex;
+ componentList[nextId] = model;
+ return nextId;
+ },
+
+ getList() {
+ return componentList;
+ }
}
-});
+);
module.exports = Component;
diff --git a/src/dom_components/model/ComponentImage.js b/src/dom_components/model/ComponentImage.js
index 2c6d28db1f..1a1a047c95 100644
--- a/src/dom_components/model/ComponentImage.js
+++ b/src/dom_components/model/ComponentImage.js
@@ -1,103 +1,100 @@
var Component = require('./Component');
-module.exports = Component.extend({
+module.exports = Component.extend(
+ {
+ defaults: {
+ ...Component.prototype.defaults,
+ type: 'image',
+ tagName: 'img',
+ src: '',
+ void: 1,
+ droppable: 0,
+ editable: 1,
+ highlightable: 0,
+ resizable: 1,
+ traits: ['alt']
+ },
- defaults: { ...Component.prototype.defaults,
- type: 'image',
- tagName: 'img',
- src: '',
- void: 1,
- droppable: 0,
- editable: 1,
- highlightable: 0,
- resizable: 1,
- traits: ['alt']
- },
-
- initialize(o, opt) {
- Component.prototype.initialize.apply(this, arguments);
- var attr = this.get('attributes');
- if(attr.src)
- this.set('src', attr.src);
- },
+ initialize(o, opt) {
+ Component.prototype.initialize.apply(this, arguments);
+ var attr = this.get('attributes');
+ if (attr.src) this.set('src', attr.src);
+ },
- initToolbar(...args) {
- Component.prototype.initToolbar.apply(this, args);
+ initToolbar(...args) {
+ Component.prototype.initToolbar.apply(this, args);
- if (this.sm && this.sm.get) {
- var cmd = this.sm.get('Commands');
- var cmdName = 'image-editor';
+ if (this.sm && this.sm.get) {
+ var cmd = this.sm.get('Commands');
+ var cmdName = 'image-editor';
- // Add Image Editor button only if the default command exists
- if (cmd.has(cmdName)) {
- var tb = this.get('toolbar');
- tb.push({
- attributes: {class: 'fa fa-pencil'},
- command: cmdName,
- });
- this.set('toolbar', tb);
+ // Add Image Editor button only if the default command exists
+ if (cmd.has(cmdName)) {
+ var tb = this.get('toolbar');
+ tb.push({
+ attributes: { class: 'fa fa-pencil' },
+ command: cmdName
+ });
+ this.set('toolbar', tb);
+ }
}
- }
- },
+ },
- /**
- * Returns object of attributes for HTML
- * @return {Object}
- * @private
- */
- getAttrToHTML(...args) {
- var attr = Component.prototype.getAttrToHTML.apply(this, args);
- delete attr.onmousedown;
- var src = this.get('src');
- if(src)
- attr.src = src;
- return attr;
- },
+ /**
+ * Returns object of attributes for HTML
+ * @return {Object}
+ * @private
+ */
+ getAttrToHTML(...args) {
+ var attr = Component.prototype.getAttrToHTML.apply(this, args);
+ delete attr.onmousedown;
+ var src = this.get('src');
+ if (src) attr.src = src;
+ return attr;
+ },
- /**
- * Parse uri
- * @param {string} uri
- * @return {object}
- * @private
- */
- parseUri(uri) {
- var el = document.createElement('a');
- el.href = uri;
- var query = {};
- var qrs = el.search.substring(1).split('&');
- for (var i = 0; i < qrs.length; i++) {
- var pair = qrs[i].split('=');
- var name = decodeURIComponent(pair[0]);
- if(name)
- query[name] = decodeURIComponent(pair[1]);
+ /**
+ * Parse uri
+ * @param {string} uri
+ * @return {object}
+ * @private
+ */
+ parseUri(uri) {
+ var el = document.createElement('a');
+ el.href = uri;
+ var query = {};
+ var qrs = el.search.substring(1).split('&');
+ for (var i = 0; i < qrs.length; i++) {
+ var pair = qrs[i].split('=');
+ var name = decodeURIComponent(pair[0]);
+ if (name) query[name] = decodeURIComponent(pair[1]);
+ }
+ return {
+ hostname: el.hostname,
+ pathname: el.pathname,
+ protocol: el.protocol,
+ search: el.search,
+ hash: el.hash,
+ port: el.port,
+ query
+ };
}
- return {
- hostname: el.hostname,
- pathname: el.pathname,
- protocol: el.protocol,
- search: el.search,
- hash: el.hash,
- port: el.port,
- query,
- };
},
-
-},{
-
- /**
- * Detect if the passed element is a valid component.
- * In case the element is valid an object abstracted
- * from the element will be returned
- * @param {HTMLElement}
- * @return {Object}
- * @private
- */
- isComponent(el) {
- var result = '';
- if(el.tagName == 'IMG'){
- result = {type: 'image'};
+ {
+ /**
+ * Detect if the passed element is a valid component.
+ * In case the element is valid an object abstracted
+ * from the element will be returned
+ * @param {HTMLElement}
+ * @return {Object}
+ * @private
+ */
+ isComponent(el) {
+ var result = '';
+ if (el.tagName == 'IMG') {
+ result = { type: 'image' };
+ }
+ return result;
}
- return result;
- },
-
-});
+ }
+);
diff --git a/src/dom_components/model/ComponentLink.js b/src/dom_components/model/ComponentLink.js
index 39f91d7ef8..87140575d7 100644
--- a/src/dom_components/model/ComponentLink.js
+++ b/src/dom_components/model/ComponentLink.js
@@ -1,53 +1,53 @@
const Component = require('./ComponentText');
-module.exports = Component.extend({
-
- defaults: { ...Component.prototype.defaults,
+module.exports = Component.extend(
+ {
+ defaults: {
+ ...Component.prototype.defaults,
type: 'link',
tagName: 'a',
- traits: ['title', 'href', 'target'],
- },
-
- /**
- * Returns object of attributes for HTML
- * @return {Object}
- * @private
- */
- getAttrToHTML(...args) {
- const attr = Component.prototype.getAttrToHTML.apply(this, args);
- delete attr.onmousedown;
- return attr;
+ traits: ['title', 'href', 'target']
+ },
+
+ /**
+ * Returns object of attributes for HTML
+ * @return {Object}
+ * @private
+ */
+ getAttrToHTML(...args) {
+ const attr = Component.prototype.getAttrToHTML.apply(this, args);
+ delete attr.onmousedown;
+ return attr;
+ }
},
-
-}, {
-
- isComponent(el) {
- let result;
- let avoidEdit;
-
- if (el.tagName == 'A') {
- result = {
- type: 'link',
- editable: 0,
- };
-
- // The link is editable only if, at least, one of its
- // children is a text node (not empty one)
- const children = el.childNodes;
- const len = children.length;
- if (!len) delete result.editable;
-
- for (let i = 0; i < len; i++) {
- const child = children[i];
-
- if (child.nodeType == 3 && child.textContent.trim() != '') {
- delete result.editable;
- break;
+ {
+ isComponent(el) {
+ let result;
+ let avoidEdit;
+
+ if (el.tagName == 'A') {
+ result = {
+ type: 'link',
+ editable: 0
+ };
+
+ // The link is editable only if, at least, one of its
+ // children is a text node (not empty one)
+ const children = el.childNodes;
+ const len = children.length;
+ if (!len) delete result.editable;
+
+ for (let i = 0; i < len; i++) {
+ const child = children[i];
+
+ if (child.nodeType == 3 && child.textContent.trim() != '') {
+ delete result.editable;
+ break;
+ }
}
}
- }
- return result;
- },
-
-});
+ return result;
+ }
+ }
+);
diff --git a/src/dom_components/model/ComponentMap.js b/src/dom_components/model/ComponentMap.js
index 0de3780bf7..704ab6d207 100644
--- a/src/dom_components/model/ComponentMap.js
+++ b/src/dom_components/model/ComponentMap.js
@@ -1,9 +1,9 @@
var Component = require('./ComponentImage');
var OComponent = require('./Component');
-module.exports = Component.extend({
-
- defaults: _.extend({}, Component.prototype.defaults, {
+module.exports = Component.extend(
+ {
+ defaults: _.extend({}, Component.prototype.defaults, {
type: 'map',
void: 0,
mapUrl: 'https://maps.google.com/maps',
@@ -11,97 +11,97 @@ module.exports = Component.extend({
mapType: 'q',
address: '',
zoom: '1',
- attributes: {frameborder: 0},
+ attributes: { frameborder: 0 },
toolbar: OComponent.prototype.defaults.toolbar,
- traits: [{
- label: 'Address',
- name: 'address',
- placeholder: 'eg. London, UK',
- changeProp: 1,
- },{
- type: 'select',
- label: 'Map type',
- name: 'mapType',
- changeProp: 1,
- options: [
- {value: 'q', name: 'Roadmap'},
- {value: 'w', name: 'Satellite'}
- ]
- },{
- label: 'Zoom',
- name: 'zoom',
- type: 'range',
- min: '1',
- max: '20',
- changeProp: 1,
- }],
- }),
-
-
- initialize(o, opt) {
- if(this.get('src'))
- this.parseFromSrc();
- else
- this.updateSrc();
- Component.prototype.initialize.apply(this, arguments);
- this.listenTo(this, 'change:address change:zoom change:mapType', this.updateSrc);
- },
-
- updateSrc() {
- this.set('src', this.getMapUrl());
- },
+ traits: [
+ {
+ label: 'Address',
+ name: 'address',
+ placeholder: 'eg. London, UK',
+ changeProp: 1
+ },
+ {
+ type: 'select',
+ label: 'Map type',
+ name: 'mapType',
+ changeProp: 1,
+ options: [
+ { value: 'q', name: 'Roadmap' },
+ { value: 'w', name: 'Satellite' }
+ ]
+ },
+ {
+ label: 'Zoom',
+ name: 'zoom',
+ type: 'range',
+ min: '1',
+ max: '20',
+ changeProp: 1
+ }
+ ]
+ }),
- /**
- * Returns url of the map
- * @return {string}
- * @private
- */
- getMapUrl() {
- var md = this;
- var addr = md.get('address');
- var zoom = md.get('zoom');
- var type = md.get('mapType');
- var size = '';
- addr = addr ? '&q=' + addr : '';
- zoom = zoom ? '&z=' + zoom : '';
- type = type ? '&t=' + type : '';
- var result = md.get('mapUrl')+'?' + addr + zoom + type;
- result += '&output=embed';
- return result;
- },
+ initialize(o, opt) {
+ if (this.get('src')) this.parseFromSrc();
+ else this.updateSrc();
+ Component.prototype.initialize.apply(this, arguments);
+ this.listenTo(
+ this,
+ 'change:address change:zoom change:mapType',
+ this.updateSrc
+ );
+ },
- /**
- * Set attributes by src string
- * @private
- */
- parseFromSrc() {
- var uri = this.parseUri(this.get('src'));
- var qr = uri.query;
- if(qr.q)
- this.set('address', qr.q);
- if(qr.z)
- this.set('zoom', qr.z);
- if(qr.t)
- this.set('mapType', qr.t);
- },
+ updateSrc() {
+ this.set('src', this.getMapUrl());
+ },
-},{
+ /**
+ * Returns url of the map
+ * @return {string}
+ * @private
+ */
+ getMapUrl() {
+ var md = this;
+ var addr = md.get('address');
+ var zoom = md.get('zoom');
+ var type = md.get('mapType');
+ var size = '';
+ addr = addr ? '&q=' + addr : '';
+ zoom = zoom ? '&z=' + zoom : '';
+ type = type ? '&t=' + type : '';
+ var result = md.get('mapUrl') + '?' + addr + zoom + type;
+ result += '&output=embed';
+ return result;
+ },
- /**
- * Detect if the passed element is a valid component.
- * In case the element is valid an object abstracted
- * from the element will be returned
- * @param {HTMLElement}
- * @return {Object}
- * @private
- */
- isComponent(el) {
- var result = '';
- if(el.tagName == 'IFRAME' &&
- /maps\.google\.com/.test(el.src) ){
- result = {type: 'map', src: el.src};
+ /**
+ * Set attributes by src string
+ * @private
+ */
+ parseFromSrc() {
+ var uri = this.parseUri(this.get('src'));
+ var qr = uri.query;
+ if (qr.q) this.set('address', qr.q);
+ if (qr.z) this.set('zoom', qr.z);
+ if (qr.t) this.set('mapType', qr.t);
}
- return result;
},
-
-});
+ {
+ /**
+ * Detect if the passed element is a valid component.
+ * In case the element is valid an object abstracted
+ * from the element will be returned
+ * @param {HTMLElement}
+ * @return {Object}
+ * @private
+ */
+ isComponent(el) {
+ var result = '';
+ if (el.tagName == 'IFRAME' && /maps\.google\.com/.test(el.src)) {
+ result = { type: 'map', src: el.src };
+ }
+ return result;
+ }
+ }
+);
diff --git a/src/dom_components/model/ComponentScript.js b/src/dom_components/model/ComponentScript.js
index a18eae12d7..b3b1bde4cb 100644
--- a/src/dom_components/model/ComponentScript.js
+++ b/src/dom_components/model/ComponentScript.js
@@ -1,27 +1,26 @@
var Component = require('./Component');
-module.exports = Component.extend({
-
- defaults: _.extend({}, Component.prototype.defaults, {
- type: 'script',
- droppable: false,
- draggable: false,
- layerable: false,
- }),
-
-}, {
+module.exports = Component.extend(
+ {
+ defaults: _.extend({}, Component.prototype.defaults, {
+ type: 'script',
+ droppable: false,
+ draggable: false,
+ layerable: false
+ })
+ },
+ {
+ isComponent(el) {
+ if (el.tagName == 'SCRIPT') {
+ var result = { type: 'script' };
- isComponent(el) {
- if (el.tagName == 'SCRIPT') {
- var result = {type: 'script'};
+ if (el.src) {
+ result.src = el.src;
+ result.onload = el.onload;
+ }
- if (el.src) {
- result.src = el.src;
- result.onload = el.onload;
+ return result;
}
-
- return result;
}
- },
-
-});
+ }
+);
diff --git a/src/dom_components/model/ComponentSvg.js b/src/dom_components/model/ComponentSvg.js
index cab7f6c368..db5b2c058d 100644
--- a/src/dom_components/model/ComponentSvg.js
+++ b/src/dom_components/model/ComponentSvg.js
@@ -1,33 +1,33 @@
var Component = require('./Component');
-module.exports = Component.extend({
+module.exports = Component.extend(
+ {
+ defaults: {
+ ...Component.prototype.defaults,
+ highlightable: 0
+ },
- defaults: { ...Component.prototype.defaults,
- highlightable: 0,
- },
-
- getName() {
- let name = this.get('tagName');
- let customName = this.get('custom-name');
- name = name.charAt(0).toUpperCase() + name.slice(1);
- return customName || name;
- },
-
-}, {
-
- isComponent(el) {
- if (SVGElement && el instanceof SVGElement) {
- // Some SVG elements require uppercase letters (eg.
)
- const tagName = el.tagName;
- // Make the root resizable
- const resizable = tagName == 'svg' ? true : false;
-
- return {
- tagName,
- type: 'svg',
- resizable
- };
+ getName() {
+ let name = this.get('tagName');
+ let customName = this.get('custom-name');
+ name = name.charAt(0).toUpperCase() + name.slice(1);
+ return customName || name;
}
},
+ {
+ isComponent(el) {
+ if (SVGElement && el instanceof SVGElement) {
+ // Some SVG elements require uppercase letters (eg. )
+ const tagName = el.tagName;
+ // Make the root resizable
+ const resizable = tagName == 'svg' ? true : false;
-});
+ return {
+ tagName,
+ type: 'svg',
+ resizable
+ };
+ }
+ }
+ }
+);
diff --git a/src/dom_components/model/ComponentTable.js b/src/dom_components/model/ComponentTable.js
index 6f784425d3..b500342228 100644
--- a/src/dom_components/model/ComponentTable.js
+++ b/src/dom_components/model/ComponentTable.js
@@ -1,29 +1,29 @@
const Component = require('./Component');
-module.exports = Component.extend({
-
- defaults: { ...Component.prototype.defaults,
+module.exports = Component.extend(
+ {
+ defaults: {
+ ...Component.prototype.defaults,
type: 'table',
tagName: 'table',
- droppable: ['tbody', 'thead', 'tfoot'],
- },
+ droppable: ['tbody', 'thead', 'tfoot']
+ },
- initialize(o, opt) {
- Component.prototype.initialize.apply(this, arguments);
- const components = this.get('components');
- !components.length && components.add({ type: 'tbody' });
+ initialize(o, opt) {
+ Component.prototype.initialize.apply(this, arguments);
+ const components = this.get('components');
+ !components.length && components.add({ type: 'tbody' });
+ }
},
+ {
+ isComponent(el) {
+ let result = '';
-}, {
-
- isComponent(el) {
- let result = '';
+ if (el.tagName == 'TABLE') {
+ result = { type: 'table' };
+ }
- if (el.tagName == 'TABLE') {
- result = { type: 'table' };
+ return result;
}
-
- return result;
- },
-
-});
+ }
+);
diff --git a/src/dom_components/model/ComponentTableBody.js b/src/dom_components/model/ComponentTableBody.js
index 943bdb33eb..75754ede3d 100644
--- a/src/dom_components/model/ComponentTableBody.js
+++ b/src/dom_components/model/ComponentTableBody.js
@@ -1,58 +1,58 @@
const Component = require('./Component');
-module.exports = Component.extend({
-
- defaults: { ...Component.prototype.defaults,
- type: 'tbody',
- tagName: 'tbody',
- draggable: ['table'],
- droppable: ['tr'],
- columns: 1,
- rows: 1,
- },
-
- initialize(o, opt) {
- Component.prototype.initialize.apply(this, arguments);
- const components = this.get('components');
- let columns = this.get('columns');
- let rows = this.get('rows');
-
- // Init components if empty
- if (!components.length) {
- const rowsToAdd = [];
-
- while (rows--) {
- const columnsToAdd = [];
- let clm = columns;
-
- while (clm--) {
- columnsToAdd.push({
- type: 'cell',
- classes: ['cell']
+module.exports = Component.extend(
+ {
+ defaults: {
+ ...Component.prototype.defaults,
+ type: 'tbody',
+ tagName: 'tbody',
+ draggable: ['table'],
+ droppable: ['tr'],
+ columns: 1,
+ rows: 1
+ },
+
+ initialize(o, opt) {
+ Component.prototype.initialize.apply(this, arguments);
+ const components = this.get('components');
+ let columns = this.get('columns');
+ let rows = this.get('rows');
+
+ // Init components if empty
+ if (!components.length) {
+ const rowsToAdd = [];
+
+ while (rows--) {
+ const columnsToAdd = [];
+ let clm = columns;
+
+ while (clm--) {
+ columnsToAdd.push({
+ type: 'cell',
+ classes: ['cell']
+ });
+ }
+
+ rowsToAdd.push({
+ type: 'row',
+ classes: ['row'],
+ components: columnsToAdd
});
}
- rowsToAdd.push({
- type: 'row',
- classes: ['row'],
- components: columnsToAdd
- });
+ components.add(rowsToAdd);
}
-
- components.add(rowsToAdd);
}
},
+ {
+ isComponent(el) {
+ let result = '';
-},{
-
- isComponent(el) {
- let result = '';
+ if (el.tagName == 'TBODY') {
+ result = { type: 'tbody' };
+ }
- if (el.tagName == 'TBODY') {
- result = { type: 'tbody' };
+ return result;
}
-
- return result;
- },
-
-});
+ }
+);
diff --git a/src/dom_components/model/ComponentTableCell.js b/src/dom_components/model/ComponentTableCell.js
index 852cd4353d..28dace9c47 100644
--- a/src/dom_components/model/ComponentTableCell.js
+++ b/src/dom_components/model/ComponentTableCell.js
@@ -1,26 +1,27 @@
const Component = require('./Component');
-module.exports = Component.extend({
-
- defaults: { ...Component.prototype.defaults,
+module.exports = Component.extend(
+ {
+ defaults: {
+ ...Component.prototype.defaults,
type: 'cell',
tagName: 'td',
- draggable: ['tr'],
+ draggable: ['tr']
+ }
},
+ {
+ isComponent(el) {
+ let result = '';
+ const tag = el.tagName;
-}, {
- isComponent(el) {
- let result = '';
- const tag = el.tagName;
+ if (tag == 'TD' || tag == 'TH') {
+ result = {
+ type: 'cell',
+ tagName: tag.toLowerCase()
+ };
+ }
- if (tag == 'TD' || tag == 'TH') {
- result = {
- type: 'cell',
- tagName: tag.toLowerCase()
- };
+ return result;
}
-
- return result;
- },
-
-});
+ }
+);
diff --git a/src/dom_components/model/ComponentTableFoot.js b/src/dom_components/model/ComponentTableFoot.js
index c6723e8993..67ba53b162 100644
--- a/src/dom_components/model/ComponentTableFoot.js
+++ b/src/dom_components/model/ComponentTableFoot.js
@@ -1,21 +1,22 @@
const ComponentTableBody = require('./ComponentTableBody');
-module.exports = ComponentTableBody.extend({
-
- defaults: { ...ComponentTableBody.prototype.defaults,
- type: 'tfoot',
- tagName: 'tfoot',
+module.exports = ComponentTableBody.extend(
+ {
+ defaults: {
+ ...ComponentTableBody.prototype.defaults,
+ type: 'tfoot',
+ tagName: 'tfoot'
+ }
},
+ {
+ isComponent(el) {
+ let result = '';
-},{
- isComponent(el) {
- let result = '';
+ if (el.tagName == 'TFOOT') {
+ result = { type: 'tfoot' };
+ }
- if (el.tagName == 'TFOOT') {
- result = { type: 'tfoot' };
+ return result;
}
-
- return result;
- },
-
-});
+ }
+);
diff --git a/src/dom_components/model/ComponentTableHead.js b/src/dom_components/model/ComponentTableHead.js
index b7c383dc67..a645957453 100644
--- a/src/dom_components/model/ComponentTableHead.js
+++ b/src/dom_components/model/ComponentTableHead.js
@@ -1,21 +1,22 @@
const ComponentTableBody = require('./ComponentTableBody');
-module.exports = ComponentTableBody.extend({
-
- defaults: { ...ComponentTableBody.prototype.defaults,
- type: 'thead',
- tagName: 'thead'
+module.exports = ComponentTableBody.extend(
+ {
+ defaults: {
+ ...ComponentTableBody.prototype.defaults,
+ type: 'thead',
+ tagName: 'thead'
+ }
},
+ {
+ isComponent(el) {
+ let result = '';
-}, {
- isComponent(el) {
- let result = '';
+ if (el.tagName == 'THEAD') {
+ result = { type: 'thead' };
+ }
- if (el.tagName == 'THEAD') {
- result = { type: 'thead' };
+ return result;
}
-
- return result;
- },
-
-});
+ }
+);
diff --git a/src/dom_components/model/ComponentTableRow.js b/src/dom_components/model/ComponentTableRow.js
index 9558872f33..0981a044a0 100644
--- a/src/dom_components/model/ComponentTableRow.js
+++ b/src/dom_components/model/ComponentTableRow.js
@@ -1,33 +1,34 @@
const Component = require('./Component');
-module.exports = Component.extend({
-
- defaults: { ...Component.prototype.defaults,
+module.exports = Component.extend(
+ {
+ defaults: {
+ ...Component.prototype.defaults,
type: 'row',
tagName: 'tr',
draggable: ['thead', 'tbody', 'tfoot'],
droppable: ['th', 'td']
- },
-
- initialize(o, opt) {
- Component.prototype.initialize.apply(this, arguments);
-
- // Clean the row from non cell components
- const cells = [];
- const components = this.get('components');
- components.each(model => model.is('cell') && cells.push(model));
- components.reset(cells);
- }
+ },
-}, {
- isComponent(el) {
- let result = '';
+ initialize(o, opt) {
+ Component.prototype.initialize.apply(this, arguments);
- if (el.tagName == 'TR') {
- result = { type: 'row' };
+ // Clean the row from non cell components
+ const cells = [];
+ const components = this.get('components');
+ components.each(model => model.is('cell') && cells.push(model));
+ components.reset(cells);
}
-
- return result;
},
+ {
+ isComponent(el) {
+ let result = '';
+
+ if (el.tagName == 'TR') {
+ result = { type: 'row' };
+ }
-});
+ return result;
+ }
+ }
+);
diff --git a/src/dom_components/model/ComponentText.js b/src/dom_components/model/ComponentText.js
index 58867f0fd6..d914440846 100644
--- a/src/dom_components/model/ComponentText.js
+++ b/src/dom_components/model/ComponentText.js
@@ -1,11 +1,10 @@
const Component = require('./Component');
module.exports = Component.extend({
-
- defaults: { ...Component.prototype.defaults,
+ defaults: {
+ ...Component.prototype.defaults,
type: 'text',
droppable: false,
- editable: true,
- },
-
+ editable: true
+ }
});
diff --git a/src/dom_components/model/ComponentTextNode.js b/src/dom_components/model/ComponentTextNode.js
index 1cc5d4c8b1..3328c33657 100644
--- a/src/dom_components/model/ComponentTextNode.js
+++ b/src/dom_components/model/ComponentTextNode.js
@@ -1,27 +1,26 @@
var Component = require('./Component');
-module.exports = Component.extend({
+module.exports = Component.extend(
+ {
+ defaults: _.extend({}, Component.prototype.defaults, {
+ droppable: false,
+ editable: true
+ }),
- defaults: _.extend({}, Component.prototype.defaults, {
- droppable: false,
- editable: true,
- }),
-
- toHTML() {
- return this.get('content');
- },
-
-}, {
-
- isComponent(el) {
- var result = '';
- if(el.nodeType === 3){
- result = {
- type: 'textnode',
- content: el.textContent
- };
+ toHTML() {
+ return this.get('content');
}
- return result;
},
-
-});
+ {
+ isComponent(el) {
+ var result = '';
+ if (el.nodeType === 3) {
+ result = {
+ type: 'textnode',
+ content: el.textContent
+ };
+ }
+ return result;
+ }
+ }
+);
diff --git a/src/dom_components/model/ComponentVideo.js b/src/dom_components/model/ComponentVideo.js
index 1c90500609..f7ef96f412 100644
--- a/src/dom_components/model/ComponentVideo.js
+++ b/src/dom_components/model/ComponentVideo.js
@@ -3,9 +3,10 @@ const OComponent = require('./Component');
const yt = 'yt';
const vi = 'vi';
-module.exports = Component.extend({
-
- defaults: { ...Component.prototype.defaults,
+module.exports = Component.extend(
+ {
+ defaults: {
+ ...Component.prototype.defaults,
type: 'video',
tagName: 'video',
videoId: '',
@@ -19,302 +20,295 @@ module.exports = Component.extend({
controls: 1,
color: '',
sources: [],
- attributes:{allowfullscreen:'allowfullscreen'},
- toolbar: OComponent.prototype.defaults.toolbar,
- },
-
- initialize(o, opt) {
- var traits = [];
- var prov = this.get('provider');
- switch (prov) {
- case yt:
- traits = this.getYoutubeTraits();
- break;
- case vi:
- traits = this.getVimeoTraits();
- break;
- default:
- traits = this.getSourceTraits();
- }
- if(this.get('src'))
- this.parseFromSrc();
- this.set('traits', traits);
- Component.prototype.initialize.apply(this, arguments);
- this.listenTo(this, 'change:provider', this.updateTraits);
- this.listenTo(this, 'change:videoId', this.updateSrc);
- },
+ attributes: { allowfullscreen: 'allowfullscreen' },
+ toolbar: OComponent.prototype.defaults.toolbar
+ },
+ initialize(o, opt) {
+ var traits = [];
+ var prov = this.get('provider');
+ switch (prov) {
+ case yt:
+ traits = this.getYoutubeTraits();
+ break;
+ case vi:
+ traits = this.getVimeoTraits();
+ break;
+ default:
+ traits = this.getSourceTraits();
+ }
+ if (this.get('src')) this.parseFromSrc();
+ this.set('traits', traits);
+ Component.prototype.initialize.apply(this, arguments);
+ this.listenTo(this, 'change:provider', this.updateTraits);
+ this.listenTo(this, 'change:videoId', this.updateSrc);
+ },
- initToolbar(...args) {
- OComponent.prototype.initToolbar.apply(this, args);
- },
-
- /**
- * Set attributes by src string
- */
- parseFromSrc() {
- var prov = this.get('provider');
- var uri = this.parseUri(this.get('src'));
- var qr = uri.query;
- switch (prov) {
- case yt: case vi:
- var videoId = uri.pathname.split('/').pop();
- this.set('videoId', videoId);
- if(qr.autoplay)
- this.set('autoplay', 1);
- if(qr.loop)
- this.set('loop', 1);
- if(parseInt(qr.controls) === 0)
- this.set('controls', 0);
- if(qr.color)
- this.set('color', qr.color);
- break;
- default:
- }
- },
+ initToolbar(...args) {
+ OComponent.prototype.initToolbar.apply(this, args);
+ },
- /**
- * Update src on change of video ID
- * @private
- */
- updateSrc() {
- var prov = this.get('provider');
- switch (prov) {
- case yt:
- this.set('src',this.getYoutubeSrc());
- break;
- case vi:
- this.set('src',this.getVimeoSrc());
- break;
- }
- },
+ /**
+ * Set attributes by src string
+ */
+ parseFromSrc() {
+ var prov = this.get('provider');
+ var uri = this.parseUri(this.get('src'));
+ var qr = uri.query;
+ switch (prov) {
+ case yt:
+ case vi:
+ var videoId = uri.pathname.split('/').pop();
+ this.set('videoId', videoId);
+ if (qr.autoplay) this.set('autoplay', 1);
+ if (qr.loop) this.set('loop', 1);
+ if (parseInt(qr.controls) === 0) this.set('controls', 0);
+ if (qr.color) this.set('color', qr.color);
+ break;
+ default:
+ }
+ },
- /**
- * Returns object of attributes for HTML
- * @return {Object}
- * @private
- */
- getAttrToHTML(...args) {
- var attr = Component.prototype.getAttrToHTML.apply(this, args);
- var prov = this.get('provider');
- switch (prov) {
- case yt: case vi:
- break;
- default:
- if(this.get('loop'))
- attr.loop = 'loop';
- if(this.get('autoplay'))
- attr.autoplay = 'autoplay';
- if(this.get('controls'))
- attr.controls = 'controls';
- }
- return attr;
- },
+ /**
+ * Update src on change of video ID
+ * @private
+ */
+ updateSrc() {
+ var prov = this.get('provider');
+ switch (prov) {
+ case yt:
+ this.set('src', this.getYoutubeSrc());
+ break;
+ case vi:
+ this.set('src', this.getVimeoSrc());
+ break;
+ }
+ },
- /**
- * Update traits by provider
- * @private
- */
- updateTraits() {
- var prov = this.get('provider');
- var traits = this.getSourceTraits();
- switch (prov) {
- case yt:
- this.set('tagName', 'iframe');
- traits = this.getYoutubeTraits();
- break;
- case vi:
- this.set('tagName', 'iframe');
- traits = this.getVimeoTraits();
- break;
- default:
- this.set('tagName', 'video');
- }
- this.loadTraits(traits);
- this.sm.trigger('change:selectedComponent');
- },
+ /**
+ * Returns object of attributes for HTML
+ * @return {Object}
+ * @private
+ */
+ getAttrToHTML(...args) {
+ var attr = Component.prototype.getAttrToHTML.apply(this, args);
+ var prov = this.get('provider');
+ switch (prov) {
+ case yt:
+ case vi:
+ break;
+ default:
+ if (this.get('loop')) attr.loop = 'loop';
+ if (this.get('autoplay')) attr.autoplay = 'autoplay';
+ if (this.get('controls')) attr.controls = 'controls';
+ }
+ return attr;
+ },
- // Listen provider change and switch traits, in TraitView listen traits change
+ /**
+ * Update traits by provider
+ * @private
+ */
+ updateTraits() {
+ var prov = this.get('provider');
+ var traits = this.getSourceTraits();
+ switch (prov) {
+ case yt:
+ this.set('tagName', 'iframe');
+ traits = this.getYoutubeTraits();
+ break;
+ case vi:
+ this.set('tagName', 'iframe');
+ traits = this.getVimeoTraits();
+ break;
+ default:
+ this.set('tagName', 'video');
+ }
+ this.loadTraits(traits);
+ this.sm.trigger('change:selectedComponent');
+ },
- /**
- * Return the provider trait
- * @return {Object}
- * @private
- */
- getProviderTrait() {
- return {
- type: 'select',
- label: 'Provider',
- name: 'provider',
- changeProp: 1,
- value: this.get('provider'),
- options: [
- {value: 'so', name: 'HTML5 Source'},
- {value: yt, name: 'Youtube'},
- {value: vi, name: 'Vimeo'}
- ]
- };
- },
+ // Listen provider change and switch traits, in TraitView listen traits change
- /**
- * Return traits for the source provider
- * @return {Array