resources/src/mediawiki.rcfilters/ui/RcTopSectionWidget.js

   1 /**
   2  * Top section (between page title and filters) on Special:Recentchanges.
   3  *
   4  * @class mw.rcfilters.ui.RcTopSectionWidget
   5  * @ignore
   6  * @extends OO.ui.Widget
   7  *
   8  * @param {mw.rcfilters.ui.SavedLinksListWidget} savedLinksListWidget
   9  * @param {jQuery} $topLinks Content of the community-defined links
  10  * @param {Object} [config] Configuration object
  11  */
  12 const RcTopSectionWidget = function MwRcfiltersUiRcTopSectionWidget(
  13         savedLinksListWidget, $topLinks, config
  14 ) {
  15         const topLinksCookieName = 'rcfilters-toplinks-collapsed-state',
  16                 topLinksCookie = mw.cookie.get( topLinksCookieName ),
  17                 topLinksCookieValue = topLinksCookie || 'collapsed';
  18
  19         config = config || {};
  20
  21         // Parent
  22         RcTopSectionWidget.super.call( this, config );
  23
  24         this.$topLinks = $topLinks;
  25
  26         const toplinksTitle = new OO.ui.ButtonWidget( {
  27                 framed: false,
  28                 indicator: topLinksCookieValue === 'collapsed' ? 'down' : 'up',
  29                 flags: [ 'progressive' ],
  30                 label: mw.message( 'rcfilters-other-review-tools' ).parseDom()
  31         } );
  32
  33         this.$topLinks
  34                 .makeCollapsible( {
  35                         collapsed: topLinksCookieValue === 'collapsed',
  36                         $customTogglers: toplinksTitle.$element
  37                 } )
  38                 .on( 'beforeExpand.mw-collapsible', () => {
  39                         mw.cookie.set( topLinksCookieName, 'expanded' );
  40                         toplinksTitle.setIndicator( 'up' );
  41                         this.switchTopLinks( 'expanded' );
  42                 } )
  43                 .on( 'beforeCollapse.mw-collapsible', () => {
  44                         mw.cookie.set( topLinksCookieName, 'collapsed' );
  45                         toplinksTitle.setIndicator( 'down' );
  46                         this.switchTopLinks( 'collapsed' );
  47                 } );
  48
  49         this.$topLinks.find( '.mw-recentchanges-toplinks-title' )
  50                 .replaceWith( toplinksTitle.$element.removeAttr( 'tabIndex' ) );
  51
  52         // Create two positions for the toplinks to toggle between
  53         // in the table (first cell) or up above it
  54         this.$top = $( '<div>' )
  55                 .addClass( 'mw-rcfilters-ui-rcTopSectionWidget-topLinks-top' );
  56         this.$tableTopLinks = $( '<div>' )
  57                 .addClass( 'mw-rcfilters-ui-cell' )
  58                 .addClass( 'mw-rcfilters-ui-rcTopSectionWidget-topLinks-table' );
  59
  60         // Initialize
  61         this.$element
  62                 .addClass( 'mw-rcfilters-ui-rcTopSectionWidget' )
  63                 .append(
  64                         $( '<div>' )
  65                                 .addClass( 'mw-rcfilters-ui-table' )
  66                                 .append(
  67                                         $( '<div>' )
  68                                                 .addClass( 'mw-rcfilters-ui-row' )
  69                                                 .append(
  70                                                         this.$tableTopLinks,
  71                                                         $( '<div>' )
  72                                                                 .addClass( 'mw-rcfilters-ui-table-placeholder' )
  73                                                                 .addClass( 'mw-rcfilters-ui-cell' ),
  74                                                         !mw.user.isAnon() ?
  75                                                                 $( '<div>' )
  76                                                                         .addClass( 'mw-rcfilters-ui-cell' )
  77                                                                         .addClass( 'mw-rcfilters-ui-rcTopSectionWidget-savedLinks' )
  78                                                                         .append( savedLinksListWidget.$element ) :
  79                                                                 null
  80                                                 )
  81                                 )
  82                 );
  83
  84         // Hack: For jumpiness reasons, this should be a sibling of -head
  85         $( '.mw-rcfilters-head' ).before( this.$top );
  86
  87         // Initialize top links position
  88         this.switchTopLinks( topLinksCookieValue );
  89 };
  90
  91 /* Initialization */
  92
  93 OO.inheritClass( RcTopSectionWidget, OO.ui.Widget );
  94
  95 /**
  96  * Switch the top links widget from inside the table (when collapsed)
  97  * to the 'top' (when open)
  98  *
  99  * @param {string} [state] The state of the top links widget: 'expanded' or 'collapsed'
 100  */
 101 RcTopSectionWidget.prototype.switchTopLinks = function ( state ) {
 102         state = state || 'expanded';
 103
 104         if ( state === 'expanded' ) {
 105                 this.$top.append( this.$topLinks );
 106         } else {
 107                 this.$tableTopLinks.append( this.$topLinks );
 108         }
 109         this.$topLinks.toggleClass( 'mw-recentchanges-toplinks-collapsed', state === 'collapsed' );
 110 };
 111
 112 module.exports = RcTopSectionWidget;