[wpmu-trac] [WordPress MU Trac] #302: A Rollover Preview variation to Themes.php

[WordPress MU Trac]

#302: A Rollover Preview variation to Themes.php
------------------------+---------------------------------------------------
 Reporter:  dsader      |       Owner:  somebody
     Type:  defect      |      Status:  new     
 Priority:  normal      |   Milestone:  WPMU 2.0
Component:  component1  |     Version:  2.0     
 Severity:  normal      |    Keywords:  themes  
------------------------+---------------------------------------------------
 All themes list in a table with a screenshot on rollover only. Loads
 quicker with mucho themes.

 I have a "if site admin" around the version and author.

 <code>
 <div class="wrap">
 <h2><?php _e('Current Theme'); ?></h2>
 <div id="currenttheme">
 <?php if ( $ct->screenshot ) : ?>
 <img src="<?php echo get_option('siteurl') . '/' . $ct->stylesheet_dir .
 '/' . $ct->screenshot; ?>" alt="<?php _e('Current theme preview'); ?>" />
 <?php endif; ?>
 <p><?php
         $cTheme = get_current_theme();
         echo "<p>The currently active theme is <b>$cTheme</b>, ";
         if (get_option('ut_use_user_theme') == 1 )
              echo "from the <b>User Themes</b> library.</p>";
         else
              echo "from the <b>System Themes</b> library.</p>";
         ?></p>
 </div>
 <br style="clear: both" />
 <h2> </h2>
 </div>
 <?php
 $theme_names = array_keys($themes);
 natcasesort($theme_names);
 ?>
 <div class="wrap">
 <form>
 <table id='the-list-x' width='auto'>
 <tr style='background-color: #444444; color:#ffffff;'>
 <td colspan='5'>System Themes <i style='font-size:.8em'>(no
 editing)</i></td></tr>
 <?php
 foreach ($theme_names as $theme_name) {
         $template = $themes[$theme_name]['Template'];
         $stylesheet = $themes[$theme_name]['Stylesheet'];
         $title = $themes[$theme_name]['Title'];
         $version = $themes[$theme_name]['Version'];
         $description = $themes[$theme_name]['Description'];
         $author = $themes[$theme_name]['Author'];
         $screenshot = $themes[$theme_name]['Screenshot'];
         $stylesheet_dir = $themes[$theme_name]['Stylesheet Dir'];
            $alt = $alt == '' ? 'alternate' : '';
         $activate_link =
 wp_nonce_url("themes.php?action=activate&amp;template=$template&amp;stylesheet=$stylesheet",
 'switch-theme_' . $template);
 ?>
 <tr class='<?php echo $alt; ?>'><td><a style='text-decoration: none;
 color: black;' href='<?php echo $activate_link; ?>'<?php echo
 "onMouseOver=\"preview('" . get_option('siteurl') . '/' . $stylesheet_dir
 . '/' . $screenshot . "',
 getTopPosition(this));\"onMouseOut=\"unpreview();\"
 "; ?>><?php echo "$title"; ?></a></td>
 <td><?php echo "$description"; ?></td>
 <?php if( is_site_admin() ) { ?>
 <td><?php echo "$version"; ?></td>
 <td><?php echo "$author"; ?></td>
 <?php } ?>
 <td><a href='<?php echo $activate_link; ?>'>Activate</a></td>
 </tr>
 <?php }
 ?>
 </form>
 </table>
 </div>
 <script>
         var pendingOpen = 0;
         var open = 0;
         var pendingClose = 0;
         function preview(url, top) {
            document.getElementById('previewbox').style.top=top-100 + "px";
            document.getElementById('previewimage').src=url;
            pendingOpen = 1;
            pendingClose = 0;
            setTimeout('showpreview()', 1000);
         }
         function unpreview() {
           pendingClose = 1;
           setTimeout('hidepreview()', 400);
         }
         function showpreview() {
            if (pendingOpen == 0) { return; }
            var p = document.getElementById('previewbox');
            p.style.visibility='visible';
         }
         function hidepreview() {
            if  (pendingClose == 0 ) {return;}
            pendingClose = 0;
            pendingOpen = 0;
            var p = document.getElementById('previewbox');
            p.style.visibility='hidden';
         }
         function getTopPosition(e) {
            p = 0;
            while (e!=null) {
               p += e.offsetTop;
               e = e.offsetParent;
            }
            return p;
         }
       </script>

       <style>
          #previewbox {
              visibility: hidden;
              width: 200px;
              height: 200px;
              background-color: white;
              border: 5px solid #cccccc;
              position: absolute;
              left: 220px;
              top: 300px;
          }
       </style>
       <div id='previewbox'>
          <img id='previewimage' width='200' height='200' border='0'
 src='http://www.google.com/intl/en/images/logo.gif'/>
       </div>
 </code>

-- 
Ticket URL: <http://trac.mu.wordpress.org/ticket/302>
WordPress MU Trac <http://mu.wordpress.org/>
WordPress Multiuser