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 ) { |
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 ) { |
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 }); |