Make WordPress Core

Changeset 22324


Ignore:
Timestamp:
10/29/2012 06:05:03 PM (12 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:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-includes/css/media-views.css

    r22323 r22324  
    175175    height: auto;
    176176    width: auto;
     177    margin: 0;
    177178    overflow: auto;
    178179}
     
    197198    font-family: sans-serif;
    198199}
    199 
    200 /**
    201  * Attachments
    202  */
    203 /*.attachments {
    204     position: relative;
    205     width: 100%;
    206     height: 100%;
    207 }
    208 
    209 .attachments-header {
    210     position: absolute;
    211     top: 0;
    212     left: 0;
    213     right: 0;
    214     height: 50px;
    215     padding: 0 10px;
    216     background: #fff;
    217 }
    218 
    219 .attachments-header h3 {
    220     float: left;
    221     margin: 0;
    222     padding: 0;
    223     line-height: 50px;
    224     font-size: 18px;
    225     font-weight: 200;
    226 }
    227 
    228 .attachments ul {
    229     position: absolute;
    230     top: 50px;
    231     left: 0;
    232     right: 0;
    233     bottom: 0;
    234     overflow: auto;
    235     margin: 0 0 20px;
    236 }*/
    237200
    238201/**
     
    290253}
    291254
     255.attachment .thumbnail {
     256    -webkit-transform: translate( 50%, 50% );
     257    -moz-transform:    translate( 50%, 50% );
     258    -ms-transform:     translate( 50%, 50% );
     259    -o-transform:      translate( 50%, 50% );
     260    transform:         translate( 50%, 50% );
     261}
     262
    292263/* Vertically center the icons. */
    293264.attachment .icon {
    294265    top: 50%;
    295266    left: 50%;
     267}
     268
     269.attachment-preview:after {
     270    content: '';
     271    display: block;
     272    position: absolute;
     273    top: 0;
     274    left: 0;
     275    right: 0;
     276    bottom: 0;
     277    box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
     278    overflow: hidden;
     279}
     280
     281.attachment .thumbnail img {
     282    top: 0;
     283    left: 0;
     284}
     285
     286.attachment .icon,
     287.attachment .thumbnail img {
    296288    -webkit-transform: translate( -50%, -50% );
    297289    -moz-transform:    translate( -50%, -50% );
     
    302294
    303295.attachment .filename {
    304     margin-top: 140px;
    305     padding: 0 10px;
     296    position: absolute;
     297    left: 0;
     298    right: 0;
     299    bottom: 0;
     300    padding: 5px 10px;
    306301    text-align: center;
    307302    font-weight: bold;
    308 }
    309 
    310 .attachment-preview .thumbnail,
    311 .attachment-preview .thumbnail img {
    312     -webkit-transition-property: width, height, top, left, right, bottom;
    313     -moz-transition-property:    width, height, top, left, right, bottom;
    314     -ms-transition-property:     width, height, top, left, right, bottom;
    315     -o-transition-property:      width, height, top, left, right, bottom;
    316     transition-property:         width, height, top, left, right, bottom;
    317     -webkit-transition-duration: 80ms;
    318     -moz-transition-duration:    80ms;
    319     -ms-transition-duration:     80ms;
    320     -o-transition-duration:      80ms;
    321     transition-duration:         80ms;
    322     -webkit-transition-delay:    200ms;
    323     -moz-transition-delay:       200ms;
    324     -ms-transition-delay:        200ms;
    325     -o-transition-delay:         200ms;
    326     transition-delay:            200ms;
     303    background: rgba( 255, 255, 255, 0.8 );
     304    box-shadow: 0 0 2px rgba( 0, 0, 0, 0.2 );
    327305}
    328306
     
    330308    width: 199px;
    331309    height: 199px;
    332 }
    333 
    334 .attachment-preview .thumbnail:after {
    335     content: '';
    336     display: block;
    337     position: absolute;
    338     top: 0;
    339     left: 0;
    340     right: 0;
    341     bottom: 0;
    342     box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
    343     overflow: hidden;
    344 }
    345 
    346 .attachment.fit .thumbnail:after {
    347     box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.15 );
    348310}
    349311
     
    623585    float: left;
    624586    margin: 10px 0 0;
     587    border-radius: 3px;
    625588}
    626589
  • trunk/wp-includes/js/media-views.js

    r22323 r22324  
    128128                this.set( 'library', media.query() );
    129129
     130            if ( ! this.get('edge') )
     131                this.set( 'edge', 120 );
     132
     133            if ( ! this.get('gutter') )
     134                this.set( 'gutter', 6 );
     135
    130136            this.on( 'activate', this.activate, this );
    131137            this.on( 'deactivate', this.deactivate, this );
     
    249255            multiple:   false,
    250256            describe:   true,
    251             title:      l10n.createGallery
     257            title:      l10n.createGallery,
     258            edge:       199
    252259        },
    253260
     
    10171024        events: {
    10181025            'click .attachment-preview':      'toggleSelection',
    1019             'mouseenter .attachment-preview': 'shrink',
    1020             'mouseleave .attachment-preview': 'expand',
     1026            // 'mouseenter .attachment-preview': 'shrink',
     1027            // 'mouseleave .attachment-preview': 'expand',
    10211028            'change .describe':               'describe'
    10221029        },
     
    10531060
    10541061            if ( 'image' === options.type )
    1055                 _.extend( options, this.crop() );
     1062                _.extend( options, this.imageSize() );
    10561063
    10571064            this.$el.html( this.template( options ) );
     
    11241131            // Use the provided image size if possible.
    11251132            if ( sizes && sizes[ size ] ) {
    1126                 return sizes[ size ];
     1133                return _.clone( sizes[ size ] );
    11271134            } else {
    11281135                return {
     
    11351142        },
    11361143
    1137         crop: function( sizeId ) {
    1138             var edge = 199,
    1139                 size = this.imageSize( sizeId ),
    1140                 wide, tall;
    1141 
    1142             wide = wp.media.fit( _.extend( { maxWidth:  edge }, size ) );
    1143             tall = wp.media.fit( _.extend( { maxHeight: edge }, size ) );
    1144 
    1145             _.extend( size, wide.width > tall.width ? wide : tall );
    1146 
    1147             size.top  = ( edge - size.height ) / 2;
    1148             size.left = ( edge - size.width ) / 2;
    1149             return size;
    1150         },
    1151 
    1152         fit: function( sizeId ) {
    1153             var margin = 10,
    1154                 full = 199,
    1155                 edge = full - ( margin * 2 ),
    1156                 size = _.extend( wp.media.fit( _.extend({
    1157                     maxWidth:  edge,
    1158                     maxHeight: edge
    1159                 }, this.imageSize( sizeId ) ) ) );
    1160 
    1161             size.top  = Math.round( margin + ( edge - size.height ) / 2 );
    1162             size.left = Math.round( margin + ( edge - size.width ) / 2 );
    1163             return size;
    1164         },
    1165 
    1166         shrink: function() {
    1167             var size = _.pick( this.fit(), 'top', 'left', 'width', 'height' );
    1168             this.$el.addClass('fit');
    1169             this.$('.thumbnail').css( size );
    1170             this.$('.thumbnail img').css( _.extend( size, {
    1171                 top:  0,
    1172                 left: 0
    1173             } ) );
    1174         },
    1175 
    1176         expand: function() {
    1177             var size = _.pick( this.crop(), 'top', 'left', 'width', 'height' );
    1178             this.$el.removeClass('fit');
    1179             this.$('.thumbnail img').css( size );
    1180             this.$('.thumbnail').css({
    1181                 top:    0,
    1182                 left:   0,
    1183                 width:  199,
    1184                 height: 199
    1185             });
    1186         },
    1187 
    11881144        describe: function( event ) {
    11891145            if ( 'image' === this.model.get('type') )
     
    12261182        tagName:   'ul',
    12271183        className: 'attachments',
     1184        template:  media.template('attachments-css'),
    12281185
    12291186        events: {
     
    12331190        initialize: function() {
    12341191            this.controller = this.options.controller;
     1192            this.el.id = _.uniqueId('__attachments-view-');
    12351193
    12361194            _.defaults( this.options, {
     
    12531211
    12541212            this.initSortable();
     1213
     1214            this.controller.state().on( 'change:edge change:gutter', this.css, this );
     1215            this.css();
     1216        },
     1217
     1218        destroy: function() {
     1219            this.collection.off( 'add remove reset', null, this );
     1220            this.controller.state().off( 'change:edge change:gutter', this.css, this );
     1221        },
     1222
     1223        css: function() {
     1224            var $css = $( '#' + this.el.id + '-css' ),
     1225                state = this.controller.state();
     1226
     1227            if ( $css.length )
     1228                $css.remove();
     1229
     1230            media.view.Attachments.$head().append( this.template({
     1231                id:     this.el.id,
     1232                edge:   state.get('edge'),
     1233                gutter: state.get('gutter')
     1234            }) );
    12551235        },
    12561236
     
    13541334            }
    13551335        }
     1336    }, {
     1337        $head: (function() {
     1338            var $head;
     1339            return function() {
     1340                return $head = $head || $('head');
     1341            };
     1342        }())
    13561343    });
    13571344
  • trunk/wp-includes/media.php

    r22323 r22324  
    13281328            <% } else if ( 'image' === type ) { %>
    13291329                <div class="thumbnail">
    1330                     <img src="<%- url %>" width="<%- width %>" height="<%- height %>" draggable="false"
    1331                     style="top:<%- top %>px; left:<%- left %>px;" />
     1330                    <img src="<%- url %>" draggable="false" />
    13321331                </div>
    13331332            <% } else { %>
     
    14621461        </div>
    14631462    </script>
     1463
     1464    <script type="text/html" id="tmpl-attachments-css">
     1465        <style type="text/css" id="<%- id %>-css">
     1466            #<%- id %> {
     1467                padding: <%- gutter %>px;
     1468            }
     1469
     1470            #<%- id %> .attachment {
     1471                margin: <%- gutter %>px;
     1472                width: <%- edge %>px;
     1473            }
     1474
     1475            #<%- id %> .attachment-preview,
     1476            #<%- id %> .attachment-preview .thumbnail {
     1477                width: <%- edge %>px;
     1478                height: <%- edge %>px;
     1479            }
     1480
     1481            #<%- id %> .portrait .thumbnail img {
     1482                width: <%- edge %>px;
     1483                height: auto;
     1484            }
     1485
     1486            #<%- id %> .landscape .thumbnail img {
     1487                width: auto;
     1488                height: <%- edge %>px;
     1489            }
     1490        </style>
     1491    </script>
    14641492    <?php
    14651493}
Note: See TracChangeset for help on using the changeset viewer.