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

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