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

   1 ( function ( mw ) {
   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                         .addClass( 'mw-rcfilters-ui-ready' )
  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' ).replaceWith( toplinksTitle.$element );
  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                                 this.$top,
  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                 // Initialize top links position
  88                 widget.switchTopLinks( topLinksCookieValue );
  89         };
  90
  91         /* Initialization */
  92
  93         OO.inheritClass( mw.rcfilters.ui.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         mw.rcfilters.ui.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         };
 110 }( mediaWiki ) );