Changeset 20352

Timestamp:

04/04/2012 09:02:29 PM (14 years ago)

Author:

koopersmith

Message:

Theme Customizer: Improve the customize loader and themes list table markup. see #19910.

• Use event delegation for triggering the customize loader (so we play nicely with infinite scroll).
• Use data attributes on .load-customize links instead of parsing the href.
• Properly translate the 'Customize' string instead of injecting the replacement with JS.

Location:

trunk

Files:

• wp-admin/includes/class-wp-themes-list-table.php (modified) (2 diffs)
• wp-includes/js/customize-loader.dev.js (modified) (1 diff)

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

@@ -132 +132 @@
                                 home_url( '/' ) ) );
 
+                        $customize_attributes = 'title="' . esc_attr( sprintf( __( 'Customize “%s”' ), $title ) ) . '"
+                                . data-customize-template="' . esc_attr( $template ) . '" data-customize-stylesheet="' . esc_attr( $stylesheet ) . '"';
+
                         $actions = array();
                         $actions[] = '<a href="' . $activate_link . '" class="activatelink" title="'
                                 . esc_attr( sprintf( __( 'Activate &#8220;%s&#8221;' ), $title ) ) . '">' . __( 'Activate' ) . '</a>';
-                        $actions[] = '<a href="' . $preview_link . '" class="thickbox thickbox-preview" title="'
-                                . esc_attr( sprintf( __( 'Preview &#8220;%s&#8221;' ), $title ) ) . '">' . __( 'Preview' ) . '</a>';
+                        $actions[] = '<a href="' . $preview_link . '" class="hide-if-js" title="'
+                                . esc_attr( sprintf( __( 'Preview &#8220;%s&#8221;' ), $title ) ) . '">' . __( 'Preview' ) . '</a>'
+                                . '<a href="#" class="load-customize hide-if-no-js" ' . $customize_attributes . '>' . __( 'Customize' ) . '</a>';
                         if ( ! is_multisite() && current_user_can( 'delete_themes' ) )
                                 $actions[] = '<a class="submitdelete deletion" href="' . wp_nonce_url( "themes.php?action=delete&amp;template=$stylesheet", 'delete-theme_' . $stylesheet )
@@ -146 +150 @@
                         $actions = implode ( ' | ', $actions );
                         ?>
-                        <a href="<?php echo $preview_link; ?>" class="thickbox thickbox-preview screenshot">
+                        <a href="<?php echo $preview_link; ?>" class="load-customize screenshot" <?php echo $customize_attributes; ?>>
                         <?php if ( $screenshot = $theme->get_screenshot() ) : ?>
                                 <img src="<?php echo esc_url( $screenshot ); ?>" alt="" />

trunk/wp-includes/js/customize-loader.dev.js

@@ -42 +42 @@
                 Loader.initialize();
 
-                // Override 'preview' links on themes page.
-                $('.thickbox-preview').click( function( event ) {
-                        var href, template, stylesheet;
+                $('#current-theme, #availablethemes').on( 'click', '.load-customize', function( event ) {
+                        var load = $(this);
 
-                        // Stop the thickbox.
                         event.preventDefault();
-                        event.stopImmediatePropagation();
-
-                        // Extract the template/stylesheet from the preview link's url.
-                        href = $(this).attr('href');
-                        template = href.match('template=([^&]*)')[1];
-                        stylesheet = href.match('stylesheet=([^&]*)')[1];
 
                         // Load the theme.
                         Loader.open({
-                                template: template,
-                                stylesheet: stylesheet
+                                template:   load.data('customizeTemplate'),
+                                stylesheet: load.data('customizeStylesheet')
                         });
-                }).filter( function() {
-                        return 'Preview' == $(this).text();
-                }).text('Customize');
+                });
         });