wp-admin/js/theme-install.js

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