Changeset 22324

Timestamp:

10/29/2012 06:05:03 PM (14 years ago)

Author:

koopersmith

Message:

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

Location:

trunk/wp-includes

Files:

• css/media-views.css (modified) (6 diffs)
• js/media-views.js (modified) (10 diffs)
• media.php (modified) (2 diffs)

trunk/wp-includes/css/media-views.css

@@ -175 +175 @@
         height: auto;
         width: auto;
+        margin: 0;
         overflow: auto;
 }
@@ -197 +198 @@
         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;
-}*/
 
 /**
@@ -290 +253 @@
 }
 
+.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%;
+}
+
+.attachment-preview:after {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
+        overflow: hidden;
+}
+
+.attachment .thumbnail img {
+        top: 0;
+        left: 0;
+}
+
+.attachment .icon,
+.attachment .thumbnail img {
         -webkit-transform: translate( -50%, -50% );
         -moz-transform:    translate( -50%, -50% );
@@ -302 +294 @@
 
 .attachment .filename {
-        margin-top: 140px;
-        padding: 0 10px;
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        padding: 5px 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;
+        background: rgba( 255, 255, 255, 0.8 );
+        box-shadow: 0 0 2px rgba( 0, 0, 0, 0.2 );
 }
 
@@ -330 +308 @@
         width: 199px;
         height: 199px;
-}
-
-.attachment-preview .thumbnail:after {
-        content: '';
-        display: block;
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
-        overflow: hidden;
-}
-
-.attachment.fit .thumbnail:after {
-        box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
 }
 
@@ -623 +585 @@
         float: left;
         margin: 10px 0 0;
+        border-radius: 3px;
 }
 

trunk/wp-includes/js/media-views.js

@@ -128 +128 @@
                                 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 );
@@ -249 +255 @@
                         multiple:   false,
                         describe:   true,
-                        title:      l10n.createGallery
+                        title:      l10n.createGallery,
+                        edge:       199
                 },
 
@@ -1017 +1024 @@
                 events: {
                         'click .attachment-preview':      'toggleSelection',
-                        'mouseenter .attachment-preview': 'shrink',
-                        'mouseleave .attachment-preview': 'expand',
+                        // 'mouseenter .attachment-preview': 'shrink',
+                        // 'mouseleave .attachment-preview': 'expand',
                         'change .describe':               'describe'
                 },
@@ -1053 +1060 @@
 
                         if ( 'image' === options.type )
-                                _.extend( options, this.crop() );
+                                _.extend( options, this.imageSize() );
 
                         this.$el.html( this.template( options ) );
@@ -1124 +1131 @@
                         // Use the provided image size if possible.
                         if ( sizes && sizes[ size ] ) {
-                                return sizes[ size ];
+                                return _.clone( sizes[ size ] );
                         } else {
                                 return {
@@ -1135 +1142 @@
                 },
 
-                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') )
@@ -1226 +1182 @@
                 tagName:   'ul',
                 className: 'attachments',
+                template:  media.template('attachments-css'),
 
                 events: {
@@ -1233 +1190 @@
                 initialize: function() {
                         this.controller = this.options.controller;
+                        this.el.id = _.uniqueId('__attachments-view-');
 
                         _.defaults( this.options, {
@@ -1253 +1211 @@
 
                         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')
+                        }) );
                 },
 
@@ -1354 +1334 @@
                         }
                 }
+        }, {
+                $head: (function() {
+                        var $head;
+                        return function() {
+                                return $head = $head || $('head');
+                        };
+                }())
         });
 

trunk/wp-includes/media.php

@@ -1328 +1328 @@
                         <% } 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 { %>
@@ -1462 +1461 @@
                 </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
 }