home *** CD-ROM | disk | FTP | other *** search
/ HTML Examples / WP.iso / wordpress / wp-admin / js / widgets / media-image-widget.js < prev    next >
Encoding:
JavaScript  |  2017-09-24  |  5.1 KB  |  167 lines
  1. /* eslint consistent-this: [ "error", "control" ] */
  2. (function( component, $ ) {
  3.     'use strict';
  4.  
  5.     var ImageWidgetModel, ImageWidgetControl;
  6.  
  7.     /**
  8.      * Image widget model.
  9.      *
  10.      * See WP_Widget_Media_Image::enqueue_admin_scripts() for amending prototype from PHP exports.
  11.      *
  12.      * @class ImageWidgetModel
  13.      * @constructor
  14.      */
  15.     ImageWidgetModel = component.MediaWidgetModel.extend({});
  16.  
  17.     /**
  18.      * Image widget control.
  19.      *
  20.      * See WP_Widget_Media_Image::enqueue_admin_scripts() for amending prototype from PHP exports.
  21.      *
  22.      * @class ImageWidgetModel
  23.      * @constructor
  24.      */
  25.     ImageWidgetControl = component.MediaWidgetControl.extend({
  26.  
  27.         /**
  28.          * View events.
  29.          *
  30.          * @type {object}
  31.          */
  32.         events: _.extend( {}, component.MediaWidgetControl.prototype.events, {
  33.             'click .media-widget-preview.populated': 'editMedia'
  34.         } ),
  35.  
  36.         /**
  37.          * Render preview.
  38.          *
  39.          * @returns {void}
  40.          */
  41.         renderPreview: function renderPreview() {
  42.             var control = this, previewContainer, previewTemplate, fieldsContainer, fieldsTemplate, linkInput;
  43.             if ( ! control.model.get( 'attachment_id' ) && ! control.model.get( 'url' ) ) {
  44.                 return;
  45.             }
  46.  
  47.             previewContainer = control.$el.find( '.media-widget-preview' );
  48.             previewTemplate = wp.template( 'wp-media-widget-image-preview' );
  49.             previewContainer.html( previewTemplate( control.previewTemplateProps.toJSON() ) );
  50.             previewContainer.addClass( 'populated' );
  51.  
  52.             linkInput = control.$el.find( '.link' );
  53.             if ( ! linkInput.is( document.activeElement ) ) {
  54.                 fieldsContainer = control.$el.find( '.media-widget-fields' );
  55.                 fieldsTemplate = wp.template( 'wp-media-widget-image-fields' );
  56.                 fieldsContainer.html( fieldsTemplate( control.previewTemplateProps.toJSON() ) );
  57.             }
  58.         },
  59.  
  60.         /**
  61.          * Open the media image-edit frame to modify the selected item.
  62.          *
  63.          * @returns {void}
  64.          */
  65.         editMedia: function editMedia() {
  66.             var control = this, mediaFrame, updateCallback, defaultSync, metadata;
  67.  
  68.             metadata = control.mapModelToMediaFrameProps( control.model.toJSON() );
  69.  
  70.             // Needed or else none will not be selected if linkUrl is not also empty.
  71.             if ( 'none' === metadata.link ) {
  72.                 metadata.linkUrl = '';
  73.             }
  74.  
  75.             // Set up the media frame.
  76.             mediaFrame = wp.media({
  77.                 frame: 'image',
  78.                 state: 'image-details',
  79.                 metadata: metadata
  80.             });
  81.             mediaFrame.$el.addClass( 'media-widget' );
  82.  
  83.             updateCallback = function() {
  84.                 var mediaProps, linkType;
  85.  
  86.                 // Update cached attachment object to avoid having to re-fetch. This also triggers re-rendering of preview.
  87.                 mediaProps = mediaFrame.state().attributes.image.toJSON();
  88.                 linkType = mediaProps.link;
  89.                 mediaProps.link = mediaProps.linkUrl;
  90.                 control.selectedAttachment.set( mediaProps );
  91.                 control.displaySettings.set( 'link', linkType );
  92.  
  93.                 control.model.set( _.extend(
  94.                     control.mapMediaToModelProps( mediaProps ),
  95.                     { error: false }
  96.                 ) );
  97.             };
  98.  
  99.             mediaFrame.state( 'image-details' ).on( 'update', updateCallback );
  100.             mediaFrame.state( 'replace-image' ).on( 'replace', updateCallback );
  101.  
  102.             // Disable syncing of attachment changes back to server. See <https://core.trac.wordpress.org/ticket/40403>.
  103.             defaultSync = wp.media.model.Attachment.prototype.sync;
  104.             wp.media.model.Attachment.prototype.sync = function rejectedSync() {
  105.                 return $.Deferred().rejectWith( this ).promise();
  106.             };
  107.             mediaFrame.on( 'close', function onClose() {
  108.                 mediaFrame.detach();
  109.                 wp.media.model.Attachment.prototype.sync = defaultSync;
  110.             });
  111.  
  112.             mediaFrame.open();
  113.         },
  114.  
  115.         /**
  116.          * Get props which are merged on top of the model when an embed is chosen (as opposed to an attachment).
  117.          *
  118.          * @returns {Object} Reset/override props.
  119.          */
  120.         getEmbedResetProps: function getEmbedResetProps() {
  121.             return _.extend(
  122.                 component.MediaWidgetControl.prototype.getEmbedResetProps.call( this ),
  123.                 {
  124.                     size: 'full',
  125.                     width: 0,
  126.                     height: 0
  127.                 }
  128.             );
  129.         },
  130.  
  131.         /**
  132.          * Get the instance props from the media selection frame.
  133.          *
  134.          * Prevent the image_title attribute from being initially set when adding an image from the media library.
  135.          *
  136.          * @param {wp.media.view.MediaFrame.Select} mediaFrame - Select frame.
  137.          * @returns {Object} Props.
  138.          */
  139.         getModelPropsFromMediaFrame: function getModelPropsFromMediaFrame( mediaFrame ) {
  140.             var control = this;
  141.             return _.omit(
  142.                 component.MediaWidgetControl.prototype.getModelPropsFromMediaFrame.call( control, mediaFrame ),
  143.                 'image_title'
  144.             );
  145.         },
  146.  
  147.         /**
  148.          * Map model props to preview template props.
  149.          *
  150.          * @returns {Object} Preview template props.
  151.          */
  152.         mapModelToPreviewTemplateProps: function mapModelToPreviewTemplateProps() {
  153.             var control = this, previewTemplateProps, url;
  154.             url = control.model.get( 'url' );
  155.             previewTemplateProps = component.MediaWidgetControl.prototype.mapModelToPreviewTemplateProps.call( control );
  156.             previewTemplateProps.currentFilename = url ? url.replace( /\?.*$/, '' ).replace( /^.+\//, '' ) : '';
  157.             previewTemplateProps.link_url = control.model.get( 'link_url' );
  158.             return previewTemplateProps;
  159.         }
  160.     });
  161.  
  162.     // Exports.
  163.     component.controlConstructors.media_image = ImageWidgetControl;
  164.     component.modelConstructors.media_image = ImageWidgetModel;
  165.  
  166. })( wp.mediaWidgets, jQuery );
  167.