Enable jsduck for resources/src/mediawiki.rcfilters and make pass
[lhc/web/wiklou.git] / resources / src / mediawiki.rcfilters / ui / mw.rcfilters.ui.SavedLinksListWidget.js
index 9ae1d34..7eda90a 100644 (file)
@@ -2,6 +2,7 @@
        /**
         * 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
                        }
@@ -59,7 +77,7 @@
                        menuItemEdit: 'onMenuItemEdit'
                } );
 
-               this.button.toggle( !this.menu.isEmpty() );
+               this.placeholderItem.toggle( this.model.isEmpty() );
                // Initialize
                this.$element
                        .addClass( 'mw-rcfilters-ui-savedLinksListWidget' )
@@ -69,6 +87,8 @@
        /* 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 ) );