WordPress.org

Make WordPress Core

Changeset 22324


Ignore:
Timestamp:
10/29/12 18:05:03 (3 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.