js/wysiwyg/admin.ckeditor-configurator.js

   1 // https://civicrm.org/licensing
   2 (function($, _) {
   3   'use strict';
   4   /* jshint validthis: true */
   5
   6   var configRowTpl = _.template($('#config-row-tpl').html()),
   7     options;
   8
   9   // Weird conflict with drupal styles
  10   $('body').removeClass('toolbar');
  11
  12   function format(item) {
  13     var icon = '<span class="ui-icon ui-icon-gear"></span>';
  14     if (item.icon) {
  15       icon = '<img src="' + CRM.config.resourceBase + item.icon + '" />';
  16     }
  17     return icon + '&nbsp;' + item.text;
  18   }
  19
  20   function initOptions(data) {
  21     options = _.filter(data, function(n) {
  22       return $.inArray(n.id, CRM.vars.ckConfig.blacklist) < 0;
  23     });
  24     addOption();
  25     $.each(CRM.vars.ckConfig.settings, function(key, val) {
  26       if ($.inArray(key, CRM.vars.ckConfig.blacklist) < 0) {
  27         var $opt = $('.crm-config-option-row:last input.crm-config-option-name');
  28         $opt.val(key).change();
  29         $opt.siblings('span').find(':input').val(val);
  30       }
  31     });
  32   }
  33
  34   function changeOptionName() {
  35     var $el = $(this),
  36       name = $el.val();
  37     $el.next('span').remove();
  38     if (name) {
  39       if (($('input.crm-config-option-name').filter(function() {return !this.value;})).length < 1) {
  40         addOption();
  41       }
  42       var type = $el.select2('data').type;
  43       if (type === 'Boolean') {
  44         $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>');
  45       }
  46       else {
  47         $el.after('<span>&nbsp; = &nbsp;<input class="crm-form-text ' + (type==='Number' ? 'eight" type="number"' : 'huge" type="text"') + ' name="config_' + name + '"/></span>');
  48         $el.next('span').find('input.crm-form-text[type=text]').change(validateJson);
  49       }
  50     } else {
  51       $el.closest('div').remove();
  52     }
  53   }
  54
  55   function getOptionList() {
  56     var list = [];
  57     _.forEach(options, function(option) {
  58       var opt = _.cloneDeep(option);
  59       if ($('[name="config_' + opt.id + '"]').length) {
  60         opt.disabled = true;
  61       }
  62       list.push(opt);
  63     });
  64     return {results: list, text: 'id'};
  65   }
  66
  67   function validateJson() {
  68     // TODO: strict json isn't required so we can't use JSON.parse for error checking. Need something like angular.eval.
  69   }
  70
  71   function addOption() {
  72     $('#crm-custom-config-options').append($(configRowTpl({})));
  73     $('.crm-config-option-row:last input.crm-config-option-name', '#crm-custom-config-options').crmSelect2({
  74       data: getOptionList,
  75       formatSelection: function(field) {
  76         return '<strong>' + field.id + '</strong> (' + field.type + ')';
  77       },
  78       formatResult: function(field) {
  79         return '<strong>' + field.id + '</strong> (' + field.type + ')' +
  80           '<div class="api-field-desc">' + field.description + '</div>';
  81       }
  82     });
  83   }
  84
  85   $('#extraPlugins').crmSelect2({
  86     multiple: true,
  87     closeOnSelect: false,
  88     data: CRM.vars.ckConfig.plugins,
  89     escapeMarkup: _.identity,
  90     formatResult: format,
  91     formatSelection: format
  92   });
  93
  94   var toolbarModifier = new ToolbarConfigurator.ToolbarModifier( 'editor-basic' );
  95
  96   toolbarModifier.init(_.noop);
  97
  98   CKEDITOR.document.getById( 'toolbarModifierWrapper' ).append( toolbarModifier.mainContainer );
  99
 100   $(function() {
 101     var selectorOpen = false,
 102       changedWhileOpen = false;
 103
 104     $('#CKEditorConfig')
 105       .on('submit', function(e) {
 106         $('.toolbar button:last', '#toolbarModifierWrapper')[0].click();
 107         $('.configContainer textarea', '#toolbarModifierWrapper').attr('name', 'config');
 108       })
 109       .on('change', '.config-param', function(e) {
 110         changedWhileOpen = true;
 111         if (!selectorOpen) {
 112           $('#_qf_CKEditorConfig_submit-bottom').click();
 113           $('#CKEditorConfig').block();
 114         }
 115       })
 116       .on('change', 'input.crm-config-option-name', changeOptionName)
 117       // Debounce the change event so it only fires after the multiselect is closed
 118       .on('select2-open', 'input.config-param', function(e) {
 119         selectorOpen = true;
 120         changedWhileOpen = false;
 121       })
 122       .on('select2-close', 'input.config-param', function(e) {
 123         selectorOpen = false;
 124         if (changedWhileOpen) {
 125           $(this).change();
 126         }
 127       });
 128
 129     $.getJSON(CRM.config.resourceBase + 'js/wysiwyg/ck-options.json', null, initOptions);
 130   });
 131
 132 })(CRM.$, CRM._);