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