WordPress-C
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add dynamic attachment view sizing. Removes the attachment view zooming in the process. see #21390. 

git-svn-id: http://core.svn.wordpress.org/trunk@22324 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Daryl Koopersmith 2012-10-29 18:05:03 +00:00
parent 16c1011cdb
commit c0bc7a7903
3 changed files with 113 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
wp-includes/css/media-views.css
View File

@ -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;
}
/**

99
wp-includes/js/media-views.js
View File

@ -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');
};
}())
});
/**

32
wp-includes/media.php
View File

@ -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
}