Merge "Consistent behavior of read-only reason"
[lhc/web/wiklou.git] / resources / src / mediawiki.widgets / mw.widgets.TitleOptionWidget.js
index ec0c935..51508ab 100644 (file)
@@ -13,9 +13,9 @@
         * @extends OO.ui.MenuOptionWidget
         *
         * @constructor
-        * @param {Object} [config] Configuration options
-        * @cfg {string} [data] Label to display
-        * @cfg {mw.Title} [title] Page title object
+        * @param {Object} config Configuration options
+        * @cfg {string} data Label to display
+        * @cfg {string} url URL of page
         * @cfg {string} [imageUrl] Thumbnail image URL with URL encoding
         * @cfg {string} [description] Page description
         * @cfg {boolean} [missing] Page doesn't exist
                config = $.extend( {
                        icon: icon,
                        label: config.data,
-                       href: config.title.getUrl(),
-                       autoFitLabel: false
+                       autoFitLabel: false,
+                       $label: $( '<a>' )
                }, config );
 
                // Parent constructor
                mw.widgets.TitleOptionWidget.parent.call( this, config );
 
                // Initialization
-               this.$label.wrap( '<a>' );
-               this.$link = this.$label.parent();
-               this.$link.attr( 'href', config.href );
+               this.$label.attr( 'href', config.url );
                this.$element.addClass( 'mw-widget-titleOptionWidget' );
 
+               // OOUI OptionWidgets make an effort to not be tab accessible, but
+               // adding a link inside them would undo that. So, explicitly make it
+               // not tabbable.
+               this.$label.attr( 'tabindex', '-1' );
+
+               // Allow opening the link in new tab, but not regular navigation.
+               this.$label.on( 'click', function ( e ) {
+                       // Don't interfere with special clicks (e.g. to open in new tab)
+                       if ( !( e.which !== 1 || e.altKey || e.ctrlKey || e.shiftKey || e.metaKey ) ) {
+                               e.preventDefault();
+                       }
+               } );
+
                // Highlight matching parts of link suggestion
-               this.$label.autoEllipsis( { hasSpan: false, tooltip: true, matchText: config.query } );
+               this.$label
+                       .highlightText( config.query )
+                       .attr( 'title', config.data );
 
                if ( config.missing ) {
-                       this.$link.addClass( 'new' );
+                       this.$label.addClass( 'new' );
+               } else if ( config.redirect ) {
+                       this.$label.addClass( 'mw-redirect' );
+               } else if ( config.disambiguation ) {
+                       this.$label.addClass( 'mw-disambig' );
                }
 
                if ( config.imageUrl ) {
@@ -71,6 +88,7 @@
                                $( '<span>' )
                                        .addClass( 'mw-widget-titleOptionWidget-description' )
                                        .text( config.description )
+                                       .attr( 'title', config.description )
                        );
                }
        };