[Summary view] [Print] [Text view]

   1  /**
   2   * @output wp-admin/js/widgets/text-widgets.js
   3   */
   4  
   5  /* global tinymce, switchEditors */
   6  /* eslint consistent-this: [ "error", "control" ] */
   7  
   8  /**
   9   * @namespace wp.textWidgets
  10   *
  11   * @param {JQueryStatic} $ The jQuery object.
  12   */
  13  wp.textWidgets = ( function( $ ) {
  14      'use strict';
  15  
  16      var component = {
  17          dismissedPointers: [],
  18          idBases: [ 'text' ]
  19      };
  20  
  21      component.TextWidgetControl = Backbone.View.extend(/** @lends wp.textWidgets.TextWidgetControl.prototype */{
  22  
  23          /**
  24           * View events.
  25           *
  26           * @type {Object}
  27           */
  28          events: {},
  29  
  30          /**
  31           * Text widget control.
  32           *
  33           * @constructs wp.textWidgets.TextWidgetControl
  34           * @augments   Backbone.View
  35           * @abstract
  36           *
  37           * @param {Object} options               Options.
  38           * @param {jQuery} options.el            Control field container element.
  39           * @param {jQuery} options.syncContainer Container element where fields are synced for the server.
  40           *
  41           * @return {void}
  42           */
  43          initialize: function initialize( options ) {
  44              var control = this;
  45  
  46              if ( ! options.el ) {
  47                  throw new Error( 'Missing options.el' );
  48              }
  49              if ( ! options.syncContainer ) {
  50                  throw new Error( 'Missing options.syncContainer' );
  51              }
  52  
  53              Backbone.View.prototype.initialize.call( control, options );
  54              control.syncContainer = options.syncContainer;
  55  
  56              control.$el.addClass( 'text-widget-fields' );
  57              control.$el.html( wp.template( 'widget-text-control-fields' ) );
  58  
  59              control.customHtmlWidgetPointer = control.$el.find( '.wp-pointer.custom-html-widget-pointer' );
  60              if ( control.customHtmlWidgetPointer.length ) {
  61                  control.customHtmlWidgetPointer.find( '.close' ).on( 'click', function( event ) {
  62                      event.preventDefault();
  63                      control.customHtmlWidgetPointer.hide();
  64                      $( '#' + control.fields.text.attr( 'id' ) + '-html' ).trigger( 'focus' );
  65                      control.dismissPointers( [ 'text_widget_custom_html' ] );
  66                  });
  67                  control.customHtmlWidgetPointer.find( '.add-widget' ).on( 'click', function( event ) {
  68                      event.preventDefault();
  69                      control.customHtmlWidgetPointer.hide();
  70                      control.openAvailableWidgetsPanel();
  71                  });
  72              }
  73  
  74              control.pasteHtmlPointer = control.$el.find( '.wp-pointer.paste-html-pointer' );
  75              if ( control.pasteHtmlPointer.length ) {
  76                  control.pasteHtmlPointer.find( '.close' ).on( 'click', function( event ) {
  77                      event.preventDefault();
  78                      control.pasteHtmlPointer.hide();
  79                      control.editor.focus();
  80                      control.dismissPointers( [ 'text_widget_custom_html', 'text_widget_paste_html' ] );
  81                  });
  82              }
  83  
  84              control.fields = {
  85                  title: control.$el.find( '.title' ),
  86                  text: control.$el.find( '.text' )
  87              };
  88  
  89              // Sync input fields to hidden sync fields which actually get sent to the server.
  90              _.each( control.fields, function( fieldInput, fieldName ) {
  91                  fieldInput.on( 'input change', function updateSyncField() {
  92                      var syncInput = control.syncContainer.find( '.sync-input.' + fieldName );
  93                      if ( syncInput.val() !== fieldInput.val() ) {
  94                          syncInput.val( fieldInput.val() );
  95                          syncInput.trigger( 'change' );
  96                      }
  97                  });
  98  
  99                  // Note that syncInput cannot be re-used because it will be destroyed with each widget-updated event.
 100                  fieldInput.val( control.syncContainer.find( '.sync-input.' + fieldName ).val() );
 101              });
 102          },
 103  
 104          /**
 105           * Dismiss pointers for Custom HTML widget.
 106           *
 107           * @since 4.8.1
 108           *
 109           * @param {Array} pointers Pointer IDs to dismiss.
 110           * @return {void}
 111           */
 112          dismissPointers: function dismissPointers( pointers ) {
 113              _.each( pointers, function( pointer ) {
 114                  wp.ajax.post( 'dismiss-wp-pointer', {
 115                      pointer: pointer
 116                  });
 117                  component.dismissedPointers.push( pointer );
 118              });
 119          },
 120  
 121          /**
 122           * Open available widgets panel.
 123           *
 124           * @since 4.8.1
 125           * @return {void}
 126           */
 127          openAvailableWidgetsPanel: function openAvailableWidgetsPanel() {
 128              var sidebarControl;
 129              wp.customize.section.each( function( section ) {
 130                  if ( section.extended( wp.customize.Widgets.SidebarSection ) && section.expanded() ) {
 131                      sidebarControl = wp.customize.control( 'sidebars_widgets[' + section.params.sidebarId + ']' );
 132                  }
 133              });
 134              if ( ! sidebarControl ) {
 135                  return;
 136              }
 137              setTimeout( function() { // Timeout to prevent click event from causing panel to immediately collapse.
 138                  wp.customize.Widgets.availableWidgetsPanel.open( sidebarControl );
 139                  wp.customize.Widgets.availableWidgetsPanel.$search.val( 'HTML' ).trigger( 'keyup' );
 140              });
 141          },
 142  
 143          /**
 144           * Update input fields from the sync fields.
 145           *
 146           * This function is called at the widget-updated and widget-synced events.
 147           * A field will only be updated if it is not currently focused, to avoid
 148           * overwriting content that the user is entering.
 149           *
 150           * @return {void}
 151           */
 152          updateFields: function updateFields() {
 153              var control = this, syncInput;
 154  
 155              if ( ! control.fields.title.is( document.activeElement ) ) {
 156                  syncInput = control.syncContainer.find( '.sync-input.title' );
 157                  control.fields.title.val( syncInput.val() );
 158              }
 159  
 160              syncInput = control.syncContainer.find( '.sync-input.text' );
 161              if ( control.fields.text.is( ':visible' ) ) {
 162                  if ( ! control.fields.text.is( document.activeElement ) ) {
 163                      control.fields.text.val( syncInput.val() );
 164                  }
 165              } else if ( control.editor && ! control.editorFocused && syncInput.val() !== control.fields.text.val() ) {
 166                  control.editor.setContent( wp.oldEditor.autop( syncInput.val() ) );
 167              }
 168          },
 169  
 170          /**
 171           * Initialize editor.
 172           *
 173           * @return {void}
 174           */
 175          initializeEditor: function initializeEditor() {
 176              var control = this, changeDebounceDelay = 1000, id, textarea, triggerChangeIfDirty, restoreTextMode = false, needsTextareaChangeTrigger = false, previousValue;
 177              textarea = control.fields.text;
 178              id = textarea.attr( 'id' );
 179              previousValue = textarea.val();
 180  
 181              /**
 182               * Trigger change if dirty.
 183               *
 184               * @return {void}
 185               */
 186              triggerChangeIfDirty = function() {
 187                  var updateWidgetBuffer = 300; // See wp.customize.Widgets.WidgetControl._setupUpdateUI() which uses 250ms for updateWidgetDebounced.
 188                  if ( control.editor.isDirty() ) {
 189  
 190                      /*
 191                       * Account for race condition in customizer where user clicks Save & Publish while
 192                       * focus was just previously given to the editor. Since updates to the editor
 193                       * are debounced at 1 second and since widget input changes are only synced to
 194                       * settings after 250ms, the customizer needs to be put into the processing
 195                       * state during the time between the change event is triggered and updateWidget
 196                       * logic starts. Note that the debounced update-widget request should be able
 197                       * to be removed with the removal of the update-widget request entirely once
 198                       * widgets are able to mutate their own instance props directly in JS without
 199                       * having to make server round-trips to call the respective WP_Widget::update()
 200                       * callbacks. See <https://core.trac.wordpress.org/ticket/33507>.
 201                       */
 202                      if ( wp.customize && wp.customize.state ) {
 203                          wp.customize.state( 'processing' ).set( wp.customize.state( 'processing' ).get() + 1 );
 204                          _.delay( function() {
 205                              wp.customize.state( 'processing' ).set( wp.customize.state( 'processing' ).get() - 1 );
 206                          }, updateWidgetBuffer );
 207                      }
 208  
 209                      if ( ! control.editor.isHidden() ) {
 210                          control.editor.save();
 211                      }
 212                  }
 213  
 214                  // Trigger change on textarea when it has changed so the widget can enter a dirty state.
 215                  if ( needsTextareaChangeTrigger && previousValue !== textarea.val() ) {
 216                      textarea.trigger( 'change' );
 217                      needsTextareaChangeTrigger = false;
 218                      previousValue = textarea.val();
 219                  }
 220              };
 221  
 222              // Just-in-time force-update the hidden input fields.
 223              control.syncContainer.closest( '.widget' ).find( '[name=savewidget]:first' ).on( 'click', function onClickSaveButton() {
 224                  triggerChangeIfDirty();
 225              });
 226  
 227              /**
 228               * Build (or re-build) the visual editor.
 229               *
 230               * @return {void}
 231               */
 232  			function buildEditor() {
 233                  var editor, onInit, showPointerElement;
 234  
 235                  // Abort building if the textarea is gone, likely due to the widget having been deleted entirely.
 236                  if ( ! document.getElementById( id ) ) {
 237                      return;
 238                  }
 239  
 240                  // The user has disabled TinyMCE.
 241                  if ( typeof window.tinymce === 'undefined' ) {
 242                      wp.oldEditor.initialize( id, {
 243                          quicktags: true,
 244                          mediaButtons: true
 245                      });
 246  
 247                      return;
 248                  }
 249  
 250                  // Destroy any existing editor so that it can be re-initialized after a widget-updated event.
 251                  if ( tinymce.get( id ) ) {
 252                      restoreTextMode = tinymce.get( id ).isHidden();
 253                      wp.oldEditor.remove( id );
 254                  }
 255  
 256                  // Add or enable the `wpview` plugin.
 257                  $( document ).one( 'wp-before-tinymce-init.text-widget-init', function( event, init ) {
 258                      // If somebody has removed all plugins, they must have a good reason.
 259                      // Keep it that way.
 260                      if ( ! init.plugins ) {
 261                          return;
 262                      } else if ( ! /\bwpview\b/.test( init.plugins ) ) {
 263                          init.plugins += ',wpview';
 264                      }
 265                  } );
 266  
 267                  wp.oldEditor.initialize( id, {
 268                      tinymce: {
 269                          wpautop: true
 270                      },
 271                      quicktags: true,
 272                      mediaButtons: true
 273                  });
 274  
 275                  /**
 276                   * Show a pointer, focus on dismiss, and speak the contents for a11y.
 277                   *
 278                   * @param {jQuery} pointerElement Pointer element.
 279                   * @return {void}
 280                   */
 281                  showPointerElement = function( pointerElement ) {
 282                      pointerElement.show();
 283                      pointerElement.find( '.close' ).trigger( 'focus' );
 284                      wp.a11y.speak( pointerElement.find( 'h3, p' ).map( function() {
 285                          return $( this ).text();
 286                      } ).get().join( '\n\n' ) );
 287                  };
 288  
 289                  editor = window.tinymce.get( id );
 290                  if ( ! editor ) {
 291                      throw new Error( 'Failed to initialize editor' );
 292                  }
 293                  onInit = function() {
 294  
 295                      // When a widget is moved in the DOM the dynamically-created TinyMCE iframe will be destroyed and has to be re-built.
 296                      $( editor.getWin() ).on( 'pagehide', function() {
 297                          _.defer( buildEditor );
 298                      });
 299  
 300                      // If a prior mce instance was replaced, and it was in text mode, toggle to text mode.
 301                      if ( restoreTextMode ) {
 302                          switchEditors.go( id, 'html' );
 303                      }
 304  
 305                      // Show the pointer.
 306                      $( '#' + id + '-html' ).on( 'click', function() {
 307                          control.pasteHtmlPointer.hide(); // Hide the HTML pasting pointer.
 308  
 309                          if ( -1 !== component.dismissedPointers.indexOf( 'text_widget_custom_html' ) ) {
 310                              return;
 311                          }
 312                          showPointerElement( control.customHtmlWidgetPointer );
 313                      });
 314  
 315                      // Hide the pointer when switching tabs.
 316                      $( '#' + id + '-tmce' ).on( 'click', function() {
 317                          control.customHtmlWidgetPointer.hide();
 318                      });
 319  
 320                      // Show pointer when pasting HTML.
 321                      editor.on( 'pastepreprocess', function( event ) {
 322                          var content = event.content;
 323                          if ( -1 !== component.dismissedPointers.indexOf( 'text_widget_paste_html' ) || ! content || ! /&lt;\w+.*?&gt;/.test( content ) ) {
 324                              return;
 325                          }
 326  
 327                          // Show the pointer after a slight delay so the user sees what they pasted.
 328                          _.delay( function() {
 329                              showPointerElement( control.pasteHtmlPointer );
 330                          }, 250 );
 331                      });
 332                  };
 333  
 334                  if ( editor.initialized ) {
 335                      onInit();
 336                  } else {
 337                      editor.on( 'init', onInit );
 338                  }
 339  
 340                  control.editorFocused = false;
 341  
 342                  editor.on( 'focus', function onEditorFocus() {
 343                      control.editorFocused = true;
 344                  });
 345                  editor.on( 'paste', function onEditorPaste() {
 346                      editor.setDirty( true ); // Because pasting doesn't currently set the dirty state.
 347                      triggerChangeIfDirty();
 348                  });
 349                  editor.on( 'NodeChange', function onNodeChange() {
 350                      needsTextareaChangeTrigger = true;
 351                  });
 352                  editor.on( 'NodeChange', _.debounce( triggerChangeIfDirty, changeDebounceDelay ) );
 353                  editor.on( 'blur hide', function onEditorBlur() {
 354                      control.editorFocused = false;
 355                      triggerChangeIfDirty();
 356                  });
 357  
 358                  control.editor = editor;
 359              }
 360  
 361              buildEditor();
 362          }
 363      });
 364  
 365      /**
 366       * Mapping of widget ID to instances of TextWidgetControl subclasses.
 367       *
 368       * @memberOf wp.textWidgets
 369       *
 370       * @type {Object.<string, wp.textWidgets.TextWidgetControl>}
 371       */
 372      component.widgetControls = {};
 373  
 374      /**
 375       * Handle widget being added or initialized for the first time at the widget-added event.
 376       *
 377       * @memberOf wp.textWidgets
 378       *
 379       * @param {jQuery.Event} event           Event.
 380       * @param {jQuery}       widgetContainer Widget container element.
 381       *
 382       * @return {void}
 383       */
 384      component.handleWidgetAdded = function handleWidgetAdded( event, widgetContainer ) {
 385          var widgetForm, idBase, widgetControl, widgetId, animatedCheckDelay = 50, renderWhenAnimationDone, fieldContainer, syncContainer;
 386          widgetForm = widgetContainer.find( '> .widget-inside > .form, > .widget-inside > form' ); // Note: '.form' appears in the customizer, whereas 'form' on the widgets admin screen.
 387  
 388          idBase = widgetForm.find( '> .id_base' ).val();
 389          if ( -1 === component.idBases.indexOf( idBase ) ) {
 390              return;
 391          }
 392  
 393          // Prevent initializing already-added widgets.
 394          widgetId = widgetForm.find( '.widget-id' ).val();
 395          if ( component.widgetControls[ widgetId ] ) {
 396              return;
 397          }
 398  
 399          // Bypass using TinyMCE when widget is in legacy mode.
 400          if ( ! widgetForm.find( '.visual' ).val() ) {
 401              return;
 402          }
 403  
 404          /*
 405           * Create a container element for the widget control fields.
 406           * This is inserted into the DOM immediately before the .widget-content
 407           * element because the contents of this element are essentially "managed"
 408           * by PHP, where each widget update cause the entire element to be emptied
 409           * and replaced with the rendered output of WP_Widget::form() which is
 410           * sent back in Ajax request made to save/update the widget instance.
 411           * To prevent a "flash of replaced DOM elements and re-initialized JS
 412           * components", the JS template is rendered outside of the normal form
 413           * container.
 414           */
 415          fieldContainer = $( '<div></div>' );
 416          syncContainer = widgetContainer.find( '.widget-content:first' );
 417          syncContainer.before( fieldContainer );
 418  
 419          widgetControl = new component.TextWidgetControl({
 420              el: fieldContainer,
 421              syncContainer: syncContainer
 422          });
 423  
 424          component.widgetControls[ widgetId ] = widgetControl;
 425  
 426          /*
 427           * Render the widget once the widget parent's container finishes animating,
 428           * as the widget-added event fires with a slideDown of the container.
 429           * This ensures that the textarea is visible and an iframe can be embedded
 430           * with TinyMCE being able to set contenteditable on it.
 431           */
 432          renderWhenAnimationDone = function() {
 433              if ( ! widgetContainer.hasClass( 'open' ) ) {
 434                  setTimeout( renderWhenAnimationDone, animatedCheckDelay );
 435              } else {
 436                  widgetControl.initializeEditor();
 437              }
 438          };
 439          renderWhenAnimationDone();
 440      };
 441  
 442      /**
 443       * Setup widget in accessibility mode.
 444       *
 445       * @memberOf wp.textWidgets
 446       *
 447       * @return {void}
 448       */
 449      component.setupAccessibleMode = function setupAccessibleMode() {
 450          var widgetForm, idBase, widgetControl, fieldContainer, syncContainer;
 451          widgetForm = $( '.editwidget > form' );
 452          if ( 0 === widgetForm.length ) {
 453              return;
 454          }
 455  
 456          idBase = widgetForm.find( '.id_base' ).val();
 457          if ( -1 === component.idBases.indexOf( idBase ) ) {
 458              return;
 459          }
 460  
 461          // Bypass using TinyMCE when widget is in legacy mode.
 462          if ( ! widgetForm.find( '.visual' ).val() ) {
 463              return;
 464          }
 465  
 466          fieldContainer = $( '<div></div>' );
 467          syncContainer = widgetForm.find( '> .widget-inside' );
 468          syncContainer.before( fieldContainer );
 469  
 470          widgetControl = new component.TextWidgetControl({
 471              el: fieldContainer,
 472              syncContainer: syncContainer
 473          });
 474  
 475          widgetControl.initializeEditor();
 476      };
 477  
 478      /**
 479       * Sync widget instance data sanitized from server back onto widget model.
 480       *
 481       * This gets called via the 'widget-updated' event when saving a widget from
 482       * the widgets admin screen and also via the 'widget-synced' event when making
 483       * a change to a widget in the customizer.
 484       *
 485       * @memberOf wp.textWidgets
 486       *
 487       * @param {jQuery.Event} event           Event.
 488       * @param {jQuery}       widgetContainer Widget container element.
 489       * @return {void}
 490       */
 491      component.handleWidgetUpdated = function handleWidgetUpdated( event, widgetContainer ) {
 492          var widgetForm, widgetId, widgetControl, idBase;
 493          widgetForm = widgetContainer.find( '> .widget-inside > .form, > .widget-inside > form' );
 494  
 495          idBase = widgetForm.find( '> .id_base' ).val();
 496          if ( -1 === component.idBases.indexOf( idBase ) ) {
 497              return;
 498          }
 499  
 500          widgetId = widgetForm.find( '> .widget-id' ).val();
 501          widgetControl = component.widgetControls[ widgetId ];
 502          if ( ! widgetControl ) {
 503              return;
 504          }
 505  
 506          widgetControl.updateFields();
 507      };
 508  
 509      /**
 510       * Initialize functionality.
 511       *
 512       * This function exists to prevent the JS file from having to boot itself.
 513       * When WordPress enqueues this script, it should have an inline script
 514       * attached which calls wp.textWidgets.init().
 515       *
 516       * @memberOf wp.textWidgets
 517       *
 518       * @return {void}
 519       */
 520      component.init = function init() {
 521          var $document = $( document );
 522          $document.on( 'widget-added', component.handleWidgetAdded );
 523          $document.on( 'widget-synced widget-updated', component.handleWidgetUpdated );
 524  
 525          /*
 526           * Manually trigger widget-added events for media widgets on the admin
 527           * screen once they are expanded. The widget-added event is not triggered
 528           * for each pre-existing widget on the widgets admin screen like it is
 529           * on the customizer. Likewise, the customizer only triggers widget-added
 530           * when the widget is expanded to just-in-time construct the widget form
 531           * when it is actually going to be displayed. So the following implements
 532           * the same for the widgets admin screen, to invoke the widget-added
 533           * handler when a pre-existing media widget is expanded.
 534           */
 535          $( function initializeExistingWidgetContainers() {
 536              var widgetContainers;
 537              if ( 'widgets' !== window.pagenow ) {
 538                  return;
 539              }
 540              widgetContainers = $( '.widgets-holder-wrap:not(#available-widgets)' ).find( 'div.widget' );
 541              widgetContainers.one( 'click.toggle-widget-expanded', function toggleWidgetExpanded() {
 542                  var widgetContainer = $( this );
 543                  component.handleWidgetAdded( new jQuery.Event( 'widget-added' ), widgetContainer );
 544              });
 545  
 546              // Accessibility mode.
 547              component.setupAccessibleMode();
 548          });
 549      };
 550  
 551      return component;
 552  })( jQuery );