| Index: trunk/extensions/PageTriage/SpecialPageTriage.php |
| — | — | @@ -61,13 +61,15 @@ |
| 62 | 62 | |
| 63 | 63 | // This will hold the HTML for the triage interface |
| 64 | 64 | $triageInterface = ''; |
| 65 | | - |
| | 65 | + |
| 66 | 66 | $triageInterface .= "<div id='mwe-pt-list-control-nav' class='mwe-pt-navigation-bar mwe-pt-control-gradient'>"; |
| 67 | 67 | $triageInterface .= "<div id='mwe-pt-list-control-nav-content'></div>"; |
| 68 | 68 | $triageInterface .= "</div>"; |
| | 69 | + |
| 69 | 70 | // TODO: this should load with a spinner instead of "please wait" |
| 70 | 71 | $triageInterface .= "<div id='mwe-pt-list-view'>Please wait...</div>"; |
| 71 | 72 | $triageInterface .= "<div id='mwe-pt-list-stats-nav' class='mwe-pt-navigation-bar mwe-pt-control-gradient'></div>"; |
| | 73 | + $triageInterface .= "<div id='mwe-pt-list-stats-nav-anchor'></div>"; |
| 72 | 74 | |
| 73 | 75 | // These are the templates that backbone/underscore render on the client. |
| 74 | 76 | // It would be awesome if they lived in separate files, but we need to figure out how to make RL do that for us. |
| Index: trunk/extensions/PageTriage/modules/ext.pageTriage.views/ext.pageTriage.listStatsNav.js |
| — | — | @@ -4,20 +4,67 @@ |
| 5 | 5 | mw.pageTriage.ListStatsNav = Backbone.View.extend( { |
| 6 | 6 | tagName: "div", |
| 7 | 7 | template: _.template( $( "#listStatsNavTemplate" ).html() ), |
| | 8 | + floatNav: false, |
| 8 | 9 | |
| 9 | 10 | initialize: function( options ) { |
| | 11 | + var _this = this; |
| 10 | 12 | this.eventBus = options.eventBus; |
| | 13 | + |
| | 14 | + // make a floating bottom navbar |
| | 15 | + $.waypoints.settings.scrollThrottle = 30; |
| | 16 | + $( '#mwe-pt-list-stats-nav-anchor' ).waypoint( function( event, direction ) { |
| | 17 | + if( _this.floatNav ) { |
| | 18 | + $( '#mwe-pt-list-stats-nav' ).parent().toggleClass( 'stickyBottom', direction === "up" ); |
| | 19 | + |
| | 20 | + _this.resize(); |
| | 21 | + } |
| | 22 | + |
| | 23 | + event.stopPropagation(); |
| | 24 | + }, { |
| | 25 | + offset: '100%' // bottom of page |
| | 26 | + }); |
| | 27 | + |
| | 28 | + // do things that need doing on window resize |
| | 29 | + $( window ).resize( _.debounce( _this.resize, 100 ) ); |
| | 30 | + |
| | 31 | + // when the list view is updated, do this stuff. |
| | 32 | + // (mostly, update the floating-ness of the stats bar) |
| | 33 | + this.eventBus.bind( "listAddAll", function() { |
| | 34 | + _this.render(); |
| | 35 | + } ); |
| | 36 | + |
| | 37 | + // set the navbar's initial size |
| | 38 | + this.resize(); |
| | 39 | + |
| 11 | 40 | }, |
| 12 | 41 | |
| 13 | 42 | render: function() { |
| 14 | 43 | // insert the template into the document. fill with the current model. |
| 15 | | - this.$el.html( this.template( this.model.toJSON() ) ); |
| | 44 | + $( "#mwe-pt-list-stats-nav").html( this.template( this.model.toJSON() ) ); |
| | 45 | + |
| | 46 | + if( $( '#mwe-pt-list-stats-nav-anchor' ).offset().top < $.waypoints('viewportHeight') ) { |
| | 47 | + // turn off floating nav, bring the bar back into the list. |
| | 48 | + $( '#mwe-pt-list-stats-nav' ).parent().removeClass('stickyBottom'); |
| | 49 | + this.floatNav = false; |
| | 50 | + } else { |
| | 51 | + // bottom nav isn't visible. turn on the floating navbar |
| | 52 | + $( '#mwe-pt-list-stats-nav' ).parent().addClass('stickyBottom'); |
| | 53 | + this.floatNav = true; |
| | 54 | + } |
| 16 | 55 | |
| 17 | 56 | // broadcast the stats in case any other views want to display bits of them. |
| 18 | 57 | // (the control view displays a summary) |
| 19 | 58 | this.eventBus.trigger( 'renderStats', this.model ); |
| 20 | 59 | return this; |
| 21 | | - } |
| | 60 | + }, |
| | 61 | + |
| | 62 | + resize: function() { |
| | 63 | + // set the width of the floating bar when the window resizes, if it's floating. |
| | 64 | + // the left nav is 176 pixels |
| | 65 | + // the right margin is 16 pixels |
| | 66 | + // border is 2 pixels |
| | 67 | + $( '#mwe-pt-list-stats-nav' ).css( 'width', $(window).width() - 176 - 16 - 2 + "px" ); |
| | 68 | + }, |
| 22 | 69 | |
| 23 | 70 | } ); |
| 24 | 71 | } ); |
| Index: trunk/extensions/PageTriage/modules/ext.pageTriage.views/ext.pageTriage.listControlNav.js |
| — | — | @@ -12,39 +12,33 @@ |
| 13 | 13 | this.eventBus = options.eventBus; // access the eventBus |
| 14 | 14 | |
| 15 | 15 | // make a floating top navbar |
| 16 | | - // TODO: there's a bump when the control div detaches from the page. |
| 17 | | - // fill some element under it to make it scroll smoothly |
| 18 | | - $( '.top' ).addClass( 'hidden' ); |
| 19 | 16 | $.waypoints.settings.scrollThrottle = 30; |
| 20 | 17 | $( '#mwe-pt-list-control-nav' ).waypoint( function( event, direction ) { |
| 21 | | - $( this ).parent().toggleClass( 'sticky', direction === "down" ); |
| | 18 | + $( this ).parent().toggleClass( 'stickyTop', direction === "down" ); |
| | 19 | + |
| | 20 | + // pad the element that scrolls under the bar, so it doesn't jump beneath it when the bar |
| | 21 | + // changes to fixed positioning. |
| | 22 | + if( direction === 'down' ) { |
| | 23 | + $( '#mwe-pt-list-view' ).css('padding-top', $( '#mwe-pt-list-control-nav' ).height() ); |
| | 24 | + } else { |
| | 25 | + $( '#mwe-pt-list-view' ).css('padding-top', 0 ); |
| | 26 | + } |
| | 27 | + |
| 22 | 28 | _this.resize(); |
| 23 | 29 | event.stopPropagation(); |
| 24 | 30 | }); |
| 25 | 31 | |
| 26 | 32 | // do things that need doing on window resize |
| 27 | | - // TODO: switch this to use _.debounce() instead |
| 28 | | - var resizeTimer; |
| 29 | | - $( window ).resize( function() { |
| 30 | | - clearTimeout(mw.pageTriage.resizeTimer); |
| 31 | | - mw.pageTriage.resizeTimer = setTimeout(_this.resize, 100); |
| 32 | | - }); |
| | 33 | + $( window ).resize( _.debounce(_this.resize, 100 ) ); |
| 33 | 34 | |
| 34 | 35 | this.eventBus.bind( "renderStats", function( stats ) { |
| 35 | 36 | // fill in the counter when the stats view gets loaded. |
| 36 | 37 | $( "#mwe-pt-control-stats" ).html( gM( 'pagetriage-article-count', stats.get('ptr_untriaged_article_count') ) ); |
| 37 | 38 | } ); |
| 38 | | - |
| 39 | | - // hover for the dropdown menu control |
| 40 | | - /* |
| 41 | | - $( '#mwe-pt-filter-dropdown-control' ).hover( function() { |
| 42 | | - _this.toggleFilterMenu(); |
| 43 | | - } ); |
| 44 | | - */ |
| 45 | 39 | }, |
| 46 | 40 | |
| 47 | 41 | render: function() { |
| 48 | | - _this = this; |
| | 42 | + var _this = this; |
| 49 | 43 | // render and return the template. fill with the current model. |
| 50 | 44 | $( "#mwe-pt-list-control-nav-content").html( this.template( ) ); |
| 51 | 45 | |
| — | — | @@ -63,6 +57,7 @@ |
| 64 | 58 | } ); |
| 65 | 59 | $( ".mwe-pt-filter-set-button" ).click( function( e ) { |
| 66 | 60 | _this.filterSet(); |
| | 61 | + _this.toggleFilterMenu(); |
| 67 | 62 | e.stopPropagation(); |
| 68 | 63 | } ); |
| 69 | 64 | |
| — | — | @@ -106,7 +101,6 @@ |
| 107 | 102 | |
| 108 | 103 | filterSet: function() { |
| 109 | 104 | console.log('clicked'); |
| 110 | | - this.toggleFilterMenu(); |
| 111 | 105 | |
| 112 | 106 | // fetch the values from the menu |
| 113 | 107 | var apiParams = {}; |
| Index: trunk/extensions/PageTriage/modules/ext.pageTriage.views/ext.pageTriage.listView.js |
| — | — | @@ -47,7 +47,7 @@ |
| 48 | 48 | // add stats data to the navigation |
| 49 | 49 | addStats: function( stats ) { |
| 50 | 50 | var statsNav = new mw.pageTriage.ListStatsNav( { eventBus: this.eventBus, model: stats } ); |
| 51 | | - $( "#mwe-pt-list-stats-nav").html( statsNav.render().el ); |
| | 51 | + statsNav.render(); |
| 52 | 52 | }, |
| 53 | 53 | |
| 54 | 54 | // add a single article to the list |
| — | — | @@ -72,6 +72,7 @@ |
| 73 | 73 | addAll: function() { |
| 74 | 74 | $("#mwe-pt-list-view").empty(); // remove the spinner before displaying. |
| 75 | 75 | articles.each( this.addOne ); |
| | 76 | + this.eventBus.trigger( 'listAddAll' ); |
| 76 | 77 | } |
| 77 | 78 | |
| 78 | 79 | } ); |
| Index: trunk/extensions/PageTriage/modules/ext.pageTriage.views/ext.pageTriage.listStatsNav.css |
| — | — | @@ -1,3 +1,11 @@ |
| 2 | 2 | #mwe-pt-list-stats-nav { |
| 3 | 3 | border-top: none; |
| 4 | 4 | } |
| | 5 | + |
| | 6 | +.stickyBottom #mwe-pt-list-stats-nav { |
| | 7 | + position: fixed; |
| | 8 | + bottom: 0; |
| | 9 | + left: 160px; |
| | 10 | + margin-left: 16px; |
| | 11 | + z-index: 1; |
| | 12 | +} |
| Index: trunk/extensions/PageTriage/modules/ext.pageTriage.views/ext.pageTriage.listControlNav.css |
| — | — | @@ -6,7 +6,7 @@ |
| 7 | 7 | padding: 0.5em 1em; |
| 8 | 8 | } |
| 9 | 9 | |
| 10 | | -.sticky #mwe-pt-list-control-nav { |
| | 10 | +.stickyTop #mwe-pt-list-control-nav { |
| 11 | 11 | position: fixed; |
| 12 | 12 | top: 0; |
| 13 | 13 | left: 160px; |