<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><style type="text/css"><!--
#msg dl { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fc0 solid; padding: 6px; }
#msg ul, pre { overflow: auto; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<title>[15656] trunk: Feature filter visuals.</title>
</head>
<body>

<div id="msg">
<dl>
<dt>Revision</dt> <dd><a href="http://trac.wordpress.org/changeset/15656">15656</a></dd>
<dt>Author</dt> <dd>ryan</dd>
<dt>Date</dt> <dd>2010-09-24 18:50:31 +0000 (Fri, 24 Sep 2010)</dd>
</dl>

<h3>Log Message</h3>
<pre>Feature filter visuals.  First pass. see <a href="http://trac.wordpress.org/ticket/14936">#14936</a></pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkwpadmincssthemeinstallcss">trunk/wp-admin/css/theme-install.css</a></li>
<li><a href="#trunkwpadmincssthemeinstalldevcss">trunk/wp-admin/css/theme-install.dev.css</a></li>
<li><a href="#trunkwpadminthemesphp">trunk/wp-admin/themes.php</a></li>
<li><a href="#trunkwpincludesscriptloaderphp">trunk/wp-includes/script-loader.php</a></li>
</ul>

<h3>Added Paths</h3>
<ul>
<li><a href="#trunkwpadminjsthemedevjs">trunk/wp-admin/js/theme.dev.js</a></li>
<li><a href="#trunkwpadminjsthemejs">trunk/wp-admin/js/theme.js</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkwpadmincssthemeinstallcss"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/css/theme-install.css (15655 => 15656)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/css/theme-install.css        2010-09-24 15:28:28 UTC (rev 15655)
+++ trunk/wp-admin/css/theme-install.css        2010-09-24 18:50:31 UTC (rev 15656)
</span><span class="lines">@@ -1 +1 @@
</span><del>-div.star-holder{position:relative;height:19px;width:100px;font-size:19px;}div.star{height:100%;position:absolute;top:0;left:0;background-color:transparent;letter-spacing:1ex;border:none;}.star1{width:20%;}.star2{width:40%;}.star3{width:60%;}.star4{width:80%;}.star5{width:100%;}.star img,div.star a,div.star a:hover,div.star a:visited{display:block;position:absolute;right:0;border:none;text-decoration:none;}div.star img{width:19px;height:19px;border-left:1px solid #fff;border-right:1px solid #fff;}.theme-listing .theme-item{display:inline-block;width:200px;border:thin solid #ccc;vertical-align:top;}.theme-listing .theme-item h3{text-align:center;font-size:14px;font-style:italic;margin:0;padding:0;}.theme-listing .theme-item img{max-width:150px;max-height:150px;}.theme-listing .theme-item-info span{display:none;}.theme-listing .theme-item:hover .theme-item-info span{display:inline;}.theme-listing .theme-item:hover .theme-item-info span.dots{display:none;}.theme-listing .theme-item-info span.action-links{font-weight:bold;text-align:center;}.theme-listing br.line{border-bottom-width:1px;border-bottom-style:solid;margin-bottom:3px;}.available-theme{padding:20px 15px;}#theme-information .theme-preview-img{float:left;margin:5px 25px 10px 15px;width:300px;}#theme-information .action-button{border-top-width:1px;border-top-style:solid;margin:10px 5px 0;}#theme-information .action-button #cancel{float:left;margin:10px 15px;}#theme-information .action-button #install{float:right;margin:10px 15px;}#theme-information .available-theme h3{margin:1em 0;}body#theme-information{height:auto;}.feature-filter{-moz-border-radius:8px;-khtml-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;border-width:1px;border-style:solid;padding:8px 12px 0;}.feature-filter .feature-group{float:left;margin-bottom:20px;width:695px;}.feature-filter .feature-name{float:left;text-align:right;width:95px;}.feature-filter .feature-group li{display:inline;float:left;list-style-type:none;padding-right:25px;min-width:145px;}
</del><span class="cx">\ No newline at end of file
</span><ins>+div.star-holder{position:relative;height:19px;width:100px;font-size:19px;}div.star{height:100%;position:absolute;top:0;left:0;background-color:transparent;letter-spacing:1ex;border:none;}.star1{width:20%;}.star2{width:40%;}.star3{width:60%;}.star4{width:80%;}.star5{width:100%;}.star img,div.star a,div.star a:hover,div.star a:visited{display:block;position:absolute;right:0;border:none;text-decoration:none;}div.star img{width:19px;height:19px;border-left:1px solid #fff;border-right:1px solid #fff;}.theme-listing .theme-item{display:inline-block;width:200px;border:thin solid #ccc;vertical-align:top;}.theme-listing .theme-item h3{text-align:center;font-size:14px;font-style:italic;margin:0;padding:0;}.theme-listing .theme-item img{max-width:150px;max-height:150px;}.theme-listing .theme-item-info span{display:none;}.theme-listing .theme-item:hover .theme-item-info span{display:inline;}.theme-listing .theme-item:hover .theme-item-info span.dots{display:none;}.theme-listing .theme-item-info span.action-links{font-weight:bold;text-align:center;}.theme-listing br.line{border-bottom-width:1px;border-bottom-style:solid;margin-bottom:3px;}.available-theme{padding:20px 15px;}#theme-information .theme-preview-img{float:left;margin:5px 25px 10px 15px;width:300px;}#theme-information .action-button{border-top-width:1px;border-top-style:solid;margin:10px 5px 0;}#theme-information .action-button #cancel{float:left;margin:10px 15px;}#theme-information .action-button #install{float:right;margin:10px 15px;}#theme-information .available-theme h3{margin:1em 0;}body#theme-information{height:auto;}.feature-filter{-moz-border-radius:8px;-khtml-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;border-width:1px;border-style:solid;padding:8px 12px 0;}.feature-filter .feature-group{float:left;margin-bottom:20px;width:695px;}.feature-filter .feature-name{float:left;text-align:right;width:95px;}.feature-filter .feature-group li{display:inline;float:left;list-style-type:none;padding-right:25px;min-width:145px;}.feature-container{width:100%;overflow:auto;margin-bottom:10px;}.feature-group{margin-bottom:0!important;}
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkwpadmincssthemeinstalldevcss"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/css/theme-install.dev.css (15655 => 15656)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/css/theme-install.dev.css        2010-09-24 15:28:28 UTC (rev 15655)
+++ trunk/wp-admin/css/theme-install.dev.css        2010-09-24 18:50:31 UTC (rev 15656)
</span><span class="lines">@@ -143,3 +143,13 @@
</span><span class="cx">         padding-right: 25px;
</span><span class="cx">         min-width: 145px;
</span><span class="cx"> }
</span><ins>+
+.feature-container {
+width: 100%;
+overflow: auto;
+margin-bottom: 10px;
+}
+
+.feature-group {
+        margin-bottom: 0px !important;
+}
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkwpadminjsthemedevjs"></a>
<div class="addfile"><h4>Added: trunk/wp-admin/js/theme.dev.js (0 => 15656)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/js/theme.dev.js                                (rev 0)
+++ trunk/wp-admin/js/theme.dev.js        2010-09-24 18:50:31 UTC (rev 15656)
</span><span class="lines">@@ -0,0 +1,71 @@
</span><ins>+var ThemeViewer;
+
+(function($){
+        ThemeViewer = function( args ) {
+
+                function filter_count() {
+                        var count = $( '#filters :checked' ).length;
+                        var text  = $( '#filter-click' ).text();
+
+                        if ( text.indexOf( '(' ) != -1 )
+                                text = text.substr( 0, text.indexOf( '(' ) );
+
+                        if ( count == 0 )
+                                $( '#filter-click' ).text( text );
+                        else
+                                $( '#filter-click' ).text( text + ' (' + count + ')' );
+                }
+
+                function init() {
+                        $( '#filter-click, #mini-filter-click' ).unbind( 'click' ).click( function() {
+                                $( '#filter-click' ).toggleClass( 'current' );
+                                $( '#filters' ).slideToggle();
+                                $( '#current-theme' ).slideToggle( 300 );
+                                return false;
+                        });
+
+                        $( '#filters :checkbox' ).unbind( 'click' ).click( function() {
+                                filter_count();
+                        });
+
+                        $( 'p.tags a' ).unbind( 'click' ).click(function() {
+                                $( 'p.tags a' ).unbind( 'click' ).click(function() { slow_down(); return false });   // Stop further clicks until we've done
+                                $( '.loading' ).fadeIn();
+                                $( '.random-info' ).fadeOut();
+
+                                var item = this.href.replace( /.*?s=(.*?)#.*/, '$1' );
+
+                                // Is this in the features list?
+                                if ( $( 'input[value=&quot;' + item + '&quot;]' ).length &gt; 0 ) {
+                                        $( 'input[value=&quot;' + item + '&quot;]' ).attr( 'checked', $( 'input[value=&quot;' + item + '&quot;]' ).attr( 'checked' ) ? false : true );
+
+                                        filter_count();
+                                }
+                                else
+                                        $( 'input[name=s]' ).val( item );   // Can't find it, just use a search
+
+                                // Set the options
+                                opts.search = $( 'input[name=s]' ).val();
+                                opts.order  = document.location.href.match( /order=(\w*)/ ) ? document.location.href.match( /order=(\w*)/ )[1] : 'random';
+                                
+                                $( '#availablethemes td' ).fadeTo( 500, 0.1, function() {
+                                        $( '#availablethemes td img' ).hide();
+                                } );
+
+                                return false;
+                        });
+                }
+                
+                // These are the functions we expose
+                var api = {
+                        init: init
+                };
+
+          return api;
+        }
+})(jQuery);
+
+jQuery( document ).ready( function($) {
+        theme_viewer = new ThemeViewer();
+        theme_viewer.init();
+});        
</ins><span class="cx">\ No newline at end of file
</span><span class="cx">Property changes on: trunk/wp-admin/js/theme.dev.js
</span><span class="cx">___________________________________________________________________
</span><span class="cx">Name: svn:eol-style
</span><span class="cx">   + native
</span></span></pre></div>
<a id="trunkwpadminjsthemejs"></a>
<div class="addfile"><h4>Added: trunk/wp-admin/js/theme.js (0 => 15656)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/js/theme.js                                (rev 0)
+++ trunk/wp-admin/js/theme.js        2010-09-24 18:50:31 UTC (rev 15656)
</span><span class="lines">@@ -0,0 +1 @@
</span><ins>+var ThemeViewer;(function(a){ThemeViewer=function(b){function d(){var f=a(&quot;#filters :checked&quot;).length;var g=a(&quot;#filter-click&quot;).text();if(g.indexOf(&quot;(&quot;)!=-1){g=g.substr(0,g.indexOf(&quot;(&quot;))}if(f==0){a(&quot;#filter-click&quot;).text(g)}else{a(&quot;#filter-click&quot;).text(g+&quot; (&quot;+f+&quot;)&quot;)}}function e(){a(&quot;#filter-click, #mini-filter-click&quot;).unbind(&quot;click&quot;).click(function(){a(&quot;#filter-click&quot;).toggleClass(&quot;current&quot;);a(&quot;#filters&quot;).slideToggle();a(&quot;#current-theme&quot;).slideToggle(300);return false});a(&quot;#filters :checkbox&quot;).unbind(&quot;click&quot;).click(function(){d()});a(&quot;p.tags a&quot;).unbind(&quot;click&quot;).click(function(){a(&quot;p.tags a&quot;).unbind(&quot;click&quot;).click(function(){slow_down();return false});a(&quot;.loading&quot;).fadeIn();a(&quot;.random-info&quot;).fadeOut();var f=this.href.replace(/.*?s=(.*?)#.*/,&quot;$1&quot;);if(a('input[value=&quot;'+f+'&quot;]').length&gt;0){a('input[value=&quot;'+f+'&quot;]').attr(&quot;checked&quot;,a('input[value=&quot;'+f+'&quot;]').attr(&quot;checked&quot;)?false:true);d()}else{a(&quot;input[name=s]&quot;).val(f)}opts.search=a(&quot;input[name=s]&quot;).val();opts.order=document.location.href.match(/order=(\w*)/)?document.location.href.match(/order=(\w*)/)[1]:&quot;random&quot;;a(&quot;#availablethemes td&quot;).fadeTo(500,0.1,function(){a(&quot;#availablethemes td img&quot;).hide()});return false})}var c={init:e};return c}})(jQuery);jQuery(document).ready(function(a){theme_viewer=new ThemeViewer();theme_viewer.init()});
</ins><span class="cx">\ No newline at end of file
</span><span class="cx">Property changes on: trunk/wp-admin/js/theme.js
</span><span class="cx">___________________________________________________________________
</span><span class="cx">Name: svn:eol-style
</span><span class="cx">   + native
</span></span></pre></div>
<a id="trunkwpadminthemesphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/themes.php (15655 => 15656)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/themes.php        2010-09-24 15:28:28 UTC (rev 15655)
+++ trunk/wp-admin/themes.php        2010-09-24 18:50:31 UTC (rev 15656)
</span><span class="lines">@@ -47,6 +47,8 @@
</span><span class="cx"> 
</span><span class="cx"> add_thickbox();
</span><span class="cx"> wp_enqueue_script( 'theme-preview' );
</span><ins>+wp_enqueue_script( 'theme' );
+wp_enqueue_style( 'theme-install' );
</ins><span class="cx"> 
</span><span class="cx"> endif;
</span><span class="cx"> 
</span><span class="lines">@@ -135,7 +137,48 @@
</span><span class="cx">         &lt;label class=&quot;screen-reader-text&quot; for=&quot;theme-search-input&quot;&gt;&lt;?php _e('Search Themes'); ?&gt;:&lt;/label&gt;
</span><span class="cx">         &lt;input type=&quot;text&quot; id=&quot;tag-search-input&quot; name=&quot;s&quot; value=&quot;&lt;?php _admin_search_query(); ?&gt;&quot; /&gt;
</span><span class="cx">         &lt;input type=&quot;submit&quot; value=&quot;&lt;?php esc_attr_e('Search Themes');  ?&gt;&quot; class=&quot;button&quot; /&gt;
</span><ins>+        &lt;a id=&quot;filter-click&quot; href=&quot;?filter=1&quot;&gt;&lt;?php _e( 'Feature Filter' ); ?&gt;&lt;/a&gt;
</ins><span class="cx"> &lt;/p&gt;
</span><ins>+
+&lt;br class=&quot;clear&quot;/&gt;
+
+&lt;div id=&quot;filters&quot; &lt;?php if ( $tpage != 'filter' ) echo ' style=&quot;display: none&quot;' ?&gt;&gt;
+&lt;?php $feature_list = get_theme_feature_list(); ?&gt;
+        &lt;div class=&quot;feature-filter&quot;&gt;
+                &lt;p class=&quot;install-help&quot;&gt;&lt;?php _e('Theme filters') ?&gt;&lt;/p&gt;
+
+        &lt;?php foreach ( $feature_list as $feature_name =&gt; $features ) : ?&gt;
+                &lt;?php        $feature_name = esc_html( $feature_name ); ?&gt;
+                
+                &lt;div class=&quot;feature-container&quot;&gt;
+                        &lt;div class=&quot;feature-name&quot;&gt;&lt;?php echo $feature_name ?&gt;&lt;/div&gt;
+                
+                        &lt;ol style=&quot;float: left; width: 725px;&quot; class=&quot;feature-group&quot;&gt;
+                                &lt;?php foreach ( $features as $key =&gt; $feature ) : ?&gt;
+                                        &lt;?php
+                                                $feature_name = $feature;
+                                                $feature_name = esc_html( $feature_name );
+                                                $feature = esc_attr($feature);
+                                                ?&gt;
+                                &lt;li&gt;
+                                        &lt;input type=&quot;checkbox&quot; name=&quot;features[&lt;?php echo $key; ?&gt;]&quot; id=&quot;feature-id-&lt;?php echo $key; ?&gt;&quot; value=&quot;&lt;?php echo $key; ?&gt;&quot; &lt;?php if ( in_array( $key, $checked_features ) ) echo ' checked=&quot;checked&quot;' ?&gt;/&gt;
+                                        &lt;label for=&quot;feature-id-&lt;?php echo $key; ?&gt;&quot;&gt;&lt;?php echo $feature_name; ?&gt;&lt;/label&gt;
+                                &lt;/li&gt;
+                                &lt;?php        endforeach; ?&gt;
+                        &lt;/ol&gt;
+                &lt;/div&gt;
+        &lt;?php        endforeach; ?&gt;
+
+        &lt;div class=&quot;feature-container&quot;&gt;
+                &lt;input style=&quot;margin-left: 120px&quot; type=&quot;submit&quot; class=&quot;button-secondary submitter&quot; value=&quot;&lt;?php _e( 'Apply Filters' ); ?&gt;&quot; /&gt;
+                &amp;nbsp;
+                &lt;small&gt;&lt;a id=&quot;mini-filter-click&quot; href=&quot;&lt;?php echo admin_url( 'themes.php' ); ?&gt;&quot;&gt;&lt;?php _e( 'Close filters' )?&gt;&lt;/a&gt;&lt;/small&gt;
+        &lt;/div&gt;
+        &lt;br/&gt;
+        &lt;/div&gt;
+        &lt;br class=&quot;clear&quot;/&gt;
+&lt;/div&gt;
+
</ins><span class="cx"> &lt;/form&gt;
</span><span class="cx"> &lt;br class=&quot;clear&quot; /&gt;
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkwpincludesscriptloaderphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-includes/script-loader.php (15655 => 15656)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-includes/script-loader.php        2010-09-24 15:28:28 UTC (rev 15655)
+++ trunk/wp-includes/script-loader.php        2010-09-24 18:50:31 UTC (rev 15656)
</span><span class="lines">@@ -335,6 +335,9 @@
</span><span class="cx">                         'l10n_print_after' =&gt; 'try{convertEntities(wordCountL10n);}catch(e){};'
</span><span class="cx">                 ));
</span><span class="cx"> 
</span><ins>+                $scripts-&gt;add( 'theme-preview', &quot;/wp-admin/js/theme$suffix.js&quot;, array( 'thickbox', 'jquery' ), '20100407' );
+                $scripts-&gt;add_data( 'theme', 'group', 1 );
+
</ins><span class="cx">                 $scripts-&gt;add( 'theme-preview', &quot;/wp-admin/js/theme-preview$suffix.js&quot;, array( 'thickbox', 'jquery' ), '20100407' );
</span><span class="cx">                 $scripts-&gt;add_data( 'theme-preview', 'group', 1 );
</span><span class="cx"> 
</span></span></pre>
</div>
</div>

</body>
</html>