/**
* Quick links widget
*
+ * @class
* @extends OO.ui.Widget
*
* @constructor
* @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
*/
mw.rcfilters.ui.SavedLinksListWidget = function MwRcfiltersUiSavedLinksListWidget( controller, model, config ) {
+ var $labelNoEntries = $( '<div>' )
+ .append(
+ $( '<div>' )
+ .addClass( 'mw-rcfilters-ui-savedLinksListWidget-placeholder-title' )
+ .text( mw.msg( 'rcfilters-quickfilters-placeholder-title' ) ),
+ $( '<div>' )
+ .addClass( 'mw-rcfilters-ui-savedLinksListWidget-placeholder-description' )
+ .text( mw.msg( 'rcfilters-quickfilters-placeholder-description' ) )
+ );
+
config = config || {};
// Parent
this.model = model;
this.$overlay = config.$overlay || this.$element;
+ this.placeholderItem = new OO.ui.DecoratedOptionWidget( {
+ classes: [ 'mw-rcfilters-ui-savedLinksListWidget-placeholder' ],
+ label: $labelNoEntries,
+ icon: 'unClip'
+ } );
// The only reason we're using "ButtonGroupWidget" here is that
// straight-out "GroupWidget" is a mixin and cannot be initialized
// on its own, so we need something to be its widget.
this.menu = new OO.ui.ButtonGroupWidget( {
- classes: [ 'mw-rcfilters-ui-savedLinksListWidget-menu' ]
+ classes: [ 'mw-rcfilters-ui-savedLinksListWidget-menu' ],
+ items: [ this.placeholderItem ]
} );
this.button = new OO.ui.PopupButtonWidget( {
classes: [ 'mw-rcfilters-ui-savedLinksListWidget-button' ],
label: mw.msg( 'rcfilters-quickfilters' ),
icon: 'unClip',
+ indicator: 'down',
$overlay: this.$overlay,
popup: {
width: 300,
anchor: false,
- align: 'forwards',
+ align: 'backwards',
$autoCloseIgnore: this.$overlay,
$content: this.menu.$element
}
menuItemEdit: 'onMenuItemEdit'
} );
- this.button.toggle( !this.menu.isEmpty() );
+ this.placeholderItem.toggle( this.model.isEmpty() );
// Initialize
this.$element
.addClass( 'mw-rcfilters-ui-savedLinksListWidget' )
/* Initialization */
OO.inheritClass( mw.rcfilters.ui.SavedLinksListWidget, OO.ui.Widget );
+ /* Methods */
+
/**
* Respond to menu item click event
*
*/
mw.rcfilters.ui.SavedLinksListWidget.prototype.onMenuItemRemove = function ( item ) {
this.controller.removeSavedQuery( item.getID() );
- this.menu.removeItems( [ item ] );
};
/**
this.menu.addItems( [
new mw.rcfilters.ui.SavedLinksListItemWidget( item, { $overlay: this.$overlay } )
] );
- this.button.toggle( !this.menu.isEmpty() );
+ this.placeholderItem.toggle( this.model.isEmpty() );
};
/**
* @param {mw.rcfilters.ui.SavedLinksListItemWidget} item Menu item
*/
mw.rcfilters.ui.SavedLinksListWidget.prototype.onModelRemoveItem = function ( item ) {
- this.menu.removeItems( [ this.model.getItemByID( item.getID() ) ] );
- this.button.toggle( !this.menu.isEmpty() );
+ this.menu.removeItems( [ this.menu.getItemFromData( item.getID() ) ] );
+ this.placeholderItem.toggle( this.model.isEmpty() );
};
}( mediaWiki ) );