WordPress.org
Get WordPress

Make WordPress Core

Ticket #19816: 19816.3.2.diff

File 19816.3.2.diff, 10.0 KB (added by kirasong, 13 years ago)

Fixed whitespace issue on expansion of details div, clearing of details on window resize, caching of $(this), whitespace for coding standards. [edit: trailing space removal]

  • wp-admin/includes/class-wp-theme-install-list-table.php

     
    162162                $theme_names = array_keys( $themes );
    163163
    164164                foreach ( $theme_names as $theme_name ) {
    165                                 $class = array( 'available-theme' );
    166                                 ?>
    167                                 <div class="<?php echo join( ' ', $class ); ?>"><?php
    168                                         if ( isset( $themes[$theme_name] ) )
    169                                                 display_theme( $themes[$theme_name] );
    170                                 ?></div>
    171                 <?php } // end foreach $theme_names
     165                        if ( isset( $themes[$theme_name] ) )
     166                                display_theme( $themes[$theme_name] );
     167                } // end foreach $theme_names
    172168        }
    173169}

  • wp-admin/includes/theme-install.php

     
    133133        if ( empty($theme) )
    134134                return;
    135135
     136        $class = array( 'available-theme' );
     137
    136138        $name = wp_kses($theme->name, $themes_allowedtags);
    137139        $author = wp_kses($theme->author, $themes_allowedtags);
    138140        $desc = wp_kses($theme->description, $themes_allowedtags);
     141        $screenshots = (array) $theme->screenshot_url;
     142        $num_screenshots = count( $screenshots );
     143
     144        if ( $num_screenshots > 1 )
     145                $class[] = 'has-screenshots';
     146
    139147        //if ( strlen($desc) > 30 )
    140148        //      $desc = substr($desc, 0, 15) . '<span class="dots">...</span><span>' . substr($desc, -15) . '</span>';
    141149
    … …  
    151159
    152160        $actions = implode ( ' | ', $actions );
    153161        ?>
     162<div class="<?php echo join( ' ', $class ); ?>">
    154163<a class='thickbox thickbox-preview screenshot'
    155164        href='<?php echo esc_url($preview_link); ?>'
    156165        title='<?php echo esc_attr(sprintf(__('Preview &#8220;%s&#8221;'), $name)); ?>'>
    157 <img src='<?php echo esc_url($theme->screenshot_url); ?>' width='150' />
     166<?php if ( ! empty ( $screenshots ) && false !== $screenshots[0] ) : ?>
     167<img src='<?php echo esc_url($screenshots[0]); ?>' alt='' data-num-images='<?php echo $num_screenshots; ?>' />
     168<?php endif; ?>
    158169</a>
    159170<h3><?php
    160171        /* translators: 1: theme name, 2: author name */
    … …  
    183194        <div class="star star1"><img src="<?php echo admin_url('images/star.png?v=20110615'); ?>" alt="<?php esc_attr_e('1 star') ?>" /></div>
    184195</div>
    185196</div>
     197</div>
    186198<?php }
    187199        /*
    188200         object(stdClass)[59]

  • wp-admin/includes/class-wp-themes-list-table.php

     
    130130
    131131        foreach ( $theme_names as $theme_name ) {
    132132                $class = array( 'available-theme' );
    133         ?>
    134         <div class="<?php echo join( ' ', $class ); ?>">
    135         <?php if ( !empty( $theme_name ) ) :
     133
     134        if ( !empty( $theme_name ) ) :
    136135        $template = $themes[$theme_name]['Template'];
    137136        $stylesheet = $themes[$theme_name]['Stylesheet'];
    138137        $title = $themes[$theme_name]['Title'];
    139138        $version = $themes[$theme_name]['Version'];
    140139        $description = $themes[$theme_name]['Description'];
    141140        $author = $themes[$theme_name]['Author'];
    142         $screenshot = $themes[$theme_name]['Screenshot'];
     141        $screenshots = (array) $themes[$theme_name]['Screenshot'];
    143142        $stylesheet_dir = $themes[$theme_name]['Stylesheet Dir'];
    144143        $template_dir = $themes[$theme_name]['Template Dir'];
    145144        $parent_theme = $themes[$theme_name]['Parent Theme'];
    … …  
    159158        $actions = apply_filters( 'theme_action_links', $actions, $themes[$theme_name] );
    160159
    161160        $actions = implode ( ' | ', $actions );
     161
     162        $num_screenshots = count( $screenshots );
     163
     164        if ( $num_screenshots > 1 )
     165                $class[] = 'has-screenshots';
    162166?>
     167        <div class="<?php echo join( ' ', $class ); ?>">
    163168                <a href="<?php echo $preview_link; ?>" class="<?php echo $thickbox_class; ?> screenshot">
    164 <?php if ( $screenshot ) : ?>
    165                         <img src="<?php echo $theme_root_uri . '/' . $stylesheet . '/' . $screenshot; ?>" alt="" />
     169<?php if ( ! empty ( $screenshots ) && false !== $screenshots[0] ) : ?>
     170                        <img src="<?php echo $theme_root_uri . '/' . $stylesheet . '/' . $screenshots[0]; ?>" alt="" data-num-images="<?php echo $num_screenshots; ?>" />
    166171<?php endif; ?>
    167172                </a>
    168173<h3><?php
    … …  
    182187<?php if ( $tags ) : ?>
    183188<p><?php _e( 'Tags:' ); ?> <?php echo join( ', ', $tags ); ?></p>
    184189<?php endif; ?>
     190</div>
    185191<?php endif; // end if not empty theme_name ?>
    186 </div>
    187192        <?php theme_update_available( $themes[$theme_name] ); ?>
    188193        </div>
    189194<?php } // end foreach $theme_names

  • wp-admin/js/theme-preview.dev.js

     
    5454                return false;
    5555        } );
    5656
    57         // Theme details
    58         $('#availablethemes').on('click', 'a.theme-detail', function (event) {
    59                 $(this).siblings('.themedetaildiv').toggle();
     57
     58        // Toggle Theme Details
     59        var currentTheme;
     60        $('#availablethemes').on( 'click', 'a.theme-detail', function() {
     61
     62                var $this = $(this);
     63
     64                if ( currentTheme !== undefined ) {
     65                        // remove active class/extended details div
     66                        $('.extended-details').remove();
     67                        currentTheme.removeClass( 'active' );
     68                        currentTheme.height( 'auto' );
     69
     70                        // bail if the link clicked was the same as previously
     71                        if ( currentTheme[0] ===  $this.closest( 'div.available-theme' )[0] ) {
     72                                currentTheme = undefined;
     73                                return false;
     74                        }
     75                }
     76
     77                // reset nextLower - has scope for now to possibly use for window resize reflow
     78                var nextLower = undefined,
     79                        maxMargin = 50, // Max Margin allowed between theme and details div
     80                        detailsDiv = $('<div class="extended-details"><div class="themedetaildiv"><h4>Theme Details</h4></div><div class="screenshots"></div></div>');
     81
     82                currentTheme = $this.closest( 'div.available-theme' );
     83                var currentPosition = currentTheme.position().top;
     84                var currentBottom = currentPosition + currentTheme.height();
     85
     86                currentTheme.addClass( 'active' );
     87
     88                // find the next div.available-theme that has a lower position().top
     89                currentTheme.nextAll('div.available-theme').each( function() {
     90                        var $this = $(this);
     91                        if( currentPosition < $this.position().top ) {
     92                                nextLower = $this;
     93                                return false;
     94                        }
     95                });
     96
     97                // insert the details div
     98                if ( nextLower !== undefined ) {
     99                        nextLower.before( detailsDiv );
     100                } else {
     101                        $('#availablethemes').append( detailsDiv );
     102                }
     103
     104                // now that it's generated, grab top of details div
     105                var detailsTop = detailsDiv.position().top;
     106                var margin = detailsTop - currentBottom;
     107
     108                /**
     109                 * If the margin between the bottom of the current theme and details div
     110                 * is greater than maxMargin, extend current theme to avoid whitespace.
     111                 */
     112                if ( margin > maxMargin)
     113                        currentTheme.height( currentTheme.height() + ( margin - maxMargin ) );
     114
     115                var themeDetails = $this.siblings( '.themedetaildiv' ).html();
     116                $('.extended-details .themedetaildiv').append(themeDetails);
     117
     118                // do more screenshots
     119                var screenshot = $('.screenshot img', currentTheme);
     120                var src = screenshot.attr( 'src' );
     121
     122                if ( src !== undefined ) {
     123                        var numScreenshots = screenshot.attr( 'data-num-images' ),
     124                                screenshots = $('.extended-details .screenshots');
     125
     126                        screenshots.append( '<div class="screenshot"><img src="' + src + '" /></div>' );
     127
     128                        if ( numScreenshots !== undefined && numScreenshots > 1 ) {
     129                                var base = src.replace( /screenshot\.(jpg|png)$/, '' );
     130
     131                                for ( var i = 2; i <= numScreenshots; i++ ) {
     132                                        screenshots.append( '<div class="screenshot"><img src="' + base + 'screenshot-' + String(i) + '.png" /></div>' );
     133                                }
     134                        }
     135                }
     136
    60137                return false;
    61138        });
    62139
     140        // if we resize, and there's a details div open, close it.
     141        $(window).resize( function() {
     142                if ( currentTheme !== undefined ) {
     143                        $('.extended-details').remove();
     144                        currentTheme.removeClass( 'active' );
     145                        currentTheme.height( 'auto' );
     146                        currentTheme = undefined;
     147                }
     148        });
     149
    63150});

  • wp-admin/css/wp-admin.dev.css

     
    44784478.available-theme {
    44794479        display: inline-block;
    44804480        margin-bottom: 10px;
    4481         margin-right: 25px;
     4481        margin-right: 10px;
    44824482        overflow: hidden;
    44834483        padding: 20px;
    44844484        vertical-align: top;
    4485         width: 240px;
     4485        width: 300px;
     4486        border-top-left-radius: 3px;
     4487        border-top-right-radius: 3px;
     4488        -webkit-border-top-left-radius: 3px;
     4489        -webkit-border-top-right-radius: 3px;
    44864490}
    44874491
     4492.js .available-theme.has-screenshots {
     4493        background: transparent url(../images/stack.png) no-repeat 26px 5px;
     4494}
     4495
    44884496.available-theme a.screenshot {
    4489         width: 240px;
    4490         height: 180px;
     4497        width: 300px;
     4498        height: 225px;
     4499        margin: 0 auto;
    44914500        display: block;
    44924501        border-width: 1px;
    44934502        border-style: solid;
    … …  
    44964505}
    44974506
    44984507.available-theme img {
    4499         width: 240px;
     4508        width: 300px;
    45004509}
    45014510
    45024511.available-theme h3 {
    45034512        margin: 15px 0 5px;
    45044513}
    45054514
     4515.available-theme.active,
     4516.available-theme.has-screenshots.active {
     4517        background: #efefef;
     4518}
     4519
     4520.extended-details {
     4521        overflow: hidden;
     4522        position: relative;
     4523        margin-top: -13px;
     4524        margin-bottom: 20px;
     4525        padding: 5px 20px;
     4526        padding-left: 330px;
     4527        background-color: #efefef;
     4528        border-radius: 3px;
     4529        -webkit-border-radius: 3px;
     4530}
     4531
     4532#availablethemes .extended-details h4 {
     4533        margin: 1em 0;
     4534}
     4535
     4536.extended-details .themedetaildiv {
     4537        position: relative;
     4538        float: left;
     4539        width: 280px;
     4540        right: 310px;
     4541        margin-right: -100%;
     4542        margin-bottom: 20px;
     4543}
     4544
     4545.extended-details .screenshots {
     4546        position: relative;
     4547        float: left;
     4548        margin-top: 15px;
     4549        width: 100%;
     4550}
     4551
     4552.extended-details div.screenshot {
     4553        overflow: hidden;
     4554        float: left;
     4555        margin-right: 20px;
     4556        margin-bottom: 20px;
     4557        width: 300px;
     4558        height: 225px;
     4559        border: 1px solid #ddd;
     4560}
     4561
     4562.extended-details div.screenshot img {
     4563        display: block;
     4564        margin: 0 auto;
     4565        width: 100%;
     4566}
     4567
    45064568#current-theme {
    45074569        margin: 1em 0 1.5em;
    45084570}
    … …  
    74237485}
    74247486
    74257487
    7426 #theme-information .available-theme,
    7427 .available-theme {
     7488#theme-information .available-theme {
    74287489        padding: 20px 15px;
    74297490}
    74307491