WordPress.org
Get WordPress

Make WordPress Core

Changeset 29376


Ignore:
Timestamp:
08/05/2014 05:19:09 AM (11 years ago)
Author:
azaozz
Message:

Media modal/grid: remove thumbnail resizing from JS, only keep setting number of columns. Props avryl, see #27423.

Location:
trunk/src/wp-includes
Files:
3 edited

Legend:

Unmodified
Added
Removed

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

    r29365 r29376  
    701701.attachments {
    702702    margin: 0;
    703     padding-right: 16px;
     703    padding: 8px;
    704704    -webkit-overflow-scrolling: touch;
    705705}
    … …  
    711711    position: relative;
    712712    float: left;
    713     padding: 0;
    714     margin: 0 10px 20px;
     713    padding: 8px;
     714    margin: 0;
    715715    color: #464646;
     716    cursor: pointer;
    716717    list-style: none;
    717718    text-align: center;
    … …  
    720721    -ms-user-select: none;
    721722    user-select: none;
     723    width: 20%;
     724    -webkit-box-sizing: border-box;
     725    -moz-box-sizing: border-box;
     726    box-sizing: border-box;
    722727}
    723728
    724729.attachment:focus {
    725730    -webkit-box-shadow:
    726         0 0 0 1px #5b9dd9,
    727         0 0 2px 2px #5b9dd9;
     731        inset 0 0 0 5px #fff,
     732        inset 0 0 1px 7px #5b9dd9;
    728733    box-shadow:
    729         0 0 0 1px #5b9dd9,
    730         0 0 2px 2px #5b9dd9;
     734        inset 0 0 0 5px #fff,
     735        inset 0 0 1px 7px #5b9dd9;
    731736    outline: none;
    732737}
    … …  
    734739.selected.attachment {
    735740    -webkit-box-shadow:
    736         0 0 0 1px #fff,
    737         0 0 0 3px #ccc;
     741        inset 0 0 0 5px #fff,
     742        inset 0 0 0 7px #ccc;
    738743    box-shadow:
    739         0 0 0 1px #fff,
    740         0 0 0 3px #ccc;
    741 }
    742 
    743 .selected.attachment:focus {
    744     -webkit-box-shadow:
    745         0 0 0 1px #fff,
    746         0 0 0 5px #1e8cbe;
    747     box-shadow:
    748         0 0 0 1px #fff,
    749         0 0 0 5px #1e8cbe;
     744        inset 0 0 0 5px #fff,
     745        inset 0 0 0 7px #ccc;
    750746}
    751747
    752748.attachment-preview {
    753749    position: relative;
    754     width: 199px;
    755     height: 199px;
    756     -webkit-box-shadow:
    757         inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
    758         inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
    759     box-shadow:
    760         inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
    761         inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
    762     background: #eee;
    763     cursor: pointer;
     750}
     751
     752.attachment-preview:before {
     753    content: '';
     754    display: block;
     755    padding-top: 100%;
    764756}
    765757
    … …  
    767759    margin: 0 auto;
    768760    overflow: hidden;
    769     padding-top: 20%;
    770761}
    771762
    772763.attachment .thumbnail {
    773     display: block;
     764    overflow: hidden;
    774765    position: absolute;
    775766    top: 0;
     767    right: 0;
     768    bottom: 0;
    776769    left: 0;
    777     margin: 0 auto;
    778     overflow: hidden;
     770}
     771
     772.attachment .portrait img {
    779773    max-width: 100%;
     774}
     775
     776.attachment .landscape img {
    780777    max-height: 100%;
    781778}
    782779
    783 .attachment-preview.type-audio .thumbnail,
    784 .attachment-preview.type-video .thumbnail {
    785     z-index: 1;
    786     margin: 1%;
    787     max-width: 98%;
    788     max-height: 98%;
    789 }
    790 
    791 .media-frame-content .attachment-preview.type-audio .icon,
    792 .media-frame-content .attachment-preview.type-video .icon {
    793     z-index: 2;
    794     background: #f1f1f1;
    795     position: relative;
    796     padding: 0;
    797     top: 15%;
    798     left: auto;
    799     right: auto;
    800 }
    801 
    802 .attachment-preview.type-audio .filename,
    803 .attachment-preview.type-video .filename {
    804     z-index: 3;
    805 }
    806 
    807 .attachment-preview .thumbnail:after {
     780.attachment .thumbnail:after {
    808781    content: '';
    809782    display: block;
    … …  
    832805    height: 100%;
    833806    -webkit-transform: translate( 50%, 50% );
    834     -ms-transform: translate( 50%, 50% );
     807    -ms-transform: translate(50%,50%); /* Fails with spaces?? Weird! */
    835808    transform: translate( 50%, 50% );
    836809}
    … …  
    838811.attachment .thumbnail .centered img {
    839812    -webkit-transform: translate( -50%, -50% );
    840     -ms-transform: translate( -50%, -50% );
     813    -ms-transform: translate(-50%,-50%);
    841814    transform: translate( -50%, -50% );
    842815}
    … …  
    849822    overflow: hidden;
    850823    max-height: 100%;
    851 
    852824    word-wrap: break-word;
    853825    text-align: center;
    … …  
    860832.attachment .filename div {
    861833    padding: 5px 10px;
    862 }
    863 
    864 .attachment-preview .thumbnail {
    865     width: 199px;
    866     height: 199px;
    867834}
    868835
    … …  
    908875    position: absolute;
    909876    z-index: 10;
    910     top: -6px;
    911     right: -6px;
     877    top: 0;
     878    right: 0;
    912879    outline: none;
    913880    background: #eee;
    … …  
    931898}
    932899
     900.selected.attachment:focus,
    933901.attachment.details,
    934902.media-frame.mode-grid .selected.attachment {
    935     -webkit-box-shadow: 0 0 0 1px #fff,
    936                 0 0 0 5px #1e8cbe;
    937     box-shadow: 0 0 0 1px #fff,
    938                 0 0 0 5px #1e8cbe;
     903    -webkit-box-shadow:
     904        inset 0 0 0 3px #fff,
     905        inset 0 0 0 7px #1e8cbe;
     906    box-shadow:
     907        inset 0 0 0 3px #fff,
     908        inset 0 0 0 7px #1e8cbe;
    939909}
    940910
    … …  
    943913.media-frame.mode-grid .attachment.selected .check {
    944914    background-color: #1e8cbe;
    945     -webkit-box-shadow: 0 0 0 1px #fff,
    946                 0 0 0 2px #1e8cbe;
    947     box-shadow: 0 0 0 1px #fff,
    948                 0 0 0 2px #1e8cbe;
     915    -webkit-box-shadow:
     916        0 0 0 1px #fff,
     917        0 0 0 2px #1e8cbe;
     918    box-shadow:
     919        0 0 0 1px #fff,
     920        0 0 0 2px #1e8cbe;
    949921}
    950922
    … …  
    972944    display: block;
    973945    width: 100%;
    974     margin: -1px 0 0;
     946    margin: 0;
    975947    padding: 8px;
    976948    font-size: 12px;
    … …  
    12191191    right: 0;
    12201192    -webkit-transform: translateY( -50% );
    1221     -ms-transform: translateY( -50% );
     1193    -ms-transform: translateY(-50%);
    12221194    transform: translateY( -50% );
    12231195    font-size: 40px;
    … …  
    13821354    display: inline-block;
    13831355    height: 48px;
    1384     margin-top: 5px;
     1356    margin: 6px;
     1357    padding: 0;
    13851358    overflow: hidden;
    13861359    vertical-align: top;
    13871360}
    13881361
     1362.media-selection .attachment {
     1363    width: 48px;
     1364    padding: 0;
     1365    margin: 0;
     1366    -webkit-box-shadow: none;
     1367    box-shadow: none;
     1368}
     1369
     1370.media-selection .attachment .thumbnail {
     1371    top: 4px;
     1372    right: 4px;
     1373    bottom: 4px;
     1374    left: 4px;
     1375}
     1376
    13891377.media-selection .attachment .icon {
    13901378    width: 50%;
    13911379}
    1392 
    1393 .attachment.selection.selected {
     1380/*
     1381.attachment.selection.selected .thumbnail {
    13941382    -webkit-box-shadow: none;
    13951383    box-shadow: none;
    … …  
    14141402        0 0 0 4px #1e8cbe;
    14151403}
    1416 
    1417 .media-selection .attachment.selection.details {
     1404*/
     1405.media-selection .attachment.selection.details .thumbnail {
    14181406    -webkit-box-shadow:
    14191407        0 0 0 1px #fff,
    … …  
    20572045    right: 0;
    20582046    -webkit-transform: translateY( -50% );
    2059     -ms-transform: translateY( -50% );
     2047    -ms-transform: translateY(-50%);
    20602048    transform: translateY( -50% );
    20612049    font-size: 3em;
    … …  
    29152903    }
    29162904}
     2905
     2906.attachments[data-columns="1"] .attachment {
     2907    width: 100%;
     2908}
     2909
     2910.attachments[data-columns="2"] .attachment {
     2911    width: 50%;
     2912}
     2913
     2914.attachments[data-columns="3"] .attachment {
     2915    width: 33.3%;
     2916}
     2917
     2918.attachments[data-columns="4"] .attachment {
     2919    width: 25%;
     2920}
     2921
     2922.attachments[data-columns="5"] .attachment {
     2923    width: 20%;
     2924}
     2925
     2926.attachments[data-columns="6"] .attachment {
     2927    width: 16.6%;
     2928}
     2929
     2930.attachments[data-columns="7"] .attachment {
     2931    width: 14.2%;
     2932}
     2933
     2934.attachments[data-columns="8"] .attachment {
     2935    width: 12.5%;
     2936}
     2937
     2938.attachments[data-columns="9"] .attachment {
     2939    width: 11.1%;
     2940}
     2941
     2942.attachments[data-columns="10"] .attachment {
     2943    width: 10%;
     2944}
     2945
     2946.attachments[data-columns="11"] .attachment {
     2947    width: 9%;
     2948}
     2949
     2950.attachments[data-columns="12"] .attachment {
     2951    width: 8.3%;
     2952}

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

    r29364 r29376  
    631631            }
    632632
    633             if ( ! this.get('edge') ) {
    634                 this.set( 'edge', 150 );
    635             }
    636 
    637             if ( ! this.get('gutter') ) {
    638                 this.set( 'gutter', 8 );
    639             }
    640 
    641633            this.resetDisplays();
    642634        },
    … …  
    836828            toolbar:         'gallery-edit',
    837829
    838             describe:        true,
    839             displaySettings: true,
    840             dragInfo:        true,
    841             edge:            199,
    842             editing:         false,
    843             priority:        60,
     830            describe:         true,
     831            displaySettings:  true,
     832            dragInfo:         true,
     833            idealColumnWidth: 170,
     834            editing:          false,
     835            priority:         60,
    844836
    845837            // Don't sync the selection, as the Edit Gallery library
    … …  
    990982            content:      'browse',
    991983
    992             describe:     true,
    993             dragInfo:     true,
    994             edge:         199,
    995             editing:      false,
    996             priority:     60,
    997             SettingsView: false,
     984            describe:         true,
     985            dragInfo:         true,
     986            idealColumnWidth: 170,
     987            editing:          false,
     988            priority:         60,
     989            SettingsView:     false,
    998990
    999991            // Don't sync the selection, as the Edit {Collection} library
    … …  
    21792171                dragInfo:   state.get('dragInfo'),
    21802172
    2181                 suggestedWidth:  state.get('suggestedWidth'),
    2182                 suggestedHeight: state.get('suggestedHeight'),
     2173                idealColumnWidth: state.get('idealColumnWidth'),
     2174                suggestedWidth:   state.get('suggestedWidth'),
     2175                suggestedHeight:  state.get('suggestedHeight'),
    21832176
    21842177                AttachmentView: state.get('AttachmentView')
    … …  
    48064799            var attachment = $('.attachments-browser .attachment'),
    48074800                attachmentsWidth = $('.attachments-browser .attachments').width(),
    4808                 thumbnailWidth = attachment.first().innerWidth() + 16,
    4809                 thumbnailsPerRow = Math.floor(attachmentsWidth/thumbnailWidth),
     4801                thumbnailWidth = attachment.first().width(),
     4802                thumbnailsPerRow = Math.round( attachmentsWidth / thumbnailWidth ),
    48104803                totalThumnails = attachment.length,
    48114804                totalRows = Math.ceil(totalThumnails/thumbnailsPerRow),
    … …  
    52195212        },
    52205213
    5221         cssTemplate: media.template('attachments-css'),
    5222 
    52235214        initialize: function() {
    52245215            this.el.id = _.uniqueId('__attachments-view-');
    … …  
    52295220                AttachmentView:     media.view.Attachment,
    52305221                sortable:           false,
    5231                 resize:             true
     5222                resize:             true,
     5223                idealColumnWidth:   150
    52325224            });
    52335225
    … …  
    52595251            this.initSortable();
    52605252
    5261             _.bindAll( this, 'css' );
    5262             this.model.on( 'change:edge change:gutter', this.css, this );
    5263             this._resizeCss = _.debounce( _.bind( this.css, this ), this.refreshSensitivity );
     5253            _.bindAll( this, 'setColumns' );
     5254
    52645255            if ( this.options.resize ) {
    5265                 $(window).on( 'resize.attachments', this._resizeCss );
    5266             }
    5267 
    5268             // Call this.css() after this view has been rendered in the DOM so
     5256                $( window ).on( 'resize.attachments', this.setColumns );
     5257            }
     5258
     5259            // Call this.setColumns() after this view has been rendered in the DOM so
    52695260            // attachments get proper width applied.
    5270             _.defer( this.css, this );
     5261            _.defer( this.setColumns, this );
    52715262        },
    52725263
    52735264        dispose: function() {
    52745265            this.collection.props.off( null, null, this );
    5275             $(window).off( 'resize.attachments', this._resizeCss );
     5266            $( window ).off( 'resize.attachments', this.setColumns );
     5267
    52765268            /**
    52775269             * call 'dispose' directly on the parent class
    … …  
    52805272        },
    52815273
    5282         css: function() {
    5283             var $css = $( '#' + this.el.id + '-css' );
    5284 
    5285             if ( $css.length ) {
    5286                 $css.remove();
    5287             }
    5288 
    5289             media.view.Attachments.$head().append( this.cssTemplate({
    5290                 id:     this.el.id,
    5291                 edge:   this.edge(),
    5292                 gutter: this.model.get('gutter')
    5293             }) );
    5294         },
    5295         /**
    5296          * @returns {Number}
    5297          */
    5298         edge: function() {
    5299             var edge = this.model.get('edge'),
    5300                 gutter, width, columns;
    5301 
    5302             if ( ! this.$el.is(':visible') ) {
    5303                 return edge;
    5304             }
    5305 
    5306             gutter  = this.model.get('gutter') * 2;
    5307             width   = this.$el.width() - gutter;
    5308             columns = Math.ceil( width / ( edge + gutter ) );
    5309             edge = Math.floor( ( width - ( columns * gutter ) ) / columns );
    5310             return edge;
     5274        setColumns: function() {
     5275            var prev = this.columns;
     5276
     5277            this.columns = Math.round( this.$el.width() / this.options.idealColumnWidth );
     5278
     5279            if ( prev !== this.columns ) {
     5280                this.$el.attr( 'data-columns', this.columns );
     5281            }
    53115282        },
    53125283
    … …  
    54545425            }
    54555426        }
    5456     }, {
    5457         $head: (function() {
    5458             var $head;
    5459             return function() {
    5460                 return $head = $head || $('head');
    5461             };
    5462         }())
    54635427    });
    54645428
    … …  
    58965860                sortable:             this.options.sortable,
    58975861                scrollElement:        this.options.scrollElement,
     5862                idealColumnWidth:     this.options.idealColumnWidth,
    58985863
    58995864                // The single `Attachment` view to be used in the `Attachments` view.
    … …  
    60045969                collection: this.collection,
    60055970                selection:  this.collection,
    6006                 model:      new Backbone.Model({
    6007                     edge:   40,
    6008                     gutter: 5
    6009                 })
     5971                model:      new Backbone.Model()
    60105972            });
    60115973

  • trunk/src/wp-includes/media-template.php

    r29373 r29376  
    415415    <script type="text/html" id="tmpl-attachment">
    416416        <div class="attachment-preview js--select-attachment type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}">
    417             <# if ( data.uploading ) { #>
    418                 <div class="media-progress-bar"><div></div></div>
    419             <# } else if ( 'image' === data.type ) { #>
    420                 <div class="thumbnail">
     417            <div class="thumbnail">
     418                <# if ( data.uploading ) { #>
     419                    <div class="media-progress-bar"><div>
     420                <# } else if ( 'image' === data.type ) { #>
    421421                    <div class="centered">
    422422                        <img src="{{ data.size.url }}" draggable="false" alt="" />
    423423                    </div>
    424                 </div>
    425             <# } else {
    426                 if ( data.thumb && data.thumb.src && data.thumb.src !== data.icon ) {
    427                 #><img src="{{ data.thumb.src }}" class="thumbnail" draggable="false" /><#
    428                 } else {
    429                 #><img src="{{ data.icon }}" class="icon" draggable="false" /><#
    430                 } #>
    431                 <div class="filename">
    432                     <div>{{ data.filename }}</div>
    433                 </div>
    434             <# } #>
     424                <# } else { #>
     425                    <div class="centered">
     426                        <# if ( data.thumb && data.thumb.src && data.thumb.src !== data.icon ) { #>
     427                            <img src="{{ data.thumb.src }}" class="thumbnail" draggable="false" />
     428                        <# } else { #>
     429                            <img src="{{ data.icon }}" class="icon" draggable="false" />
     430                        <# } #>
     431                    </div>
     432                    <div class="filename">
     433                        <div>{{ data.filename }}</div>
     434                    </div>
     435                <# } #>
     436            </div>
    435437            <# if ( data.buttons.close ) { #>
    436438                <a class="close media-modal-icon" href="#" title="<?php esc_attr_e('Remove'); ?>"></a>
    … …  
    821823            <input type="text" class="link-to-custom" data-setting="linkUrl" />
    822824        </div>
    823     </script>
    824 
    825     <script type="text/html" id="tmpl-attachments-css">
    826         <style type="text/css" id="{{ data.id }}-css">
    827             #{{ data.id }} {
    828                 padding: 0 {{ data.gutter }}px;
    829             }
    830 
    831             #{{ data.id }} .attachment {
    832                 margin: {{ data.gutter }}px;
    833                 width: {{ data.edge }}px;
    834             }
    835 
    836             #{{ data.id }} .attachment-preview,
    837             #{{ data.id }} .attachment-preview .thumbnail {
    838                 width: {{ data.edge }}px;
    839                 height: {{ data.edge }}px;
    840             }
    841 
    842             #{{ data.id }} .portrait .thumbnail img {
    843                 max-width: {{ data.edge }}px;
    844                 height: auto;
    845             }
    846 
    847             #{{ data.id }} .landscape .thumbnail img {
    848                 width: auto;
    849                 max-height: {{ data.edge }}px;
    850             }
    851         </style>
    852825    </script>
    853826
Note: See TracChangeset for help on using the changeset viewer.