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

   1 var GroupWidget = require( './GroupWidget.js' ),
   2         SavedLinksListItemWidget = require( './SavedLinksListItemWidget.js' ),
   3         SavedLinksListWidget;
   4
   5 /**
   6  * Quick links widget
   7  *
   8  * @class mw.rcfilters.ui.SavedLinksListWidget
   9  * @extends OO.ui.Widget
  10  *
  11  * @constructor
  12  * @param {mw.rcfilters.Controller} controller Controller
  13  * @param {mw.rcfilters.dm.SavedQueriesModel} model View model
  14  * @param {Object} [config] Configuration object
  15  * @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
  16  */
  17 SavedLinksListWidget = function MwRcfiltersUiSavedLinksListWidget( controller, model, config ) {
  18         var $labelNoEntries = $( '<div>' )
  19                 .append(
  20                         $( '<div>' )
  21                                 .addClass( 'mw-rcfilters-ui-savedLinksListWidget-placeholder-title' )
  22                                 .text( mw.msg( 'rcfilters-quickfilters-placeholder-title' ) ),
  23                         $( '<div>' )
  24                                 .addClass( 'mw-rcfilters-ui-savedLinksListWidget-placeholder-description' )
  25                                 .text( mw.msg( 'rcfilters-quickfilters-placeholder-description' ) )
  26                 );
  27
  28         config = config || {};
  29
  30         // Parent
  31         SavedLinksListWidget.parent.call( this, config );
  32
  33         this.controller = controller;
  34         this.model = model;
  35         this.$overlay = config.$overlay || this.$element;
  36
  37         this.placeholderItem = new OO.ui.DecoratedOptionWidget( {
  38                 classes: [ 'mw-rcfilters-ui-savedLinksListWidget-placeholder' ],
  39                 label: $labelNoEntries,
  40                 icon: 'bookmark'
  41         } );
  42
  43         this.menu = new GroupWidget( {
  44                 events: {
  45                         click: 'menuItemClick',
  46                         delete: 'menuItemDelete',
  47                         default: 'menuItemDefault',
  48                         edit: 'menuItemEdit'
  49                 },
  50                 classes: [ 'mw-rcfilters-ui-savedLinksListWidget-menu' ],
  51                 items: [ this.placeholderItem ]
  52         } );
  53         this.button = new OO.ui.PopupButtonWidget( {
  54                 classes: [ 'mw-rcfilters-ui-savedLinksListWidget-button' ],
  55                 label: mw.msg( 'rcfilters-quickfilters' ),
  56                 icon: 'bookmark',
  57                 indicator: 'down',
  58                 $overlay: this.$overlay,
  59                 popup: {
  60                         width: 300,
  61                         anchor: false,
  62                         align: 'backwards',
  63                         $autoCloseIgnore: this.$overlay,
  64                         $content: this.menu.$element
  65                 }
  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( 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 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 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 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 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 SavedLinksListWidget.prototype.onModelAddItem = function ( item ) {
 137         if ( this.menu.findItemFromData( item.getID() ) ) {
 138                 return;
 139         }
 140
 141         this.menu.addItems( [
 142                 new 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 SavedLinksListWidget.prototype.onModelRemoveItem = function ( item ) {
 153         this.menu.removeItems( [ this.menu.findItemFromData( item.getID() ) ] );
 154         this.placeholderItem.toggle( this.model.isEmpty() );
 155 };
 156
 157 module.exports = SavedLinksListWidget;