Generalize the usage of the translate method

Author: mistic100

src/core.js

@@ -124,7 +124,7 @@ QueryBuilder.prototype.checkFilters = function(filters) {
         else {
             var self = this;
             filters.sort(function(a, b) {
-                return self.getTranslatedLabel(a.label).localeCompare(self.getTranslatedLabel(b.label));
+                return self.translate(a.label).localeCompare(self.translate(b.label));
             });
         }
     }
@@ -884,7 +884,7 @@ QueryBuilder.prototype.updateError = function(node) {
             node.$el.removeClass('has-error');
         }
         else {
-            var errorMessage = this.lang.errors[node.error[0]] || node.error[0];
+            var errorMessage = this.translate('errors', node.error[0]);
             errorMessage = Utils.fmt(errorMessage, node.error.slice(1));
 
             /**

src/data.js

@@ -592,30 +592,36 @@ QueryBuilder.prototype.getGroupFlags = function(flags, all) {
 };
 
 /**
- * Retrieve a translation in the `lang` object
+ * Translate a label either by looking in the `lang` object or in itself if it's an object where keys are language codes
  * @param {string} [category]
- * @param {string} key
+ * @param {string|object} key
  * @returns {string}
+ * @fires QueryBuilder#changer:translate
  */
 QueryBuilder.prototype.translate = function(category, key) {
     if (!key) {
         key = category;
         category = undefined;
     }
 
-    var translation = (category ? this.lang[category] : this.lang)[key] || key;
-
-    return this.change('translate', translation, category, key);
-};
+    var translation;
+    if (typeof key === 'object') {
+        translation = key[this.settings.lang_code] || key['en'];
+    }
+    else {
+        translation = (category ? this.lang[category] : this.lang)[key] || key;
+    }
 
-/**
- * Translates a label
- * @param {string|object} label
- * @returns {string}
- * @private
- */
-QueryBuilder.prototype.getTranslatedLabel = function(label) {
-    return typeof label == 'object' ? (label[this.settings.lang_code] || label['en']) : label;
+    /**
+     * Modifies the translated label
+     * @event changer:translate
+     * @memberof QueryBuilder
+     * @param {string} translation
+     * @param {string|object} key
+     * @param {string} [category]
+     * @returns {string}
+     */
+    return this.change('translate', translation, key, category);
 };
 
 /**

src/main.js

@@ -101,7 +101,7 @@ var QueryBuilder = function($el, options) {
      * @member {object}
      * @readonly
      */
-    this.lang = undefined;
+    this.lang = null;
 
     // translations : english << 'lang_code' << custom
     if (QueryBuilder.regional['en'] === undefined) {

src/plugins/invert/plugin.js

@@ -65,14 +65,14 @@ QueryBuilder.define('invert', function(options) {
     // Modify templates
     this.on('getGroupTemplate.filter', function(h, level) {
         var $h = $(h.value);
-        $h.find(Selectors.condition_container).after('<button type="button" class="btn btn-xs btn-default" data-invert="group"><i class="' + options.icon + '"></i> ' + self.lang.invert + '</button>');
+        $h.find(Selectors.condition_container).after('<button type="button" class="btn btn-xs btn-default" data-invert="group"><i class="' + options.icon + '"></i> ' + self.translate('invert') + '</button>');
         h.value = $h.prop('outerHTML');
     });
 
     if (options.display_rules_button && options.invert_rules) {
         this.on('getRuleTemplate.filter', function(h) {
             var $h = $(h.value);
-            $h.find(Selectors.rule_actions).prepend('<button type="button" class="btn btn-xs btn-default" data-invert="rule"><i class="' + options.icon + '"></i> ' + self.lang.invert + '</button>');
+            $h.find(Selectors.rule_actions).prepend('<button type="button" class="btn btn-xs btn-default" data-invert="rule"><i class="' + options.icon + '"></i> ' + self.translate('invert') + '</button>');
             h.value = $h.prop('outerHTML');
         });
     }

src/plugins/not-group/plugin.js

@@ -49,7 +49,7 @@ QueryBuilder.define('not-group', function(options) {
         var $h = $(h.value);
         $h.find(QueryBuilder.selectors.condition_container).prepend(
             '<button type="button" class="btn btn-xs btn-default" data-not="group">' +
-            '<i class="' + options.icon_unchecked + '"></i> ' + self.lang.NOT +
+            '<i class="' + options.icon_unchecked + '"></i> ' + self.translate('NOT') +
             '</button>'
         );
         h.value = $h.prop('outerHTML');

src/template.js

@@ -3,23 +3,23 @@ QueryBuilder.templates.group = '\
   <dt class="rules-group-header"> \
     <div class="btn-group pull-right group-actions"> \
       <button type="button" class="btn btn-xs btn-success" data-add="rule"> \
-        <i class="{{= it.icons.add_rule }}"></i> {{= it.lang.add_rule }} \
+        <i class="{{= it.icons.add_rule }}"></i> {{= it.translate("add_rule") }} \
       </button> \
       {{? it.settings.allow_groups===-1 || it.settings.allow_groups>=it.level }} \
         <button type="button" class="btn btn-xs btn-success" data-add="group"> \
-          <i class="{{= it.icons.add_group }}"></i> {{= it.lang.add_group }} \
+          <i class="{{= it.icons.add_group }}"></i> {{= it.translate("add_group") }} \
         </button> \
       {{?}} \
       {{? it.level>1 }} \
         <button type="button" class="btn btn-xs btn-danger" data-delete="group"> \
-          <i class="{{= it.icons.remove_group }}"></i> {{= it.lang.delete_group }} \
+          <i class="{{= it.icons.remove_group }}"></i> {{= it.translate("delete_group") }} \
         </button> \
       {{?}} \
     </div> \
     <div class="btn-group group-conditions"> \
       {{~ it.conditions: condition }} \
         <label class="btn btn-xs btn-primary"> \
-          <input type="radio" name="{{= it.group_id }}_cond" value="{{= condition }}"> {{= it.lang.conditions[condition] || condition }} \
+          <input type="radio" name="{{= it.group_id }}_cond" value="{{= condition }}"> {{= it.translate("conditions", condition) }} \
         </label> \
       {{~}} \
     </div> \
@@ -37,7 +37,7 @@ QueryBuilder.templates.rule = '\
   <div class="rule-header"> \
     <div class="btn-group pull-right rule-actions"> \
       <button type="button" class="btn btn-xs btn-danger" data-delete="rule"> \
-        <i class="{{= it.icons.remove_rule }}"></i> {{= it.lang.delete_rule }} \
+        <i class="{{= it.icons.remove_rule }}"></i> {{= it.translate("delete_rule") }} \
       </button> \
     </div> \
   </div> \
@@ -70,7 +70,7 @@ QueryBuilder.templates.filterSelect = '\
 QueryBuilder.templates.operatorSelect = '\
 {{? it.operators.length === 1 }} \
 <span> \
-{{= it.lang.operators[it.operators[0].type] || it.operators[0].type }} \
+{{= it.translate("operators", it.operators[0].type) }} \
 </span> \
 {{?}} \
 {{ var optgroup = null; }} \
@@ -82,7 +82,7 @@ QueryBuilder.templates.operatorSelect = '\
         <optgroup label="{{= it.translate(it.settings.optgroups[optgroup]) }}"> \
       {{?}} \
     {{?}} \
-    <option value="{{= operator.type }}">{{= it.lang.operators[operator.type] || operator.type }}</option> \
+    <option value="{{= operator.type }}">{{= it.translate("operators", operator.type) }}</option> \
   {{~}} \
   {{? optgroup !== null }}</optgroup>{{?}} \
 </select>';
@@ -102,8 +102,8 @@ QueryBuilder.prototype.getGroupTemplate = function(group_id, level) {
         level: level,
         conditions: this.settings.conditions,
         icons: this.icons,
-        lang: this.lang,
-        settings: this.settings
+        settings: this.settings,
+        translate: this.translate.bind(this)
     });
 
     /**
@@ -129,8 +129,8 @@ QueryBuilder.prototype.getRuleTemplate = function(rule_id) {
         builder: this,
         rule_id: rule_id,
         icons: this.icons,
-        lang: this.lang,
-        settings: this.settings
+        settings: this.settings,
+        translate: this.translate.bind(this)
     });
 
     /**
@@ -157,9 +157,8 @@ QueryBuilder.prototype.getRuleFilterSelect = function(rule, filters) {
         rule: rule,
         filters: filters,
         icons: this.icons,
-        lang: this.lang,
         settings: this.settings,
-        translate: this.getTranslatedLabel
+        translate: this.translate.bind(this)
     });
 
     /**
@@ -188,9 +187,8 @@ QueryBuilder.prototype.getRuleOperatorSelect = function(rule, operators) {
         rule: rule,
         operators: operators,
         icons: this.icons,
-        lang: this.lang,
         settings: this.settings,
-        translate: this.getTranslatedLabel
+        translate: this.translate.bind(this)
     });
 
     /**