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