WordPress.org
Get WordPress

Make WordPress Core

Ticket #19816: 19816.4.2.diff

File 19816.4.2.diff, 10.9 KB (added by kirasong, 13 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