* 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%;
}
.edit-attachment-frame .attachment-media-view img {
.edit-attachment-frame .attachment-media-view .details-image {
display: block;
margin-bottom: 16px;
max-width: 100%;

File diff suppressed because one or more lines are too long

View File

@ -2681,7 +2681,7 @@
height: 100%;
}
.edit-attachment-frame .attachment-media-view img {
.edit-attachment-frame .attachment-media-view .details-image {
display: block;
margin-bottom: 16px;
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, {
'click .remove-setting' : 'removeSetting',
'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 );
@ -682,6 +683,11 @@
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
*/
@ -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));

File diff suppressed because one or more lines are too long

View File

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

View File

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