wp-admin/js/theme.js

   1 /**
   2  * Theme Browsing
   3  *
   4  * Controls visibility of theme details on manage and install themes pages.
   5  */
   6 jQuery( function($) {
   7         $('#availablethemes').on( 'click', '.theme-detail', function (event) {
   8                 var theme   = $(this).closest('.available-theme'),
   9                         details = theme.find('.themedetaildiv');
  10
  11                 if ( ! details.length ) {
  12                         details = theme.find('.install-theme-info .theme-details');
  13                         details = details.clone().addClass('themedetaildiv').appendTo( theme ).hide();
  14                 }
  15
  16                 details.toggle();
  17                 event.preventDefault();
  18         });
  19 });
  20
  21 /**
  22  * Theme Install
  23  *
  24  * Displays theme previews on theme install pages.
  25  */
  26 jQuery( function($) {
  27         if( ! window.postMessage )
  28                 return;
  29
  30         var preview = $('#theme-installer'),
  31                 info    = preview.find('.install-theme-info'),
  32                 panel   = preview.find('.wp-full-overlay-main'),
  33                 body    = $( document.body );
  34
  35         preview.on( 'click', '.close-full-overlay', function( event ) {
  36                 preview.fadeOut( 200, function() {
  37                         panel.empty();
  38                         body.removeClass('theme-installer-active full-overlay-active');
  39                 });
  40                 event.preventDefault();
  41         });
  42
  43         preview.on( 'click', '.collapse-sidebar', function( event ) {
  44                 preview.toggleClass( 'collapsed' ).toggleClass( 'expanded' );
  45                 event.preventDefault();
  46         });
  47
  48         $('#availablethemes').on( 'click', '.install-theme-preview', function( event ) {
  49                 var src;
  50
  51                 info.html( $(this).closest('.installable-theme').find('.install-theme-info').html() );
  52                 src = info.find( '.theme-preview-url' ).val();
  53                 panel.html( '<iframe src="' + src + '" />');
  54                 preview.fadeIn( 200, function() {
  55                         body.addClass('theme-installer-active full-overlay-active');
  56                 });
  57                 event.preventDefault();
  58         });
  59 });
  60
  61 var ThemeViewer;
  62
  63 (function($){
  64         ThemeViewer = function( args ) {
  65
  66                 function init() {
  67                         $( '#filter-click, #mini-filter-click' ).unbind( 'click' ).click( function() {
  68                                 $( '#filter-click' ).toggleClass( 'current' );
  69                                 $( '#filter-box' ).slideToggle();
  70                                 $( '#current-theme' ).slideToggle( 300 );
  71                                 return false;
  72                         });
  73
  74                         $( '#filter-box :checkbox' ).unbind( 'click' ).click( function() {
  75                                 var count = $( '#filter-box :checked' ).length,
  76                                         text  = $( '#filter-click' ).text();
  77
  78                                 if ( text.indexOf( '(' ) != -1 )
  79                                         text = text.substr( 0, text.indexOf( '(' ) );
  80
  81                                 if ( count == 0 )
  82                                         $( '#filter-click' ).text( text );
  83                                 else
  84                                         $( '#filter-click' ).text( text + ' (' + count + ')' );
  85                         });
  86
  87                         /* $('#filter-box :submit').unbind( 'click' ).click(function() {
  88                                 var features = [];
  89                                 $('#filter-box :checked').each(function() {
  90                                         features.push($(this).val());
  91                                 });
  92
  93                                 listTable.update_rows({'features': features}, true, function() {
  94                                         $( '#filter-click' ).toggleClass( 'current' );
  95                                         $( '#filter-box' ).slideToggle();
  96                                         $( '#current-theme' ).slideToggle( 300 );
  97                                 });
  98
  99                                 return false;
 100                         }); */
 101                 }
 102
 103                 // These are the functions we expose
 104                 var api = {
 105                         init: init
 106                 };
 107
 108         return api;
 109         }
 110 })(jQuery);
 111
 112 jQuery( document ).ready( function($) {
 113         theme_viewer = new ThemeViewer();
 114         theme_viewer.init();
 115 });
 116
 117
 118 /**
 119  * Class that provides infinite scroll for Themes admin screens
 120  *
 121  * @since 3.4
 122  *
 123  * @uses ajaxurl
 124  * @uses list_args
 125  * @uses theme_list_args
 126  * @uses $('#_ajax_fetch_list_nonce').val()
 127 * */
 128 var ThemeScroller;
 129 (function($){
 130         ThemeScroller = {
 131                 querying: false,
 132                 scrollPollingDelay: 500,
 133                 failedRetryDelay: 4000,
 134                 outListBottomThreshold: 300,
 135
 136                 /**
 137                  * Initializer
 138                  *
 139                  * @since 3.4
 140                  * @access private
 141                  */
 142                 init: function() {
 143                         var self = this;
 144
 145                         // Get out early if we don't have the required arguments.
 146                         if ( typeof ajaxurl === 'undefined' ||
 147                                  typeof list_args === 'undefined' ||
 148                                  typeof theme_list_args === 'undefined' ) {
 149                                         $('.pagination-links').show();
 150                                         return;
 151                         }
 152
 153                         // Handle inputs
 154                         this.nonce = $('#_ajax_fetch_list_nonce').val();
 155                         this.nextPage = ( theme_list_args.paged + 1 );
 156
 157                         // Cache jQuery selectors
 158                         this.$outList = $('#availablethemes');
 159                         this.$spinner = $('div.tablenav.bottom').children( '.spinner' );
 160                         this.$window = $(window);
 161                         this.$document = $(document);
 162
 163                         /**
 164                          * If there are more pages to query, then start polling to track
 165                          * when user hits the bottom of the current page
 166                          */
 167                         if ( theme_list_args.total_pages >= this.nextPage )
 168                                 this.pollInterval =
 169                                         setInterval( function() {
 170                                                 return self.poll();
 171                                         }, this.scrollPollingDelay );
 172                 },
 173
 174                 /**
 175                  * Checks to see if user has scrolled to bottom of page.
 176                  * If so, requests another page of content from self.ajax().
 177                  *
 178                  * @since 3.4
 179                  * @access private
 180                  */
 181                 poll: function() {
 182                         var bottom = this.$document.scrollTop() + this.$window.innerHeight();
 183
 184                         if ( this.querying ||
 185                                 ( bottom < this.$outList.height() - this.outListBottomThreshold ) )
 186                                 return;
 187
 188                         this.ajax();
 189                 },
 190
 191                 /**
 192                  * Applies results passed from this.ajax() to $outList
 193                  *
 194                  * @since 3.4
 195                  * @access private
 196                  *
 197                  * @param results Array with results from this.ajax() query.
 198                  */
 199                 process: function( results ) {
 200                         if ( results === undefined ) {
 201                                 clearInterval( this.pollInterval );
 202                                 return;
 203                         }
 204
 205                         if ( this.nextPage > theme_list_args.total_pages )
 206                                 clearInterval( this.pollInterval );
 207
 208                         if ( this.nextPage <= ( theme_list_args.total_pages + 1 ) )
 209                                 this.$outList.append( results.rows );
 210                 },
 211
 212                 /**
 213                  * Queries next page of themes
 214                  *
 215                  * @since 3.4
 216                  * @access private
 217                  */
 218                 ajax: function() {
 219                         var self = this;
 220
 221                         this.querying = true;
 222
 223                         var query = {
 224                                 action: 'fetch-list',
 225                                 paged: this.nextPage,
 226                                 s: theme_list_args.search,
 227                                 tab: theme_list_args.tab,
 228                                 type: theme_list_args.type,
 229                                 _ajax_fetch_list_nonce: this.nonce,
 230                                 'features[]': theme_list_args.features,
 231                                 'list_args': list_args
 232                         };
 233
 234                         this.$spinner.show();
 235                         $.getJSON( ajaxurl, query )
 236                                 .done( function( response ) {
 237                                         self.nextPage++;
 238                                         self.process( response );
 239                                         self.$spinner.hide();
 240                                         self.querying = false;
 241                                 })
 242                                 .fail( function() {
 243                                         self.$spinner.hide();
 244                                         self.querying = false;
 245                                         setTimeout( function() { self.ajax(); }, self.failedRetryDelay );
 246                                 });
 247                 }
 248         }
 249
 250         $(document).ready( function($) {
 251                 ThemeScroller.init();
 252         });
 253
 254 })(jQuery);