diff --git a/src/selector_manager/index.js b/src/selector_manager/index.js index bfded716d..9c66ca6d0 100644 --- a/src/selector_manager/index.js +++ b/src/selector_manager/index.js @@ -181,7 +181,7 @@ export default () => { select(value, opts = {}) { const targets = Array.isArray(value) ? value : [value]; - const toSelect = this.em.get('StyleManager').setTarget(targets, opts); + const toSelect = this.em.get('StyleManager').select(targets, opts); const selTags = this.selectorTags; const res = toSelect .filter(i => i) diff --git a/src/style_manager/index.js b/src/style_manager/index.js index 7a97da58c..0308d39ff 100644 --- a/src/style_manager/index.js +++ b/src/style_manager/index.js @@ -588,14 +588,15 @@ export default () => { }, /** - * Create new property from type + * Create new UI property from type (Experimental) * @param {string} id Type ID * @param {Object} [options={}] Options * @param {Object} [options.model={}] Custom model object * @param {Object} [options.view={}] Custom view object * @return {PropertyView} + * @private * @example - * const propView = styleManager.createType('integer', { + * const propView = styleManager.createType('number', { * model: {units: ['px', 'rem']} * }); * propView.render(); @@ -615,19 +616,6 @@ export default () => { } }, - setTarget(target, opts) { - return SectView?.setTarget(target, opts); - }, - - getTargets() { - const { propTarget } = SectView || {}; - return (propTarget && propTarget.targets) || []; - }, - - getEmitter() { - return SectView.propTarget; - }, - /** * Render sectors and properties * @return {HTMLElement} @@ -638,10 +626,9 @@ export default () => { const el = SectView && SectView.el; SectView = new SectorsView({ el, - collection: sectors, - target: em, em, config, + collection: sectors, module: this, }); return SectView.render().el; diff --git a/src/style_manager/view/SectorsView.js b/src/style_manager/view/SectorsView.js index 89d50dbd6..621291a65 100644 --- a/src/style_manager/view/SectorsView.js +++ b/src/style_manager/view/SectorsView.js @@ -1,37 +1,24 @@ -import Backbone from 'backbone'; -import { extend, isString, isArray } from 'underscore'; +import { View } from 'common'; import { appendAtIndex } from 'utils/dom'; import SectorView from './SectorView'; -export default Backbone.View.extend({ +export default class SectorsView extends View { initialize(o = {}) { - const config = o.config || {}; + const { module, em, config } = o; + const coll = this.collection; this.pfx = config.stylePrefix || ''; this.ppfx = config.pStylePrefix || ''; - this.target = o.target || {}; this.config = config; - const { module, em } = o; this.module = module; this.em = em; - - // The target that will emit events for properties - const target = {}; - extend(target, Backbone.Events); - const body = document.body; - const dummy = document.createElement(`el-${new Date().getTime()}`); - body.appendChild(dummy); - target.computedDefault = { ...window.getComputedStyle(dummy) }; - body.removeChild(dummy); - this.propTarget = target; - const coll = this.collection; this.listenTo(coll, 'add', this.addTo); this.listenTo(coll, 'reset', this.render); - }, + } remove() { - Backbone.View.prototype.remove.apply(this, arguments); - ['target', 'config', 'propTarget'].forEach(i => (this[i] = {})); - }, + View.prototype.remove.apply(this, arguments); + ['config', 'module', 'em'].forEach(i => (this[i] = {})); + } /** * Add to collection @@ -39,53 +26,9 @@ export default Backbone.View.extend({ * @return {Object} * @private * */ - addTo(model, coll, opts = {}) { + addTo(model, c, opts = {}) { this.addToCollection(model, null, opts); - }, - - /** - * Select different target for the Style Manager. - * It could be a Component, CSSRule, or a string of any CSS selector - * @param {Component|CSSRule|String|Array} target - * @return {Array} Array of Components/CSSRules - */ - setTarget(target, opts = {}) { - const em = this.target; - const trgs = isArray(target) ? target : [target]; - const { targetIsClass, stylable } = opts; - const models = []; - - trgs.forEach(target => { - let model = target; - - if (isString(target)) { - let rule; - const rules = em.get('CssComposer').getAll(); - - if (targetIsClass) { - rule = rules.filter(rule => rule.get('selectors').getFullString() === target)[0]; - } - - if (!rule) { - rule = rules.filter(rule => rule.get('selectorsAdd') === target)[0]; - } - - if (!rule) { - rule = rules.add({ selectors: [], selectorsAdd: target }); - } - - stylable && rule.set({ stylable }); - model = rule; - } - - models.push(model); - }); - - const pt = this.propTarget; - pt.targets = models; - pt.trigger('update', { targets: models }); - return models; - }, + } /** * Add new object to collection @@ -95,21 +38,13 @@ export default Backbone.View.extend({ * @private * */ addToCollection(model, fragmentEl, opts = {}) { - const { pfx, target, propTarget, config, el } = this; + const { config, el } = this; const appendTo = fragmentEl || el; - const rendered = new SectorView({ - model, - id: `${pfx}${model.get('id')}`, - name: model.get('name'), - properties: model.get('properties'), - target, - propTarget, - config, - }).render().el; + const rendered = new SectorView({ model, config }).render().el; appendAtIndex(appendTo, rendered, opts.at); return rendered; - }, + } render() { const { $el, pfx, ppfx } = this; @@ -119,5 +54,5 @@ export default Backbone.View.extend({ $el.append(frag); $el.addClass(`${pfx}sectors ${ppfx}one-bg ${ppfx}two-color`); return this; - }, -}); + } +}