Localize SelectorManager

src/i18n/locale/en.js

@@ -37,5 +37,15 @@ export default {
         'open-blocks': 'Open Blocks'
       }
     }
+  },
+  selectorManager: {
+    label: 'Classes',
+    selected: 'Selected',
+    emptyState: '- State -',
+    states: {
+      hover: 'Hover',
+      active: 'Click',
+      'nth-of-type(2n)': 'Even/Odd'
+    }
   }
 };

src/i18n/locale/tr.js

@@ -27,10 +27,12 @@ export default {
       }
     }
   },
+  selectorManager: {
+    selected: 'Seçili',
+    emptyState: '- DURUM -'
+  },
   styleManager: {
     noEl: 'Stilini düzenlemek istediğiniz öğeyi seçiniz',
-    selectedLabel: 'Seçili',
-    states: '- DURUM -',
     label: 'Sınıflar',
     sectors: {
       general: 'Genel',

src/selector_manager/config/config.js

@@ -9,20 +9,8 @@ export default {
   // Default selectors
   selectors: [],
 
-  // Label for selectors
-  label: 'Classes',
-
-  // Label for states
-  statesLabel: '- State -',
-
-  selectedLabel: 'Selected',
-
   // States
-  states: [
-    { name: 'hover', label: 'Hover' },
-    { name: 'active', label: 'Click' },
-    { name: 'nth-of-type(2n)', label: 'Even/Odd' }
-  ],
+  states: [{ name: 'hover' }, { name: 'active' }, { name: 'nth-of-type(2n)' }],
 
   // Custom selector name escaping strategy, eg.
   // name => name.replace(' ', '_')

src/selector_manager/view/ClassTagView.js

@@ -4,9 +4,9 @@ const inputProp = 'contentEditable';
 
 export default Backbone.View.extend({
   template() {
-    const pfx = this.pfx;
-    const ppfx = this.ppfx;
-    const label = this.model.get('label') || '';
+    const { pfx, model } = this;
+    const label = model.get('label') || '';
+
     return `
       <span id="${pfx}checkbox" class="fa" data-tag-status></span>
       <span id="${pfx}tag-label" data-tag-name>${label}</span>

src/selector_manager/view/ClassTagsView.js

@@ -90,16 +90,18 @@ export default Backbone.View.extend({
    * @private
    */
   getStateOptions() {
-    var strInput = '';
-    for (var i = 0; i < this.states.length; i++) {
-      strInput +=
-        '<option value="' +
-        this.states[i].name +
-        '">' +
-        this.states[i].label +
-        '</option>';
-    }
-    return strInput;
+    const { states, em } = this;
+    let result = [];
+
+    states.forEach(state =>
+      result.push(`<option value="${state.name}">
+      ${em.t(`selectorManager.states.${state.name}`) ||
+        state.label ||
+        state.name}
+    </option>`)
+    );
+
+    return result.join('');
   },
 
   /**
@@ -304,21 +306,19 @@ export default Backbone.View.extend({
   },
 
   render() {
-    const ppfx = this.ppfx;
-    const config = this.config;
-    const $el = this.$el;
+    const { em, pfx, ppfx, $el } = this;
     $el.html(
       this.template({
-        selectedLabel: config.selectedLabel,
-        statesLabel: config.statesLabel,
-        label: config.label,
-        pfx: this.pfx,
-        ppfx: this.ppfx
+        selectedLabel: em.t('selectorManager.selected'),
+        statesLabel: em.t('selectorManager.emptyState'),
+        label: em.t('selectorManager.label'),
+        pfx,
+        ppfx
       })
     );
     this.$input = $el.find('input#' + this.newInputId);
     this.$addBtn = $el.find('#' + this.addBtnId);
-    this.$classes = $el.find('#' + this.pfx + 'tags-c');
+    this.$classes = $el.find('#' + pfx + 'tags-c');
     this.$states = $el.find('#' + this.stateInputId);
     this.$statesC = $el.find('#' + this.stateInputC);
     this.$states.append(this.getStateOptions());