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

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