resources/src/mediawiki.widgets/mw.widgets.TitleOptionWidget.js

   1 /*!
   2  * MediaWiki Widgets - TitleOptionWidget class.
   3  *
   4  * @copyright 2011-2015 MediaWiki Widgets Team and others; see AUTHORS.txt
   5  * @license The MIT License (MIT); see LICENSE.txt
   6  */
   7 ( function () {
   8
   9         /**
  10          * @classdesc Title option widget.
  11          *
  12          * @class
  13          * @extends OO.ui.MenuOptionWidget
  14          *
  15          * @constructor
  16          * @description Create a mw.widgets.TitleOptionWidget object.
  17          * @param {Object} config Configuration options
  18          * @param {string} config.data Label to display
  19          * @param {string} config.url URL of page
  20          * @param {boolean} [config.showImages] Whether to attempt to show images
  21          * @param {string} [config.imageUrl] Thumbnail image URL with URL encoding
  22          * @param {string} [config.description] Page description
  23          * @param {boolean} [config.missing] Page doesn't exist
  24          * @param {boolean} [config.redirect] Page is a redirect
  25          * @param {boolean} [config.disambiguation] Page is a disambiguation page
  26          * @param {string} [config.query] Matching query string to highlight
  27          * @param {Function} [config.compare] String comparison function for query highlighting
  28          */
  29         mw.widgets.TitleOptionWidget = function MwWidgetsTitleOptionWidget( config ) {
  30                 let icon;
  31
  32                 if ( !config.showImages ) {
  33                         icon = null;
  34                 } else if ( config.missing ) {
  35                         icon = 'articleNotFound';
  36                 } else if ( config.redirect ) {
  37                         icon = 'articleRedirect';
  38                 } else if ( config.disambiguation ) {
  39                         icon = 'articleDisambiguation';
  40                 } else {
  41                         icon = 'article';
  42                 }
  43
  44                 // Config initialization
  45                 config = Object.assign( {
  46                         icon: icon,
  47                         label: config.data,
  48                         autoFitLabel: false,
  49                         $label: $( '<a>' )
  50                 }, config );
  51
  52                 // Parent constructor
  53                 mw.widgets.TitleOptionWidget.super.call( this, config );
  54
  55                 // Remove check icon
  56                 this.checkIcon.$element.remove();
  57
  58                 // Initialization
  59                 this.$label.attr( 'href', config.url );
  60                 this.$element.addClass( 'mw-widget-titleOptionWidget' );
  61
  62                 // OOUI OptionWidgets make an effort to not be tab accessible, but
  63                 // adding a link inside them would undo that. So, explicitly make it
  64                 // not tabbable.
  65                 this.$label.attr( 'tabindex', '-1' );
  66
  67                 // Allow opening the link in new tab, but not regular navigation.
  68                 this.$label.on( 'click', ( e ) => {
  69                         // Don't interfere with special clicks (e.g. to open in new tab)
  70                         if ( !( e.which !== 1 || e.altKey || e.ctrlKey || e.shiftKey || e.metaKey ) ) {
  71                                 e.preventDefault();
  72                         }
  73                 } );
  74
  75                 // Highlight matching parts of link suggestion
  76                 if ( config.query ) {
  77                         this.setHighlightedQuery( config.data, config.query, config.compare, true );
  78                 }
  79                 this.$label.attr( 'title', config.data );
  80
  81                 if ( config.missing ) {
  82                         this.$label.addClass( 'new' );
  83                 } else if ( config.redirect ) {
  84                         this.$label.addClass( 'mw-redirect' );
  85                 } else if ( config.disambiguation ) {
  86                         this.$label.addClass( 'mw-disambig' );
  87                 }
  88
  89                 if ( config.showImages && config.imageUrl ) {
  90                         this.$icon
  91                                 .addClass( 'mw-widget-titleOptionWidget-hasImage mw-no-invert' )
  92                                 .css( 'background-image', 'url(' + config.imageUrl + ')' );
  93                 }
  94
  95                 if ( config.description ) {
  96                         this.$element.append(
  97                                 $( '<span>' )
  98                                         .addClass( 'mw-widget-titleOptionWidget-description' )
  99                                         .text( config.description )
 100                                         .attr( 'title', config.description )
 101                         );
 102                 }
 103         };
 104
 105         /* Setup */
 106
 107         OO.inheritClass( mw.widgets.TitleOptionWidget, OO.ui.MenuOptionWidget );
 108
 109 }() );