diff --git a/.eslintrc b/.eslintrc index d00afacfb..534a1109a 100644 --- a/.eslintrc +++ b/.eslintrc @@ -4,7 +4,7 @@ "node": true }, "parserOptions": { - "ecmaVersion": 2018, + "ecmaVersion": 2020, "sourceType": "module" }, "rules": { diff --git a/src/i18n/locale/en.js b/src/i18n/locale/en.js index d06c799f2..0e99bd056 100644 --- a/src/i18n/locale/en.js +++ b/src/i18n/locale/en.js @@ -86,6 +86,13 @@ export default { properties: { // float: 'Float', } + // Translate options in style properties + // options: { + // float: { // Id of the property + // ... + // left: 'Left', // {option id}: {Option label} + // } + // } }, traitManager: { empty: 'Select an element before using Trait Manager', diff --git a/src/style_manager/model/PropertyRadio.js b/src/style_manager/model/PropertyRadio.js index c99414229..5b3099578 100644 --- a/src/style_manager/model/PropertyRadio.js +++ b/src/style_manager/model/PropertyRadio.js @@ -1,37 +1,69 @@ import Property from './Property'; -export default Property.extend({ - defaults: () => ({ - ...Property.prototype.defaults, - // Array of options, eg. [{name: 'Label ', value: '100'}] - options: [], - full: 1 - }), - - initialize(...args) { - Property.prototype.initialize.apply(this, args); - this.listenTo(this, 'change:options', this.onOptionChange); - }, - - onOptionChange() { - this.set('list', this.get('options')); - }, +export default class PropertyRadio extends Property { + defaults() { + return { + ...Property.prototype.defaults, + options: [], // Array of options, eg. [{ id: '100', label: 'Set 100' }] + full: 1 + }; + } + /** + * Get available options. + * @returns {Array} Array of options + */ getOptions() { + // support old list property const { options, list } = this.attributes; return options && options.length ? options : list; - }, + } - setOptions(opts = []) { - this.set('options', opts); + /** + * Update options. + * @param {Array} value Array of options, eg. `[{ id: 'val-1', label: 'Value 1' }]` + */ + setOptions(value = []) { + this.set('options', value); return this; - }, + } - addOption(opt) { - if (opt) { + /** + * Add new option. + * @param {Object} value Option object, eg. `{ id: 'val-1', label: 'Value 1' }` + */ + addOption(value) { + if (value) { const opts = this.getOptions(); - this.setOptions([...opts, opt]); + this.setOptions([...opts, value]); } return this; } -}); + + /** + * Get option label. + * @param {String} id Option id + * @param {Object} [opts={}] Options + * @param {Boolean} [opts.locale=true] Use the locale string from i18n module + * @returns {String} Option label + */ + getOptionLabel(id, opts = {}) { + const { locale = true } = opts; + const options = this.getOptions(); + const option = options.filter(o => o.id === id || o.value === id)[0] || {}; + const label = option.label || option.name || id; + const propId = this.getId(); + return ( + (locale && this.em?.t(`styleManager.options.${propId}.${id}`)) || label + ); + } + + initialize(...args) { + Property.prototype.initialize.apply(this, args); + this.listenTo(this, 'change:options', this.__onOptionChange); + } + + __onOptionChange() { + this.set('list', this.get('options')); + } +} diff --git a/src/style_manager/view/PropertyRadioView.js b/src/style_manager/view/PropertyRadioView.js index 0958b4ace..90961a28c 100644 --- a/src/style_manager/view/PropertyRadioView.js +++ b/src/style_manager/view/PropertyRadioView.js @@ -2,7 +2,6 @@ import PropertyView from './PropertyView'; export default PropertyView.extend({ templateInput() { - const pfx = this.pfx; const ppfx = this.ppfx; return `
@@ -11,32 +10,30 @@ export default PropertyView.extend({ }, onRender() { - const pfx = this.pfx; - const ppfx = this.ppfx; + const { pfx, ppfx, model } = this; const itemCls = `${ppfx}radio-item-label`; - const model = this.model; const prop = model.get('property'); const options = model.get('list') || model.get('options') || []; - const { cid } = model; const clsInput = `${pfx}radio ${pfx}radio-${prop}`; + const { cid } = model; if (!this.input) { if (options && options.length) { let inputStr = ''; - options.forEach(el => { - let cl = el.className ? `${el.className} ${pfx}icon ${itemCls}` : ''; - let id = `${prop}-${el.value}-${cid}`; - let labelTxt = el.name || el.value; - let titleAttr = el.title ? `title="${el.title}"` : ''; + options.forEach(opt => { + const cls = opt.className + ? `${opt.className} ${pfx}icon ${itemCls}` + : ''; + const id = opt.id || opt.value; + const elId = `${prop}-${id}-${cid}`; + const labelEl = cls ? '' : model.getOptionLabel(id); + const titleAttr = opt.title ? `title="${opt.title}"` : ''; inputStr += `
- - + +
`; });