Add dynamic attachment view sizing. Removes the attachment view zooming in the process. see #21390.
git-svn-id: https://develop.svn.wordpress.org/trunk@22324 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Daryl Koopersmith
parent
bc29728df2
commit
3ca8808c3b
@ -174,6 +174,7 @@
|
||||
bottom: 0;
|
||||
height: auto;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@ -197,44 +198,6 @@
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
/**
|
||||
* Attachments
|
||||
*/
|
||||
/*.attachments {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.attachments-header {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 50px;
|
||||
padding: 0 10px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.attachments-header h3 {
|
||||
float: left;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 50px;
|
||||
font-size: 18px;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.attachments ul {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: auto;
|
||||
margin: 0 0 20px;
|
||||
}*/
|
||||
|
||||
/**
|
||||
* Attachment
|
||||
*/
|
||||
@ -289,49 +252,21 @@
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.attachment .thumbnail {
|
||||
-webkit-transform: translate( 50%, 50% );
|
||||
-moz-transform: translate( 50%, 50% );
|
||||
-ms-transform: translate( 50%, 50% );
|
||||
-o-transform: translate( 50%, 50% );
|
||||
transform: translate( 50%, 50% );
|
||||
}
|
||||
|
||||
/* Vertically center the icons. */
|
||||
.attachment .icon {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translate( -50%, -50% );
|
||||
-moz-transform: translate( -50%, -50% );
|
||||
-ms-transform: translate( -50%, -50% );
|
||||
-o-transform: translate( -50%, -50% );
|
||||
transform: translate( -50%, -50% );
|
||||
}
|
||||
|
||||
.attachment .filename {
|
||||
margin-top: 140px;
|
||||
padding: 0 10px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.attachment-preview .thumbnail,
|
||||
.attachment-preview .thumbnail img {
|
||||
-webkit-transition-property: width, height, top, left, right, bottom;
|
||||
-moz-transition-property: width, height, top, left, right, bottom;
|
||||
-ms-transition-property: width, height, top, left, right, bottom;
|
||||
-o-transition-property: width, height, top, left, right, bottom;
|
||||
transition-property: width, height, top, left, right, bottom;
|
||||
-webkit-transition-duration: 80ms;
|
||||
-moz-transition-duration: 80ms;
|
||||
-ms-transition-duration: 80ms;
|
||||
-o-transition-duration: 80ms;
|
||||
transition-duration: 80ms;
|
||||
-webkit-transition-delay: 200ms;
|
||||
-moz-transition-delay: 200ms;
|
||||
-ms-transition-delay: 200ms;
|
||||
-o-transition-delay: 200ms;
|
||||
transition-delay: 200ms;
|
||||
}
|
||||
|
||||
.attachment-preview .thumbnail {
|
||||
width: 199px;
|
||||
height: 199px;
|
||||
}
|
||||
|
||||
.attachment-preview .thumbnail:after {
|
||||
.attachment-preview:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
@ -343,8 +278,35 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.attachment.fit .thumbnail:after {
|
||||
box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
|
||||
.attachment .thumbnail img {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.attachment .icon,
|
||||
.attachment .thumbnail img {
|
||||
-webkit-transform: translate( -50%, -50% );
|
||||
-moz-transform: translate( -50%, -50% );
|
||||
-ms-transform: translate( -50%, -50% );
|
||||
-o-transform: translate( -50%, -50% );
|
||||
transform: translate( -50%, -50% );
|
||||
}
|
||||
|
||||
.attachment .filename {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 5px 10px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
background: rgba( 255, 255, 255, 0.8 );
|
||||
box-shadow: 0 0 2px rgba( 0, 0, 0, 0.2 );
|
||||
}
|
||||
|
||||
.attachment-preview .thumbnail {
|
||||
width: 199px;
|
||||
height: 199px;
|
||||
}
|
||||
|
||||
.attachment .thumbnail img {
|
||||
@ -622,6 +584,7 @@
|
||||
.attachment-details .describe {
|
||||
float: left;
|
||||
margin: 10px 0 0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -127,6 +127,12 @@
|
||||
if ( ! this.get('library') )
|
||||
this.set( 'library', media.query() );
|
||||
|
||||
if ( ! this.get('edge') )
|
||||
this.set( 'edge', 120 );
|
||||
|
||||
if ( ! this.get('gutter') )
|
||||
this.set( 'gutter', 6 );
|
||||
|
||||
this.on( 'activate', this.activate, this );
|
||||
this.on( 'deactivate', this.deactivate, this );
|
||||
this.on( 'change:details', this.details, this );
|
||||
@ -248,7 +254,8 @@
|
||||
id: 'gallery',
|
||||
multiple: false,
|
||||
describe: true,
|
||||
title: l10n.createGallery
|
||||
title: l10n.createGallery,
|
||||
edge: 199
|
||||
},
|
||||
|
||||
toolbar: function() {
|
||||
@ -1016,8 +1023,8 @@
|
||||
|
||||
events: {
|
||||
'click .attachment-preview': 'toggleSelection',
|
||||
'mouseenter .attachment-preview': 'shrink',
|
||||
'mouseleave .attachment-preview': 'expand',
|
||||
// 'mouseenter .attachment-preview': 'shrink',
|
||||
// 'mouseleave .attachment-preview': 'expand',
|
||||
'change .describe': 'describe'
|
||||
},
|
||||
|
||||
@ -1052,7 +1059,7 @@
|
||||
options.describe = this.controller.state().get('describe');
|
||||
|
||||
if ( 'image' === options.type )
|
||||
_.extend( options, this.crop() );
|
||||
_.extend( options, this.imageSize() );
|
||||
|
||||
this.$el.html( this.template( options ) );
|
||||
|
||||
@ -1123,7 +1130,7 @@
|
||||
|
||||
// Use the provided image size if possible.
|
||||
if ( sizes && sizes[ size ] ) {
|
||||
return sizes[ size ];
|
||||
return _.clone( sizes[ size ] );
|
||||
} else {
|
||||
return {
|
||||
url: this.model.get('url'),
|
||||
@ -1134,57 +1141,6 @@
|
||||
}
|
||||
},
|
||||
|
||||
crop: function( sizeId ) {
|
||||
var edge = 199,
|
||||
size = this.imageSize( sizeId ),
|
||||
wide, tall;
|
||||
|
||||
wide = wp.media.fit( _.extend( { maxWidth: edge }, size ) );
|
||||
tall = wp.media.fit( _.extend( { maxHeight: edge }, size ) );
|
||||
|
||||
_.extend( size, wide.width > tall.width ? wide : tall );
|
||||
|
||||
size.top = ( edge - size.height ) / 2;
|
||||
size.left = ( edge - size.width ) / 2;
|
||||
return size;
|
||||
},
|
||||
|
||||
fit: function( sizeId ) {
|
||||
var margin = 10,
|
||||
full = 199,
|
||||
edge = full - ( margin * 2 ),
|
||||
size = _.extend( wp.media.fit( _.extend({
|
||||
maxWidth: edge,
|
||||
maxHeight: edge
|
||||
}, this.imageSize( sizeId ) ) ) );
|
||||
|
||||
size.top = Math.round( margin + ( edge - size.height ) / 2 );
|
||||
size.left = Math.round( margin + ( edge - size.width ) / 2 );
|
||||
return size;
|
||||
},
|
||||
|
||||
shrink: function() {
|
||||
var size = _.pick( this.fit(), 'top', 'left', 'width', 'height' );
|
||||
this.$el.addClass('fit');
|
||||
this.$('.thumbnail').css( size );
|
||||
this.$('.thumbnail img').css( _.extend( size, {
|
||||
top: 0,
|
||||
left: 0
|
||||
} ) );
|
||||
},
|
||||
|
||||
expand: function() {
|
||||
var size = _.pick( this.crop(), 'top', 'left', 'width', 'height' );
|
||||
this.$el.removeClass('fit');
|
||||
this.$('.thumbnail img').css( size );
|
||||
this.$('.thumbnail').css({
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: 199,
|
||||
height: 199
|
||||
});
|
||||
},
|
||||
|
||||
describe: function( event ) {
|
||||
if ( 'image' === this.model.get('type') )
|
||||
this.model.save( 'caption', event.target.value );
|
||||
@ -1225,6 +1181,7 @@
|
||||
media.view.Attachments = Backbone.View.extend({
|
||||
tagName: 'ul',
|
||||
className: 'attachments',
|
||||
template: media.template('attachments-css'),
|
||||
|
||||
events: {
|
||||
'scroll': 'scroll'
|
||||
@ -1232,6 +1189,7 @@
|
||||
|
||||
initialize: function() {
|
||||
this.controller = this.options.controller;
|
||||
this.el.id = _.uniqueId('__attachments-view-');
|
||||
|
||||
_.defaults( this.options, {
|
||||
refreshSensitivity: 200,
|
||||
@ -1252,6 +1210,28 @@
|
||||
this.scroll = _.chain( this.scroll ).bind( this ).throttle( this.options.refreshSensitivity ).value();
|
||||
|
||||
this.initSortable();
|
||||
|
||||
this.controller.state().on( 'change:edge change:gutter', this.css, this );
|
||||
this.css();
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
this.collection.off( 'add remove reset', null, this );
|
||||
this.controller.state().off( 'change:edge change:gutter', this.css, this );
|
||||
},
|
||||
|
||||
css: function() {
|
||||
var $css = $( '#' + this.el.id + '-css' ),
|
||||
state = this.controller.state();
|
||||
|
||||
if ( $css.length )
|
||||
$css.remove();
|
||||
|
||||
media.view.Attachments.$head().append( this.template({
|
||||
id: this.el.id,
|
||||
edge: state.get('edge'),
|
||||
gutter: state.get('gutter')
|
||||
}) );
|
||||
},
|
||||
|
||||
initSortable: function() {
|
||||
@ -1353,6 +1333,13 @@
|
||||
this.collection.more();
|
||||
}
|
||||
}
|
||||
}, {
|
||||
$head: (function() {
|
||||
var $head;
|
||||
return function() {
|
||||
return $head = $head || $('head');
|
||||
};
|
||||
}())
|
||||
});
|
||||
|
||||
/**
|
||||
|
||||
@ -1327,8 +1327,7 @@ function wp_print_media_templates( $attachment ) {
|
||||
<div class="media-progress-bar"><div></div></div>
|
||||
<% } else if ( 'image' === type ) { %>
|
||||
<div class="thumbnail">
|
||||
<img src="<%- url %>" width="<%- width %>" height="<%- height %>" draggable="false"
|
||||
style="top:<%- top %>px; left:<%- left %>px;" />
|
||||
<img src="<%- url %>" draggable="false" />
|
||||
</div>
|
||||
<% } else { %>
|
||||
<img src="<%- icon %>" class="icon" draggable="false" />
|
||||
@ -1461,5 +1460,34 @@ function wp_print_media_templates( $attachment ) {
|
||||
<div class="button edit"><?php _e('Edit'); ?></div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="tmpl-attachments-css">
|
||||
<style type="text/css" id="<%- id %>-css">
|
||||
#<%- id %> {
|
||||
padding: <%- gutter %>px;
|
||||
}
|
||||
|
||||
#<%- id %> .attachment {
|
||||
margin: <%- gutter %>px;
|
||||
width: <%- edge %>px;
|
||||
}
|
||||
|
||||
#<%- id %> .attachment-preview,
|
||||
#<%- id %> .attachment-preview .thumbnail {
|
||||
width: <%- edge %>px;
|
||||
height: <%- edge %>px;
|
||||
}
|
||||
|
||||
#<%- id %> .portrait .thumbnail img {
|
||||
width: <%- edge %>px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#<%- id %> .landscape .thumbnail img {
|
||||
width: auto;
|
||||
height: <%- edge %>px;
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
<?php
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user