wp/wp-admin/js/theme.js
changeset 18 be944660c56a
parent 16 a86126ab1dd4
child 19 3d72ae0968f4
equal deleted inserted replaced
17:34716fd837a4 18:be944660c56a
    71 		_.bindAll( this, 'scroller' );
    71 		_.bindAll( this, 'scroller' );
    72 
    72 
    73 		this.SearchView = options.SearchView ? options.SearchView : themes.view.Search;
    73 		this.SearchView = options.SearchView ? options.SearchView : themes.view.Search;
    74 		// Bind to the scroll event and throttle
    74 		// Bind to the scroll event and throttle
    75 		// the results from this.scroller.
    75 		// the results from this.scroller.
    76 		this.window.bind( 'scroll', _.throttle( this.scroller, 300 ) );
    76 		this.window.on( 'scroll', _.throttle( this.scroller, 300 ) );
    77 	},
    77 	},
    78 
    78 
    79 	// Main render control.
    79 	// Main render control.
    80 	render: function() {
    80 	render: function() {
    81 		// Setup the main theme view
    81 		// Setup the main theme view
   402 
   402 
   403 	render: function() {
   403 	render: function() {
   404 		var data = this.model.toJSON();
   404 		var data = this.model.toJSON();
   405 
   405 
   406 		// Render themes using the html template.
   406 		// Render themes using the html template.
   407 		this.$el.html( this.html( data ) ).attr({
   407 		this.$el.html( this.html( data ) ).attr( 'data-slug', data.id );
   408 			tabindex: 0,
       
   409 			'aria-describedby' : data.id + '-action ' + data.id + '-name',
       
   410 			'data-slug': data.id
       
   411 		});
       
   412 
   408 
   413 		// Renders active theme styles.
   409 		// Renders active theme styles.
   414 		this.activeTheme();
   410 		this.activeTheme();
   415 
   411 
   416 		if ( this.model.get( 'displayAuthor' ) ) {
   412 		if ( this.model.get( 'displayAuthor' ) ) {
   548 			preview.model = self.current;
   544 			preview.model = self.current;
   549 
   545 
   550 			// Render and append.
   546 			// Render and append.
   551 			preview.render();
   547 			preview.render();
   552 			this.setNavButtonsState();
   548 			this.setNavButtonsState();
   553 			$( '.next-theme' ).focus();
   549 			$( '.next-theme' ).trigger( 'focus' );
   554 		})
   550 		})
   555 		.listenTo( preview, 'theme:previous', function() {
   551 		.listenTo( preview, 'theme:previous', function() {
   556 
   552 
   557 			// Keep track of current theme model.
   553 			// Keep track of current theme model.
   558 			current = self.model;
   554 			current = self.model;
   578 			preview.model = self.current;
   574 			preview.model = self.current;
   579 
   575 
   580 			// Render and append.
   576 			// Render and append.
   581 			preview.render();
   577 			preview.render();
   582 			this.setNavButtonsState();
   578 			this.setNavButtonsState();
   583 			$( '.previous-theme' ).focus();
   579 			$( '.previous-theme' ).trigger( 'focus' );
   584 		});
   580 		});
   585 
   581 
   586 		this.listenTo( preview, 'preview:close', function() {
   582 		this.listenTo( preview, 'preview:close', function() {
   587 			self.current = self.model;
   583 			self.current = self.model;
   588 		});
   584 		});
   600 		if ( 0 === this.model.collection.indexOf( current ) ) {
   596 		if ( 0 === this.model.collection.indexOf( current ) ) {
   601 			previousThemeButton
   597 			previousThemeButton
   602 				.addClass( 'disabled' )
   598 				.addClass( 'disabled' )
   603 				.prop( 'disabled', true );
   599 				.prop( 'disabled', true );
   604 
   600 
   605 			nextThemeButton.focus();
   601 			nextThemeButton.trigger( 'focus' );
   606 		}
   602 		}
   607 
   603 
   608 		// Disable next if the next model is undefined.
   604 		// Disable next if the next model is undefined.
   609 		if ( _.isUndefined( this.model.collection.at( this.model.collection.indexOf( current ) + 1 ) ) ) {
   605 		if ( _.isUndefined( this.model.collection.at( this.model.collection.indexOf( current ) + 1 ) ) ) {
   610 			nextThemeButton
   606 			nextThemeButton
   611 				.addClass( 'disabled' )
   607 				.addClass( 'disabled' )
   612 				.prop( 'disabled', true );
   608 				.prop( 'disabled', true );
   613 
   609 
   614 			previousThemeButton.focus();
   610 			previousThemeButton.trigger( 'focus' );
   615 		}
   611 		}
   616 	},
   612 	},
   617 
   613 
   618 	installTheme: function( event ) {
   614 	installTheme: function( event ) {
   619 		var _this = this;
   615 		var _this = this;
   703 	// Set initial focus and constrain tabbing within the theme browser modal.
   699 	// Set initial focus and constrain tabbing within the theme browser modal.
   704 	containFocus: function( $el ) {
   700 	containFocus: function( $el ) {
   705 
   701 
   706 		// Set initial focus on the primary action control.
   702 		// Set initial focus on the primary action control.
   707 		_.delay( function() {
   703 		_.delay( function() {
   708 			$( '.theme-overlay' ).focus();
   704 			$( '.theme-overlay' ).trigger( 'focus' );
   709 		}, 100 );
   705 		}, 100 );
   710 
   706 
   711 		// Constrain tabbing within the modal.
   707 		// Constrain tabbing within the modal.
   712 		$el.on( 'keydown.wp-themes', function( event ) {
   708 		$el.on( 'keydown.wp-themes', function( event ) {
   713 			var $firstFocusable = $el.find( '.theme-header button:not(.disabled)' ).first(),
   709 			var $firstFocusable = $el.find( '.theme-header button:not(.disabled)' ).first(),
   714 				$lastFocusable = $el.find( '.theme-actions a:visible' ).last();
   710 				$lastFocusable = $el.find( '.theme-actions a:visible' ).last();
   715 
   711 
   716 			// Check for the Tab key.
   712 			// Check for the Tab key.
   717 			if ( 9 === event.which ) {
   713 			if ( 9 === event.which ) {
   718 				if ( $firstFocusable[0] === event.target && event.shiftKey ) {
   714 				if ( $firstFocusable[0] === event.target && event.shiftKey ) {
   719 					$lastFocusable.focus();
   715 					$lastFocusable.trigger( 'focus' );
   720 					event.preventDefault();
   716 					event.preventDefault();
   721 				} else if ( $lastFocusable[0] === event.target && ! event.shiftKey ) {
   717 				} else if ( $lastFocusable[0] === event.target && ! event.shiftKey ) {
   722 					$firstFocusable.focus();
   718 					$firstFocusable.trigger( 'focus' );
   723 					event.preventDefault();
   719 					event.preventDefault();
   724 				}
   720 				}
   725 			}
   721 			}
   726 		});
   722 		});
   727 	},
   723 	},
   762 				// Restore scroll position.
   758 				// Restore scroll position.
   763 				document.body.scrollTop = scroll;
   759 				document.body.scrollTop = scroll;
   764 
   760 
   765 				// Return focus to the theme div.
   761 				// Return focus to the theme div.
   766 				if ( themes.focusedTheme ) {
   762 				if ( themes.focusedTheme ) {
   767 					themes.focusedTheme.focus();
   763 					themes.focusedTheme.find('.more-details').trigger( 'focus' );
   768 				}
   764 				}
   769 			});
   765 			});
   770 		}
   766 		}
   771 	},
   767 	},
   772 
   768 
   950 		this.$el.fadeOut( 200, function() {
   946 		this.$el.fadeOut( 200, function() {
   951 			$( 'body' ).removeClass( 'theme-installer-active full-overlay-active' );
   947 			$( 'body' ).removeClass( 'theme-installer-active full-overlay-active' );
   952 
   948 
   953 			// Return focus to the theme div.
   949 			// Return focus to the theme div.
   954 			if ( themes.focusedTheme ) {
   950 			if ( themes.focusedTheme ) {
   955 				themes.focusedTheme.focus();
   951 				themes.focusedTheme.find('.more-details').trigger( 'focus' );
   956 			}
   952 			}
   957 		}).removeClass( 'iframe-ready' );
   953 		}).removeClass( 'iframe-ready' );
   958 
   954 
   959 		// Restore the previous browse tab if available.
   955 		// Restore the previous browse tab if available.
   960 		if ( themes.router.selectedTab ) {
   956 		if ( themes.router.selectedTab ) {
  1963 
  1959 
  1964 	init: function() {
  1960 	init: function() {
  1965 		// Set up the view.
  1961 		// Set up the view.
  1966 		// Passes the default 'section' as an option.
  1962 		// Passes the default 'section' as an option.
  1967 		this.view = new themes.view.Installer({
  1963 		this.view = new themes.view.Installer({
  1968 			section: 'featured',
  1964 			section: 'popular',
  1969 			SearchView: themes.view.InstallerSearch
  1965 			SearchView: themes.view.InstallerSearch
  1970 		});
  1966 		});
  1971 
  1967 
  1972 		// Render results.
  1968 		// Render results.
  1973 		this.render();
  1969 		this.render();
  2030 		});
  2026 		});
  2031 
  2027 
  2032 		/*
  2028 		/*
  2033 		 * Handles sorting / browsing routes.
  2029 		 * Handles sorting / browsing routes.
  2034 		 * Also handles the root URL triggering a sort request
  2030 		 * Also handles the root URL triggering a sort request
  2035 		 * for `featured`, the default view.
  2031 		 * for `popular`, the default view.
  2036 		 */
  2032 		 */
  2037 		themes.router.on( 'route:sort', function( sort ) {
  2033 		themes.router.on( 'route:sort', function( sort ) {
  2038 			if ( ! sort ) {
  2034 			if ( ! sort ) {
  2039 				sort = 'featured';
  2035 				sort = 'popular';
  2040 				themes.router.navigate( themes.router.baseUrl( '?browse=featured' ), { replace: true } );
  2036 				themes.router.navigate( themes.router.baseUrl( '?browse=popular' ), { replace: true } );
  2041 			}
  2037 			}
  2042 			self.view.sort( sort );
  2038 			self.view.sort( sort );
  2043 
  2039 
  2044 			// Close the preview if open.
  2040 			// Close the preview if open.
  2045 			if ( themes.preview ) {
  2041 			if ( themes.preview ) {
  2047 			}
  2043 			}
  2048 		});
  2044 		});
  2049 
  2045 
  2050 		// The `search` route event. The router populates the input field.
  2046 		// The `search` route event. The router populates the input field.
  2051 		themes.router.on( 'route:search', function() {
  2047 		themes.router.on( 'route:search', function() {
  2052 			$( '.wp-filter-search' ).focus().trigger( 'keyup' );
  2048 			$( '.wp-filter-search' ).trigger( 'focus' ).trigger( 'keyup' );
  2053 		});
  2049 		});
  2054 
  2050 
  2055 		this.extraRoutes();
  2051 		this.extraRoutes();
  2056 	},
  2052 	},
  2057 
  2053 
  2059 		return false;
  2055 		return false;
  2060 	}
  2056 	}
  2061 };
  2057 };
  2062 
  2058 
  2063 // Ready...
  2059 // Ready...
  2064 $( document ).ready(function() {
  2060 $( function() {
  2065 	if ( themes.isInstall ) {
  2061 	if ( themes.isInstall ) {
  2066 		themes.RunInstaller.init();
  2062 		themes.RunInstaller.init();
  2067 	} else {
  2063 	} else {
  2068 		themes.Run.init();
  2064 		themes.Run.init();
  2069 	}
  2065 	}
  2087 });
  2083 });
  2088 
  2084 
  2089 })( jQuery );
  2085 })( jQuery );
  2090 
  2086 
  2091 // Align theme browser thickbox.
  2087 // Align theme browser thickbox.
  2092 jQuery(document).ready( function($) {
  2088 jQuery( function($) {
  2093 	window.tb_position = function() {
  2089 	window.tb_position = function() {
  2094 		var tbWindow = $('#TB_window'),
  2090 		var tbWindow = $('#TB_window'),
  2095 			width = $(window).width(),
  2091 			width = $(window).width(),
  2096 			H = $(window).height(),
  2092 			H = $(window).height(),
  2097 			W = ( 1040 < width ) ? 1040 : width,
  2093 			W = ( 1040 < width ) ? 1040 : width,
  2099 
  2095 
  2100 		if ( $('#wpadminbar').length ) {
  2096 		if ( $('#wpadminbar').length ) {
  2101 			adminbar_height = parseInt( $('#wpadminbar').css('height'), 10 );
  2097 			adminbar_height = parseInt( $('#wpadminbar').css('height'), 10 );
  2102 		}
  2098 		}
  2103 
  2099 
  2104 		if ( tbWindow.size() ) {
  2100 		if ( tbWindow.length >= 1 ) {
  2105 			tbWindow.width( W - 50 ).height( H - 45 - adminbar_height );
  2101 			tbWindow.width( W - 50 ).height( H - 45 - adminbar_height );
  2106 			$('#TB_iframeContent').width( W - 50 ).height( H - 75 - adminbar_height );
  2102 			$('#TB_iframeContent').width( W - 50 ).height( H - 75 - adminbar_height );
  2107 			tbWindow.css({'margin-left': '-' + parseInt( ( ( W - 50 ) / 2 ), 10 ) + 'px'});
  2103 			tbWindow.css({'margin-left': '-' + parseInt( ( ( W - 50 ) / 2 ), 10 ) + 'px'});
  2108 			if ( typeof document.body.style.maxWidth !== 'undefined' ) {
  2104 			if ( typeof document.body.style.maxWidth !== 'undefined' ) {
  2109 				tbWindow.css({'top': 20 + adminbar_height + 'px', 'margin-top': '0'});
  2105 				tbWindow.css({'top': 20 + adminbar_height + 'px', 'margin-top': '0'});
  2110 			}
  2106 			}
  2111 		}
  2107 		}
  2112 	};
  2108 	};
  2113 
  2109 
  2114 	$(window).resize(function(){ tb_position(); });
  2110 	$(window).on( 'resize', function(){ tb_position(); });
  2115 });
  2111 });