yaffs.net Git - yaffs-website/blob - web/core/modules/ckeditor/js/ckeditor.stylescombo.admin.js

   1 /**
   2  * @file
   3  * CKEditor StylesCombo admin behavior.
   4  */
   5
   6 (function ($, Drupal, drupalSettings, _) {
   7
   8   'use strict';
   9
  10   /**
  11    * Ensures that the "stylescombo" button's metadata remains up-to-date.
  12    *
  13    * Triggers the CKEditorPluginSettingsChanged event whenever the "stylescombo"
  14    * plugin settings change, to ensure that the corresponding feature metadata
  15    * is immediately updated — i.e. ensure that HTML tags and classes entered
  16    * here are known to be "required", which may affect filter settings.
  17    *
  18    * @type {Drupal~behavior}
  19    *
  20    * @prop {Drupal~behaviorAttach} attach
  21    *   Attaches admin behaviour to the "stylescombo" button.
  22    */
  23   Drupal.behaviors.ckeditorStylesComboSettings = {
  24     attach: function (context) {
  25       var $context = $(context);
  26
  27       // React to changes in the list of user-defined styles: calculate the new
  28       // stylesSet setting up to 2 times per second, and if it is different,
  29       // fire the CKEditorPluginSettingsChanged event with the updated parts of
  30       // the CKEditor configuration. (This will, in turn, cause the hidden
  31       // CKEditor instance to be updated and a drupalEditorFeatureModified event
  32       // to fire.)
  33       var $ckeditorActiveToolbar = $context
  34         .find('.ckeditor-toolbar-configuration')
  35         .find('.ckeditor-toolbar-active');
  36       var previousStylesSet = drupalSettings.ckeditor.hiddenCKEditorConfig.stylesSet;
  37       var that = this;
  38       $context.find('[name="editor[settings][plugins][stylescombo][styles]"]')
  39         .on('blur.ckeditorStylesComboSettings', function () {
  40           var styles = $.trim($(this).val());
  41           var stylesSet = that._generateStylesSetSetting(styles);
  42           if (!_.isEqual(previousStylesSet, stylesSet)) {
  43             previousStylesSet = stylesSet;
  44             $ckeditorActiveToolbar.trigger('CKEditorPluginSettingsChanged', [
  45               {stylesSet: stylesSet}
  46             ]);
  47           }
  48         });
  49     },
  50
  51     /**
  52      * Builds the "stylesSet" configuration part of the CKEditor JS settings.
  53      *
  54      * @see \Drupal\ckeditor\Plugin\ckeditor\plugin\StylesCombo::generateStylesSetSetting()
  55      *
  56      * Note that this is a more forgiving implementation than the PHP version:
  57      * the parsing works identically, but instead of failing on invalid styles,
  58      * we just ignore those.
  59      *
  60      * @param {string} styles
  61      *   The "styles" setting.
  62      *
  63      * @return {Array}
  64      *   An array containing the "stylesSet" configuration.
  65      */
  66     _generateStylesSetSetting: function (styles) {
  67       var stylesSet = [];
  68
  69       styles = styles.replace(/\r/g, '\n');
  70       var lines = styles.split('\n');
  71       for (var i = 0; i < lines.length; i++) {
  72         var style = $.trim(lines[i]);
  73
  74         // Ignore empty lines in between non-empty lines.
  75         if (style.length === 0) {
  76           continue;
  77         }
  78
  79         // Validate syntax: element[.class...]|label pattern expected.
  80         if (style.match(/^ *[a-zA-Z0-9]+ *(\.[a-zA-Z0-9_-]+ *)*\| *.+ *$/) === null) {
  81           // Instead of failing, we just ignore any invalid styles.
  82           continue;
  83         }
  84
  85         // Parse.
  86         var parts = style.split('|');
  87         var selector = parts[0];
  88         var label = parts[1];
  89         var classes = selector.split('.');
  90         var element = classes.shift();
  91
  92         // Build the data structure CKEditor's stylescombo plugin expects.
  93         // @see http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Styles
  94         stylesSet.push({
  95           attributes: {class: classes.join(' ')},
  96           element: element,
  97           name: label
  98         });
  99       }
 100
 101       return stylesSet;
 102     }
 103   };
 104
 105   /**
 106    * Provides the summary for the "stylescombo" plugin settings vertical tab.
 107    *
 108    * @type {Drupal~behavior}
 109    *
 110    * @prop {Drupal~behaviorAttach} attach
 111    *   Attaches summary behaviour to the plugin settings vertical tab.
 112    */
 113   Drupal.behaviors.ckeditorStylesComboSettingsSummary = {
 114     attach: function () {
 115       $('[data-ckeditor-plugin-id="stylescombo"]').drupalSetSummary(function (context) {
 116         var styles = $.trim($('[data-drupal-selector="edit-editor-settings-plugins-stylescombo-styles"]').val());
 117         if (styles.length === 0) {
 118           return Drupal.t('No styles configured');
 119         }
 120         else {
 121           var count = $.trim(styles).split('\n').length;
 122           return Drupal.t('@count styles configured', {'@count': count});
 123         }
 124       });
 125     }
 126   };
 127
 128 })(jQuery, Drupal, drupalSettings, _);