[Summary view] [Print] [Text view]

   1  /**
   2   * @output wp-admin/js/widgets/custom-html-widgets.js
   3   */
   4  
   5  /* global wp */
   6  /* eslint consistent-this: [ "error", "control" ] */
   7  /* eslint no-magic-numbers: ["error", { "ignore": [0,1,-1] }] */
   8  
   9  /**
  10   * @namespace wp.customHtmlWidget
  11   * @memberOf wp
  12   */
  13  wp.customHtmlWidgets = ( function( $ ) {
  14      'use strict';
  15  
  16      var component = {
  17          idBases: [ 'custom_html' ],
  18          codeEditorSettings: {},
  19          l10n: {
  20              errorNotice: {
  21                  singular: '',
  22                  plural: ''
  23              }
  24          }
  25      };
  26  
  27      component.CustomHtmlWidgetControl = Backbone.View.extend(/** @lends wp.customHtmlWidgets.CustomHtmlWidgetControl.prototype */{
  28  
  29          /**
  30           * View events.
  31           *
  32           * @type {Object}
  33           */
  34          events: {},
  35  
  36          /**
  37           * Text widget control.
  38           *
  39           * @constructs wp.customHtmlWidgets.CustomHtmlWidgetControl
  40           * @augments Backbone.View
  41           * @abstract
  42           *
  43           * @param {Object} options - Options.
  44           * @param {jQuery} options.el - Control field container element.
  45           * @param {jQuery} options.syncContainer - Container element where fields are synced for the server.
  46           *
  47           * @return {void}
  48           */
  49          initialize: function initialize( options ) {
  50              var control = this;
  51  
  52              if ( ! options.el ) {
  53                  throw new Error( 'Missing options.el' );
  54              }
  55              if ( ! options.syncContainer ) {
  56                  throw new Error( 'Missing options.syncContainer' );
  57              }
  58  
  59              Backbone.View.prototype.initialize.call( control, options );
  60              control.syncContainer = options.syncContainer;
  61              control.widgetIdBase = control.syncContainer.parent().find( '.id_base' ).val();
  62              control.widgetNumber = control.syncContainer.parent().find( '.widget_number' ).val();
  63              control.customizeSettingId = 'widget_' + control.widgetIdBase + '[' + String( control.widgetNumber ) + ']';
  64  
  65              control.$el.addClass( 'custom-html-widget-fields' );
  66              control.$el.html( wp.template( 'widget-custom-html-control-fields' )( { codeEditorDisabled: component.codeEditorSettings.disabled } ) );
  67  
  68              control.errorNoticeContainer = control.$el.find( '.code-editor-error-container' );
  69              control.currentErrorAnnotations = [];
  70              control.saveButton = control.syncContainer.add( control.syncContainer.parent().find( '.widget-control-actions' ) ).find( '.widget-control-save, #savewidget' );
  71              control.saveButton.addClass( 'custom-html-widget-save-button' ); // To facilitate style targeting.
  72  
  73              control.fields = {
  74                  title: control.$el.find( '.title' ),
  75                  content: control.$el.find( '.content' )
  76              };
  77  
  78              // Sync input fields to hidden sync fields which actually get sent to the server.
  79              _.each( control.fields, function( fieldInput, fieldName ) {
  80                  fieldInput.on( 'input change', function updateSyncField() {
  81                      var syncInput = control.syncContainer.find( '.sync-input.' + fieldName );
  82                      if ( syncInput.val() !== fieldInput.val() ) {
  83                          syncInput.val( fieldInput.val() );
  84                          syncInput.trigger( 'change' );
  85                      }
  86                  });
  87  
  88                  // Note that syncInput cannot be re-used because it will be destroyed with each widget-updated event.
  89                  fieldInput.val( control.syncContainer.find( '.sync-input.' + fieldName ).val() );
  90              });
  91          },
  92  
  93          /**
  94           * Update input fields from the sync fields.
  95           *
  96           * This function is called at the widget-updated and widget-synced events.
  97           * A field will only be updated if it is not currently focused, to avoid
  98           * overwriting content that the user is entering.
  99           *
 100           * @return {void}
 101           */
 102          updateFields: function updateFields() {
 103              var control = this, syncInput;
 104  
 105              if ( ! control.fields.title.is( document.activeElement ) ) {
 106                  syncInput = control.syncContainer.find( '.sync-input.title' );
 107                  control.fields.title.val( syncInput.val() );
 108              }
 109  
 110              /*
 111               * Prevent updating content when the editor is focused or if there are current error annotations,
 112               * to prevent the editor's contents from getting sanitized as soon as a user removes focus from
 113               * the editor. This is particularly important for users who cannot unfiltered_html.
 114               */
 115              control.contentUpdateBypassed = control.fields.content.is( document.activeElement ) || control.editor && control.editor.codemirror.state.focused || 0 !== control.currentErrorAnnotations.length;
 116              if ( ! control.contentUpdateBypassed ) {
 117                  syncInput = control.syncContainer.find( '.sync-input.content' );
 118                  control.fields.content.val( syncInput.val() );
 119              }
 120          },
 121  
 122          /**
 123           * Show linting error notice.
 124           *
 125           * @param {Array} errorAnnotations - Error annotations.
 126           * @return {void}
 127           */
 128          updateErrorNotice: function( errorAnnotations ) {
 129              var control = this, errorNotice, message = '', customizeSetting;
 130  
 131              if ( 1 === errorAnnotations.length ) {
 132                  message = component.l10n.errorNotice.singular.replace( '%d', '1' );
 133              } else if ( errorAnnotations.length > 1 ) {
 134                  message = component.l10n.errorNotice.plural.replace( '%d', String( errorAnnotations.length ) );
 135              }
 136  
 137              if ( control.fields.content[0].setCustomValidity ) {
 138                  control.fields.content[0].setCustomValidity( message );
 139              }
 140  
 141              if ( wp.customize && wp.customize.has( control.customizeSettingId ) ) {
 142                  customizeSetting = wp.customize( control.customizeSettingId );
 143                  customizeSetting.notifications.remove( 'htmlhint_error' );
 144                  if ( 0 !== errorAnnotations.length ) {
 145                      customizeSetting.notifications.add( 'htmlhint_error', new wp.customize.Notification( 'htmlhint_error', {
 146                          message: message,
 147                          type: 'error'
 148                      } ) );
 149                  }
 150              } else if ( 0 !== errorAnnotations.length ) {
 151                  errorNotice = $( '<div class="inline notice notice-error notice-alt" role="alert"></div>' );
 152                  errorNotice.append( $( '<p></p>', {
 153                      text: message
 154                  } ) );
 155                  control.errorNoticeContainer.empty();
 156                  control.errorNoticeContainer.append( errorNotice );
 157                  control.errorNoticeContainer.slideDown( 'fast' );
 158                  wp.a11y.speak( message );
 159              } else {
 160                  control.errorNoticeContainer.slideUp( 'fast' );
 161              }
 162          },
 163  
 164          /**
 165           * Initialize editor.
 166           *
 167           * @return {void}
 168           */
 169          initializeEditor: function initializeEditor() {
 170              var control = this, settings;
 171  
 172              if ( component.codeEditorSettings.disabled ) {
 173                  return;
 174              }
 175  
 176              settings = _.extend( {}, component.codeEditorSettings, {
 177  
 178                  /**
 179                   * Handle tabbing to the field before the editor.
 180                   *
 181                   * @ignore
 182                   *
 183                   * @return {void}
 184                   */
 185                  onTabPrevious: function onTabPrevious() {
 186                      control.fields.title.focus();
 187                  },
 188  
 189                  /**
 190                   * Handle tabbing to the field after the editor.
 191                   *
 192                   * @ignore
 193                   *
 194                   * @return {void}
 195                   */
 196                  onTabNext: function onTabNext() {
 197                      var tabbables = control.syncContainer.add( control.syncContainer.parent().find( '.widget-position, .widget-control-actions' ) ).find( ':tabbable' );
 198                      tabbables.first().focus();
 199                  },
 200  
 201                  /**
 202                   * Disable save button and store linting errors for use in updateFields.
 203                   *
 204                   * @ignore
 205                   *
 206                   * @param {Array} errorAnnotations - Error notifications.
 207                   * @return {void}
 208                   */
 209                  onChangeLintingErrors: function onChangeLintingErrors( errorAnnotations ) {
 210                      control.currentErrorAnnotations = errorAnnotations;
 211                  },
 212  
 213                  /**
 214                   * Update error notice.
 215                   *
 216                   * @ignore
 217                   *
 218                   * @param {Array} errorAnnotations - Error annotations.
 219                   * @return {void}
 220                   */
 221                  onUpdateErrorNotice: function onUpdateErrorNotice( errorAnnotations ) {
 222                      control.saveButton.toggleClass( 'validation-blocked disabled', errorAnnotations.length > 0 );
 223                      control.updateErrorNotice( errorAnnotations );
 224                  }
 225              });
 226  
 227              control.editor = wp.codeEditor.initialize( control.fields.content, settings );
 228  
 229              // Improve the editor accessibility.
 230              $( control.editor.codemirror.display.lineDiv )
 231                  .attr({
 232                      role: 'textbox',
 233                      'aria-multiline': 'true',
 234                      'aria-labelledby': control.fields.content[0].id + '-label',
 235                      'aria-describedby': 'editor-keyboard-trap-help-1 editor-keyboard-trap-help-2 editor-keyboard-trap-help-3 editor-keyboard-trap-help-4'
 236                  });
 237  
 238              // Focus the editor when clicking on its label.
 239              $( '#' + control.fields.content[0].id + '-label' ).on( 'click', function() {
 240                  control.editor.codemirror.focus();
 241              });
 242  
 243              control.fields.content.on( 'change', function() {
 244                  if ( this.value !== control.editor.codemirror.getValue() ) {
 245                      control.editor.codemirror.setValue( this.value );
 246                  }
 247              });
 248              control.editor.codemirror.on( 'change', function() {
 249                  var value = control.editor.codemirror.getValue();
 250                  if ( value !== control.fields.content.val() ) {
 251                      control.fields.content.val( value ).trigger( 'change' );
 252                  }
 253              });
 254  
 255              // Make sure the editor gets updated if the content was updated on the server (sanitization) but not updated in the editor since it was focused.
 256              control.editor.codemirror.on( 'blur', function() {
 257                  if ( control.contentUpdateBypassed ) {
 258                      control.syncContainer.find( '.sync-input.content' ).trigger( 'change' );
 259                  }
 260              });
 261  
 262              // Prevent hitting Esc from collapsing the widget control.
 263              if ( wp.customize ) {
 264                  control.editor.codemirror.on( 'keydown', function onKeydown( codemirror, event ) {
 265                      var escKeyCode = 27;
 266                      if ( escKeyCode === event.keyCode ) {
 267                          event.stopPropagation();
 268                      }
 269                  });
 270              }
 271          }
 272      });
 273  
 274      /**
 275       * Mapping of widget ID to instances of CustomHtmlWidgetControl subclasses.
 276       *
 277       * @alias wp.customHtmlWidgets.widgetControls
 278       *
 279       * @type {Object.<string, wp.textWidgets.CustomHtmlWidgetControl>}
 280       */
 281      component.widgetControls = {};
 282  
 283      /**
 284       * Handle widget being added or initialized for the first time at the widget-added event.
 285       *
 286       * @alias wp.customHtmlWidgets.handleWidgetAdded
 287       *
 288       * @param {jQuery.Event} event - Event.
 289       * @param {jQuery}       widgetContainer - Widget container element.
 290       *
 291       * @return {void}
 292       */
 293      component.handleWidgetAdded = function handleWidgetAdded( event, widgetContainer ) {
 294          var widgetForm, idBase, widgetControl, widgetId, animatedCheckDelay = 50, renderWhenAnimationDone, fieldContainer, syncContainer;
 295          widgetForm = widgetContainer.find( '> .widget-inside > .form, > .widget-inside > form' ); // Note: '.form' appears in the customizer, whereas 'form' on the widgets admin screen.
 296  
 297          idBase = widgetForm.find( '> .id_base' ).val();
 298          if ( -1 === component.idBases.indexOf( idBase ) ) {
 299              return;
 300          }
 301  
 302          // Prevent initializing already-added widgets.
 303          widgetId = widgetForm.find( '.widget-id' ).val();
 304          if ( component.widgetControls[ widgetId ] ) {
 305              return;
 306          }
 307  
 308          /*
 309           * Create a container element for the widget control fields.
 310           * This is inserted into the DOM immediately before the the .widget-content
 311           * element because the contents of this element are essentially "managed"
 312           * by PHP, where each widget update cause the entire element to be emptied
 313           * and replaced with the rendered output of WP_Widget::form() which is
 314           * sent back in Ajax request made to save/update the widget instance.
 315           * To prevent a "flash of replaced DOM elements and re-initialized JS
 316           * components", the JS template is rendered outside of the normal form
 317           * container.
 318           */
 319          fieldContainer = $( '<div></div>' );
 320          syncContainer = widgetContainer.find( '.widget-content:first' );
 321          syncContainer.before( fieldContainer );
 322  
 323          widgetControl = new component.CustomHtmlWidgetControl({
 324              el: fieldContainer,
 325              syncContainer: syncContainer
 326          });
 327  
 328          component.widgetControls[ widgetId ] = widgetControl;
 329  
 330          /*
 331           * Render the widget once the widget parent's container finishes animating,
 332           * as the widget-added event fires with a slideDown of the container.
 333           * This ensures that the textarea is visible and the editor can be initialized.
 334           */
 335          renderWhenAnimationDone = function() {
 336              if ( ! ( wp.customize ? widgetContainer.parent().hasClass( 'expanded' ) : widgetContainer.hasClass( 'open' ) ) ) { // Core merge: The wp.customize condition can be eliminated with this change being in core: https://github.com/xwp/wordpress-develop/pull/247/commits/5322387d
 337                  setTimeout( renderWhenAnimationDone, animatedCheckDelay );
 338              } else {
 339                  widgetControl.initializeEditor();
 340              }
 341          };
 342          renderWhenAnimationDone();
 343      };
 344  
 345      /**
 346       * Setup widget in accessibility mode.
 347       *
 348       * @alias wp.customHtmlWidgets.setupAccessibleMode
 349       *
 350       * @return {void}
 351       */
 352      component.setupAccessibleMode = function setupAccessibleMode() {
 353          var widgetForm, idBase, widgetControl, fieldContainer, syncContainer;
 354          widgetForm = $( '.editwidget > form' );
 355          if ( 0 === widgetForm.length ) {
 356              return;
 357          }
 358  
 359          idBase = widgetForm.find( '.id_base' ).val();
 360          if ( -1 === component.idBases.indexOf( idBase ) ) {
 361              return;
 362          }
 363  
 364          fieldContainer = $( '<div></div>' );
 365          syncContainer = widgetForm.find( '> .widget-inside' );
 366          syncContainer.before( fieldContainer );
 367  
 368          widgetControl = new component.CustomHtmlWidgetControl({
 369              el: fieldContainer,
 370              syncContainer: syncContainer
 371          });
 372  
 373          widgetControl.initializeEditor();
 374      };
 375  
 376      /**
 377       * Sync widget instance data sanitized from server back onto widget model.
 378       *
 379       * This gets called via the 'widget-updated' event when saving a widget from
 380       * the widgets admin screen and also via the 'widget-synced' event when making
 381       * a change to a widget in the customizer.
 382       *
 383       * @alias wp.customHtmlWidgets.handleWidgetUpdated
 384       *
 385       * @param {jQuery.Event} event - Event.
 386       * @param {jQuery}       widgetContainer - Widget container element.
 387       * @return {void}
 388       */
 389      component.handleWidgetUpdated = function handleWidgetUpdated( event, widgetContainer ) {
 390          var widgetForm, widgetId, widgetControl, idBase;
 391          widgetForm = widgetContainer.find( '> .widget-inside > .form, > .widget-inside > form' );
 392  
 393          idBase = widgetForm.find( '> .id_base' ).val();
 394          if ( -1 === component.idBases.indexOf( idBase ) ) {
 395              return;
 396          }
 397  
 398          widgetId = widgetForm.find( '> .widget-id' ).val();
 399          widgetControl = component.widgetControls[ widgetId ];
 400          if ( ! widgetControl ) {
 401              return;
 402          }
 403  
 404          widgetControl.updateFields();
 405      };
 406  
 407      /**
 408       * Initialize functionality.
 409       *
 410       * This function exists to prevent the JS file from having to boot itself.
 411       * When WordPress enqueues this script, it should have an inline script
 412       * attached which calls wp.textWidgets.init().
 413       *
 414       * @alias wp.customHtmlWidgets.init
 415       *
 416       * @param {Object} settings - Options for code editor, exported from PHP.
 417       *
 418       * @return {void}
 419       */
 420      component.init = function init( settings ) {
 421          var $document = $( document );
 422          _.extend( component.codeEditorSettings, settings );
 423  
 424          $document.on( 'widget-added', component.handleWidgetAdded );
 425          $document.on( 'widget-synced widget-updated', component.handleWidgetUpdated );
 426  
 427          /*
 428           * Manually trigger widget-added events for media widgets on the admin
 429           * screen once they are expanded. The widget-added event is not triggered
 430           * for each pre-existing widget on the widgets admin screen like it is
 431           * on the customizer. Likewise, the customizer only triggers widget-added
 432           * when the widget is expanded to just-in-time construct the widget form
 433           * when it is actually going to be displayed. So the following implements
 434           * the same for the widgets admin screen, to invoke the widget-added
 435           * handler when a pre-existing media widget is expanded.
 436           */
 437          $( function initializeExistingWidgetContainers() {
 438              var widgetContainers;
 439              if ( 'widgets' !== window.pagenow ) {
 440                  return;
 441              }
 442              widgetContainers = $( '.widgets-holder-wrap:not(#available-widgets)' ).find( 'div.widget' );
 443              widgetContainers.one( 'click.toggle-widget-expanded', function toggleWidgetExpanded() {
 444                  var widgetContainer = $( this );
 445                  component.handleWidgetAdded( new jQuery.Event( 'widget-added' ), widgetContainer );
 446              });
 447  
 448              // Accessibility mode.
 449              if ( document.readyState === 'complete' ) {
 450                  // Page is fully loaded.
 451                  component.setupAccessibleMode();
 452              } else {
 453                  // Page is still loading.
 454                  $( window ).on( 'load', function() {
 455                      component.setupAccessibleMode();
 456                  });
 457              }
 458          });
 459      };
 460  
 461      return component;
 462  })( jQuery );