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

wp-includes/css/media-views.css

@@ -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 {
+.attachment-preview:after {
-	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 {
 	content: '';
 	display: block;
 	position: absolute;
@@ -343,8 +278,35 @@
 	overflow: hidden;
 }
 
-.attachment.fit .thumbnail:after {
+.attachment .thumbnail img {
-	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
+	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;
 }
 
 /**

wp-includes/js/media-views.js

@@ -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',
+			// 'mouseenter .attachment-preview': 'shrink',
-			'mouseleave .attachment-preview': 'expand',
+			// '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');
+			};
+		}())
 	});
 
 	/**

wp-includes/media.php

@@ -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"
+					<img src="<%- url %>" draggable="false" />
-					style="top:<%- top %>px; left:<%- left %>px;" />
 				</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
 }