From f46060bb5702fb1e1c318a427d80207a2bae20d8 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Sun, 3 Nov 2019 19:00:33 +0100
Subject: [PATCH] Localize SelectorManager

---
 src/i18n/locale/en.js                      | 10 ++++++
 src/i18n/locale/tr.js                      |  6 ++--
 src/selector_manager/config/config.js      | 14 +-------
 src/selector_manager/view/ClassTagView.js  |  6 ++--
 src/selector_manager/view/ClassTagsView.js | 38 +++++++++++-----------
 5 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/src/i18n/locale/en.js b/src/i18n/locale/en.js
index 972acbe14..2d527d211 100644
--- a/src/i18n/locale/en.js
+++ b/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'
+    }
   }
 };
diff --git a/src/i18n/locale/tr.js b/src/i18n/locale/tr.js
index d1393aaea..e9ed2a11b 100644
--- a/src/i18n/locale/tr.js
+++ b/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',
diff --git a/src/selector_manager/config/config.js b/src/selector_manager/config/config.js
index 8ea14c16a..42b81eeea 100644
--- a/src/selector_manager/config/config.js
+++ b/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(' ', '_')
diff --git a/src/selector_manager/view/ClassTagView.js b/src/selector_manager/view/ClassTagView.js
index 870f07eec..55a851212 100644
--- a/src/selector_manager/view/ClassTagView.js
+++ b/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>
diff --git a/src/selector_manager/view/ClassTagsView.js b/src/selector_manager/view/ClassTagsView.js
index 3ca7b15bf..bb83555c3 100644
--- a/src/selector_manager/view/ClassTagsView.js
+++ b/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());