Localize TraitManager

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 = $('<div></div>');
       this.$cn.append(this.$cn2);
       this.$header = $('<div>').append(
-        `<div class="${confTm.stylePrefix}header">${confTm.textNoElement}</div>`
+        `<div class="${confTm.stylePrefix}header">${em.t(
+          'traitManager.empty'
+        )}</div>`
       );
       this.$cn.append(this.$header);
       this.$cn2.append(
-        `<div class="${pfx}traits-label">${confTm.labelContainer}</div>`
+        `<div class="${pfx}traits-label">${em.t('traitManager.label')}</div>`
       );
       this.$cn2.append(tmView.render().el);
       var panels = editor.Panels;

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;
     },

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'
+        }
+      }
+    }
   }
 };

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: {}
     }
   }
 };

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' }]
 };

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':

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 = '<select>';
 
@@ -46,8 +47,9 @@ export default TraitView.extend({
           style = el.style ? el.style.replace(/"/g, '&quot;') : '';
           attrs += style ? ` style="${style}"` : '';
         }
-
-        input += `<option value="${value}"${attrs}>${name}</option>`;
+        const resultName =
+          em.t(`traitManager.traits.options.${propName}.${value}`) || name;
+        input += `<option value="${value}"${attrs}>${resultName}</option>`;
       });
 
       input += '</select>';

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 = $(`<input type="${type}" placeholder="${plh}">`);
+      const i18nAttr = em.t(`traitManager.traits.attributes.${name}`) || {};
+      input.attr(i18nAttr);
 
       if (!isUndefined(value)) {
         md.set({ value }, { silent: true });