| Index: trunk/extensions/PageTriage/SpecialPageTriage.php |
| — | — | @@ -68,6 +68,7 @@ |
| 69 | 69 | $triageInterface .= "<div id='mwe-pt-list-stats-nav' class='mwe-pt-navigation-bar'></div>"; |
| 70 | 70 | |
| 71 | 71 | // These are the templates that backbone/underscore render on the client. |
| | 72 | + // It would be awesome if they lived in separate files, but we need to figure out how to make RL do that for us. |
| 72 | 73 | $triageInterface .= <<<HTML |
| 73 | 74 | <!-- individual list item template --> |
| 74 | 75 | <script type="text/template" id="listItemTemplate"> |
| — | — | @@ -160,8 +161,17 @@ |
| 161 | 162 | <script type="text/template" id="listControlNavTemplate"> |
| 162 | 163 | <span class="mwe-pt-control-label"><b><%= gM( 'pagetriage-showing' ) %></b> some things</span> |
| 163 | 164 | <span class="mwe-pt-control-label-right"><%= gM( 'pagetriage-article-count', 100, 'untriaged' ) %></span><br/> |
| 164 | | - <span class="mwe-pt-control-label"><b><%= gM( 'pagetriage-filter-list-prompt' ) %> ▸</b></span><!-- ▾ is the down arrow --> |
| | 165 | + <span id="mwe-pt-filter-dropdown-control" class="mwe-pt-control-label"> |
| | 166 | + <b> |
| | 167 | + <%= gM( 'pagetriage-filter-list-prompt' ) %> |
| | 168 | + <span id="mwe-pt-dropdown-arrow">▸</span> |
| | 169 | + <!--<span class="mwe-pt-dropdown-open">▾</span>--> |
| | 170 | + </b> |
| | 171 | + </span> |
| 165 | 172 | <span class="mwe-pt-control-label-right"><b><%= gM( 'pagetriage-viewing' ) %></b> Sort Controls</span> |
| | 173 | + <div id="mwe-pt-control-dropdown"> |
| | 174 | + foo bar |
| | 175 | + </div> |
| 166 | 176 | </script> |
| 167 | 177 | |
| 168 | 178 | <script type="text/template" id="listStatsNavTemplate"> |
| Index: trunk/extensions/PageTriage/modules/ext.pageTriage.views/ext.pageTriage.listControlNav.js |
| — | — | @@ -4,14 +4,16 @@ |
| 5 | 5 | mw.pageTriage.ListControlNav = Backbone.View.extend( { |
| 6 | 6 | tagName: "div", |
| 7 | 7 | template: _.template( $( "#listControlNavTemplate" ).html() ), |
| | 8 | + filterMenuVisible: 0, |
| 8 | 9 | |
| 9 | 10 | initialize: function() { |
| | 11 | + var _this = this; |
| | 12 | + |
| 10 | 13 | // make a floating top navbar |
| 11 | 14 | // TODO: there's a bump when the control div detaches from the page. |
| 12 | 15 | // fill some element under it to make it scroll smoothly |
| 13 | 16 | $( '.top' ).addClass( 'hidden' ); |
| 14 | 17 | $.waypoints.settings.scrollThrottle = 30; |
| 15 | | - var _this = this; |
| 16 | 18 | $( '#mwe-pt-list-control-nav' ).waypoint( function( event, direction ) { |
| 17 | 19 | $( this ).parent().toggleClass( 'sticky', direction === "down" ); |
| 18 | 20 | _this.resize(); |
| — | — | @@ -24,12 +26,27 @@ |
| 25 | 27 | clearTimeout(resizeTimer); |
| 26 | 28 | resizeTimer = setTimeout(this.resize, 100); |
| 27 | 29 | }); |
| | 30 | + |
| | 31 | + // hover for the dropdown menu control |
| | 32 | + /* |
| | 33 | + $( '#mwe-pt-filter-dropdown-control' ).hover( function() { |
| | 34 | + _this.toggleFilterMenu(); |
| | 35 | + } ); |
| | 36 | + */ |
| 28 | 37 | }, |
| 29 | 38 | |
| 30 | 39 | render: function() { |
| 31 | | - // insert the template into the document. fill with the current model. |
| 32 | | - this.$el.html( this.template( ) ); |
| 33 | | - return this; |
| | 40 | + _this = this; |
| | 41 | + // render and return the template. fill with the current model. |
| | 42 | + $( "#mwe-pt-list-control-nav").html( this.template() ); |
| | 43 | + |
| | 44 | + // now that the template's been inserted, set up some events for controlling it |
| | 45 | + |
| | 46 | + // the filter dropdown menu control |
| | 47 | + $( '#mwe-pt-filter-dropdown-control' ).click( function( e ) { |
| | 48 | + _this.toggleFilterMenu(); |
| | 49 | + e.stopPropagation; |
| | 50 | + } ); |
| 34 | 51 | }, |
| 35 | 52 | |
| 36 | 53 | resize: function() { |
| — | — | @@ -37,7 +54,18 @@ |
| 38 | 55 | // the left nav is 176 pixels |
| 39 | 56 | // the right margin is 16 pixels |
| 40 | 57 | $( '#mwe-pt-list-control-nav' ).css( 'width', $(window).width() - 176 - 16 + "px" ); |
| | 58 | + }, |
| | 59 | + |
| | 60 | + toggleFilterMenu: function() { |
| | 61 | + if( this.filterMenuVisible ) { |
| | 62 | + $( '#mwe-pt-dropdown-arrow' ).html( '▸' ); |
| | 63 | + $( '#mwe-pt-control-dropdown' ).css( 'visibility', 'hidden' ); |
| | 64 | + this.filterMenuVisible = 0; |
| | 65 | + } else { |
| | 66 | + $( '#mwe-pt-control-dropdown' ).css( 'visibility', 'visible' ); |
| | 67 | + $( '#mwe-pt-dropdown-arrow' ).html( '▾' ); |
| | 68 | + this.filterMenuVisible = 1; |
| | 69 | + } |
| 41 | 70 | } |
| 42 | | - |
| 43 | 71 | } ); |
| 44 | 72 | } ); |
| Index: trunk/extensions/PageTriage/modules/ext.pageTriage.views/ext.pageTriage.listView.js |
| — | — | @@ -32,9 +32,9 @@ |
| 33 | 33 | this.position = 0; |
| 34 | 34 | |
| 35 | 35 | // add the navigation bits |
| 36 | | - var controlNav = new mw.pageTriage.ListControlNav(); |
| 37 | | - $( "#mwe-pt-list-control-nav").html( controlNav.render().el ); |
| 38 | | - |
| | 36 | + var controlNav = new mw.pageTriage.ListControlNav( { articles: articles } ); |
| | 37 | + controlNav.render(); |
| | 38 | + |
| 39 | 39 | var statsNav = new mw.pageTriage.ListStatsNav(); |
| 40 | 40 | $( "#mwe-pt-list-stats-nav").html( statsNav.render().el ); |
| 41 | 41 | }, |
| Index: trunk/extensions/PageTriage/modules/ext.pageTriage.views/ext.pageTriage.listControlNav.css |
| — | — | @@ -20,3 +20,26 @@ |
| 21 | 21 | float: right; |
| 22 | 22 | padding-right: 1em; |
| 23 | 23 | } |
| | 24 | + |
| | 25 | +.mwe-pt-control-dropdown { |
| | 26 | + visibility: hidden; |
| | 27 | + width: 250px |
| | 28 | + height: ; |
| | 29 | +} |
| | 30 | + |
| | 31 | +#mwe-pt-control-dropdown { |
| | 32 | + position: absolute; |
| | 33 | + background-color: #bebebe; |
| | 34 | + left: 5em; |
| | 35 | + visibility: hidden; |
| | 36 | +} |
| | 37 | + |
| | 38 | +#mwe-pt-filter-dropdown-control { |
| | 39 | + /* make this match the overall link color */ |
| | 40 | + color: blue; |
| | 41 | +} |
| | 42 | + |
| | 43 | +span:hover #mwe-pt-filter-dropdown-control { |
| | 44 | + /* TODO: make this actually work */ |
| | 45 | + cursor: pointer; |
| | 46 | +} |