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

   1 ( function ( mw ) {
   2         /**
   3          * Quick links widget
   4          *
   5          * @extends OO.ui.Widget
   6          *
   7          * @constructor
   8          * @param {mw.rcfilters.Controller} controller Controller
   9          * @param {mw.rcfilters.dm.SavedQueriesModel} model View model
  10          * @param {Object} [config] Configuration object
  11          * @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
  12          */
  13         mw.rcfilters.ui.SavedLinksListWidget = function MwRcfiltersUiSavedLinksListWidget( controller, model, config ) {
  14                 var $labelNoEntries = $( '<div>' )
  15                         .append(
  16                                 $( '<div>' )
  17                                         .addClass( 'mw-rcfilters-ui-savedLinksListWidget-placeholder-title' )
  18                                         .text( mw.msg( 'rcfilters-quickfilters-placeholder-title' ) ),
  19                                 $( '<div>' )
  20                                         .addClass( 'mw-rcfilters-ui-savedLinksListWidget-placeholder-description' )
  21                                         .text( mw.msg( 'rcfilters-quickfilters-placeholder-description' ) )
  22                         );
  23
  24                 config = config || {};
  25
  26                 // Parent
  27                 mw.rcfilters.ui.SavedLinksListWidget.parent.call( this, config );
  28
  29                 this.controller = controller;
  30                 this.model = model;
  31                 this.$overlay = config.$overlay || this.$element;
  32
  33                 this.placeholderItem = new OO.ui.DecoratedOptionWidget( {
  34                         classes: [ 'mw-rcfilters-ui-savedLinksListWidget-placeholder' ],
  35                         label: $labelNoEntries,
  36                         icon: 'unClip'
  37                 } );
  38                 // The only reason we're using "ButtonGroupWidget" here is that
  39                 // straight-out "GroupWidget" is a mixin and cannot be initialized
  40                 // on its own, so we need something to be its widget.
  41                 this.menu = new OO.ui.ButtonGroupWidget( {
  42                         classes: [ 'mw-rcfilters-ui-savedLinksListWidget-menu' ],
  43                         items: [ this.placeholderItem ]
  44                 } );
  45                 this.button = new OO.ui.PopupButtonWidget( {
  46                         classes: [ 'mw-rcfilters-ui-savedLinksListWidget-button' ],
  47                         label: mw.msg( 'rcfilters-quickfilters' ),
  48                         icon: 'unClip',
  49                         indicator: 'down',
  50                         $overlay: this.$overlay,
  51                         popup: {
  52                                 width: 300,
  53                                 anchor: false,
  54                                 align: 'backwards',
  55                                 $autoCloseIgnore: this.$overlay,
  56                                 $content: this.menu.$element
  57                         }
  58                 } );
  59
  60                 this.menu.aggregate( {
  61                         click: 'menuItemClick',
  62                         'delete': 'menuItemDelete',
  63                         'default': 'menuItemDefault',
  64                         edit: 'menuItemEdit'
  65                 } );
  66
  67                 // Events
  68                 this.model.connect( this, {
  69                         add: 'onModelAddItem',
  70                         remove: 'onModelRemoveItem'
  71                 } );
  72                 this.menu.connect( this, {
  73                         menuItemClick: 'onMenuItemClick',
  74                         menuItemDelete: 'onMenuItemRemove',
  75                         menuItemDefault: 'onMenuItemDefault',
  76                         menuItemEdit: 'onMenuItemEdit'
  77                 } );
  78
  79                 this.placeholderItem.toggle( this.model.isEmpty() );
  80                 // Initialize
  81                 this.$element
  82                         .addClass( 'mw-rcfilters-ui-savedLinksListWidget' )
  83                         .append( this.button.$element );
  84         };
  85
  86         /* Initialization */
  87         OO.inheritClass( mw.rcfilters.ui.SavedLinksListWidget, OO.ui.Widget );
  88
  89         /**
  90          * Respond to menu item click event
  91          *
  92          * @param {mw.rcfilters.ui.SavedLinksListItemWidget} item Menu item
  93          */
  94         mw.rcfilters.ui.SavedLinksListWidget.prototype.onMenuItemClick = function ( item ) {
  95                 this.controller.applySavedQuery( item.getID() );
  96                 this.button.popup.toggle( false );
  97         };
  98
  99         /**
 100          * Respond to menu item remove event
 101          *
 102          * @param {mw.rcfilters.ui.SavedLinksListItemWidget} item Menu item
 103          */
 104         mw.rcfilters.ui.SavedLinksListWidget.prototype.onMenuItemRemove = function ( item ) {
 105                 this.controller.removeSavedQuery( item.getID() );
 106         };
 107
 108         /**
 109          * Respond to menu item default event
 110          *
 111          * @param {mw.rcfilters.ui.SavedLinksListItemWidget} item Menu item
 112          * @param {boolean} isDefault Item is default
 113          */
 114         mw.rcfilters.ui.SavedLinksListWidget.prototype.onMenuItemDefault = function ( item, isDefault ) {
 115                 this.controller.setDefaultSavedQuery( isDefault ? item.getID() : null );
 116         };
 117
 118         /**
 119          * Respond to menu item edit event
 120          *
 121          * @param {mw.rcfilters.ui.SavedLinksListItemWidget} item Menu item
 122          * @param {string} newLabel New label
 123          */
 124         mw.rcfilters.ui.SavedLinksListWidget.prototype.onMenuItemEdit = function ( item, newLabel ) {
 125                 this.controller.renameSavedQuery( item.getID(), newLabel );
 126         };
 127
 128         /**
 129          * Respond to menu add item event
 130          *
 131          * @param {mw.rcfilters.ui.SavedLinksListItemWidget} item Menu item
 132          */
 133         mw.rcfilters.ui.SavedLinksListWidget.prototype.onModelAddItem = function ( item ) {
 134                 if ( this.menu.getItemFromData( item.getID() ) ) {
 135                         return;
 136                 }
 137
 138                 this.menu.addItems( [
 139                         new mw.rcfilters.ui.SavedLinksListItemWidget( item, { $overlay: this.$overlay } )
 140                 ] );
 141                 this.placeholderItem.toggle( this.model.isEmpty() );
 142         };
 143
 144         /**
 145          * Respond to menu remove item event
 146          *
 147          * @param {mw.rcfilters.ui.SavedLinksListItemWidget} item Menu item
 148          */
 149         mw.rcfilters.ui.SavedLinksListWidget.prototype.onModelRemoveItem = function ( item ) {
 150                 this.menu.removeItems( [ this.menu.getItemFromData( item.getID() ) ] );
 151                 this.placeholderItem.toggle( this.model.isEmpty() );
 152         };
 153 }( mediaWiki ) );