balmet.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

media-audio-widget.js (4284B)

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