WordPress.org
Get WordPress

Make WordPress Core

Changeset 29376


Ignore:
Timestamp:
08/05/2014 05:19:09 AM (12 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.