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                 config = config || {};
  15
  16                 // Parent
  17                 mw.rcfilters.ui.SavedLinksListWidget.parent.call( this, config );
  18
  19                 this.controller = controller;
  20                 this.model = model;
  21                 this.$overlay = config.$overlay || this.$element;
  22
  23                 // The only reason we're using "ButtonGroupWidget" here is that
  24                 // straight-out "GroupWidget" is a mixin and cannot be initialized
  25                 // on its own, so we need something to be its widget.
  26                 this.menu = new OO.ui.ButtonGroupWidget( {
  27                         classes: [ 'mw-rcfilters-ui-savedLinksListWidget-menu' ]
  28                 } );
  29                 this.button = new OO.ui.PopupButtonWidget( {
  30                         classes: [ 'mw-rcfilters-ui-savedLinksListWidget-button' ],
  31                         label: mw.msg( 'rcfilters-quickfilters' ),
  32                         icon: 'unClip',
  33                         $overlay: this.$overlay,
  34                         popup: {
  35                                 width: 300,
  36                                 anchor: false,
  37                                 align: 'forwards',
  38                                 $autoCloseIgnore: this.$overlay,
  39                                 $content: this.menu.$element
  40                         }
  41                 } );
  42
  43                 this.menu.aggregate( {
  44                         click: 'menuItemClick',
  45                         'delete': 'menuItemDelete',
  46                         'default': 'menuItemDefault',
  47                         edit: 'menuItemEdit'
  48                 } );
  49
  50                 // Events
  51                 this.model.connect( this, {
  52                         add: 'onModelAddItem',
  53                         remove: 'onModelRemoveItem'
  54                 } );
  55                 this.menu.connect( this, {
  56                         menuItemClick: 'onMenuItemClick',
  57                         menuItemDelete: 'onMenuItemRemove',
  58                         menuItemDefault: 'onMenuItemDefault',
  59                         menuItemEdit: 'onMenuItemEdit'
  60                 } );
  61
  62                 this.button.toggle( !this.menu.isEmpty() );
  63                 // Initialize
  64                 this.$element
  65                         .addClass( 'mw-rcfilters-ui-savedLinksListWidget' )
  66                         .append( this.button.$element );
  67         };
  68
  69         /* Initialization */
  70         OO.inheritClass( mw.rcfilters.ui.SavedLinksListWidget, OO.ui.Widget );
  71
  72         /**
  73          * Respond to menu item click event
  74          *
  75          * @param {mw.rcfilters.ui.SavedLinksListItemWidget} item Menu item
  76          */
  77         mw.rcfilters.ui.SavedLinksListWidget.prototype.onMenuItemClick = function ( item ) {
  78                 this.controller.applySavedQuery( item.getID() );
  79                 this.button.popup.toggle( false );
  80         };
  81
  82         /**
  83          * Respond to menu item remove event
  84          *
  85          * @param {mw.rcfilters.ui.SavedLinksListItemWidget} item Menu item
  86          */
  87         mw.rcfilters.ui.SavedLinksListWidget.prototype.onMenuItemRemove = function ( item ) {
  88                 this.controller.removeSavedQuery( item.getID() );
  89                 this.menu.removeItems( [ item ] );
  90         };
  91
  92         /**
  93          * Respond to menu item default event
  94          *
  95          * @param {mw.rcfilters.ui.SavedLinksListItemWidget} item Menu item
  96          * @param {boolean} isDefault Item is default
  97          */
  98         mw.rcfilters.ui.SavedLinksListWidget.prototype.onMenuItemDefault = function ( item, isDefault ) {
  99                 this.controller.setDefaultSavedQuery( isDefault ? item.getID() : null );
 100         };
 101
 102         /**
 103          * Respond to menu item edit event
 104          *
 105          * @param {mw.rcfilters.ui.SavedLinksListItemWidget} item Menu item
 106          * @param {string} newLabel New label
 107          */
 108         mw.rcfilters.ui.SavedLinksListWidget.prototype.onMenuItemEdit = function ( item, newLabel ) {
 109                 this.controller.renameSavedQuery( item.getID(), newLabel );
 110         };
 111
 112         /**
 113          * Respond to menu add item event
 114          *
 115          * @param {mw.rcfilters.ui.SavedLinksListItemWidget} item Menu item
 116          */
 117         mw.rcfilters.ui.SavedLinksListWidget.prototype.onModelAddItem = function ( item ) {
 118                 if ( this.menu.getItemFromData( item.getID() ) ) {
 119                         return;
 120                 }
 121
 122                 this.menu.addItems( [
 123                         new mw.rcfilters.ui.SavedLinksListItemWidget( item, { $overlay: this.$overlay } )
 124                 ] );
 125                 this.button.toggle( !this.menu.isEmpty() );
 126         };
 127
 128         /**
 129          * Respond to menu remove item event
 130          *
 131          * @param {mw.rcfilters.ui.SavedLinksListItemWidget} item Menu item
 132          */
 133         mw.rcfilters.ui.SavedLinksListWidget.prototype.onModelRemoveItem = function ( item ) {
 134                 this.menu.removeItems( [ this.model.getItemByID( item.getID() ) ] );
 135                 this.button.toggle( !this.menu.isEmpty() );
 136         };
 137 }( mediaWiki ) );