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

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