diff --git a/src/commands/view/OpenTraitManager.js b/src/commands/view/OpenTraitManager.js index c2ab0f413..f90ba2964 100644 --- a/src/commands/view/OpenTraitManager.js +++ b/src/commands/view/OpenTraitManager.js @@ -5,6 +5,7 @@ const $ = Backbone.$; export default { run(editor, sender) { this.sender = sender; + const em = editor.getModel(); var config = editor.Config; var pfx = config.stylePrefix; @@ -18,11 +19,13 @@ export default { this.$cn2 = $('
'); this.$cn.append(this.$cn2); this.$header = $('
').append( - `
${confTm.textNoElement}
` + `
${em.t( + 'traitManager.empty' + )}
` ); this.$cn.append(this.$header); this.$cn2.append( - `
${confTm.labelContainer}
` + `
${em.t('traitManager.label')}
` ); this.$cn2.append(tmView.render().el); var panels = editor.Panels; diff --git a/src/i18n/index.js b/src/i18n/index.js index 1d61962d5..1209fb054 100644 --- a/src/i18n/index.js +++ b/src/i18n/index.js @@ -28,7 +28,7 @@ * * @module I18n */ -import { keys, isUndefined } from 'underscore'; +import { keys, isUndefined, isString } from 'underscore'; import config from './config'; export default () => { @@ -188,7 +188,8 @@ export default () => { !result && this._debug(`'${key}' i18n key not found in '${locale}' lang`, opts); - result = result ? this._addParams(result, param) : result; + result = + result && isString(result) ? this._addParams(result, param) : result; return result; }, diff --git a/src/i18n/locale/en.js b/src/i18n/locale/en.js index 8ea5ec07a..1c33d6d33 100644 --- a/src/i18n/locale/en.js +++ b/src/i18n/locale/en.js @@ -1,3 +1,5 @@ +const traitInputAttr = { placeholder: 'eg. Text here' }; + export default { assets: { addButton: 'Add image', @@ -65,5 +67,29 @@ export default { properties: { // float: 'Float', } + }, + traitManager: { + empty: 'Select an element before using Trait Manager', + label: 'Component settings', + traits: { + // The core library generates the name by their `name` property + labels: { + // title: 'Title', + }, + // In a simple trait, like text input, these are used on input attributes + attributes: { + title: traitInputAttr, + alt: traitInputAttr, + id: traitInputAttr, + href: { placeholder: 'eg. https://google.com' } + }, + // In a trait like select, these are used to translate option names + options: { + target: { + '': 'This window', + _blank: 'New window' + } + } + } } }; diff --git a/src/i18n/locale/tr.js b/src/i18n/locale/tr.js index d2075d07a..892819d95 100644 --- a/src/i18n/locale/tr.js +++ b/src/i18n/locale/tr.js @@ -130,48 +130,12 @@ export default { } }, traitManager: { - noEl: 'Özelliklerini düzenlemek istediğiniz öğeyi seçiniz', - labelContainer: 'Bileşen Özellikleri', - attributes: { - provider: 'Sağlayıcı', - src: 'Kaynak', - poster: 'Poster', - autoplay: 'Otomatik Oynat', - loop: 'Döngü', - controls: 'Kontroller', - id: 'ID', - title: 'Başlık', - alt: 'Alt', - href: 'Bağlantı', - target: 'Hedef', - related: 'İlgilileri Göster', - modest: 'Modest', - startfrom: 'Başlangıç Tarihi', - endText: 'Bitiş Yazısı', - address: 'Adres', - mapType: 'Harita Tipi', - zoom: 'Yakınlaşma', - type: 'Tip', - text: 'Metin', - name: 'İsim', - value: 'Değer', - required: 'Zorunlu mu?', - checked: 'Seçildi mi?', - for: 'Neresi İçin?', - placeholder: 'Boşluk Doldurucu' - } - }, - layerManager: { - layerName: 'Katman' - }, - utils: { - colorPicker: { - cancel: 'İptal', - choose: 'Seç', - more: 'Daha Fazla', - less: 'Daha Az', - clear: 'Renk Seçimini Temizle', - noColor: 'Renk Seçilmedi' + empty: 'Özelliklerini düzenlemek istediğiniz öğeyi seçiniz', + label: 'Bileşen Özellikleri', + traits: { + labels: {}, + attributes: {}, + options: {} } } }; diff --git a/src/trait_manager/config/config.js b/src/trait_manager/config/config.js index 3e371f4f8..a77c6438b 100644 --- a/src/trait_manager/config/config.js +++ b/src/trait_manager/config/config.js @@ -5,20 +5,6 @@ export default { // With the empty value, nothing will be rendered appendTo: '', - labelContainer: 'Component settings', - - // Placeholder label for text input types - labelPlhText: 'eg. Text here', - - // Placeholder label for href input - labelPlhHref: 'eg. https://google.com', - // Default options for the target input - optionsTarget: [ - { value: '', name: 'This window' }, - { value: '_blank', name: 'New window' } - ], - - // Text to show in case no element selected - textNoElement: 'Select an element before using Trait Manager' + optionsTarget: [{ value: '' }, { value: '_blank' }] }; diff --git a/src/trait_manager/model/TraitFactory.js b/src/trait_manager/model/TraitFactory.js index e73d0b378..c78bfa042 100644 --- a/src/trait_manager/model/TraitFactory.js +++ b/src/trait_manager/model/TraitFactory.js @@ -21,18 +21,6 @@ export default (config = {}) => ({ break; } - // Define placeholder - switch (prop) { - case 'title': - case 'alt': - case 'id': - obj.placeholder = config.labelPlhText; - break; - case 'href': - obj.placeholder = config.labelPlhHref; - break; - } - // Define options switch (prop) { case 'target': diff --git a/src/trait_manager/view/TraitSelectView.js b/src/trait_manager/view/TraitSelectView.js index 60f9300a3..c91d5b428 100644 --- a/src/trait_manager/view/TraitSelectView.js +++ b/src/trait_manager/view/TraitSelectView.js @@ -26,7 +26,8 @@ export default TraitView.extend({ */ getInputEl() { if (!this.$input) { - const { model } = this; + const { model, em } = this; + const propName = model.get('name'); const opts = model.get('options') || []; let input = ''; diff --git a/src/trait_manager/view/TraitView.js b/src/trait_manager/view/TraitView.js index 4534a4a1c..9841aadec 100644 --- a/src/trait_manager/view/TraitView.js +++ b/src/trait_manager/view/TraitView.js @@ -135,8 +135,12 @@ export default Backbone.View.extend({ * @private */ getLabel() { + const { em } = this; const { label, name } = this.model.attributes; - return capitalize(label || name).replace(/-/g, ' '); + return ( + em.t(`traitManager.traits.labels.${name}`) || + capitalize(label || name).replace(/-/g, ' ') + ); }, /** @@ -153,13 +157,17 @@ export default Backbone.View.extend({ */ getInputEl() { if (!this.$input) { - const md = this.model; + const { em, model } = this; + const md = model; + const { name } = model.attributes; const plh = md.get('placeholder') || md.get('default') || ''; const type = md.get('type') || 'text'; const min = md.get('min'); const max = md.get('max'); const value = this.getModelValue(); const input = $(``); + const i18nAttr = em.t(`traitManager.traits.attributes.${name}`) || {}; + input.attr(i18nAttr); if (!isUndefined(value)) { md.set({ value }, { silent: true });