wp/wp-includes/media-template.php
changeset 5 5e2f62d02dcd
parent 0 d970ebf37754
child 7 cf61fcea0001
equal deleted inserted replaced
4:346c88efed21 5:5e2f62d02dcd
     4  *
     4  *
     5  * @package WordPress
     5  * @package WordPress
     6  * @subpackage Media
     6  * @subpackage Media
     7  * @since 3.5.0
     7  * @since 3.5.0
     8  */
     8  */
       
     9 
       
    10 /**
       
    11  * Output the markup for a audio tag to be used in an Underscore template
       
    12  * when data.model is passed.
       
    13  *
       
    14  * @since 3.9.0
       
    15  */
       
    16 function wp_underscore_audio_template() {
       
    17 	$audio_types = wp_get_audio_extensions();
       
    18 ?>
       
    19 <audio style="visibility: hidden"
       
    20 	controls
       
    21 	class="wp-audio-shortcode"
       
    22 	width="{{ _.isUndefined( data.model.width ) ? 400 : data.model.width }}"
       
    23 	preload="{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}"
       
    24 	<#
       
    25 	<?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
       
    26 	?>if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
       
    27 		#> <?php echo $attr ?><#
       
    28 	}
       
    29 	<?php endforeach ?>#>
       
    30 >
       
    31 	<# if ( ! _.isEmpty( data.model.src ) ) { #>
       
    32 	<source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
       
    33 	<# } #>
       
    34 
       
    35 	<?php foreach ( $audio_types as $type ):
       
    36 	?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) { #>
       
    37 	<source src="{{ data.model.<?php echo $type ?> }}" type="{{ wp.media.view.settings.embedMimes[ '<?php echo $type ?>' ] }}" />
       
    38 	<# } #>
       
    39 	<?php endforeach;
       
    40 ?></audio>
       
    41 <?php
       
    42 }
       
    43 
       
    44 /**
       
    45  * Output the markup for a video tag to be used in an Underscore template
       
    46  * when data.model is passed.
       
    47  *
       
    48  * @since 3.9.0
       
    49  */
       
    50 function wp_underscore_video_template() {
       
    51 	$video_types = wp_get_video_extensions();
       
    52 ?>
       
    53 <#  var w_rule = h_rule = '', classes = [],
       
    54 		w, h, settings = wp.media.view.settings,
       
    55 		isYouTube = isVimeo = false;
       
    56 
       
    57 	if ( ! _.isEmpty( data.model.src ) ) {
       
    58 		isYouTube = data.model.src.match(/youtube|youtu\.be/);
       
    59 		isVimeo = -1 !== data.model.src.indexOf('vimeo');
       
    60 	}
       
    61 
       
    62 	if ( settings.contentWidth && data.model.width >= settings.contentWidth ) {
       
    63 		w = settings.contentWidth;
       
    64 	} else {
       
    65 		w = data.model.width;
       
    66 	}
       
    67 
       
    68 	if ( w !== data.model.width ) {
       
    69 		h = Math.ceil( ( data.model.height * w ) / data.model.width );
       
    70 	} else {
       
    71 		h = data.model.height;
       
    72 	}
       
    73 
       
    74 	if ( w ) {
       
    75 		w_rule = 'width: ' + w + 'px; ';
       
    76 	}
       
    77 	if ( h ) {
       
    78 		h_rule = 'height: ' + h + 'px;';
       
    79 	}
       
    80 
       
    81 	if ( isYouTube ) {
       
    82 		classes.push( 'youtube-video' );
       
    83 	}
       
    84 
       
    85 	if ( isVimeo ) {
       
    86 		classes.push( 'vimeo-video' );
       
    87 	}
       
    88 
       
    89 #>
       
    90 <div style="{{ w_rule }}{{ h_rule }}" class="wp-video">
       
    91 <video controls
       
    92 	class="wp-video-shortcode {{ classes.join( ' ' ) }}"
       
    93 	<# if ( w ) { #>width="{{ w }}"<# } #>
       
    94 	<# if ( h ) { #>height="{{ h }}"<# } #>
       
    95 	<?php
       
    96 	$props = array( 'poster' => '', 'preload' => 'metadata' );
       
    97 	foreach ( $props as $key => $value ):
       
    98 		if ( empty( $value ) ) {
       
    99 		?><#
       
   100 		if ( ! _.isUndefined( data.model.<?php echo $key ?> ) && data.model.<?php echo $key ?> ) {
       
   101 			#> <?php echo $key ?>="{{ data.model.<?php echo $key ?> }}"<#
       
   102 		} #>
       
   103 		<?php } else {
       
   104 			echo $key ?>="{{ _.isUndefined( data.model.<?php echo $key ?> ) ? '<?php echo $value ?>' : data.model.<?php echo $key ?> }}"<?php
       
   105 		}
       
   106 	endforeach;
       
   107 	?><#
       
   108 	<?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
       
   109 	?> if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
       
   110 		#> <?php echo $attr ?><#
       
   111 	}
       
   112 	<?php endforeach ?>#>
       
   113 >
       
   114 	<# if ( ! _.isEmpty( data.model.src ) ) {
       
   115 		if ( isYouTube ) { #>
       
   116 		<source src="{{ data.model.src }}" type="video/youtube" />
       
   117 		<# } else if ( isVimeo ) { #>
       
   118 		<source src="{{ data.model.src }}" type="video/vimeo" />
       
   119 		<# } else { #>
       
   120 		<source src="{{ data.model.src }}" type="{{ settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
       
   121 		<# }
       
   122 	} #>
       
   123 
       
   124 	<?php foreach ( $video_types as $type ):
       
   125 	?><# if ( data.model.<?php echo $type ?> ) { #>
       
   126 	<source src="{{ data.model.<?php echo $type ?> }}" type="{{ settings.embedMimes[ '<?php echo $type ?>' ] }}" />
       
   127 	<# } #>
       
   128 	<?php endforeach; ?>
       
   129 	{{{ data.model.content }}}
       
   130 </video>
       
   131 </div>
       
   132 <?php
       
   133 }
     9 
   134 
    10 /**
   135 /**
    11  * Prints the templates used in the media manager.
   136  * Prints the templates used in the media manager.
    12  *
   137  *
    13  * @since 3.5.0
   138  * @since 3.5.0
    16 	global $is_IE;
   141 	global $is_IE;
    17 	$class = 'media-modal wp-core-ui';
   142 	$class = 'media-modal wp-core-ui';
    18 	if ( $is_IE && strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 7') !== false )
   143 	if ( $is_IE && strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 7') !== false )
    19 		$class .= ' ie7';
   144 		$class .= ' ie7';
    20 	?>
   145 	?>
       
   146 	<!--[if lte IE 8]>
       
   147 	<style>
       
   148 		.attachment:focus {
       
   149 			outline: #1e8cbe solid;
       
   150 		}
       
   151 		.selected.attachment {
       
   152 			outline: #1e8cbe solid;
       
   153 		}
       
   154 	</style>
       
   155 	<![endif]-->
    21 	<script type="text/html" id="tmpl-media-frame">
   156 	<script type="text/html" id="tmpl-media-frame">
    22 		<div class="media-frame-menu"></div>
   157 		<div class="media-frame-menu"></div>
    23 		<div class="media-frame-title"></div>
   158 		<div class="media-frame-title"></div>
    24 		<div class="media-frame-router"></div>
   159 		<div class="media-frame-router"></div>
    25 		<div class="media-frame-content"></div>
   160 		<div class="media-frame-content"></div>
    27 		<div class="media-frame-uploader"></div>
   162 		<div class="media-frame-uploader"></div>
    28 	</script>
   163 	</script>
    29 
   164 
    30 	<script type="text/html" id="tmpl-media-modal">
   165 	<script type="text/html" id="tmpl-media-modal">
    31 		<div class="<?php echo $class; ?>">
   166 		<div class="<?php echo $class; ?>">
    32 			<a class="media-modal-close" href="#" title="<?php esc_attr_e('Close'); ?>"><span class="media-modal-icon"></span></a>
   167 			<a class="media-modal-close" href="#"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close media panel' ); ?></span></span></a>
    33 			<div class="media-modal-content"></div>
   168 			<div class="media-modal-content"></div>
    34 		</div>
   169 		</div>
    35 		<div class="media-modal-backdrop"></div>
   170 		<div class="media-modal-backdrop"></div>
    36 	</script>
   171 	</script>
    37 
   172 
    39 		<div class="uploader-window-content">
   174 		<div class="uploader-window-content">
    40 			<h3><?php _e( 'Drop files to upload' ); ?></h3>
   175 			<h3><?php _e( 'Drop files to upload' ); ?></h3>
    41 		</div>
   176 		</div>
    42 	</script>
   177 	</script>
    43 
   178 
       
   179 	<script type="text/html" id="tmpl-uploader-editor">
       
   180 		<div class="uploader-editor-content">
       
   181 			<div class="uploader-editor-title"><?php _e( 'Drop files to upload' ); ?></div>
       
   182 		</div>
       
   183 	</script>
       
   184 
    44 	<script type="text/html" id="tmpl-uploader-inline">
   185 	<script type="text/html" id="tmpl-uploader-inline">
    45 		<# var messageClass = data.message ? 'has-upload-message' : 'no-upload-message'; #>
   186 		<# var messageClass = data.message ? 'has-upload-message' : 'no-upload-message'; #>
       
   187 		<# if ( data.canClose ) { #>
       
   188 		<button class="close dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Close uploader' ); ?></span></button>
       
   189 		<# } #>
    46 		<div class="uploader-inline-content {{ messageClass }}">
   190 		<div class="uploader-inline-content {{ messageClass }}">
    47 		<# if ( data.message ) { #>
   191 		<# if ( data.message ) { #>
    48 			<h3 class="upload-message">{{ data.message }}</h3>
   192 			<h3 class="upload-message">{{ data.message }}</h3>
    49 		<# } #>
   193 		<# } #>
    50 		<?php if ( ! _device_can_upload() ) : ?>
   194 		<?php if ( ! _device_can_upload() ) : ?>
    51 			<h3 class="upload-instructions"><?php printf( __('The web browser on your device cannot be used to upload files. You may be able to use the <a href="%s">native app for your device</a> instead.'), 'http://wordpress.org/mobile/' ); ?></h3>
   195 			<h3 class="upload-instructions"><?php printf( __('The web browser on your device cannot be used to upload files. You may be able to use the <a href="%s">native app for your device</a> instead.'), 'https://apps.wordpress.org/' ); ?></h3>
    52 		<?php elseif ( is_multisite() && ! is_upload_space_available() ) : ?>
   196 		<?php elseif ( is_multisite() && ! is_upload_space_available() ) : ?>
    53 			<h3 class="upload-instructions"><?php _e( 'Upload Limit Exceeded' ); ?></h3>
   197 			<h3 class="upload-instructions"><?php _e( 'Upload Limit Exceeded' ); ?></h3>
    54 			<?php do_action( 'upload_ui_over_quota' ); ?>
   198 			<?php
       
   199 			/** This action is documented in wp-admin/includes/media.php */
       
   200 			do_action( 'upload_ui_over_quota' ); ?>
    55 
   201 
    56 		<?php else : ?>
   202 		<?php else : ?>
    57 			<div class="upload-ui">
   203 			<div class="upload-ui">
    58 				<h3 class="upload-instructions drop-instructions"><?php _e( 'Drop files anywhere to upload' ); ?></h3>
   204 				<h3 class="upload-instructions drop-instructions"><?php _e( 'Drop files anywhere to upload' ); ?></h3>
       
   205 				<p class="upload-instructions drop-instructions"><?php _ex( 'or', 'Uploader: Drop files here - or - Select Files' ); ?></p>
    59 				<a href="#" class="browser button button-hero"><?php _e( 'Select Files' ); ?></a>
   206 				<a href="#" class="browser button button-hero"><?php _e( 'Select Files' ); ?></a>
    60 			</div>
   207 			</div>
    61 
   208 
    62 			<div class="upload-inline-status"></div>
   209 			<div class="upload-inline-status"></div>
    63 
   210 
    64 			<div class="post-upload-ui">
   211 			<div class="post-upload-ui">
    65 				<?php
   212 				<?php
       
   213 				/** This action is documented in wp-admin/includes/media.php */
    66 				do_action( 'pre-upload-ui' );
   214 				do_action( 'pre-upload-ui' );
       
   215 				/** This action is documented in wp-admin/includes/media.php */
    67 				do_action( 'pre-plupload-upload-ui' );
   216 				do_action( 'pre-plupload-upload-ui' );
    68 
   217 
    69 				if ( 10 === remove_action( 'post-plupload-upload-ui', 'media_upload_flash_bypass' ) ) {
   218 				if ( 10 === remove_action( 'post-plupload-upload-ui', 'media_upload_flash_bypass' ) ) {
       
   219 					/** This action is documented in wp-admin/includes/media.php */
    70 					do_action( 'post-plupload-upload-ui' );
   220 					do_action( 'post-plupload-upload-ui' );
    71 					add_action( 'post-plupload-upload-ui', 'media_upload_flash_bypass' );
   221 					add_action( 'post-plupload-upload-ui', 'media_upload_flash_bypass' );
    72 				} else {
   222 				} else {
       
   223 					/** This action is documented in wp-admin/includes/media.php */
    73 					do_action( 'post-plupload-upload-ui' );
   224 					do_action( 'post-plupload-upload-ui' );
    74 				}
   225 				}
    75 
   226 
    76 				$upload_size_unit = $max_upload_size = wp_max_upload_size();
   227 				$max_upload_size = wp_max_upload_size();
    77 				$byte_sizes = array( 'KB', 'MB', 'GB' );
   228 				if ( ! $max_upload_size ) {
    78 
   229 					$max_upload_size = 0;
    79 				for ( $u = -1; $upload_size_unit > 1024 && $u < count( $byte_sizes ) - 1; $u++ ) {
       
    80 					$upload_size_unit /= 1024;
       
    81 				}
   230 				}
    82 
       
    83 				if ( $u < 0 ) {
       
    84 					$upload_size_unit = 0;
       
    85 					$u = 0;
       
    86 				} else {
       
    87 					$upload_size_unit = (int) $upload_size_unit;
       
    88 				}
       
    89 
       
    90 				?>
   231 				?>
    91 
   232 
    92 				<p class="max-upload-size"><?php
   233 				<p class="max-upload-size"><?php
    93 					printf( __( 'Maximum upload file size: %d%s.' ), esc_html($upload_size_unit), esc_html($byte_sizes[$u]) );
   234 					printf( __( 'Maximum upload file size: %s.' ), esc_html( size_format( $max_upload_size ) ) );
    94 				?></p>
   235 				?></p>
    95 
   236 
    96 				<?php if ( ( $GLOBALS['is_IE'] || $GLOBALS['is_opera']) && $max_upload_size > 100 * 1024 * 1024 ) :
   237 				<# if ( data.suggestedWidth && data.suggestedHeight ) { #>
    97 					$browser_uploader = admin_url( 'media-new.php?browser-uploader&post_id=' ) . '{{ data.postId }}';
   238 					<p class="suggested-dimensions">
    98 					?>
   239 						<?php _e( 'Suggested image dimensions:' ); ?> {{data.suggestedWidth}} &times; {{data.suggestedHeight}}
    99 					<p class="big-file-warning"><?php printf( __( 'Your browser has some limitations uploading large files with the multi-file uploader. Please use the <a href="%1$s" target="%2$s">browser uploader</a> for files over 100MB.' ),
   240 					</p>
   100 						$browser_uploader, '_blank' ); ?></p>
   241 				<# } #>
   101 				<?php endif; ?>
   242 
   102 
   243 				<?php
   103 				<?php do_action( 'post-upload-ui' ); ?>
   244 				/** This action is documented in wp-admin/includes/media.php */
       
   245 				do_action( 'post-upload-ui' ); ?>
   104 			</div>
   246 			</div>
   105 		<?php endif; ?>
   247 		<?php endif; ?>
   106 		</div>
   248 		</div>
       
   249 	</script>
       
   250 
       
   251 	<script type="text/html" id="tmpl-media-library-view-switcher">
       
   252 		<a href="<?php echo esc_url( add_query_arg( 'mode', 'list', $_SERVER['REQUEST_URI'] ) ) ?>" class="view-list">
       
   253 			<span class="screen-reader-text"><?php _e( 'List View' ); ?></span>
       
   254 		</a>
       
   255 		<a href="<?php echo esc_url( add_query_arg( 'mode', 'grid', $_SERVER['REQUEST_URI'] ) ) ?>" class="view-grid current">
       
   256 			<span class="screen-reader-text"><?php _e( 'Grid View' ); ?></span>
       
   257 		</a>
   107 	</script>
   258 	</script>
   108 
   259 
   109 	<script type="text/html" id="tmpl-uploader-status">
   260 	<script type="text/html" id="tmpl-uploader-status">
   110 		<h3><?php _e( 'Uploading' ); ?></h3>
   261 		<h3><?php _e( 'Uploading' ); ?></h3>
   111 		<a class="upload-dismiss-errors" href="#"><?php _e('Dismiss Errors'); ?></a>
   262 		<a class="upload-dismiss-errors" href="#"><?php _e('Dismiss Errors'); ?></a>
   125 		<span class="upload-error-label"><?php _e('Error'); ?></span>
   276 		<span class="upload-error-label"><?php _e('Error'); ?></span>
   126 		<span class="upload-error-filename">{{{ data.filename }}}</span>
   277 		<span class="upload-error-filename">{{{ data.filename }}}</span>
   127 		<span class="upload-error-message">{{ data.message }}</span>
   278 		<span class="upload-error-message">{{ data.message }}</span>
   128 	</script>
   279 	</script>
   129 
   280 
       
   281 	<script type="text/html" id="tmpl-edit-attachment-frame">
       
   282 		<div class="edit-media-header">
       
   283 			<button class="left dashicons <# if ( ! data.hasPrevious ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit previous media item' ); ?></span></button>
       
   284 			<button class="right dashicons <# if ( ! data.hasNext ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Edit next media item' ); ?></span></button>
       
   285 		</div>
       
   286 		<div class="media-frame-title"></div>
       
   287 		<div class="media-frame-content"></div>
       
   288 	</script>
       
   289 
       
   290 	<script type="text/html" id="tmpl-attachment-details-two-column">
       
   291 		<div class="attachment-media-view {{ data.orientation }}">
       
   292 			<div class="thumbnail thumbnail-{{ data.type }}">
       
   293 				<# if ( data.uploading ) { #>
       
   294 					<div class="media-progress-bar"><div></div></div>
       
   295 				<# } else if ( 'image' === data.type && data.sizes && data.sizes.large ) { #>
       
   296 					<img class="details-image" src="{{ data.sizes.large.url }}" draggable="false" />
       
   297 				<# } else if ( 'image' === data.type && data.sizes && data.sizes.full ) { #>
       
   298 					<img class="details-image" src="{{ data.sizes.full.url }}" draggable="false" />
       
   299 				<# } else if ( -1 === jQuery.inArray( data.type, [ 'audio', 'video' ] ) ) { #>
       
   300 					<img class="details-image" src="{{ data.icon }}" class="icon" draggable="false" />
       
   301 				<# } #>
       
   302 
       
   303 				<# if ( 'audio' === data.type ) { #>
       
   304 				<div class="wp-media-wrapper">
       
   305 					<audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none">
       
   306 						<source type="{{ data.mime }}" src="{{ data.url }}"/>
       
   307 					</audio>
       
   308 				</div>
       
   309 				<# } else if ( 'video' === data.type ) {
       
   310 					var w_rule = h_rule = '';
       
   311 					if ( data.width ) {
       
   312 						w_rule = 'width: ' + data.width + 'px;';
       
   313 					} else if ( wp.media.view.settings.contentWidth ) {
       
   314 						w_rule = 'width: ' + wp.media.view.settings.contentWidth + 'px;';
       
   315 					}
       
   316 					if ( data.height ) {
       
   317 						h_rule = 'height: ' + data.height + 'px;';
       
   318 					}
       
   319 				#>
       
   320 				<div style="{{ w_rule }}{{ h_rule }}" class="wp-media-wrapper wp-video">
       
   321 					<video controls="controls" class="wp-video-shortcode" preload="metadata"
       
   322 						<# if ( data.width ) { #>width="{{ data.width }}"<# } #>
       
   323 						<# if ( data.height ) { #>height="{{ data.height }}"<# } #>
       
   324 						<# if ( data.image && data.image.src !== data.icon ) { #>poster="{{ data.image.src }}"<# } #>>
       
   325 						<source type="{{ data.mime }}" src="{{ data.url }}"/>
       
   326 					</video>
       
   327 				</div>
       
   328 				<# } #>
       
   329 
       
   330 				<div class="attachment-actions">
       
   331 					<# if ( 'image' === data.type && ! data.uploading && data.sizes && data.can.save ) { #>
       
   332 						<a class="button edit-attachment" href="#"><?php _e( 'Edit Image' ); ?></a>
       
   333 					<# } #>
       
   334 				</div>
       
   335 			</div>
       
   336 		</div>
       
   337 		<div class="attachment-info">
       
   338 			<span class="settings-save-status">
       
   339 				<span class="spinner"></span>
       
   340 				<span class="saved"><?php esc_html_e('Saved.'); ?></span>
       
   341 			</span>
       
   342 			<div class="details">
       
   343 				<div class="filename"><strong><?php _e( 'File name:' ); ?></strong> {{ data.filename }}</div>
       
   344 				<div class="filename"><strong><?php _e( 'File type:' ); ?></strong> {{ data.mime }}</div>
       
   345 				<div class="uploaded"><strong><?php _e( 'Uploaded on:' ); ?></strong> {{ data.dateFormatted }}</div>
       
   346 
       
   347 				<div class="file-size"><strong><?php _e( 'File size:' ); ?></strong> {{ data.filesizeHumanReadable }}</div>
       
   348 				<# if ( 'image' === data.type && ! data.uploading ) { #>
       
   349 					<# if ( data.width && data.height ) { #>
       
   350 						<div class="dimensions"><strong><?php _e( 'Dimensions:' ); ?></strong> {{ data.width }} &times; {{ data.height }}</div>
       
   351 					<# } #>
       
   352 				<# } #>
       
   353 
       
   354 				<# if ( data.fileLength ) { #>
       
   355 					<div class="file-length"><strong><?php _e( 'Length:' ); ?></strong> {{ data.fileLength }}</div>
       
   356 				<# } #>
       
   357 
       
   358 				<# if ( 'audio' === data.type && data.meta.bitrate ) { #>
       
   359 					<div class="bitrate">
       
   360 						<strong><?php _e( 'Bitrate:' ); ?></strong> {{ Math.round( data.meta.bitrate / 1000 ) }}kb/s
       
   361 						<# if ( data.meta.bitrate_mode ) { #>
       
   362 						{{ ' ' + data.meta.bitrate_mode.toUpperCase() }}
       
   363 						<# } #>
       
   364 					</div>
       
   365 				<# } #>
       
   366 
       
   367 				<div class="compat-meta">
       
   368 					<# if ( data.compat && data.compat.meta ) { #>
       
   369 						{{{ data.compat.meta }}}
       
   370 					<# } #>
       
   371 				</div>
       
   372 			</div>
       
   373 
       
   374 			<div class="settings">
       
   375 				<label class="setting" data-setting="url">
       
   376 					<span class="name"><?php _e('URL'); ?></span>
       
   377 					<input type="text" value="{{ data.url }}" readonly />
       
   378 				</label>
       
   379 				<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
       
   380 				<label class="setting" data-setting="title">
       
   381 					<span class="name"><?php _e('Title'); ?></span>
       
   382 					<input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
       
   383 				</label>
       
   384 				<# if ( 'audio' === data.type ) { #>
       
   385 				<?php foreach ( array(
       
   386 					'artist' => __( 'Artist' ),
       
   387 					'album' => __( 'Album' ),
       
   388 				) as $key => $label ) : ?>
       
   389 				<label class="setting" data-setting="<?php echo esc_attr( $key ) ?>">
       
   390 					<span class="name"><?php echo $label ?></span>
       
   391 					<input type="text" value="{{ data.<?php echo $key ?> || data.meta.<?php echo $key ?> || '' }}" />
       
   392 				</label>
       
   393 				<?php endforeach; ?>
       
   394 				<# } #>
       
   395 				<label class="setting" data-setting="caption">
       
   396 					<span class="name"><?php _e( 'Caption' ); ?></span>
       
   397 					<textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
       
   398 				</label>
       
   399 				<# if ( 'image' === data.type ) { #>
       
   400 					<label class="setting" data-setting="alt">
       
   401 						<span class="name"><?php _e( 'Alt Text' ); ?></span>
       
   402 						<input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
       
   403 					</label>
       
   404 				<# } #>
       
   405 				<label class="setting" data-setting="description">
       
   406 					<span class="name"><?php _e('Description'); ?></span>
       
   407 					<textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
       
   408 				</label>
       
   409 				<label class="setting">
       
   410 					<span class="name"><?php _e( 'Uploaded By' ); ?></span>
       
   411 					<span class="value">{{ data.authorName }}</span>
       
   412 				</label>
       
   413 				<# if ( data.uploadedToTitle ) { #>
       
   414 					<label class="setting">
       
   415 						<span class="name"><?php _e( 'Uploaded To' ); ?></span>
       
   416 						<# if ( data.uploadedToLink ) { #>
       
   417 							<span class="value"><a href="{{ data.uploadedToLink }}">{{ data.uploadedToTitle }}</a></span>
       
   418 						<# } else { #>
       
   419 							<span class="value">{{ data.uploadedToTitle }}</span>
       
   420 						<# } #>
       
   421 					</label>
       
   422 				<# } #>
       
   423 				<div class="attachment-compat"></div>
       
   424 			</div>
       
   425 
       
   426 			<div class="actions">
       
   427 				<a class="view-attachment" href="{{ data.link }}"><?php _e( 'View attachment page' ); ?></a>
       
   428 				<# if ( data.can.save ) { #> |
       
   429 					<a href="post.php?post={{ data.id }}&action=edit"><?php _e( 'Edit more details' ); ?></a>
       
   430 				<# } #>
       
   431 				<# if ( ! data.uploading && data.can.remove ) { #> |
       
   432 					<?php if ( MEDIA_TRASH ): ?>
       
   433 						<# if ( 'trash' === data.status ) { #>
       
   434 							<a class="untrash-attachment" href="#"><?php _e( 'Untrash' ); ?></a>
       
   435 						<# } else { #>
       
   436 							<a class="trash-attachment" href="#"><?php _ex( 'Trash', 'verb' ); ?></a>
       
   437 						<# } #>
       
   438 					<?php else: ?>
       
   439 						<a class="delete-attachment" href="#"><?php _e( 'Delete Permanently' ); ?></a>
       
   440 					<?php endif; ?>
       
   441 				<# } #>
       
   442 			</div>
       
   443 
       
   444 		</div>
       
   445 	</script>
       
   446 
   130 	<script type="text/html" id="tmpl-attachment">
   447 	<script type="text/html" id="tmpl-attachment">
   131 		<div class="attachment-preview type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}">
   448 		<div class="attachment-preview js--select-attachment type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}">
   132 			<# if ( data.uploading ) { #>
   449 			<div class="thumbnail">
   133 				<div class="media-progress-bar"><div></div></div>
   450 				<# if ( data.uploading ) { #>
   134 			<# } else if ( 'image' === data.type ) { #>
   451 					<div class="media-progress-bar"><div style="width: {{ data.percent }}%"></div></div>
   135 				<div class="thumbnail">
   452 				<# } else if ( 'image' === data.type && data.sizes ) { #>
   136 					<div class="centered">
   453 					<div class="centered">
   137 						<img src="{{ data.size.url }}" draggable="false" />
   454 						<img src="{{ data.size.url }}" draggable="false" alt="" />
   138 					</div>
   455 					</div>
   139 				</div>
   456 				<# } else { #>
   140 			<# } else { #>
   457 					<div class="centered">
   141 				<img src="{{ data.icon }}" class="icon" draggable="false" />
   458 						<# if ( data.image && data.image.src && data.image.src !== data.icon ) { #>
   142 				<div class="filename">
   459 							<img src="{{ data.image.src }}" class="thumbnail" draggable="false" />
   143 					<div>{{ data.filename }}</div>
   460 						<# } else { #>
   144 				</div>
   461 							<img src="{{ data.icon }}" class="icon" draggable="false" />
       
   462 						<# } #>
       
   463 					</div>
       
   464 					<div class="filename">
       
   465 						<div>{{ data.filename }}</div>
       
   466 					</div>
       
   467 				<# } #>
       
   468 			</div>
       
   469 			<# if ( data.buttons.close ) { #>
       
   470 				<a class="close media-modal-icon" href="#" title="<?php esc_attr_e('Remove'); ?>"></a>
   145 			<# } #>
   471 			<# } #>
   146 
   472 		</div>
   147 			<# if ( data.buttons.close ) { #>
   473 		<# if ( data.buttons.check ) { #>
   148 				<a class="close media-modal-icon" href="#" title="<?php _e('Remove'); ?>"></a>
   474 			<a class="check" href="#" title="<?php esc_attr_e('Deselect'); ?>" tabindex="-1"><div class="media-modal-icon"></div></a>
   149 			<# } #>
   475 		<# } #>
   150 
       
   151 			<# if ( data.buttons.check ) { #>
       
   152 				<a class="check" href="#" title="<?php _e('Deselect'); ?>"><div class="media-modal-icon"></div></a>
       
   153 			<# } #>
       
   154 		</div>
       
   155 		<#
   476 		<#
   156 		var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly';
   477 		var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly';
   157 		if ( data.describe ) { #>
   478 		if ( data.describe ) {
   158 			<# if ( 'image' === data.type ) { #>
   479 			if ( 'image' === data.type ) { #>
   159 				<input type="text" value="{{ data.caption }}" class="describe" data-setting="caption"
   480 				<input type="text" value="{{ data.caption }}" class="describe" data-setting="caption"
   160 					placeholder="<?php esc_attr_e('Caption this image&hellip;'); ?>" {{ maybeReadOnly }} />
   481 					placeholder="<?php esc_attr_e('Caption this image&hellip;'); ?>" {{ maybeReadOnly }} />
   161 			<# } else { #>
   482 			<# } else { #>
   162 				<input type="text" value="{{ data.title }}" class="describe" data-setting="title"
   483 				<input type="text" value="{{ data.title }}" class="describe" data-setting="title"
   163 					<# if ( 'video' === data.type ) { #>
   484 					<# if ( 'video' === data.type ) { #>
   165 					<# } else if ( 'audio' === data.type ) { #>
   486 					<# } else if ( 'audio' === data.type ) { #>
   166 						placeholder="<?php esc_attr_e('Describe this audio file&hellip;'); ?>"
   487 						placeholder="<?php esc_attr_e('Describe this audio file&hellip;'); ?>"
   167 					<# } else { #>
   488 					<# } else { #>
   168 						placeholder="<?php esc_attr_e('Describe this media file&hellip;'); ?>"
   489 						placeholder="<?php esc_attr_e('Describe this media file&hellip;'); ?>"
   169 					<# } #> {{ maybeReadOnly }} />
   490 					<# } #> {{ maybeReadOnly }} />
   170 			<# } #>
   491 			<# }
   171 		<# } #>
   492 		} #>
   172 	</script>
   493 	</script>
   173 
   494 
   174 	<script type="text/html" id="tmpl-attachment-details">
   495 	<script type="text/html" id="tmpl-attachment-details">
   175 		<h3>
   496 		<h3>
   176 			<?php _e('Attachment Details'); ?>
   497 			<?php _e('Attachment Details'); ?>
   179 				<span class="spinner"></span>
   500 				<span class="spinner"></span>
   180 				<span class="saved"><?php esc_html_e('Saved.'); ?></span>
   501 				<span class="saved"><?php esc_html_e('Saved.'); ?></span>
   181 			</span>
   502 			</span>
   182 		</h3>
   503 		</h3>
   183 		<div class="attachment-info">
   504 		<div class="attachment-info">
   184 			<div class="thumbnail">
   505 			<div class="thumbnail thumbnail-{{ data.type }}">
   185 				<# if ( data.uploading ) { #>
   506 				<# if ( data.uploading ) { #>
   186 					<div class="media-progress-bar"><div></div></div>
   507 					<div class="media-progress-bar"><div></div></div>
   187 				<# } else if ( 'image' === data.type ) { #>
   508 				<# } else if ( 'image' === data.type && data.sizes ) { #>
   188 					<img src="{{ data.size.url }}" draggable="false" />
   509 					<img src="{{ data.size.url }}" draggable="false" />
   189 				<# } else { #>
   510 				<# } else { #>
   190 					<img src="{{ data.icon }}" class="icon" draggable="false" />
   511 					<img src="{{ data.icon }}" class="icon" draggable="false" />
   191 				<# } #>
   512 				<# } #>
   192 			</div>
   513 			</div>
   193 			<div class="details">
   514 			<div class="details">
   194 				<div class="filename">{{ data.filename }}</div>
   515 				<div class="filename">{{ data.filename }}</div>
   195 				<div class="uploaded">{{ data.dateFormatted }}</div>
   516 				<div class="uploaded">{{ data.dateFormatted }}</div>
   196 
   517 
       
   518 				<div class="file-size">{{ data.filesizeHumanReadable }}</div>
   197 				<# if ( 'image' === data.type && ! data.uploading ) { #>
   519 				<# if ( 'image' === data.type && ! data.uploading ) { #>
   198 					<# if ( data.width && data.height ) { #>
   520 					<# if ( data.width && data.height ) { #>
   199 						<div class="dimensions">{{ data.width }} &times; {{ data.height }}</div>
   521 						<div class="dimensions">{{ data.width }} &times; {{ data.height }}</div>
   200 					<# } #>
   522 					<# } #>
   201 
   523 
   202 					<# if ( data.can.save ) { #>
   524 					<# if ( data.can.save && data.sizes ) { #>
   203 						<a class="edit-attachment" href="{{ data.editLink }}&amp;image-editor" target="_blank"><?php _e( 'Edit Image' ); ?></a>
   525 						<a class="edit-attachment" href="{{ data.editLink }}&amp;image-editor" target="_blank"><?php _e( 'Edit Image' ); ?></a>
   204 						<a class="refresh-attachment" href="#"><?php _e( 'Refresh' ); ?></a>
   526 						<a class="refresh-attachment" href="#"><?php _e( 'Refresh' ); ?></a>
   205 					<# } #>
   527 					<# } #>
   206 				<# } #>
   528 				<# } #>
   207 
   529 
   208 				<# if ( data.fileLength ) { #>
   530 				<# if ( data.fileLength ) { #>
   209 					<div class="file-length"><?php _e( 'Length:' ); ?> {{ data.fileLength }}</div>
   531 					<div class="file-length"><?php _e( 'Length:' ); ?> {{ data.fileLength }}</div>
   210 				<# } #>
   532 				<# } #>
   211 
   533 
   212 				<# if ( ! data.uploading && data.can.remove ) { #>
   534 				<# if ( ! data.uploading && data.can.remove ) { #>
   213 					<a class="delete-attachment" href="#"><?php _e( 'Delete Permanently' ); ?></a>
   535 					<?php if ( MEDIA_TRASH ): ?>
       
   536 					<# if ( 'trash' === data.status ) { #>
       
   537 						<a class="untrash-attachment" href="#"><?php _e( 'Untrash' ); ?></a>
       
   538 					<# } else { #>
       
   539 						<a class="trash-attachment" href="#"><?php _ex( 'Trash', 'verb' ); ?></a>
       
   540 					<# } #>
       
   541 					<?php else: ?>
       
   542 						<a class="delete-attachment" href="#"><?php _e( 'Delete Permanently' ); ?></a>
       
   543 					<?php endif; ?>
   214 				<# } #>
   544 				<# } #>
   215 
   545 
   216 				<div class="compat-meta">
   546 				<div class="compat-meta">
   217 					<# if ( data.compat && data.compat.meta ) { #>
   547 					<# if ( data.compat && data.compat.meta ) { #>
   218 						{{{ data.compat.meta }}}
   548 						{{{ data.compat.meta }}}
   219 					<# } #>
   549 					<# } #>
   220 				</div>
   550 				</div>
   221 			</div>
   551 			</div>
   222 		</div>
   552 		</div>
   223 
   553 
       
   554 		<label class="setting" data-setting="url">
       
   555 			<span class="name"><?php _e('URL'); ?></span>
       
   556 			<input type="text" value="{{ data.url }}" readonly />
       
   557 		</label>
   224 		<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
   558 		<# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
   225 			<label class="setting" data-setting="title">
   559 		<label class="setting" data-setting="title">
   226 				<span><?php _e('Title'); ?></span>
   560 			<span class="name"><?php _e('Title'); ?></span>
   227 				<input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
   561 			<input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
   228 			</label>
   562 		</label>
   229 			<label class="setting" data-setting="caption">
   563 		<# if ( 'audio' === data.type ) { #>
   230 				<span><?php _e('Caption'); ?></span>
   564 		<?php foreach ( array(
   231 				<textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
   565 			'artist' => __( 'Artist' ),
   232 			</label>
   566 			'album' => __( 'Album' ),
       
   567 		) as $key => $label ) : ?>
       
   568 		<label class="setting" data-setting="<?php echo esc_attr( $key ) ?>">
       
   569 			<span class="name"><?php echo $label ?></span>
       
   570 			<input type="text" value="{{ data.<?php echo $key ?> || data.meta.<?php echo $key ?> || '' }}" />
       
   571 		</label>
       
   572 		<?php endforeach; ?>
       
   573 		<# } #>
       
   574 		<label class="setting" data-setting="caption">
       
   575 			<span class="name"><?php _e('Caption'); ?></span>
       
   576 			<textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
       
   577 		</label>
   233 		<# if ( 'image' === data.type ) { #>
   578 		<# if ( 'image' === data.type ) { #>
   234 			<label class="setting" data-setting="alt">
   579 			<label class="setting" data-setting="alt">
   235 				<span><?php _e('Alt Text'); ?></span>
   580 				<span class="name"><?php _e('Alt Text'); ?></span>
   236 				<input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
   581 				<input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
   237 			</label>
   582 			</label>
   238 		<# } #>
   583 		<# } #>
   239 			<label class="setting" data-setting="description">
   584 		<label class="setting" data-setting="description">
   240 				<span><?php _e('Description'); ?></span>
   585 			<span class="name"><?php _e('Description'); ?></span>
   241 				<textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
   586 			<textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
   242 			</label>
   587 		</label>
   243 	</script>
   588 	</script>
   244 
   589 
   245 	<script type="text/html" id="tmpl-media-selection">
   590 	<script type="text/html" id="tmpl-media-selection">
   246 		<div class="selection-info">
   591 		<div class="selection-info">
   247 			<span class="count"></span>
   592 			<span class="count"></span>
   248 			<# if ( data.editable ) { #>
   593 			<# if ( data.editable ) { #>
   249 				<a class="edit-selection" href="#"><?php _e('Edit'); ?></a>
   594 				<a class="edit-selection" href="#"><?php _e( 'Edit Selection' ); ?></a>
   250 			<# } #>
   595 			<# } #>
   251 			<# if ( data.clearable ) { #>
   596 			<# if ( data.clearable ) { #>
   252 				<a class="clear-selection" href="#"><?php _e('Clear'); ?></a>
   597 				<a class="clear-selection" href="#"><?php _e('Clear'); ?></a>
   253 			<# } #>
   598 			<# } #>
   254 		</div>
   599 		</div>
   338 					data-setting="size"
   683 					data-setting="size"
   339 					<# if ( data.userSettings ) { #>
   684 					<# if ( data.userSettings ) { #>
   340 						data-user-setting="imgsize"
   685 						data-user-setting="imgsize"
   341 					<# } #>>
   686 					<# } #>>
   342 					<?php
   687 					<?php
   343 
       
   344 					/** This filter is documented in wp-admin/includes/media.php */
   688 					/** This filter is documented in wp-admin/includes/media.php */
   345 					$sizes = apply_filters( 'image_size_names_choose', array(
   689 					$sizes = apply_filters( 'image_size_names_choose', array(
   346 						'thumbnail' => __('Thumbnail'),
   690 						'thumbnail' => __('Thumbnail'),
   347 						'medium'    => __('Medium'),
   691 						'medium'    => __('Medium'),
   348 						'large'     => __('Large'),
   692 						'large'     => __('Large'),
   372 				data-setting="link"
   716 				data-setting="link"
   373 				<# if ( data.userSettings ) { #>
   717 				<# if ( data.userSettings ) { #>
   374 					data-user-setting="urlbutton"
   718 					data-user-setting="urlbutton"
   375 				<# } #>>
   719 				<# } #>>
   376 
   720 
   377 				<option value="post" selected>
   721 				<option value="post" <# if ( ! wp.media.galleryDefaults.link || 'post' == wp.media.galleryDefaults.link ) {
       
   722 					#>selected="selected"<# }
       
   723 				#>>
   378 					<?php esc_attr_e('Attachment Page'); ?>
   724 					<?php esc_attr_e('Attachment Page'); ?>
   379 				</option>
   725 				</option>
   380 				<option value="file">
   726 				<option value="file" <# if ( 'file' == wp.media.galleryDefaults.link ) { #>selected="selected"<# } #>>
   381 					<?php esc_attr_e('Media File'); ?>
   727 					<?php esc_attr_e('Media File'); ?>
   382 				</option>
   728 				</option>
   383 				<option value="none">
   729 				<option value="none" <# if ( 'none' == wp.media.galleryDefaults.link ) { #>selected="selected"<# } #>>
   384 					<?php esc_attr_e('None'); ?>
   730 					<?php esc_attr_e('None'); ?>
   385 				</option>
   731 				</option>
   386 			</select>
   732 			</select>
   387 		</label>
   733 		</label>
   388 
   734 
   389 		<label class="setting">
   735 		<label class="setting">
   390 			<span><?php _e('Columns'); ?></span>
   736 			<span><?php _e('Columns'); ?></span>
   391 			<select class="columns" name="columns"
   737 			<select class="columns" name="columns"
   392 				data-setting="columns">
   738 				data-setting="columns">
   393 				<?php for ( $i = 1; $i <= 9; $i++ ) : ?>
   739 				<?php for ( $i = 1; $i <= 9; $i++ ) : ?>
   394 					<option value="<?php echo esc_attr( $i ); ?>" <?php selected( $i, 3 ); ?>>
   740 					<option value="<?php echo esc_attr( $i ); ?>" <#
       
   741 						if ( <?php echo $i ?> == wp.media.galleryDefaults.columns ) { #>selected="selected"<# }
       
   742 					#>>
   395 						<?php echo esc_html( $i ); ?>
   743 						<?php echo esc_html( $i ); ?>
   396 					</option>
   744 					</option>
   397 				<?php endfor; ?>
   745 				<?php endfor; ?>
   398 			</select>
   746 			</select>
   399 		</label>
   747 		</label>
   400 
   748 
   401 		<label class="setting">
   749 		<label class="setting">
   402 			<span><?php _e( 'Random Order' ); ?></span>
   750 			<span><?php _e( 'Random Order' ); ?></span>
   403 			<input type="checkbox" data-setting="_orderbyRandom" />
   751 			<input type="checkbox" data-setting="_orderbyRandom" />
   404 		</label>
   752 		</label>
       
   753 
       
   754 		<label class="setting size">
       
   755 			<span><?php _e( 'Size' ); ?></span>
       
   756 			<select class="size" name="size"
       
   757 				data-setting="size"
       
   758 				<# if ( data.userSettings ) { #>
       
   759 					data-user-setting="imgsize"
       
   760 				<# } #>
       
   761 				>
       
   762 				<?php
       
   763 				// This filter is documented in wp-admin/includes/media.php
       
   764 				$size_names = apply_filters( 'image_size_names_choose', array(
       
   765 					'thumbnail' => __( 'Thumbnail' ),
       
   766 					'medium'    => __( 'Medium' ),
       
   767 					'large'     => __( 'Large' ),
       
   768 					'full'      => __( 'Full Size' ),
       
   769 				) );
       
   770 
       
   771 				foreach ( $size_names as $size => $label ) : ?>
       
   772 					<option value="<?php echo esc_attr( $size ); ?>">
       
   773 						<?php echo esc_html( $label ); ?>
       
   774 					</option>
       
   775 				<?php endforeach; ?>
       
   776 			</select>
       
   777 		</label>
       
   778 	</script>
       
   779 
       
   780 	<script type="text/html" id="tmpl-playlist-settings">
       
   781 		<h3><?php _e( 'Playlist Settings' ); ?></h3>
       
   782 
       
   783 		<# var emptyModel = _.isEmpty( data.model ),
       
   784 			isVideo = 'video' === data.controller.get('library').props.get('type'); #>
       
   785 
       
   786 		<label class="setting">
       
   787 			<input type="checkbox" data-setting="tracklist" <# if ( emptyModel ) { #>
       
   788 				checked="checked"
       
   789 			<# } #> />
       
   790 			<# if ( isVideo ) { #>
       
   791 			<span><?php _e( 'Show Video List' ); ?></span>
       
   792 			<# } else { #>
       
   793 			<span><?php _e( 'Show Tracklist' ); ?></span>
       
   794 			<# } #>
       
   795 		</label>
       
   796 
       
   797 		<# if ( ! isVideo ) { #>
       
   798 		<label class="setting">
       
   799 			<input type="checkbox" data-setting="artists" <# if ( emptyModel ) { #>
       
   800 				checked="checked"
       
   801 			<# } #> />
       
   802 			<span><?php _e( 'Show Artist Name in Tracklist' ); ?></span>
       
   803 		</label>
       
   804 		<# } #>
       
   805 
       
   806 		<label class="setting">
       
   807 			<input type="checkbox" data-setting="images" <# if ( emptyModel ) { #>
       
   808 				checked="checked"
       
   809 			<# } #> />
       
   810 			<span><?php _e( 'Show Images' ); ?></span>
       
   811 		</label>
   405 	</script>
   812 	</script>
   406 
   813 
   407 	<script type="text/html" id="tmpl-embed-link-settings">
   814 	<script type="text/html" id="tmpl-embed-link-settings">
   408 		<label class="setting">
   815 		<label class="setting link-text">
   409 			<span><?php _e('Title'); ?></span>
   816 			<span><?php _e( 'Link Text' ); ?></span>
   410 			<input type="text" class="alignment" data-setting="title" />
   817 			<input type="text" class="alignment" data-setting="linkText" />
   411 		</label>
   818 		</label>
       
   819 		<div class="embed-container" style="display: none;">
       
   820 			<div class="embed-preview"></div>
       
   821 		</div>
   412 	</script>
   822 	</script>
   413 
   823 
   414 	<script type="text/html" id="tmpl-embed-image-settings">
   824 	<script type="text/html" id="tmpl-embed-image-settings">
   415 		<div class="thumbnail">
   825 		<div class="thumbnail">
   416 			<img src="{{ data.model.url }}" draggable="false" />
   826 			<img src="{{ data.model.url }}" draggable="false" />
   417 		</div>
   827 		</div>
   418 
   828 
   419 		<?php if ( ! apply_filters( 'disable_captions', '' ) ) : ?>
   829 		<?php
       
   830 		/** This filter is documented in wp-admin/includes/media.php */
       
   831 		if ( ! apply_filters( 'disable_captions', '' ) ) : ?>
   420 			<label class="setting caption">
   832 			<label class="setting caption">
   421 				<span><?php _e('Caption'); ?></span>
   833 				<span><?php _e('Caption'); ?></span>
   422 				<textarea data-setting="caption" />
   834 				<textarea data-setting="caption" />
   423 			</label>
   835 			</label>
   424 		<?php endif; ?>
   836 		<?php endif; ?>
   461 			</div>
   873 			</div>
   462 			<input type="text" class="link-to-custom" data-setting="linkUrl" />
   874 			<input type="text" class="link-to-custom" data-setting="linkUrl" />
   463 		</div>
   875 		</div>
   464 	</script>
   876 	</script>
   465 
   877 
   466 	<script type="text/html" id="tmpl-attachments-css">
   878 	<script type="text/html" id="tmpl-image-details">
   467 		<style type="text/css" id="{{ data.id }}-css">
   879 		<div class="media-embed">
   468 			#{{ data.id }} {
   880 			<div class="embed-media-settings">
   469 				padding: 0 {{ data.gutter }}px;
   881 				<div class="column-image">
   470 			}
   882 					<div class="image">
   471 
   883 						<img src="{{ data.model.url }}" draggable="false" />
   472 			#{{ data.id }} .attachment {
   884 
   473 				margin: {{ data.gutter }}px;
   885 						<# if ( data.attachment && window.imageEdit ) { #>
   474 				width: {{ data.edge }}px;
   886 							<div class="actions">
   475 			}
   887 								<input type="button" class="edit-attachment button" value="<?php esc_attr_e( 'Edit Original' ); ?>" />
   476 
   888 								<input type="button" class="replace-attachment button" value="<?php esc_attr_e( 'Replace' ); ?>" />
   477 			#{{ data.id }} .attachment-preview,
   889 							</div>
   478 			#{{ data.id }} .attachment-preview .thumbnail {
   890 						<# } #>
   479 				width: {{ data.edge }}px;
   891 					</div>
   480 				height: {{ data.edge }}px;
   892 				</div>
   481 			}
   893 				<div class="column-settings">
   482 
   894 					<?php
   483 			#{{ data.id }} .portrait .thumbnail img {
   895 					/** This filter is documented in wp-admin/includes/media.php */
   484 				max-width: {{ data.edge }}px;
   896 					if ( ! apply_filters( 'disable_captions', '' ) ) : ?>
   485 				height: auto;
   897 						<label class="setting caption">
   486 			}
   898 							<span><?php _e('Caption'); ?></span>
   487 
   899 							<textarea data-setting="caption">{{ data.model.caption }}</textarea>
   488 			#{{ data.id }} .landscape .thumbnail img {
   900 						</label>
   489 				width: auto;
   901 					<?php endif; ?>
   490 				max-height: {{ data.edge }}px;
   902 
   491 			}
   903 					<label class="setting alt-text">
   492 		</style>
   904 						<span><?php _e('Alternative Text'); ?></span>
   493 	</script>
   905 						<input type="text" data-setting="alt" value="{{ data.model.alt }}" />
       
   906 					</label>
       
   907 
       
   908 					<h3><?php _e( 'Display Settings' ); ?></h3>
       
   909 					<div class="setting align">
       
   910 						<span><?php _e('Align'); ?></span>
       
   911 						<div class="button-group button-large" data-setting="align">
       
   912 							<button class="button" value="left">
       
   913 								<?php esc_attr_e('Left'); ?>
       
   914 							</button>
       
   915 							<button class="button" value="center">
       
   916 								<?php esc_attr_e('Center'); ?>
       
   917 							</button>
       
   918 							<button class="button" value="right">
       
   919 								<?php esc_attr_e('Right'); ?>
       
   920 							</button>
       
   921 							<button class="button active" value="none">
       
   922 								<?php esc_attr_e('None'); ?>
       
   923 							</button>
       
   924 						</div>
       
   925 					</div>
       
   926 
       
   927 					<# if ( data.attachment ) { #>
       
   928 						<# if ( 'undefined' !== typeof data.attachment.sizes ) { #>
       
   929 							<label class="setting size">
       
   930 								<span><?php _e('Size'); ?></span>
       
   931 								<select class="size" name="size"
       
   932 									data-setting="size"
       
   933 									<# if ( data.userSettings ) { #>
       
   934 										data-user-setting="imgsize"
       
   935 									<# } #>>
       
   936 									<?php
       
   937 									/** This filter is documented in wp-admin/includes/media.php */
       
   938 									$sizes = apply_filters( 'image_size_names_choose', array(
       
   939 										'thumbnail' => __('Thumbnail'),
       
   940 										'medium'    => __('Medium'),
       
   941 										'large'     => __('Large'),
       
   942 										'full'      => __('Full Size'),
       
   943 									) );
       
   944 
       
   945 									foreach ( $sizes as $value => $name ) : ?>
       
   946 										<#
       
   947 										var size = data.sizes['<?php echo esc_js( $value ); ?>'];
       
   948 										if ( size ) { #>
       
   949 											<option value="<?php echo esc_attr( $value ); ?>">
       
   950 												<?php echo esc_html( $name ); ?> &ndash; {{ size.width }} &times; {{ size.height }}
       
   951 											</option>
       
   952 										<# } #>
       
   953 									<?php endforeach; ?>
       
   954 									<option value="<?php echo esc_attr( 'custom' ); ?>">
       
   955 										<?php _e( 'Custom Size' ); ?>
       
   956 									</option>
       
   957 								</select>
       
   958 							</label>
       
   959 						<# } #>
       
   960 							<div class="custom-size<# if ( data.model.size !== 'custom' ) { #> hidden<# } #>">
       
   961 								<label><span><?php _e( 'Width' ); ?> <small>(px)</small></span> <input data-setting="customWidth" type="number" step="1" value="{{ data.model.customWidth }}" /></label><span class="sep">&times;</span><label><span><?php _e( 'Height' ); ?> <small>(px)</small></span><input data-setting="customHeight" type="number" step="1" value="{{ data.model.customHeight }}" /></label>
       
   962 							</div>
       
   963 					<# } #>
       
   964 
       
   965 					<div class="setting link-to">
       
   966 						<span><?php _e('Link To'); ?></span>
       
   967 						<select data-setting="link">
       
   968 						<# if ( data.attachment ) { #>
       
   969 							<option value="file">
       
   970 								<?php esc_attr_e('Media File'); ?>
       
   971 							</option>
       
   972 							<option value="post">
       
   973 								<?php esc_attr_e('Attachment Page'); ?>
       
   974 							</option>
       
   975 						<# } else { #>
       
   976 							<option value="file">
       
   977 								<?php esc_attr_e('Image URL'); ?>
       
   978 							</option>
       
   979 						<# } #>
       
   980 							<option value="custom">
       
   981 								<?php esc_attr_e('Custom URL'); ?>
       
   982 							</option>
       
   983 							<option value="none">
       
   984 								<?php esc_attr_e('None'); ?>
       
   985 							</option>
       
   986 						</select>
       
   987 						<input type="text" class="link-to-custom" data-setting="linkUrl" />
       
   988 					</div>
       
   989 					<div class="advanced-section">
       
   990 						<h3><a class="advanced-toggle" href="#"><?php _e('Advanced Options'); ?></a></h3>
       
   991 						<div class="advanced-settings hidden">
       
   992 							<div class="advanced-image">
       
   993 								<label class="setting title-text">
       
   994 									<span><?php _e('Image Title Attribute'); ?></span>
       
   995 									<input type="text" data-setting="title" value="{{ data.model.title }}" />
       
   996 								</label>
       
   997 								<label class="setting extra-classes">
       
   998 									<span><?php _e('Image CSS Class'); ?></span>
       
   999 									<input type="text" data-setting="extraClasses" value="{{ data.model.extraClasses }}" />
       
  1000 								</label>
       
  1001 							</div>
       
  1002 							<div class="advanced-link">
       
  1003 								<div class="setting link-target">
       
  1004 									<label><input type="checkbox" data-setting="linkTargetBlank" value="_blank" <# if ( data.model.linkTargetBlank ) { #>checked="checked"<# } #>><?php _e( 'Open link in a new window/tab' ); ?></label>
       
  1005 								</div>
       
  1006 								<label class="setting link-rel">
       
  1007 									<span><?php _e('Link Rel'); ?></span>
       
  1008 									<input type="text" data-setting="linkRel" value="{{ data.model.linkClassName }}" />
       
  1009 								</label>
       
  1010 								<label class="setting link-class-name">
       
  1011 									<span><?php _e('Link CSS Class'); ?></span>
       
  1012 									<input type="text" data-setting="linkClassName" value="{{ data.model.linkClassName }}" />
       
  1013 								</label>
       
  1014 							</div>
       
  1015 						</div>
       
  1016 					</div>
       
  1017 				</div>
       
  1018 			</div>
       
  1019 		</div>
       
  1020 	</script>
       
  1021 
       
  1022 	<script type="text/html" id="tmpl-image-editor">
       
  1023 		<div id="media-head-{{ data.id }}"></div>
       
  1024 		<div id="image-editor-{{ data.id }}"></div>
       
  1025 	</script>
       
  1026 
       
  1027 	<script type="text/html" id="tmpl-audio-details">
       
  1028 		<# var ext, html5types = {
       
  1029 			mp3: wp.media.view.settings.embedMimes.mp3,
       
  1030 			ogg: wp.media.view.settings.embedMimes.ogg
       
  1031 		}; #>
       
  1032 
       
  1033 		<?php $audio_types = wp_get_audio_extensions(); ?>
       
  1034 		<div class="media-embed media-embed-details">
       
  1035 			<div class="embed-media-settings embed-audio-settings">
       
  1036 				<?php wp_underscore_audio_template() ?>
       
  1037 
       
  1038 				<# if ( ! _.isEmpty( data.model.src ) ) {
       
  1039 					ext = data.model.src.split('.').pop();
       
  1040 					if ( html5types[ ext ] ) {
       
  1041 						delete html5types[ ext ];
       
  1042 					}
       
  1043 				#>
       
  1044 				<label class="setting">
       
  1045 					<span>SRC</span>
       
  1046 					<input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
       
  1047 					<a class="remove-setting"><?php _e( 'Remove' ); ?></a>
       
  1048 				</label>
       
  1049 				<# } #>
       
  1050 				<?php
       
  1051 
       
  1052 				foreach ( $audio_types as $type ):
       
  1053 				?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) {
       
  1054 					if ( ! _.isUndefined( html5types.<?php echo $type ?> ) ) {
       
  1055 						delete html5types.<?php echo $type ?>;
       
  1056 					}
       
  1057 				#>
       
  1058 				<label class="setting">
       
  1059 					<span><?php echo strtoupper( $type ) ?></span>
       
  1060 					<input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{ data.model.<?php echo $type ?> }}" />
       
  1061 					<a class="remove-setting"><?php _e( 'Remove' ); ?></a>
       
  1062 				</label>
       
  1063 				<# } #>
       
  1064 				<?php endforeach ?>
       
  1065 
       
  1066 				<# if ( ! _.isEmpty( html5types ) ) { #>
       
  1067 				<div class="setting">
       
  1068 					<span><?php _e( 'Add alternate sources for maximum HTML5 playback:' ) ?></span>
       
  1069 					<div class="button-large">
       
  1070 					<# _.each( html5types, function (mime, type) { #>
       
  1071 					<button class="button add-media-source" data-mime="{{ mime }}">{{ type }}</button>
       
  1072 					<# } ) #>
       
  1073 					</div>
       
  1074 				</div>
       
  1075 				<# } #>
       
  1076 
       
  1077 				<div class="setting preload">
       
  1078 					<span><?php _e( 'Preload' ); ?></span>
       
  1079 					<div class="button-group button-large" data-setting="preload">
       
  1080 						<button class="button" value="auto"><?php _ex( 'Auto', 'auto preload' ); ?></button>
       
  1081 						<button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
       
  1082 						<button class="button active" value="none"><?php _e( 'None' ); ?></button>
       
  1083 					</div>
       
  1084 				</div>
       
  1085 
       
  1086 				<label class="setting checkbox-setting">
       
  1087 					<input type="checkbox" data-setting="autoplay" />
       
  1088 					<span><?php _e( 'Autoplay' ); ?></span>
       
  1089 				</label>
       
  1090 
       
  1091 				<label class="setting checkbox-setting">
       
  1092 					<input type="checkbox" data-setting="loop" />
       
  1093 					<span><?php _e( 'Loop' ); ?></span>
       
  1094 				</label>
       
  1095 			</div>
       
  1096 		</div>
       
  1097 	</script>
       
  1098 
       
  1099 	<script type="text/html" id="tmpl-video-details">
       
  1100 		<# var ext, html5types = {
       
  1101 			mp4: wp.media.view.settings.embedMimes.mp4,
       
  1102 			ogv: wp.media.view.settings.embedMimes.ogv,
       
  1103 			webm: wp.media.view.settings.embedMimes.webm
       
  1104 		}; #>
       
  1105 
       
  1106 		<?php $video_types = wp_get_video_extensions(); ?>
       
  1107 		<div class="media-embed media-embed-details">
       
  1108 			<div class="embed-media-settings embed-video-settings">
       
  1109 				<div class="wp-video-holder">
       
  1110 				<#
       
  1111 				var w = ! data.model.width || data.model.width > 640 ? 640 : data.model.width,
       
  1112 					h = ! data.model.height ? 360 : data.model.height;
       
  1113 
       
  1114 				if ( data.model.width && w !== data.model.width ) {
       
  1115 					h = Math.ceil( ( h * w ) / data.model.width );
       
  1116 				}
       
  1117 				#>
       
  1118 
       
  1119 				<?php wp_underscore_video_template() ?>
       
  1120 
       
  1121 				<# if ( ! _.isEmpty( data.model.src ) ) {
       
  1122 					ext = data.model.src.split('.').pop();
       
  1123 					if ( html5types[ ext ] ) {
       
  1124 						delete html5types[ ext ];
       
  1125 					}
       
  1126 				#>
       
  1127 				<label class="setting">
       
  1128 					<span>SRC</span>
       
  1129 					<input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
       
  1130 					<a class="remove-setting"><?php _e( 'Remove' ); ?></a>
       
  1131 				</label>
       
  1132 				<# } #>
       
  1133 				<?php foreach ( $video_types as $type ):
       
  1134 				?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) {
       
  1135 					if ( ! _.isUndefined( html5types.<?php echo $type ?> ) ) {
       
  1136 						delete html5types.<?php echo $type ?>;
       
  1137 					}
       
  1138 				#>
       
  1139 				<label class="setting">
       
  1140 					<span><?php echo strtoupper( $type ) ?></span>
       
  1141 					<input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{ data.model.<?php echo $type ?> }}" />
       
  1142 					<a class="remove-setting"><?php _e( 'Remove' ); ?></a>
       
  1143 				</label>
       
  1144 				<# } #>
       
  1145 				<?php endforeach ?>
       
  1146 				</div>
       
  1147 
       
  1148 				<# if ( ! _.isEmpty( html5types ) ) { #>
       
  1149 				<div class="setting">
       
  1150 					<span><?php _e( 'Add alternate sources for maximum HTML5 playback:' ); ?></span>
       
  1151 					<div class="button-large">
       
  1152 					<# _.each( html5types, function (mime, type) { #>
       
  1153 					<button class="button add-media-source" data-mime="{{ mime }}">{{ type }}</button>
       
  1154 					<# } ) #>
       
  1155 					</div>
       
  1156 				</div>
       
  1157 				<# } #>
       
  1158 
       
  1159 				<# if ( ! _.isEmpty( data.model.poster ) ) { #>
       
  1160 				<label class="setting">
       
  1161 					<span><?php _e( 'Poster Image' ); ?></span>
       
  1162 					<input type="text" disabled="disabled" data-setting="poster" value="{{ data.model.poster }}" />
       
  1163 					<a class="remove-setting"><?php _e( 'Remove' ); ?></a>
       
  1164 				</label>
       
  1165 				<# } #>
       
  1166 				<div class="setting preload">
       
  1167 					<span><?php _e( 'Preload' ); ?></span>
       
  1168 					<div class="button-group button-large" data-setting="preload">
       
  1169 						<button class="button" value="auto"><?php _ex( 'Auto', 'auto preload' ); ?></button>
       
  1170 						<button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
       
  1171 						<button class="button active" value="none"><?php _e( 'None' ); ?></button>
       
  1172 					</div>
       
  1173 				</div>
       
  1174 
       
  1175 				<label class="setting checkbox-setting">
       
  1176 					<input type="checkbox" data-setting="autoplay" />
       
  1177 					<span><?php _e( 'Autoplay' ); ?></span>
       
  1178 				</label>
       
  1179 
       
  1180 				<label class="setting checkbox-setting">
       
  1181 					<input type="checkbox" data-setting="loop" />
       
  1182 					<span><?php _e( 'Loop' ); ?></span>
       
  1183 				</label>
       
  1184 
       
  1185 				<label class="setting" data-setting="content">
       
  1186 					<span><?php _e( 'Tracks (subtitles, captions, descriptions, chapters, or metadata)' ); ?></span>
       
  1187 					<#
       
  1188 					var content = '';
       
  1189 					if ( ! _.isEmpty( data.model.content ) ) {
       
  1190 						var tracks = jQuery( data.model.content ).filter( 'track' );
       
  1191 						_.each( tracks.toArray(), function (track) {
       
  1192 							content += track.outerHTML; #>
       
  1193 						<p>
       
  1194 							<input class="content-track" type="text" value="{{ track.outerHTML }}" />
       
  1195 							<a class="remove-setting remove-track"><?php _e( 'Remove' ); ?></a>
       
  1196 						</p>
       
  1197 						<# } ); #>
       
  1198 					<# } else { #>
       
  1199 					<em><?php _e( 'There are no associated subtitles.' ); ?></em>
       
  1200 					<# } #>
       
  1201 					<textarea class="hidden content-setting">{{ content }}</textarea>
       
  1202 				</label>
       
  1203 			</div>
       
  1204 		</div>
       
  1205 	</script>
       
  1206 
       
  1207 	<script type="text/html" id="tmpl-editor-gallery">
       
  1208 		<# if ( data.attachments.length ) { #>
       
  1209 			<div class="gallery gallery-columns-{{ data.columns }}">
       
  1210 				<# _.each( data.attachments, function( attachment, index ) { #>
       
  1211 					<dl class="gallery-item">
       
  1212 						<dt class="gallery-icon">
       
  1213 							<# if ( attachment.thumbnail ) { #>
       
  1214 								<img src="{{ attachment.thumbnail.url }}" width="{{ attachment.thumbnail.width }}" height="{{ attachment.thumbnail.height }}" />
       
  1215 							<# } else { #>
       
  1216 								<img src="{{ attachment.url }}" />
       
  1217 							<# } #>
       
  1218 						</dt>
       
  1219 						<# if ( attachment.caption ) { #>
       
  1220 							<dd class="wp-caption-text gallery-caption">
       
  1221 								{{ attachment.caption }}
       
  1222 							</dd>
       
  1223 						<# } #>
       
  1224 					</dl>
       
  1225 					<# if ( index % data.columns === data.columns - 1 ) { #>
       
  1226 						<br style="clear: both;">
       
  1227 					<# } #>
       
  1228 				<# } ); #>
       
  1229 			</div>
       
  1230 		<# } else { #>
       
  1231 			<div class="wpview-error">
       
  1232 				<div class="dashicons dashicons-format-gallery"></div><p><?php _e( 'No items found.' ); ?></p>
       
  1233 			</div>
       
  1234 		<# } #>
       
  1235 	</script>
       
  1236 
       
  1237 	<script type="text/html" id="tmpl-crop-content">
       
  1238 		<img class="crop-image" src="{{ data.url }}">
       
  1239 		<div class="upload-errors"></div>
       
  1240 	</script>
       
  1241 
   494 	<?php
  1242 	<?php
   495 
  1243 
       
  1244 	/**
       
  1245 	 * Fires when the custom Backbone media templates are printed.
       
  1246 	 *
       
  1247 	 * @since 3.5.0
       
  1248 	 */
   496 	do_action( 'print_media_templates' );
  1249 	do_action( 'print_media_templates' );
   497 }
  1250 }