[Summary view] [Print] [Text view]

   1  /**
   2   * @output wp-admin/js/widgets/media-gallery-widget.js
   3   */
   4  
   5  /* eslint consistent-this: [ "error", "control" ] */
   6  (function( component ) {
   7      'use strict';
   8  
   9      var GalleryWidgetModel, GalleryWidgetControl, GalleryDetailsMediaFrame;
  10  
  11      /**
  12       * Custom gallery details frame.
  13       *
  14       * @since 4.9.0
  15       * @class    wp.mediaWidgets~GalleryDetailsMediaFrame
  16       * @augments wp.media.view.MediaFrame.Post
  17       */
  18      GalleryDetailsMediaFrame = wp.media.view.MediaFrame.Post.extend(/** @lends wp.mediaWidgets~GalleryDetailsMediaFrame.prototype */{
  19  
  20          /**
  21           * Create the default states.
  22           *
  23           * @since 4.9.0
  24           * @return {void}
  25           */
  26          createStates: function createStates() {
  27              this.states.add([
  28                  new wp.media.controller.Library({
  29                      id:         'gallery',
  30                      title:      wp.media.view.l10n.createGalleryTitle,
  31                      priority:   40,
  32                      toolbar:    'main-gallery',
  33                      filterable: 'uploaded',
  34                      multiple:   'add',
  35                      editable:   true,
  36  
  37                      library:  wp.media.query( _.defaults({
  38                          type: 'image'
  39                      }, this.options.library ) )
  40                  }),
  41  
  42                  // Gallery states.
  43                  new wp.media.controller.GalleryEdit({
  44                      library: this.options.selection,
  45                      editing: this.options.editing,
  46                      menu:    'gallery'
  47                  }),
  48  
  49                  new wp.media.controller.GalleryAdd()
  50              ]);
  51          }
  52      } );
  53  
  54      /**
  55       * Gallery widget model.
  56       *
  57       * See WP_Widget_Gallery::enqueue_admin_scripts() for amending prototype from PHP exports.
  58       *
  59       * @since 4.9.0
  60       *
  61       * @class    wp.mediaWidgets.modelConstructors.media_gallery
  62       * @augments wp.mediaWidgets.MediaWidgetModel
  63       */
  64      GalleryWidgetModel = component.MediaWidgetModel.extend(/** @lends wp.mediaWidgets.modelConstructors.media_gallery.prototype */{} );
  65  
  66      GalleryWidgetControl = component.MediaWidgetControl.extend(/** @lends wp.mediaWidgets.controlConstructors.media_gallery.prototype */{
  67  
  68          /**
  69           * View events.
  70           *
  71           * @since 4.9.0
  72           * @type {object}
  73           */
  74          events: _.extend( {}, component.MediaWidgetControl.prototype.events, {
  75              'click .media-widget-gallery-preview': 'editMedia'
  76          } ),
  77  
  78          /**
  79           * Gallery widget control.
  80           *
  81           * See WP_Widget_Gallery::enqueue_admin_scripts() for amending prototype from PHP exports.
  82           *
  83           * @constructs wp.mediaWidgets.controlConstructors.media_gallery
  84           * @augments   wp.mediaWidgets.MediaWidgetControl
  85           *
  86           * @since 4.9.0
  87           * @param {Object}         options - Options.
  88           * @param {Backbone.Model} options.model - Model.
  89           * @param {jQuery}         options.el - Control field container element.
  90           * @param {jQuery}         options.syncContainer - Container element where fields are synced for the server.
  91           * @return {void}
  92           */
  93          initialize: function initialize( options ) {
  94              var control = this;
  95  
  96              component.MediaWidgetControl.prototype.initialize.call( control, options );
  97  
  98              _.bindAll( control, 'updateSelectedAttachments', 'handleAttachmentDestroy' );
  99              control.selectedAttachments = new wp.media.model.Attachments();
 100              control.model.on( 'change:ids', control.updateSelectedAttachments );
 101              control.selectedAttachments.on( 'change', control.renderPreview );
 102              control.selectedAttachments.on( 'reset', control.renderPreview );
 103              control.updateSelectedAttachments();
 104  
 105              /*
 106               * Refresh a Gallery widget partial when the user modifies one of the selected attachments.
 107               * This ensures that when an attachment's caption is updated in the media modal the Gallery
 108               * widget in the preview will then be refreshed to show the change. Normally doing this
 109               * would not be necessary because all of the state should be contained inside the changeset,
 110               * as everything done in the Customizer should not make a change to the site unless the
 111               * changeset itself is published. Attachments are a current exception to this rule.
 112               * For a proposal to include attachments in the customized state, see #37887.
 113               */
 114              if ( wp.customize && wp.customize.previewer ) {
 115                  control.selectedAttachments.on( 'change', function() {
 116                      wp.customize.previewer.send( 'refresh-widget-partial', control.model.get( 'widget_id' ) );
 117                  } );
 118              }
 119          },
 120  
 121          /**
 122           * Update the selected attachments if necessary.
 123           *
 124           * @since 4.9.0
 125           * @return {void}
 126           */
 127          updateSelectedAttachments: function updateSelectedAttachments() {
 128              var control = this, newIds, oldIds, removedIds, addedIds, addedQuery;
 129  
 130              newIds = control.model.get( 'ids' );
 131              oldIds = _.pluck( control.selectedAttachments.models, 'id' );
 132  
 133              removedIds = _.difference( oldIds, newIds );
 134              _.each( removedIds, function( removedId ) {
 135                  control.selectedAttachments.remove( control.selectedAttachments.get( removedId ) );
 136              });
 137  
 138              addedIds = _.difference( newIds, oldIds );
 139              if ( addedIds.length ) {
 140                  addedQuery = wp.media.query({
 141                      order: 'ASC',
 142                      orderby: 'post__in',
 143                      perPage: -1,
 144                      post__in: newIds,
 145                      query: true,
 146                      type: 'image'
 147                  });
 148                  addedQuery.more().done( function() {
 149                      control.selectedAttachments.reset( addedQuery.models );
 150                  });
 151              }
 152          },
 153  
 154          /**
 155           * Render preview.
 156           *
 157           * @since 4.9.0
 158           * @return {void}
 159           */
 160          renderPreview: function renderPreview() {
 161              var control = this, previewContainer, previewTemplate, data;
 162  
 163              previewContainer = control.$el.find( '.media-widget-preview' );
 164              previewTemplate = wp.template( 'wp-media-widget-gallery-preview' );
 165  
 166              data = control.previewTemplateProps.toJSON();
 167              data.attachments = {};
 168              control.selectedAttachments.each( function( attachment ) {
 169                  data.attachments[ attachment.id ] = attachment.toJSON();
 170              } );
 171  
 172              previewContainer.html( previewTemplate( data ) );
 173          },
 174  
 175          /**
 176           * Determine whether there are selected attachments.
 177           *
 178           * @since 4.9.0
 179           * @return {boolean} Selected.
 180           */
 181          isSelected: function isSelected() {
 182              var control = this;
 183  
 184              if ( control.model.get( 'error' ) ) {
 185                  return false;
 186              }
 187  
 188              return control.model.get( 'ids' ).length > 0;
 189          },
 190  
 191          /**
 192           * Open the media select frame to edit images.
 193           *
 194           * @since 4.9.0
 195           * @return {void}
 196           */
 197          editMedia: function editMedia() {
 198              var control = this, selection, mediaFrame, mediaFrameProps;
 199  
 200              selection = new wp.media.model.Selection( control.selectedAttachments.models, {
 201                  multiple: true
 202              });
 203  
 204              mediaFrameProps = control.mapModelToMediaFrameProps( control.model.toJSON() );
 205              selection.gallery = new Backbone.Model( mediaFrameProps );
 206              if ( mediaFrameProps.size ) {
 207                  control.displaySettings.set( 'size', mediaFrameProps.size );
 208              }
 209              mediaFrame = new GalleryDetailsMediaFrame({
 210                  frame: 'manage',
 211                  text: control.l10n.add_to_widget,
 212                  selection: selection,
 213                  mimeType: control.mime_type,
 214                  selectedDisplaySettings: control.displaySettings,
 215                  showDisplaySettings: control.showDisplaySettings,
 216                  metadata: mediaFrameProps,
 217                  editing:   true,
 218                  multiple:  true,
 219                  state: 'gallery-edit'
 220              });
 221              wp.media.frame = mediaFrame; // See wp.media().
 222  
 223              // Handle selection of a media item.
 224              mediaFrame.on( 'update', function onUpdate( newSelection ) {
 225                  var state = mediaFrame.state(), resultSelection;
 226  
 227                  resultSelection = newSelection || state.get( 'selection' );
 228                  if ( ! resultSelection ) {
 229                      return;
 230                  }
 231  
 232                  // Copy orderby_random from gallery state.
 233                  if ( resultSelection.gallery ) {
 234                      control.model.set( control.mapMediaToModelProps( resultSelection.gallery.toJSON() ) );
 235                  }
 236  
 237                  // Directly update selectedAttachments to prevent needing to do additional request.
 238                  control.selectedAttachments.reset( resultSelection.models );
 239  
 240                  // Update models in the widget instance.
 241                  control.model.set( {
 242                      ids: _.pluck( resultSelection.models, 'id' )
 243                  } );
 244              } );
 245  
 246              mediaFrame.$el.addClass( 'media-widget' );
 247              mediaFrame.open();
 248  
 249              if ( selection ) {
 250                  selection.on( 'destroy', control.handleAttachmentDestroy );
 251              }
 252          },
 253  
 254          /**
 255           * Open the media select frame to chose an item.
 256           *
 257           * @since 4.9.0
 258           * @return {void}
 259           */
 260          selectMedia: function selectMedia() {
 261              var control = this, selection, mediaFrame, mediaFrameProps;
 262              selection = new wp.media.model.Selection( control.selectedAttachments.models, {
 263                  multiple: true
 264              });
 265  
 266              mediaFrameProps = control.mapModelToMediaFrameProps( control.model.toJSON() );
 267              if ( mediaFrameProps.size ) {
 268                  control.displaySettings.set( 'size', mediaFrameProps.size );
 269              }
 270              mediaFrame = new GalleryDetailsMediaFrame({
 271                  frame: 'select',
 272                  text: control.l10n.add_to_widget,
 273                  selection: selection,
 274                  mimeType: control.mime_type,
 275                  selectedDisplaySettings: control.displaySettings,
 276                  showDisplaySettings: control.showDisplaySettings,
 277                  metadata: mediaFrameProps,
 278                  state: 'gallery'
 279              });
 280              wp.media.frame = mediaFrame; // See wp.media().
 281  
 282              // Handle selection of a media item.
 283              mediaFrame.on( 'update', function onUpdate( newSelection ) {
 284                  var state = mediaFrame.state(), resultSelection;
 285  
 286                  resultSelection = newSelection || state.get( 'selection' );
 287                  if ( ! resultSelection ) {
 288                      return;
 289                  }
 290  
 291                  // Copy orderby_random from gallery state.
 292                  if ( resultSelection.gallery ) {
 293                      control.model.set( control.mapMediaToModelProps( resultSelection.gallery.toJSON() ) );
 294                  }
 295  
 296                  // Directly update selectedAttachments to prevent needing to do additional request.
 297                  control.selectedAttachments.reset( resultSelection.models );
 298  
 299                  // Update widget instance.
 300                  control.model.set( {
 301                      ids: _.pluck( resultSelection.models, 'id' )
 302                  } );
 303              } );
 304  
 305              mediaFrame.$el.addClass( 'media-widget' );
 306              mediaFrame.open();
 307  
 308              if ( selection ) {
 309                  selection.on( 'destroy', control.handleAttachmentDestroy );
 310              }
 311  
 312              /*
 313               * Make sure focus is set inside of modal so that hitting Esc will close
 314               * the modal and not inadvertently cause the widget to collapse in the customizer.
 315               */
 316              mediaFrame.$el.find( ':focusable:first' ).focus();
 317          },
 318  
 319          /**
 320           * Clear the selected attachment when it is deleted in the media select frame.
 321           *
 322           * @since 4.9.0
 323           * @param {wp.media.models.Attachment} attachment - Attachment.
 324           * @return {void}
 325           */
 326          handleAttachmentDestroy: function handleAttachmentDestroy( attachment ) {
 327              var control = this;
 328              control.model.set( {
 329                  ids: _.difference(
 330                      control.model.get( 'ids' ),
 331                      [ attachment.id ]
 332                  )
 333              } );
 334          }
 335      } );
 336  
 337      // Exports.
 338      component.controlConstructors.media_gallery = GalleryWidgetControl;
 339      component.modelConstructors.media_gallery = GalleryWidgetModel;
 340  
 341  })( wp.mediaWidgets );