home *** CD-ROM | disk | FTP | other *** search
/ HTML Examples / WP.iso / wordpress / wp-admin / js / widgets / media-audio-widget.js < prev    next >
Encoding:
JavaScript  |  2017-05-22  |  3.8 KB  |  151 lines
  1. /* eslint consistent-this: [ "error", "control" ] */
  2. (function( component ) {
  3.     'use strict';
  4.  
  5.     var AudioWidgetModel, AudioWidgetControl, AudioDetailsMediaFrame;
  6.  
  7.     /**
  8.      * Custom audio details frame that removes the replace-audio state.
  9.      *
  10.      * @class AudioDetailsMediaFrame
  11.      * @constructor
  12.      */
  13.     AudioDetailsMediaFrame = wp.media.view.MediaFrame.AudioDetails.extend({
  14.  
  15.         /**
  16.          * Create the default states.
  17.          *
  18.          * @returns {void}
  19.          */
  20.         createStates: function createStates() {
  21.             this.states.add([
  22.                 new wp.media.controller.AudioDetails({
  23.                     media: this.media
  24.                 }),
  25.  
  26.                 new wp.media.controller.MediaLibrary({
  27.                     type: 'audio',
  28.                     id: 'add-audio-source',
  29.                     title: wp.media.view.l10n.audioAddSourceTitle,
  30.                     toolbar: 'add-audio-source',
  31.                     media: this.media,
  32.                     menu: false
  33.                 })
  34.             ]);
  35.         }
  36.     });
  37.  
  38.     /**
  39.      * Audio widget model.
  40.      *
  41.      * See WP_Widget_Audio::enqueue_admin_scripts() for amending prototype from PHP exports.
  42.      *
  43.      * @class AudioWidgetModel
  44.      * @constructor
  45.      */
  46.     AudioWidgetModel = component.MediaWidgetModel.extend({});
  47.  
  48.     /**
  49.      * Audio widget control.
  50.      *
  51.      * See WP_Widget_Audio::enqueue_admin_scripts() for amending prototype from PHP exports.
  52.      *
  53.      * @class AudioWidgetModel
  54.      * @constructor
  55.      */
  56.     AudioWidgetControl = component.MediaWidgetControl.extend({
  57.  
  58.         /**
  59.          * Show display settings.
  60.          *
  61.          * @type {boolean}
  62.          */
  63.         showDisplaySettings: false,
  64.  
  65.         /**
  66.          * Map model props to media frame props.
  67.          *
  68.          * @param {Object} modelProps - Model props.
  69.          * @returns {Object} Media frame props.
  70.          */
  71.         mapModelToMediaFrameProps: function mapModelToMediaFrameProps( modelProps ) {
  72.             var control = this, mediaFrameProps;
  73.             mediaFrameProps = component.MediaWidgetControl.prototype.mapModelToMediaFrameProps.call( control, modelProps );
  74.             mediaFrameProps.link = 'embed';
  75.             return mediaFrameProps;
  76.         },
  77.  
  78.         /**
  79.          * Render preview.
  80.          *
  81.          * @returns {void}
  82.          */
  83.         renderPreview: function renderPreview() {
  84.             var control = this, previewContainer, previewTemplate, attachmentId, attachmentUrl;
  85.             attachmentId = control.model.get( 'attachment_id' );
  86.             attachmentUrl = control.model.get( 'url' );
  87.  
  88.             if ( ! attachmentId && ! attachmentUrl ) {
  89.                 return;
  90.             }
  91.  
  92.             previewContainer = control.$el.find( '.media-widget-preview' );
  93.             previewTemplate = wp.template( 'wp-media-widget-audio-preview' );
  94.  
  95.             previewContainer.html( previewTemplate({
  96.                 model: {
  97.                     attachment_id: control.model.get( 'attachment_id' ),
  98.                     src: attachmentUrl
  99.                 },
  100.                 error: control.model.get( 'error' )
  101.             }));
  102.             wp.mediaelement.initialize();
  103.         },
  104.  
  105.         /**
  106.          * Open the media audio-edit frame to modify the selected item.
  107.          *
  108.          * @returns {void}
  109.          */
  110.         editMedia: function editMedia() {
  111.             var control = this, mediaFrame, metadata, updateCallback;
  112.  
  113.             metadata = control.mapModelToMediaFrameProps( control.model.toJSON() );
  114.  
  115.             // Set up the media frame.
  116.             mediaFrame = new AudioDetailsMediaFrame({
  117.                 frame: 'audio',
  118.                 state: 'audio-details',
  119.                 metadata: metadata
  120.             });
  121.             wp.media.frame = mediaFrame;
  122.             mediaFrame.$el.addClass( 'media-widget' );
  123.  
  124.             updateCallback = function( mediaFrameProps ) {
  125.  
  126.                 // Update cached attachment object to avoid having to re-fetch. This also triggers re-rendering of preview.
  127.                 control.selectedAttachment.set( mediaFrameProps );
  128.  
  129.                 control.model.set( _.extend(
  130.                     control.model.defaults(),
  131.                     control.mapMediaToModelProps( mediaFrameProps ),
  132.                     { error: false }
  133.                 ) );
  134.             };
  135.  
  136.             mediaFrame.state( 'audio-details' ).on( 'update', updateCallback );
  137.             mediaFrame.state( 'replace-audio' ).on( 'replace', updateCallback );
  138.             mediaFrame.on( 'close', function() {
  139.                 mediaFrame.detach();
  140.             });
  141.  
  142.             mediaFrame.open();
  143.         }
  144.     });
  145.  
  146.     // Exports.
  147.     component.controlConstructors.media_audio = AudioWidgetControl;
  148.     component.modelConstructors.media_audio = AudioWidgetModel;
  149.  
  150. })( wp.mediaWidgets );
  151.