i18n - Improve multilingual popup for text and wysiwyg fields

[civicrm-core.git] / js / wysiwyg / admin.ckeditor-configurator.js

diff --git a/js/wysiwyg/admin.ckeditor-configurator.js b/js/wysiwyg/admin.ckeditor-configurator.js
index 64bfef02774b0170c0d7238cdfaa323adcebebd0..6c44806754b7628f144356f1aeac4fb869401c76 100644 (file)
--- a/js/wysiwyg/admin.ckeditor-configurator.js
+++ b/js/wysiwyg/admin.ckeditor-configurator.js
@@ -1,6 +1,10 @@
 // https://civicrm.org/licensing
 (function($, _) {
   'use strict';
+  /* jshint validthis: true */
+
+  var configRowTpl = _.template($('#config-row-tpl').html()),
+    options;
 
   // Weird conflict with drupal styles
   $('body').removeClass('toolbar');
@@ -13,6 +17,79 @@
     return icon + ' ' + item.text;
   }
 
+  function initOptions(data) {
+    options = _.filter(data, function(n) {
+      return $.inArray(n.id, CRM.vars.ckConfig.blacklist) < 0;
+    });
+    addOption();
+    $.each(CRM.vars.ckConfig.settings, function(key, val) {
+      if ($.inArray(key, CRM.vars.ckConfig.blacklist) < 0) {
+        var $opt = $('.crm-config-option-row:last input.crm-config-option-name');
+        $opt.val(key).change();
+        $opt.siblings('span').find(':input').val(val);
+      }
+    });
+  }
+
+  function changeOptionName() {
+    var $el = $(this),
+      name = $el.val();
+    $el.next('span').remove();
+    if (name) {
+      if (($('input.crm-config-option-name').filter(function() {return !this.value;})).length < 1) {
+        addOption();
+      }
+      var type = $el.select2('data').type;
+      if (type === 'Boolean') {
+        $el.after('<span>&nbsp; = &nbsp;<select class="crm-form-select" name="config_' + name + '"><option value="false">false</option><option value="true">true</option></select></span>');
+      }
+      else {
+        $el.after('<span>&nbsp; = &nbsp;<input class="crm-form-text ' + (type==='Number' ? 'eight" type="number"' : 'huge" type="text"') + ' name="config_' + name + '"/></span>');
+        $el.next('span').find('input.crm-form-text[type=text]').change(validateJson);
+      }
+    } else {
+      $el.closest('div').remove();
+    }
+  }
+
+  function getOptionList() {
+    var list = [];
+    _.forEach(options, function(option) {
+      var opt = _.cloneDeep(option);
+      if ($('[name="config_' + opt.id + '"]').length) {
+        opt.disabled = true;
+      }
+      list.push(opt);
+    });
+    return {results: list, text: 'id'};
+  }
+
+  function validateJson() {
+    var val = $(this).val();
+    $(this).parent().removeClass('crm-error');
+    if (val[0] === '[' || val[0] === '{') {
+      try {
+        JSON.parse(val);
+      } catch (e) {
+        $(this).parent().addClass('crm-error');
+      }
+    }
+  }
+
+  function addOption() {
+    $('#crm-custom-config-options').append($(configRowTpl({})));
+    $('.crm-config-option-row:last input.crm-config-option-name', '#crm-custom-config-options').crmSelect2({
+      data: getOptionList,
+      formatSelection: function(field) {
+        return '<strong>' + field.id + '</strong> (' + field.type + ')';
+      },
+      formatResult: function(field) {
+        return '<strong>' + field.id + '</strong> (' + field.type + ')' +
+          '<div class="api-field-desc">' + field.description + '</div>';
+      }
+    });
+  }
+
   $('#extraPlugins').crmSelect2({
     multiple: true,
     closeOnSelect: false,
@@ -43,6 +120,7 @@
           $('#toolbarModifierForm').submit().block();
         }
       })
+      .on('change', 'input.crm-config-option-name', changeOptionName)
       // Debounce the change event so it only fires after the multiselect is closed
       .on('select2-open', 'input.config-param', function(e) {
         selectorOpen = true;
@@ -54,6 +132,8 @@
           $(this).change();
         }
       });
+
+    $.getJSON(CRM.config.resourceBase + 'js/wysiwyg/ck-options.json', null, initOptions);
   });
 
 })(CRM.$, CRM._);