www.aleph1.co.uk Git - yaffs-website/blob - web/core/modules/ckeditor/js/ckeditor.stylescombo.admin.es6.js

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