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                         .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' ).replaceWith( toplinksTitle.$element );
  52
  53                 // Create two positions for the toplinks to toggle between
  54                 // in the table (first cell) or up above it
  55                 this.$top = $( '<div>' )
  56                         .addClass( 'mw-rcfilters-ui-rcTopSectionWidget-topLinks-top' );
  57                 this.$tableTopLinks = $( '<div>' )
  58                         .addClass( 'mw-rcfilters-ui-cell' )
  59                         .addClass( 'mw-rcfilters-ui-rcTopSectionWidget-topLinks-table' );
  60
  61                 // Initialize
  62                 this.$element
  63                         .addClass( 'mw-rcfilters-ui-rcTopSectionWidget' )
  64                         .append(
  65                                 this.$top,
  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                 // Initialize top links position
  87                 widget.switchTopLinks( topLinksCookieValue );
  88         };
  89
  90         /* Initialization */
  91
  92         OO.inheritClass( mw.rcfilters.ui.RcTopSectionWidget, OO.ui.Widget );
  93
  94         /**
  95          * Switch the top links widget from inside the table (when collapsed)
  96          * to the 'top' (when open)
  97          *
  98          * @param {string} [state] The state of the top links widget: 'expanded' or 'collapsed'
  99          */
 100         mw.rcfilters.ui.RcTopSectionWidget.prototype.switchTopLinks = function ( state ) {
 101                 state = state || 'expanded';
 102
 103                 if ( state === 'expanded' ) {
 104                         this.$top.append( this.$topLinks );
 105                 } else {
 106                         this.$tableTopLinks.append( this.$topLinks );
 107                 }
 108         };
 109 }( mediaWiki ) );