WordPress.org

Make WordPress Core

Ticket #19816: 19816.3.2.diff

File 19816.3.2.diff, 10.0 KB (added by DH-Shredder, 2 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