* Don't set height on responsive `<div>` when generating markup
* Move some CSS rules from the style tag to `.wp-video`
* Use Video Details view event delegation instead of click events delegated from `<body>`
* Fix some CSS rule collision in the grid modal

See #29110.

Built from https://develop.svn.wordpress.org/trunk@29456


git-svn-id: http://core.svn.wordpress.org/trunk@29234 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Scott Taylor 2014-08-09 19:39:15 +00:00
parent 647b6d907b
commit 28c22db07d
9 changed files with 28 additions and 42 deletions

View File

@ -2681,7 +2681,7 @@
height: 100%; height: 100%;
} }
.edit-attachment-frame .attachment-media-view img { .edit-attachment-frame .attachment-media-view .details-image {
display: block; display: block;
margin-bottom: 16px; margin-bottom: 16px;
max-width: 100%; max-width: 100%;

File diff suppressed because one or more lines are too long

View File

@ -2681,7 +2681,7 @@
height: 100%; height: 100%;
} }
.edit-attachment-frame .attachment-media-view img { .edit-attachment-frame .attachment-media-view .details-image {
display: block; display: block;
margin-bottom: 16px; margin-bottom: 16px;
max-width: 100%; max-width: 100%;

File diff suppressed because one or more lines are too long

View File

@ -636,7 +636,8 @@
this.events = _.extend( this.events, { this.events = _.extend( this.events, {
'click .remove-setting' : 'removeSetting', 'click .remove-setting' : 'removeSetting',
'change .content-track' : 'setTracks', 'change .content-track' : 'setTracks',
'click .remove-track' : 'setTracks' 'click .remove-track' : 'setTracks',
'click .add-media-source' : 'addSource'
} ); } );
media.view.Settings.AttachmentDisplay.prototype.initialize.apply( this, arguments ); media.view.Settings.AttachmentDisplay.prototype.initialize.apply( this, arguments );
@ -682,6 +683,11 @@
this.trigger( 'media:setting:remove', this ); this.trigger( 'media:setting:remove', this );
}, },
addSource : function( e ) {
this.controller.lastMime = $( e.currentTarget ).data( 'mime' );
this.controller.setState( 'add-' + this.controller.defaults.id + '-source' );
},
/** /**
* @global MediaElementPlayer * @global MediaElementPlayer
*/ */
@ -822,17 +828,4 @@
} }
}); });
/**
* Event binding
*/
function init() {
$(document.body)
.on( 'click', '.add-media-source', function( e ) {
media.frame.lastMime = $( e.currentTarget ).data( 'mime' );
media.frame.setState( 'add-' + media.frame.defaults.id + '-source' );
} );
}
$( init );
}(jQuery, _, Backbone)); }(jQuery, _, Backbone));

File diff suppressed because one or more lines are too long

View File

@ -92,6 +92,11 @@
margin: 0 0 10px; margin: 0 0 10px;
} }
.wp-video {
max-width: 100%;
height: auto;
}
video.wp-video-shortcode, video.wp-video-shortcode,
.wp-video-shortcode video { .wp-video-shortcode video {
max-width: 100%; max-width: 100%;

View File

@ -50,7 +50,7 @@ function wp_underscore_audio_template() {
function wp_underscore_video_template() { function wp_underscore_video_template() {
$video_types = wp_get_video_extensions(); $video_types = wp_get_video_extensions();
?> ?>
<# var w_rule = '', h_rule = '', <# var w_rule = '',
w, h, settings = wp.media.view.settings, w, h, settings = wp.media.view.settings,
isYouTube = ! _.isEmpty( data.model.src ) && data.model.src.match(/youtube|youtu\.be/); isYouTube = ! _.isEmpty( data.model.src ) && data.model.src.match(/youtube|youtu\.be/);
@ -69,12 +69,8 @@ function wp_underscore_video_template() {
if ( w ) { if ( w ) {
w_rule = ' width: ' + w + 'px;'; w_rule = ' width: ' + w + 'px;';
} }
if ( h ) {
h_rule = ' height: auto';
}
#> #>
<div style="max-width: 100%;{{ w_rule }}{{ h_rule }}"> <div style="{{ w_rule }}" class="wp-video">
<video controls <video controls
class="wp-video-shortcode{{ isYouTube ? ' youtube-video' : '' }}" class="wp-video-shortcode{{ isYouTube ? ' youtube-video' : '' }}"
<# if ( w ) { #>width="{{ w }}"<# } #> <# if ( w ) { #>width="{{ w }}"<# } #>
@ -278,9 +274,9 @@ function wp_print_media_templates() {
<# if ( data.uploading ) { #> <# if ( data.uploading ) { #>
<div class="media-progress-bar"><div></div></div> <div class="media-progress-bar"><div></div></div>
<# } else if ( 'image' === data.type ) { #> <# } else if ( 'image' === data.type ) { #>
<img src="{{ data.sizes.full.url }}" draggable="false" /> <img class="details-image" src="{{ data.sizes.full.url }}" draggable="false" />
<# } else if ( -1 === jQuery.inArray( data.type, [ 'audio', 'video' ] ) ) { #> <# } else if ( -1 === jQuery.inArray( data.type, [ 'audio', 'video' ] ) ) { #>
<img src="{{ data.icon }}" class="icon" draggable="false" /> <img class="details-image" src="{{ data.icon }}" class="icon" draggable="false" />
<# } #> <# } #>
<# if ( 'audio' === data.type ) { #> <# if ( 'audio' === data.type ) { #>
@ -290,18 +286,15 @@ function wp_print_media_templates() {
</audio> </audio>
</div> </div>
<# } else if ( 'video' === data.type ) { <# } else if ( 'video' === data.type ) {
var w_rule = h_rule = ''; var w_rule = '';
if ( data.width ) { if ( data.width ) {
w_rule = ' width: ' + data.width + 'px;'; w_rule = 'width: ' + data.width + 'px;';
} else if ( wp.media.view.settings.contentWidth ) { } else if ( wp.media.view.settings.contentWidth ) {
w_rule = ' width: ' + wp.media.view.settings.contentWidth + 'px;'; w_rule = 'width: ' + wp.media.view.settings.contentWidth + 'px;';
}
if ( data.height ) {
h_rule = ' height: auto';
} }
#> #>
<div style="max-width: 100%; {{ w_rule }}{{ h_rule }}" class="wp-media-wrapper"> <div style="{{ w_rule }}" class="wp-media-wrapper wp-video">
<video controls class="wp-video-shortcode" preload="metadata" <video controls="controls" class="wp-video-shortcode" preload="metadata"
<# if ( data.width ) { #>width="{{ data.width }}"<# } #> <# if ( data.width ) { #>width="{{ data.width }}"<# } #>
<# if ( data.height ) { #>height="{{ data.height }}"<# } #> <# if ( data.height ) { #>height="{{ data.height }}"<# } #>
<# if ( data.image && data.image.src !== data.icon ) { #>poster="{{ data.image.src }}"<# } #>> <# if ( data.image && data.image.src !== data.icon ) { #>poster="{{ data.image.src }}"<# } #>>

View File

@ -1874,16 +1874,11 @@ function wp_video_shortcode( $attr, $content = '' ) {
} }
$html .= '</video>'; $html .= '</video>';
$width_rule = $height_rule = ''; $width_rule = '';
if ( ! empty( $atts['width'] ) ) { if ( ! empty( $atts['width'] ) ) {
$width_rule = sprintf( ' width: %dpx;', $atts['width'] ); $width_rule = sprintf( ' width: %dpx;', $atts['width'] );
} }
if ( ! empty( $atts['height'] ) ) { $output = sprintf( '<div style="%s" class="wp-video">%s</div>', $width_rule, $html );
$height_rule = sprintf( ' height: %dpx;', $atts['height'] );
} else {
$height_rule = ' height: auto;';
}
$output = sprintf( '<div style="max-width: 100%%;%s%s" class="wp-video">%s</div>', $width_rule, $height_rule, $html );
/** /**
* Filter the output of the video shortcode. * Filter the output of the video shortcode.