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

Up component private docs

up-style-manager
Artur Arseniev 5 years ago
parent
b2d0ac5565
commit
c5d04e1fbb
1 changed files with 81 additions and 79 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 160
      src/dom_components/model/Component.js

160
src/dom_components/model/Component.js
View File

@ -9,14 +9,14 @@ import {
forEach, forEach,
result, result,
bindAll, bindAll,
keys keys,
} from 'underscore'; } from 'underscore';
import { import {
shallowDiff, shallowDiff,
capitalize, capitalize,
isEmptyObj, isEmptyObj,
isObject, isObject,
toLowerCase toLowerCase,
} from 'utils/mixins'; } from 'utils/mixins';
import Styleable from 'domain_abstract/model/Styleable'; import Styleable from 'domain_abstract/model/Styleable';
import { Model } from 'backbone'; import { Model } from 'backbone';
@ -25,11 +25,11 @@ import Selector from 'selector_manager/model/Selector';
import Selectors from 'selector_manager/model/Selectors'; import Selectors from 'selector_manager/model/Selectors';
import Traits from 'trait_manager/model/Traits'; import Traits from 'trait_manager/model/Traits';
const escapeRegExp = str => { const escapeRegExp = (str) => {
return str.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&'); return str.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');
}; };
const avoidInline = em => em && em.getConfig('avoidInlineStyle'); const avoidInline = (em) => em && em.getConfig('avoidInlineStyle');
export const eventDrag = 'component:drag'; export const eventDrag = 'component:drag';
export const keySymbols = '__symbols'; export const keySymbols = '__symbols';
@ -126,7 +126,7 @@ export default class Component extends Model.extend(Styleable) {
if (parentAttr && parentAttr.propagate) { if (parentAttr && parentAttr.propagate) {
let newAttr = {}; let newAttr = {};
const toPropagate = parentAttr.propagate; const toPropagate = parentAttr.propagate;
toPropagate.forEach(prop => (newAttr[prop] = parent.get(prop))); toPropagate.forEach((prop) => (newAttr[prop] = parent.get(prop)));
newAttr.propagate = toPropagate; newAttr.propagate = toPropagate;
newAttr = { ...newAttr, ...props }; newAttr = { ...newAttr, ...props };
this.set(newAttr); this.set(newAttr);
@ -152,7 +152,7 @@ export default class Component extends Model.extend(Styleable) {
this.config = opt.config || {}; this.config = opt.config || {};
this.set('attributes', { this.set('attributes', {
...(result(this, 'defaults').attributes || {}), ...(result(this, 'defaults').attributes || {}),
...(this.get('attributes') || {}) ...(this.get('attributes') || {}),
}); });
this.ccid = Component.createId(this, opt); this.ccid = Component.createId(this, opt);
this.initClasses(); this.initClasses();
@ -171,7 +171,7 @@ export default class Component extends Model.extend(Styleable) {
this.views = []; this.views = [];
// Register global updates for collection properties // Register global updates for collection properties
['classes', 'traits', 'components'].forEach(name => { ['classes', 'traits', 'components'].forEach((name) => {
const events = `add remove ${name !== 'components' ? 'change' : ''}`; const events = `add remove ${name !== 'components' ? 'change' : ''}`;
this.listenTo(this.get(name), events.trim(), (...args) => this.listenTo(this.get(name), events.trim(), (...args) =>
this.emitUpdate(name, ...args) this.emitUpdate(name, ...args)
@ -202,7 +202,7 @@ export default class Component extends Model.extend(Styleable) {
um.add(this.getSelectors()); um.add(this.getSelectors());
this.__hasUm = 1; this.__hasUm = 1;
} }
opts.recursive && comps.map(c => c.__postAdd(opts)); opts.recursive && comps.map((c) => c.__postAdd(opts));
} }
__postRemove() { __postRemove() {
@ -218,7 +218,7 @@ export default class Component extends Model.extend(Styleable) {
__onChange(m, opts) { __onChange(m, opts) {
const changed = this.changedAttributes(); const changed = this.changedAttributes();
['status', 'open', 'toolbar', 'traits'].forEach( ['status', 'open', 'toolbar', 'traits'].forEach(
name => delete changed[name] (name) => delete changed[name]
); );
// Propagate component prop changes // Propagate component prop changes
if (!isEmptyObj(changed)) { if (!isEmptyObj(changed)) {
@ -229,7 +229,7 @@ export default class Component extends Model.extend(Styleable) {
__changesUp(opts) { __changesUp(opts) {
const { em, frame } = this; const { em, frame } = this;
[frame, em].forEach(md => md && md.changesUp(opts)); [frame, em].forEach((md) => md && md.changesUp(opts));
} }
__propSelfToParent(props) { __propSelfToParent(props) {
@ -297,7 +297,7 @@ export default class Component extends Model.extend(Styleable) {
find(query) { find(query) {
const result = []; const result = [];
const $els = this.view.$el.find(query); const $els = this.view.$el.find(query);
$els.each(i => { $els.each((i) => {
const $el = $els.eq(i); const $el = $els.eq(i);
const model = $el.data('model'); const model = $el.data('model');
model && result.push(model); model && result.push(model);
@ -318,8 +318,8 @@ export default class Component extends Model.extend(Styleable) {
*/ */
findType(type) { findType(type) {
const result = []; const result = [];
const find = components => const find = (components) =>
components.forEach(item => { components.forEach((item) => {
item.is(type) && result.push(item); item.is(type) && result.push(item);
find(item.components()); find(item.components());
}); });
@ -370,9 +370,9 @@ export default class Component extends Model.extend(Styleable) {
contains(component) { contains(component) {
let result = !1; let result = !1;
if (!component) return result; if (!component) return result;
const contains = components => { const contains = (components) => {
!result && !result &&
components.forEach(item => { components.forEach((item) => {
if (item === component) result = !0; if (item === component) result = !0;
!result && contains(item.components()); !result && contains(item.components());
}); });
@ -422,7 +422,7 @@ export default class Component extends Model.extend(Styleable) {
const attrPrev = { ...this.previous('attributes') }; const attrPrev = { ...this.previous('attributes') };
const diff = shallowDiff(attrPrev, this.get('attributes')); const diff = shallowDiff(attrPrev, this.get('attributes'));
keys(diff).forEach(pr => keys(diff).forEach((pr) =>
this.trigger(`change:attributes:${pr}`, this, diff[pr], opts) this.trigger(`change:attributes:${pr}`, this, diff[pr], opts)
); );
} }
@ -452,7 +452,7 @@ export default class Component extends Model.extend(Styleable) {
return this.setAttributes( return this.setAttributes(
{ {
...this.getAttributes({ noClass: 1 }), ...this.getAttributes({ noClass: 1 }),
...attrs ...attrs,
}, },
opts opts
); );
@ -470,7 +470,7 @@ export default class Component extends Model.extend(Styleable) {
removeAttributes(attrs = [], opts = {}) { removeAttributes(attrs = [], opts = {}) {
const attrArr = Array.isArray(attrs) ? attrs : [attrs]; const attrArr = Array.isArray(attrs) ? attrs : [attrs];
const compAttr = this.getAttributes(); const compAttr = this.getAttributes();
attrArr.map(i => delete compAttr[i]); attrArr.map((i) => delete compAttr[i]);
return this.setAttributes(compAttr, opts); return this.setAttributes(compAttr, opts);
} }
@ -523,7 +523,7 @@ export default class Component extends Model.extend(Styleable) {
this.rule = cc.setIdRule(this.getId(), prop, { ...opts, state }); this.rule = cc.setIdRule(this.getId(), prop, { ...opts, state });
const diff = shallowDiff(propOrig, prop); const diff = shallowDiff(propOrig, prop);
this.set('style', '', { silent: 1 }); this.set('style', '', { silent: 1 });
keys(diff).forEach(pr => this.trigger(`change:style:${pr}`)); keys(diff).forEach((pr) => this.trigger(`change:style:${pr}`));
} else { } else {
prop = Styleable.setStyle.apply(this, arguments); prop = Styleable.setStyle.apply(this, arguments);
} }
@ -544,7 +544,7 @@ export default class Component extends Model.extend(Styleable) {
// Add classes // Add classes
if (!opts.noClass) { if (!opts.noClass) {
this.get('classes').forEach(cls => this.get('classes').forEach((cls) =>
classes.push(isString(cls) ? cls : cls.get('name')) classes.push(isString(cls) ? cls : cls.get('name'))
); );
classes.length && (attributes.class = classes.join(' ')); classes.length && (attributes.class = classes.join(' '));
@ -629,9 +629,9 @@ export default class Component extends Model.extend(Styleable) {
const selectors = this.get('classes'); const selectors = this.get('classes');
const type = Selector.TYPE_CLASS; const type = Selector.TYPE_CLASS;
classes.forEach(classe => { classes.forEach((classe) => {
const classes = classe.split(' '); const classes = classe.split(' ');
classes.forEach(name => { classes.forEach((name) => {
const selector = selectors.where({ name, type })[0]; const selector = selectors.where({ name, type })[0];
selector && removed.push(selectors.remove(selector)); selector && removed.push(selectors.remove(selector));
}); });
@ -682,9 +682,8 @@ export default class Component extends Model.extend(Styleable) {
__isSymbolNested() { __isSymbolNested() {
if (!this.__isSymbolOrInst() || this.__isSymbolTop()) return false; if (!this.__isSymbolOrInst() || this.__isSymbolTop()) return false;
const symbTopSelf = (this.__isSymbol() const symbTopSelf = (
? this this.__isSymbol() ? this : this.__getSymbol()
: this.__getSymbol()
).__getSymbTop(); ).__getSymbTop();
const symbTop = this.__getSymbTop(); const symbTop = this.__getSymbTop();
const symbTopMain = symbTop.__isSymbol() ? symbTop : symbTop.__getSymbol(); const symbTopMain = symbTop.__isSymbol() ? symbTop : symbTop.__getSymbol();
@ -718,7 +717,7 @@ export default class Component extends Model.extend(Styleable) {
symbs[idx] = this.__getAllById()[symb]; symbs[idx] = this.__getAllById()[symb];
} }
}); });
symbs = symbs.filter(symb => symb && !isString(symb)); symbs = symbs.filter((symb) => symb && !isString(symb));
} }
return symbs; return symbs;
} }
@ -728,7 +727,8 @@ export default class Component extends Model.extend(Styleable) {
const [prp] = prop.split(':'); const [prp] = prop.split(':');
const props = prop !== prp ? [prop, prp] : [prop]; const props = prop !== prp ? [prop, prp] : [prop];
return ( return (
ovrd === true || (isArray(ovrd) && props.some(p => ovrd.indexOf(p) >= 0)) ovrd === true ||
(isArray(ovrd) && props.some((p) => ovrd.indexOf(p) >= 0))
); );
} }
@ -753,9 +753,9 @@ export default class Component extends Model.extend(Styleable) {
const symbol = this.__getSymbol(); const symbol = this.__getSymbol();
const all = symbol ? [symbol, ...(symbol.__getSymbols() || [])] : symbols; const all = symbol ? [symbol, ...(symbol.__getSymbols() || [])] : symbols;
result = all result = all
.filter(s => s !== this) .filter((s) => s !== this)
// Avoid updating those with override // Avoid updating those with override
.filter(s => !(changed && s.__isSymbOvrd(changed))); .filter((s) => !(changed && s.__isSymbOvrd(changed)));
return result; return result;
} }
@ -786,15 +786,15 @@ export default class Component extends Model.extend(Styleable) {
if (!isEmptyObj(changed)) { if (!isEmptyObj(changed)) {
const toUp = this.__getSymbToUp(opts); const toUp = this.__getSymbToUp(opts);
// Avoid propagating overrides to other symbols // Avoid propagating overrides to other symbols
keys(changed).map(prop => { keys(changed).map((prop) => {
if (this.__isSymbOvrd(prop)) delete changed[prop]; if (this.__isSymbOvrd(prop)) delete changed[prop];
}); });
this.__logSymbol('props', toUp, { opts, changed }); this.__logSymbol('props', toUp, { opts, changed });
toUp.forEach(child => { toUp.forEach((child) => {
const propsChanged = { ...changed }; const propsChanged = { ...changed };
// Avoid updating those with override // Avoid updating those with override
keys(propsChanged).map(prop => { keys(propsChanged).map((prop) => {
if (child.__isSymbOvrd(prop)) delete propsChanged[prop]; if (child.__isSymbOvrd(prop)) delete propsChanged[prop];
}); });
child.set(propsChanged, { fromInstance: this, ...opts }); child.set(propsChanged, { fromInstance: this, ...opts });
@ -805,7 +805,7 @@ export default class Component extends Model.extend(Styleable) {
__upSymbCls(m, c, opts = {}) { __upSymbCls(m, c, opts = {}) {
const toUp = this.__getSymbToUp(opts); const toUp = this.__getSymbToUp(opts);
this.__logSymbol('classes', toUp, { opts }); this.__logSymbol('classes', toUp, { opts });
toUp.forEach(child => { toUp.forEach((child) => {
// This will propagate the change up to __upSymbProps // This will propagate the change up to __upSymbProps
child.set('classes', this.get('classes'), { fromInstance: this }); child.set('classes', this.get('classes'), { fromInstance: this });
}); });
@ -822,11 +822,11 @@ export default class Component extends Model.extend(Styleable) {
if (!o) { if (!o) {
const toUp = this.__getSymbToUp({ const toUp = this.__getSymbToUp({
...toUpOpts, ...toUpOpts,
changed: 'components:reset' changed: 'components:reset',
}); });
this.__logSymbol('reset', toUp, { components: m.models }); this.__logSymbol('reset', toUp, { components: m.models });
toUp.forEach(symb => { toUp.forEach((symb) => {
const newMods = m.models.map(mod => mod.clone({ symbol: 1 })); const newMods = m.models.map((mod) => mod.clone({ symbol: 1 }));
symb.components().reset(newMods, { fromInstance: this, ...c }); symb.components().reset(newMods, { fromInstance: this, ...c });
}); });
// Add // Add
@ -835,7 +835,7 @@ export default class Component extends Model.extend(Styleable) {
const isMainSymb = !!this.__getSymbols(); const isMainSymb = !!this.__getSymbols();
const toUp = this.__getSymbToUp({ const toUp = this.__getSymbToUp({
...toUpOpts, ...toUpOpts,
changed: 'components:add' changed: 'components:add',
}); });
if (toUp.length) { if (toUp.length) {
const addSymb = m.__getSymbol(); const addSymb = m.__getSymbol();
@ -847,14 +847,14 @@ export default class Component extends Model.extend(Styleable) {
!isTemp && !isTemp &&
this.__logSymbol('add', toUp, { this.__logSymbol('add', toUp, {
opts: o, opts: o,
addedInstances: addedInstances.map(c => c.cid), addedInstances: addedInstances.map((c) => c.cid),
added: m.cid added: m.cid,
}); });
// Here, before appending a new symbol, I have to ensure there are no previously // Here, before appending a new symbol, I have to ensure there are no previously
// created symbols (eg. used mainly when drag components around) // created symbols (eg. used mainly when drag components around)
toUp.forEach(symb => { toUp.forEach((symb) => {
const symbTop = symb.__getSymbTop(); const symbTop = symb.__getSymbTop();
const symbPrev = addedInstances.filter(addedInst => { const symbPrev = addedInstances.filter((addedInst) => {
const addedTop = addedInst.__getSymbTop({ prev: 1 }); const addedTop = addedInst.__getSymbTop({ prev: 1 });
return symbTop && addedTop && addedTop === symbTop; return symbTop && addedTop && addedTop === symbTop;
})[0]; })[0];
@ -870,7 +870,7 @@ export default class Component extends Model.extend(Styleable) {
!o.temporary && !o.temporary &&
symb.set( symb.set(
keySymbols, keySymbols,
symb.__getSymbols().filter(i => i !== m) symb.__getSymbols().filter((i) => i !== m)
); );
// Propagate remove only if the component is an inner symbol // Propagate remove only if the component is an inner symbol
@ -880,7 +880,7 @@ export default class Component extends Model.extend(Styleable) {
const parent = m.parent(); const parent = m.parent();
const opts = { fromInstance: m, ...o }; const opts = { fromInstance: m, ...o };
const isSymbNested = m.__isSymbolNested(); const isSymbNested = m.__isSymbolNested();
let toUpFn = symb => { let toUpFn = (symb) => {
const symbPrnt = symb.parent(); const symbPrnt = symb.parent();
symbPrnt && !symbPrnt.__isSymbOvrd(changed) && symb.remove(opts); symbPrnt && !symbPrnt.__isSymbOvrd(changed) && symb.remove(opts);
}; };
@ -891,7 +891,7 @@ export default class Component extends Model.extend(Styleable) {
if (isSymbNested) { if (isSymbNested) {
toUp = parent.__getSymbToUp({ ...toUpOpts, changed }); toUp = parent.__getSymbToUp({ ...toUpOpts, changed });
toUpFn = symb => { toUpFn = (symb) => {
const toRemove = symb.components().at(index); const toRemove = symb.components().at(index);
toRemove && toRemove.remove({ fromInstance: parent, ...opts }); toRemove && toRemove.remove({ fromInstance: parent, ...opts });
}; };
@ -901,7 +901,7 @@ export default class Component extends Model.extend(Styleable) {
this.__logSymbol('remove', toUp, { this.__logSymbol('remove', toUp, {
opts: o, opts: o,
removed: m.cid, removed: m.cid,
isSymbNested isSymbNested,
}); });
toUp.forEach(toUpFn); toUp.forEach(toUpFn);
} }
@ -955,7 +955,7 @@ export default class Component extends Model.extend(Styleable) {
this.__loadTraits(); this.__loadTraits();
const attrs = { ...this.get('attributes') }; const attrs = { ...this.get('attributes') };
const traits = this.get('traits'); const traits = this.get('traits');
traits.each(trait => { traits.each((trait) => {
if (!trait.get('changeProp')) { if (!trait.get('changeProp')) {
const name = trait.get('name'); const name = trait.get('name');
const value = trait.getInitValue(); const value = trait.getInitValue();
@ -975,8 +975,8 @@ export default class Component extends Model.extend(Styleable) {
this.off(...toListen); this.off(...toListen);
const prevProps = this.previous(prop) || []; const prevProps = this.previous(prop) || [];
const newProps = this.get(prop) || []; const newProps = this.get(prop) || [];
const prevPropsEv = prevProps.map(e => `change:${e}`).join(' '); const prevPropsEv = prevProps.map((e) => `change:${e}`).join(' ');
const newPropsEv = newProps.map(e => `change:${e}`).join(' '); const newPropsEv = newProps.map((e) => `change:${e}`).join(' ');
prevPropsEv && this.off(prevPropsEv, this.__scriptPropsChange); prevPropsEv && this.off(prevPropsEv, this.__scriptPropsChange);
newPropsEv && this.on(newPropsEv, this.__scriptPropsChange); newPropsEv && this.on(newPropsEv, this.__scriptPropsChange);
this.on(...toListen); this.on(...toListen);
@ -1005,7 +1005,7 @@ export default class Component extends Model.extend(Styleable) {
*/ */
append(components, opts = {}) { append(components, opts = {}) {
const compArr = isArray(components) ? components : [components]; const compArr = isArray(components) ? components : [components];
const toAppend = compArr.map(comp => { const toAppend = compArr.map((comp) => {
if (isString(comp)) { if (isString(comp)) {
return comp; return comp;
} else { } else {
@ -1111,29 +1111,29 @@ export default class Component extends Model.extend(Styleable) {
if (model.collection) { if (model.collection) {
tb.push({ tb.push({
attributes: { class: 'fa fa-arrow-up' }, attributes: { class: 'fa fa-arrow-up' },
command: ed => ed.runCommand('core:component-exit', { force: 1 }) command: (ed) => ed.runCommand('core:component-exit', { force: 1 }),
}); });
} }
if (model.get('draggable')) { if (model.get('draggable')) {
tb.push({ tb.push({
attributes: { attributes: {
class: `fa fa-arrows ${ppfx}no-touch-actions`, class: `fa fa-arrows ${ppfx}no-touch-actions`,
draggable: true draggable: true,
}, },
//events: hasDnd(this.em) ? { dragstart: 'execCommand' } : '', //events: hasDnd(this.em) ? { dragstart: 'execCommand' } : '',
command: 'tlb-move' command: 'tlb-move',
}); });
} }
if (model.get('copyable')) { if (model.get('copyable')) {
tb.push({ tb.push({
attributes: { class: 'fa fa-clone' }, attributes: { class: 'fa fa-clone' },
command: 'tlb-clone' command: 'tlb-clone',
}); });
} }
if (model.get('removable')) { if (model.get('removable')) {
tb.push({ tb.push({
attributes: { class: 'fa fa-trash-o' }, attributes: { class: 'fa fa-trash-o' },
command: 'tlb-delete' command: 'tlb-delete',
}); });
} }
model.set('toolbar', tb); model.set('toolbar', tb);
@ -1149,7 +1149,7 @@ export default class Component extends Model.extend(Styleable) {
traits.setTarget(this); traits.setTarget(this);
if (traitsI.length) { if (traitsI.length) {
traitsI.forEach(tr => tr.attributes && delete tr.attributes.value); traitsI.forEach((tr) => tr.attributes && delete tr.attributes.value);
traits.add(traitsI); traits.add(traitsI);
} }
@ -1197,7 +1197,7 @@ export default class Component extends Model.extend(Styleable) {
*/ */
getTrait(id) { getTrait(id) {
return ( return (
this.getTraits().filter(trait => { this.getTraits().filter((trait) => {
return trait.get('id') === id || trait.get('name') === id; return trait.get('id') === id || trait.get('name') === id;
})[0] || null })[0] || null
); );
@ -1245,7 +1245,7 @@ export default class Component extends Model.extend(Styleable) {
*/ */
removeTrait(id) { removeTrait(id) {
const ids = isArray(id) ? id : [id]; const ids = isArray(id) ? id : [id];
const toRemove = ids.map(id => this.getTrait(id)); const toRemove = ids.map((id) => this.getTrait(id));
const traits = this.get('traits'); const traits = this.get('traits');
const removed = toRemove.length ? traits.remove(toRemove) : []; const removed = toRemove.length ? traits.remove(toRemove) : [];
this.em?.trigger('component:toggled'); this.em?.trigger('component:toggled');
@ -1284,7 +1284,7 @@ export default class Component extends Model.extend(Styleable) {
const clm = em && em.get('SelectorManager'); const clm = em && em.get('SelectorManager');
if (!clm) return; if (!clm) return;
if (arr.models) return [...arr.models]; if (arr.models) return [...arr.models];
arr.forEach(val => res.push(clm.add(val))); arr.forEach((val) => res.push(clm.add(val)));
return res; return res;
} }
@ -1326,7 +1326,7 @@ export default class Component extends Model.extend(Styleable) {
// Clone component specific rules // Clone component specific rules
const newId = `#${cloned.getId()}`; const newId = `#${cloned.getId()}`;
const rulesToClone = cssc ? cssc.getRules(`#${id}`) : []; const rulesToClone = cssc ? cssc.getRules(`#${id}`) : [];
rulesToClone.forEach(rule => { rulesToClone.forEach((rule) => {
const newRule = rule.clone(); const newRule = rule.clone();
newRule.set('selectors', [newId]); newRule.set('selectors', [newId]);
cssc.getAll().add(newRule); cssc.getAll().add(newRule);
@ -1356,11 +1356,11 @@ export default class Component extends Model.extend(Styleable) {
// Inverted, cloned is the instance, the origin is the main symbol // Inverted, cloned is the instance, the origin is the main symbol
this.set(keySymbols, [cloned]); this.set(keySymbols, [cloned]);
cloned.set(keySymbol, this); cloned.set(keySymbol, this);
[this, cloned].map(i => i.__initSymb()); [this, cloned].map((i) => i.__initSymb());
} else { } else {
// Cloned becomes the main symbol // Cloned becomes the main symbol
cloned.set(keySymbols, [this]); cloned.set(keySymbols, [this]);
[this, cloned].map(i => i.__initSymb()); [this, cloned].map((i) => i.__initSymb());
this.set(keySymbol, cloned); this.set(keySymbol, cloned);
} }
} }
@ -1482,7 +1482,7 @@ export default class Component extends Model.extend(Styleable) {
const cmps = this.components(); const cmps = this.components();
return !cmps.length return !cmps.length
? this.get('content') ? this.get('content')
: cmps.map(c => c.toHTML(opts)).join(''); : cmps.map((c) => c.toHTML(opts)).join('');
} }
/** /**
@ -1516,8 +1516,8 @@ export default class Component extends Model.extend(Styleable) {
const symbols = obj[keySymbols]; const symbols = obj[keySymbols];
if (symbols && isArray(symbols)) { if (symbols && isArray(symbols)) {
obj[keySymbols] = symbols obj[keySymbols] = symbols
.filter(i => i) .filter((i) => i)
.map(i => (i.getId ? i.getId() : i)); .map((i) => (i.getId ? i.getId() : i));
} }
if (symbol && !isString(symbol)) { if (symbol && !isString(symbol)) {
obj[keySymbol] = symbol.getId(); obj[keySymbol] = symbol.getId();
@ -1548,13 +1548,13 @@ export default class Component extends Model.extend(Styleable) {
delete obj.type; delete obj.type;
} }
forEach(['attributes', 'style'], prop => { forEach(['attributes', 'style'], (prop) => {
if (isEmpty(defaults[prop]) && isEmpty(obj[prop])) { if (isEmpty(defaults[prop]) && isEmpty(obj[prop])) {
delete obj[prop]; delete obj[prop];
} }
}); });
forEach(['classes', 'components'], prop => { forEach(['classes', 'components'], (prop) => {
if (!obj[prop] || (isEmpty(defaults[prop]) && !obj[prop].length)) { if (!obj[prop] || (isEmpty(defaults[prop]) && !obj[prop].length)) {
delete obj[prop]; delete obj[prop];
} }
@ -1605,7 +1605,7 @@ export default class Component extends Model.extend(Styleable) {
let { view, views } = this; let { view, views } = this;
if (frame) { if (frame) {
view = views.filter(view => view._getFrame() === frame.view)[0]; view = views.filter((view) => view._getFrame() === frame.view)[0];
} }
return view; return view;
@ -1686,7 +1686,7 @@ export default class Component extends Model.extend(Styleable) {
this.__propSelfToParent({ this.__propSelfToParent({
component: this, component: this,
changed: { [property]: item }, changed: { [property]: item },
options: args[2] || args[1] || {} options: args[2] || args[1] || {},
}); });
} }
@ -1702,7 +1702,7 @@ export default class Component extends Model.extend(Styleable) {
onAll(clb) { onAll(clb) {
if (isFunction(clb)) { if (isFunction(clb)) {
clb(this); clb(this);
this.components().forEach(model => model.onAll(clb)); this.components().forEach((model) => model.onAll(clb));
} }
return this; return this;
} }
@ -1719,7 +1719,7 @@ export default class Component extends Model.extend(Styleable) {
opts.root && this.components(''); opts.root && this.components('');
}; };
const rmOpts = { ...opts }; const rmOpts = { ...opts };
[this, em].map(i => [this, em].map((i) =>
i.trigger('component:remove:before', this, remove, rmOpts) i.trigger('component:remove:before', this, remove, rmOpts)
); );
!rmOpts.abort && remove(); !rmOpts.abort && remove();
@ -1803,11 +1803,11 @@ export default class Component extends Model.extend(Styleable) {
* @return {Object} * @return {Object}
* @private * @private
*/ */
Component.isComponent = el => { Component.isComponent = (el) => {
return { tagName: toLowerCase(el.tagName) }; return { tagName: toLowerCase(el.tagName) };
}; };
Component.ensureInList = model => { Component.ensureInList = (model) => {
const list = Component.getList(model); const list = Component.getList(model);
const id = model.getId(); const id = model.getId();
const current = list[id]; const current = list[id];
@ -1822,7 +1822,7 @@ Component.ensureInList = model => {
list[nextId] = model; list[nextId] = model;
} }
model.components().forEach(i => Component.ensureInList(i)); model.components().forEach((i) => Component.ensureInList(i));
}; };
/** /**
@ -1850,7 +1850,7 @@ Component.createId = (model, opts = {}) => {
return nextId; return nextId;
}; };
Component.getNewId = list => { Component.getNewId = (list) => {
const count = Object.keys(list).length; const count = Object.keys(list).length;
// Testing 1000000 components with `+ 2` returns 0 collisions // Testing 1000000 components with `+ 2` returns 0 collisions
const ilen = count.toString().length + 2; const ilen = count.toString().length + 2;
@ -1883,8 +1883,9 @@ Component.getIncrementId = (id, list, opts = {}) => {
* The list of components is taken from the Components module. * The list of components is taken from the Components module.
* Initially, the list, was set statically on the Component object but it was * Initially, the list, was set statically on the Component object but it was
* not ok, as it was shared between multiple editor instances * not ok, as it was shared between multiple editor instances
* @private
*/ */
Component.getList = model => { Component.getList = (model) => {
const { opt = {} } = model; const { opt = {} } = model;
const { domc, em } = opt; const { domc, em } = opt;
const dm = domc || (em && em.get('DomComponents')); const dm = domc || (em && em.get('DomComponents'));
@ -1895,11 +1896,12 @@ Component.getList = model => {
* This method checks, for each parsed component and style object * This method checks, for each parsed component and style object
* (are not Components/CSSRules yet), for duplicated id and fixes them * (are not Components/CSSRules yet), for duplicated id and fixes them
* This method is used in Components.js just after the parsing * This method is used in Components.js just after the parsing
* @private
*/ */
Component.checkId = (components, styles = [], list = {}, opts = {}) => { Component.checkId = (components, styles = [], list = {}, opts = {}) => {
const comps = isArray(components) ? components : [components]; const comps = isArray(components) ? components : [components];
const { keepIds = [] } = opts; const { keepIds = [] } = opts;
comps.forEach(comp => { comps.forEach((comp) => {
const { attributes = {}, components } = comp; const { attributes = {}, components } = comp;
const { id } = attributes; const { id } = attributes;
@ -1909,7 +1911,7 @@ Component.checkId = (components, styles = [], list = {}, opts = {}) => {
attributes.id = newId; attributes.id = newId;
// Update passed styles // Update passed styles
isArray(styles) && isArray(styles) &&
styles.forEach(style => { styles.forEach((style) => {
const { selectors } = style; const { selectors } = style;
selectors.forEach((sel, idx) => { selectors.forEach((sel, idx) => {
if (sel === `#${id}`) selectors[idx] = `#${newId}`; if (sel === `#${id}`) selectors[idx] = `#${newId}`;
@ -1921,7 +1923,7 @@ Component.checkId = (components, styles = [], list = {}, opts = {}) => {
}); });
}; };
Component.getDefaults = function() { Component.getDefaults = function () {
return result(this.prototype, 'defaults'); return result(this.prototype, 'defaults');
}; };
@ -1964,5 +1966,5 @@ Component.prototype.defaults = {
[keySymbols]: 0, [keySymbols]: 0,
[keySymbolOvrd]: 0, [keySymbolOvrd]: 0,
_undo: true, _undo: true,
_undoexc: ['status', 'open'] _undoexc: ['status', 'open'],
}; };

Write Preview
Loading…
Cancel
Save