wp/wp-admin/js/theme.js
changeset 0 d970ebf37754
child 5 5e2f62d02dcd
equal deleted inserted replaced
-1:000000000000 0:d970ebf37754
       
     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);