WordPress.org

Make WordPress Core

Ticket #19816: 19816.4.2.diff

File 19816.4.2.diff, 10.9 KB (added by DH-Shredder, 2 years ago)

19816.4.diff + switching to .data() for grabbing number of screenshots.

  • 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 implode( ' ', $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

     
    1111 
    1212        var $search = array(); 
    1313        var $features = array(); 
    14          
     14 
    1515        function __construct() { 
    1616                parent::__construct( array( 
    1717                        'ajax' => true, 
     
    123123                $themes = $this->items; 
    124124 
    125125                foreach ( $themes as $theme ) { 
    126                         echo '<div class="available-theme">'; 
    127  
    128126                        $template = $theme->get_template(); 
    129127                        $stylesheet = $theme->get_stylesheet(); 
    130128 
    131129                        $title = $theme->display('Name'); 
    132130                        $version = $theme->display('Version'); 
    133131                        $author = $theme->display('Author'); 
    134   
     132                        $screenshot_count = $theme->get_screenshot_count(); 
     133 
     134                        $class = array( 'available-theme' ); 
     135                        if ( $screenshot_count > 1 ) 
     136                                $class[] = 'has-screenshots'; 
     137 
    135138                        $activate_link = wp_nonce_url( "themes.php?action=activate&amp;template=" . urlencode( $template ) . "&amp;stylesheet=" . urlencode( $stylesheet ), 'switch-theme_' . $template ); 
    136139                        $preview_link = esc_url( add_query_arg( 
    137140                                array( 'preview' => 1, 'template' => $template, 'stylesheet' => $stylesheet, 'preview_iframe' => true, 'TB_iframe' => 'true' ), 
    138141                                home_url( '/' ) ) ); 
    139   
     142 
    140143                        $actions = array(); 
    141144                        $actions[] = '<a href="' . $activate_link . '" class="activatelink" title="' 
    142145                                . esc_attr( sprintf( __( 'Activate &#8220;%s&#8221;' ), $title ) ) . '">' . __( 'Activate' ) . '</a>'; 
     
    146149                                $actions[] = '<a class="submitdelete deletion" href="' . wp_nonce_url( "themes.php?action=delete&amp;template=$stylesheet", 'delete-theme_' . $stylesheet ) 
    147150                                        . '" onclick="' . "return confirm( '" . esc_js( sprintf( __( "You are about to delete this theme '%s'\n  'Cancel' to stop, 'OK' to delete." ), $title ) ) 
    148151                                        . "' );" . '">' . __( 'Delete' ) . '</a>'; 
    149   
     152 
    150153                        $actions = apply_filters( 'theme_action_links', $actions, $theme ); 
    151   
     154 
    152155                        $actions = implode ( ' | ', $actions ); 
    153156                        ?> 
     157                <div class="<?php echo implode( ' ', $class ); ?>"> 
    154158                        <a href="<?php echo $preview_link; ?>" class="thickbox thickbox-preview screenshot"> 
    155159                        <?php if ( $theme->get_screenshot() ) : ?> 
    156                                 <img src="<?php echo esc_url( $theme->get_screenshot( 'absolute' ) ); ?>" alt="" /> 
     160                                <img src="<?php echo esc_url( $theme->get_screenshot( 'absolute' ) ); ?>" alt="" data-num-images="<?php echo $screenshot_count; ?>" /> 
    157161                        <?php endif; ?> 
    158162                        </a> 
    159163                        <h3><?php 
    160164                        /* translators: 1: theme title, 2: theme version, 3: theme author */ 
    161165                        printf( __( '%1$s %2$s by %3$s' ), $title, $version, $author ) ; ?></h3> 
    162   
     166 
    163167                        <span class='action-links'><?php echo $actions ?></span> 
    164168                        <span class="separator hide-if-no-js">| </span><a href="#" class="theme-detail hide-if-no-js" tabindex='4'><?php _e('Details') ?></a> 
    165169                        <div class="themedetaildiv hide-if-js"> 
     
    210214 
    211215                                if ( false !== stripos( $theme->get_template(), $word ) ) 
    212216                                        continue; 
    213   
     217 
    214218                                return false; 
    215219                        } 
    216220                } 
  • 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.data( 'numImages' ), 
     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 the window is resized, 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