From 8025b95a645907574389e950f32950190ceb602c Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Thu, 9 Nov 2023 00:40:05 +0400 Subject: [PATCH] Update Selectors tags in selector manager. --- src/dom_components/model/Component.ts | 2 +- src/dom_components/view/ComponentView.ts | 2 +- src/selector_manager/model/Selector.ts | 22 ++++++++++++---- src/selector_manager/model/Selectors.ts | 13 +++------- src/selector_manager/view/ClassTagView.ts | 31 +++++++++++++---------- 5 files changed, 40 insertions(+), 30 deletions(-) diff --git a/src/dom_components/model/Component.ts b/src/dom_components/model/Component.ts index f8c9c8866..c2a43c915 100644 --- a/src/dom_components/model/Component.ts +++ b/src/dom_components/model/Component.ts @@ -655,7 +655,7 @@ export default class Component extends StyleableModel { if (opts.noClass) { delete attributes.class; } else { - this.classes.forEach(cls => classes.push(isString(cls) ? cls : cls.get('name'))); + this.classes.forEach(cls => classes.push(isString(cls) ? cls : cls.getName())); classes.length && (attributes.class = classes.join(' ')); } diff --git a/src/dom_components/view/ComponentView.ts b/src/dom_components/view/ComponentView.ts index 964b70656..e33ca31ea 100644 --- a/src/dom_components/view/ComponentView.ts +++ b/src/dom_components/view/ComponentView.ts @@ -211,7 +211,7 @@ Component> { importClasses() { const { em, model } = this; const sm = em.Selectors; - sm && model.classes.forEach(s => sm.add(s.get('name'))); + sm && model.classes.forEach(s => sm.add(s.getName())); } /** diff --git a/src/selector_manager/model/Selector.ts b/src/selector_manager/model/Selector.ts index 38b957f87..4ce46c878 100644 --- a/src/selector_manager/model/Selector.ts +++ b/src/selector_manager/model/Selector.ts @@ -23,7 +23,7 @@ export interface SelectorProps { * @property {Boolean} [private=false] If true, it can't be seen by the Style Manager, but it will be rendered in the canvas and in export code. * @property {Boolean} [protected=false] If true, it can't be removed from the attached component. */ -export default class Selector extends Model { +export default class Selector extends Model { defaults() { return { name: '', @@ -57,7 +57,7 @@ export default class Selector extends Model { this.set('label', name); } - const namePreEsc = this.get('name'); + const namePreEsc = this.get('name')!; const { escapeName } = config; const nameEsc = escapeName ? escapeName(namePreEsc) : Selector.escapeName(namePreEsc); this.set('name', nameEsc); @@ -101,6 +101,18 @@ export default class Selector extends Model { return this.getFullName(); } + /** + * Get selector name. + * @returns {String} + * @example + * // Given such selector: { name: 'my-selector', label: 'My selector' } + * console.log(selector.getLabel()); + * // -> `my-selector` + */ + getName() { + return this.get('name') || ''; + } + /** * Get selector label. * @returns {String} @@ -110,7 +122,7 @@ export default class Selector extends Model { * // -> `My selector` */ getLabel() { - return this.get('label'); + return this.get('label') || ''; } /** @@ -130,8 +142,8 @@ export default class Selector extends Model { * Get selector active state. * @returns {Boolean} */ - getActive(): boolean { - return this.get('active'); + getActive() { + return !!this.get('active'); } /** diff --git a/src/selector_manager/model/Selectors.ts b/src/selector_manager/model/Selectors.ts index add8d633f..d1f5b4a22 100644 --- a/src/selector_manager/model/Selectors.ts +++ b/src/selector_manager/model/Selectors.ts @@ -17,22 +17,17 @@ export default class Selectors extends Collection { } getStyleable() { - return filter( - this.models, - (item) => item.get('active') && !item.get('private') - ); + return filter(this.models, item => item.getActive() && !item.get('private')); } getValid({ noDisabled }: any = {}) { - return filter(this.models, (item) => !item.get('private')).filter((item) => - noDisabled ? item.get('active') : 1 - ); + return filter(this.models, item => !item.get('private')).filter(item => (noDisabled ? item.get('active') : 1)); } getFullString(collection?: Selector[] | null, opts: { sort?: boolean } = {}) { const result: string[] = []; const coll = collection || this; - coll.forEach((selector) => result.push(selector.getFullName(opts))); + coll.forEach(selector => result.push(selector.getFullName(opts))); opts.sort && result.sort(); return result.join('').trim(); } @@ -40,7 +35,7 @@ export default class Selectors extends Collection { getFullName(opts: any = {}) { const { combination, array } = opts; let result: string[] = []; - const sels = this.map((s) => s.getFullName(opts)).sort(); + const sels = this.map(s => s.getFullName(opts)).sort(); if (combination) { sels.forEach((sel, n) => { diff --git a/src/selector_manager/view/ClassTagView.ts b/src/selector_manager/view/ClassTagView.ts index 5e295259c..d83887346 100644 --- a/src/selector_manager/view/ClassTagView.ts +++ b/src/selector_manager/view/ClassTagView.ts @@ -2,6 +2,8 @@ import { View } from '../../common'; import Selector from '../model/Selector'; import html from '../../utils/html'; import EditorModel from '../../editor/model/Editor'; +import SelectorManager from '..'; +import { SelectorManagerConfig } from '../config/config'; const inputProp = 'contentEditable'; @@ -13,7 +15,7 @@ export default class ClassTagView extends View { return html` ${label} - $${config.iconTagRemove} + $${config.iconTagRemove!} `; } @@ -25,11 +27,11 @@ export default class ClassTagView extends View { 'focusout [data-tag-name]': 'endEditTag', }; } - config: any; - module: any; + config: SelectorManagerConfig; + module: SelectorManager; coll: any; - pfx: any; - ppfx: any; + pfx: string; + ppfx: string; em: EditorModel; inputEl?: HTMLElement; @@ -64,7 +66,6 @@ export default class ClassTagView extends View { startEditTag() { const { em } = this; const inputEl = this.getInputEl(); - inputEl; inputEl[inputProp] = 'true'; inputEl.focus(); em?.setEditing(true); @@ -84,7 +85,7 @@ export default class ClassTagView extends View { em?.setEditing(false); if (sm && sm.rename(model, label) !== model) { - inputEl.innerText = model.get('label'); + inputEl.innerText = model.getLabel(); } } @@ -94,7 +95,7 @@ export default class ClassTagView extends View { */ changeStatus() { const { model } = this; - model.set('active', !model.get('active')); + model.set('active', !model.getActive()); } /** @@ -116,19 +117,21 @@ export default class ClassTagView extends View { const $chk = $el.find('[data-tag-status]'); if (model.get('active')) { - $chk.html(iconTagOn); + $chk.html(iconTagOn!); $el.removeClass('opac50'); } else { - $chk.html(iconTagOff); + $chk.html(iconTagOff!); $el.addClass('opac50'); } } render() { - const pfx = this.pfx; - const ppfx = this.ppfx; - this.$el.html(this.template()); - this.$el.attr('class', `${pfx}tag ${ppfx}three-bg`); + const { pfx, ppfx, $el, model } = this; + const mainCls = `${pfx}tag`; + const classes = [`${mainCls} ${ppfx}three-bg`]; + model.get('protected') && classes.push(`${mainCls}-protected`); + $el.html(this.template()); + $el.attr('class', classes.join(' ')); this.updateStatus(); return this; }