https://www.mediawiki.org/wiki/Special:Code/MediaWiki/114685
Revision: 114685
Author: raindrift
Date: 2012-04-03 19:07:42 +0000 (Tue, 03 Apr 2012)
Log Message:
-----------
fixed the jumpy scroll bug with the top (control) navbar
stuck the bottom (stats) navbar to the window
Modified Paths:
--------------
trunk/extensions/PageTriage/SpecialPageTriage.php
trunk/extensions/PageTriage/modules/ext.pageTriage.views/ext.pageTriage.listControlNav.css
trunk/extensions/PageTriage/modules/ext.pageTriage.views/ext.pageTriage.listControlNav.js
trunk/extensions/PageTriage/modules/ext.pageTriage.views/ext.pageTriage.listStatsNav.css
trunk/extensions/PageTriage/modules/ext.pageTriage.views/ext.pageTriage.listStatsNav.js
trunk/extensions/PageTriage/modules/ext.pageTriage.views/ext.pageTriage.listView.js
Modified: trunk/extensions/PageTriage/SpecialPageTriage.php
===================================================================
--- trunk/extensions/PageTriage/SpecialPageTriage.php 2012-04-03 18:05:33 UTC
(rev 114684)
+++ trunk/extensions/PageTriage/SpecialPageTriage.php 2012-04-03 19:07:42 UTC
(rev 114685)
@@ -61,13 +61,15 @@
// This will hold the HTML for the triage interface
$triageInterface = '';
-
+
$triageInterface .= "<div id='mwe-pt-list-control-nav'
class='mwe-pt-navigation-bar mwe-pt-control-gradient'>";
$triageInterface .= "<div
id='mwe-pt-list-control-nav-content'></div>";
$triageInterface .= "</div>";
+
// TODO: this should load with a spinner instead of "please
wait"
$triageInterface .= "<div id='mwe-pt-list-view'>Please
wait...</div>";
$triageInterface .= "<div id='mwe-pt-list-stats-nav'
class='mwe-pt-navigation-bar mwe-pt-control-gradient'></div>";
+ $triageInterface .= "<div
id='mwe-pt-list-stats-nav-anchor'></div>";
// These are the templates that backbone/underscore render on
the client.
// It would be awesome if they lived in separate files, but we
need to figure out how to make RL do that for us.
Modified:
trunk/extensions/PageTriage/modules/ext.pageTriage.views/ext.pageTriage.listControlNav.css
===================================================================
---
trunk/extensions/PageTriage/modules/ext.pageTriage.views/ext.pageTriage.listControlNav.css
2012-04-03 18:05:33 UTC (rev 114684)
+++
trunk/extensions/PageTriage/modules/ext.pageTriage.views/ext.pageTriage.listControlNav.css
2012-04-03 19:07:42 UTC (rev 114685)
@@ -6,7 +6,7 @@
padding: 0.5em 1em;
}
-.sticky #mwe-pt-list-control-nav {
+.stickyTop #mwe-pt-list-control-nav {
position: fixed;
top: 0;
left: 160px;
Modified:
trunk/extensions/PageTriage/modules/ext.pageTriage.views/ext.pageTriage.listControlNav.js
===================================================================
---
trunk/extensions/PageTriage/modules/ext.pageTriage.views/ext.pageTriage.listControlNav.js
2012-04-03 18:05:33 UTC (rev 114684)
+++
trunk/extensions/PageTriage/modules/ext.pageTriage.views/ext.pageTriage.listControlNav.js
2012-04-03 19:07:42 UTC (rev 114685)
@@ -12,39 +12,33 @@
this.eventBus = options.eventBus; // access the eventBus
// make a floating top navbar
- // TODO: there's a bump when the control div detaches
from the page.
- // fill some element under it to make it scroll
smoothly
- $( '.top' ).addClass( 'hidden' );
$.waypoints.settings.scrollThrottle = 30;
$( '#mwe-pt-list-control-nav' ).waypoint( function(
event, direction ) {
- $( this ).parent().toggleClass( 'sticky',
direction === "down" );
+ $( this ).parent().toggleClass( 'stickyTop',
direction === "down" );
+
+ // pad the element that scrolls under the bar,
so it doesn't jump beneath it when the bar
+ // changes to fixed positioning.
+ if( direction === 'down' ) {
+ $( '#mwe-pt-list-view'
).css('padding-top', $( '#mwe-pt-list-control-nav' ).height() );
+ } else {
+ $( '#mwe-pt-list-view'
).css('padding-top', 0 );
+ }
+
_this.resize();
event.stopPropagation();
});
// do things that need doing on window resize
- // TODO: switch this to use _.debounce() instead
- var resizeTimer;
- $( window ).resize( function() {
- clearTimeout(mw.pageTriage.resizeTimer);
- mw.pageTriage.resizeTimer =
setTimeout(_this.resize, 100);
- });
+ $( window ).resize( _.debounce(_this.resize, 100 ) );
this.eventBus.bind( "renderStats", function( stats ) {
// fill in the counter when the stats view gets
loaded.
$( "#mwe-pt-control-stats" ).html( gM(
'pagetriage-article-count', stats.get('ptr_untriaged_article_count') ) );
} );
-
- // hover for the dropdown menu control
- /*
- $( '#mwe-pt-filter-dropdown-control' ).hover(
function() {
- _this.toggleFilterMenu();
- } );
- */
},
render: function() {
- _this = this;
+ var _this = this;
// render and return the template. fill with the
current model.
$( "#mwe-pt-list-control-nav-content").html(
this.template( ) );
@@ -63,6 +57,7 @@
} );
$( ".mwe-pt-filter-set-button" ).click( function( e ) {
_this.filterSet();
+ _this.toggleFilterMenu();
e.stopPropagation();
} );
@@ -106,7 +101,6 @@
filterSet: function() {
console.log('clicked');
- this.toggleFilterMenu();
// fetch the values from the menu
var apiParams = {};
Modified:
trunk/extensions/PageTriage/modules/ext.pageTriage.views/ext.pageTriage.listStatsNav.css
===================================================================
---
trunk/extensions/PageTriage/modules/ext.pageTriage.views/ext.pageTriage.listStatsNav.css
2012-04-03 18:05:33 UTC (rev 114684)
+++
trunk/extensions/PageTriage/modules/ext.pageTriage.views/ext.pageTriage.listStatsNav.css
2012-04-03 19:07:42 UTC (rev 114685)
@@ -1,3 +1,11 @@
#mwe-pt-list-stats-nav {
border-top: none;
}
+
+.stickyBottom #mwe-pt-list-stats-nav {
+ position: fixed;
+ bottom: 0;
+ left: 160px;
+ margin-left: 16px;
+ z-index: 1;
+}
Modified:
trunk/extensions/PageTriage/modules/ext.pageTriage.views/ext.pageTriage.listStatsNav.js
===================================================================
---
trunk/extensions/PageTriage/modules/ext.pageTriage.views/ext.pageTriage.listStatsNav.js
2012-04-03 18:05:33 UTC (rev 114684)
+++
trunk/extensions/PageTriage/modules/ext.pageTriage.views/ext.pageTriage.listStatsNav.js
2012-04-03 19:07:42 UTC (rev 114685)
@@ -4,20 +4,67 @@
mw.pageTriage.ListStatsNav = Backbone.View.extend( {
tagName: "div",
template: _.template( $( "#listStatsNavTemplate" ).html() ),
+ floatNav: false,
initialize: function( options ) {
+ var _this = this;
this.eventBus = options.eventBus;
+
+ // make a floating bottom navbar
+ $.waypoints.settings.scrollThrottle = 30;
+ $( '#mwe-pt-list-stats-nav-anchor' ).waypoint(
function( event, direction ) {
+ if( _this.floatNav ) {
+ $( '#mwe-pt-list-stats-nav'
).parent().toggleClass( 'stickyBottom', direction === "up" );
+
+ _this.resize();
+ }
+
+ event.stopPropagation();
+ }, {
+ offset: '100%' // bottom of page
+ });
+
+ // do things that need doing on window resize
+ $( window ).resize( _.debounce( _this.resize, 100 ) );
+
+ // when the list view is updated, do this stuff.
+ // (mostly, update the floating-ness of the stats bar)
+ this.eventBus.bind( "listAddAll", function() {
+ _this.render();
+ } );
+
+ // set the navbar's initial size
+ this.resize();
+
},
render: function() {
// insert the template into the document. fill with
the current model.
- this.$el.html( this.template( this.model.toJSON() ) );
+ $( "#mwe-pt-list-stats-nav").html( this.template(
this.model.toJSON() ) );
+
+ if( $( '#mwe-pt-list-stats-nav-anchor' ).offset().top <
$.waypoints('viewportHeight') ) {
+ // turn off floating nav, bring the bar back
into the list.
+ $( '#mwe-pt-list-stats-nav'
).parent().removeClass('stickyBottom');
+ this.floatNav = false;
+ } else {
+ // bottom nav isn't visible. turn on the
floating navbar
+ $( '#mwe-pt-list-stats-nav'
).parent().addClass('stickyBottom');
+ this.floatNav = true;
+ }
// broadcast the stats in case any other views want to
display bits of them.
// (the control view displays a summary)
this.eventBus.trigger( 'renderStats', this.model );
return this;
- }
+ },
+
+ resize: function() {
+ // set the width of the floating bar when the window
resizes, if it's floating.
+ // the left nav is 176 pixels
+ // the right margin is 16 pixels
+ // border is 2 pixels
+ $( '#mwe-pt-list-stats-nav' ).css( 'width',
$(window).width() - 176 - 16 - 2 + "px" );
+ },
} );
} );
Modified:
trunk/extensions/PageTriage/modules/ext.pageTriage.views/ext.pageTriage.listView.js
===================================================================
---
trunk/extensions/PageTriage/modules/ext.pageTriage.views/ext.pageTriage.listView.js
2012-04-03 18:05:33 UTC (rev 114684)
+++
trunk/extensions/PageTriage/modules/ext.pageTriage.views/ext.pageTriage.listView.js
2012-04-03 19:07:42 UTC (rev 114685)
@@ -47,7 +47,7 @@
// add stats data to the navigation
addStats: function( stats ) {
var statsNav = new mw.pageTriage.ListStatsNav( {
eventBus: this.eventBus, model: stats } );
- $( "#mwe-pt-list-stats-nav").html( statsNav.render().el
);
+ statsNav.render();
},
// add a single article to the list
@@ -72,6 +72,7 @@
addAll: function() {
$("#mwe-pt-list-view").empty(); // remove the spinner
before displaying.
articles.each( this.addOne );
+ this.eventBus.trigger( 'listAddAll' );
}
} );
_______________________________________________
MediaWiki-CVS mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-cvs
