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

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