* @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' );
// Highlight matching parts of link suggestion
this.$label.autoEllipsis( { hasSpan: false, tooltip: true, matchText: config.query } );
if ( config.missing ) {
- this.$link.addClass( 'new' );
+ this.$label.addClass( 'new' );
}
if ( config.imageUrl ) {
.text( config.description )
);
}
-
- // Events
- this.$link.on( 'click', function () {
- return false;
- } );
};
/* Setup */
this.cache = config.cache;
// Initialization
+ this.$element.addClass( 'mw-widget-titleWidget' );
this.interwikiPrefixes = [];
this.interwikiPrefixesPromise = new mw.Api().get( {
action: 'query',
/**
* Get menu option widget data from the title and page data
*
- * @param {mw.Title} title Title object
+ * @param {string} title Title object
* @param {Object} data Page data
* @return {Object} Data for option widget
*/
data: this.namespace !== null && this.relative
? mwTitle.getRelativeText( this.namespace )
: title,
- title: mwTitle,
+ url: mwTitle.getUrl(),
imageUrl: this.showImages ? data.imageUrl : null,
description: this.showDescriptions ? data.description : null,
missing: data.missing,
* @license The MIT License (MIT); see LICENSE.txt
*/
-.mw-widget-titleOptionWidget-description {
- display: none;
-}
-
.mw-widget-titleWidget {
+ .mw-widget-titleOptionWidget {
+ line-height: normal;
+
+ &-description {
+ color: #888;
+ }
+ }
+
&-menu-withImages {
.mw-widget-titleOptionWidget {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
min-height: 3.75em;
- margin-left: 3.75em;
- }
+ padding-left: 4.75em;
- .mw-widget-titleOptionWidget:not(:last-child) {
- margin-bottom: 1px;
- }
+ &:not(:last-child) {
+ margin-bottom: 2px;
+ }
- .oo-ui-iconElement .oo-ui-iconElement-icon {
- display: block;
- width: 3.75em;
- height: 3.75em;
- left: -3.75em;
- background-color: #ccc;
- opacity: 0.4;
- }
+ > .oo-ui-labelElement-label {
+ line-height: 2.8em;
+ }
+
+ &.oo-ui-iconElement {
+ >.oo-ui-iconElement-icon {
+ display: block;
+ width: 3.75em;
+ height: 3.75em;
+ left: 0;
+ background-color: #ccc;
+ opacity: 0.4;
+ }
- .oo-ui-iconElement .mw-widget-titleOptionWidget-hasImage {
- border: 0;
- background-size: cover;
- opacity: 1;
+ > .mw-widget-titleOptionWidget-hasImage {
+ border: 0;
+ background-size: cover;
+ opacity: 0.7;
+ }
+ }
}
- .mw-widget-titleOptionWidget .oo-ui-labelElement-label {
- line-height: 2.8em;
+ &.oo-ui-optionWidget-highlighted, &.oo-ui-optionWidget-selected {
+ &.oo-ui-iconElement > .mw-widget-titleOptionWidget-hasImage {
+ opacity: 1;
+ }
}
}
&-menu-withDescriptions {
- .mw-widget-titleOptionWidget .oo-ui-labelElement-label {
- line-height: 1.5em;
+ .mw-widget-titleOptionWidget {
+ > .oo-ui-labelElement-label {
+ line-height: 1.5em;
+ }
+
+ &-description {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
}
+ }
+ &:not(&-menu-withDescriptions) {
.mw-widget-titleOptionWidget-description {
- display: block;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
+ display: none;
}
}
}
-
-.oo-ui-menuOptionWidget:not(.oo-ui-optionWidget-selected) .mw-widget-titleOptionWidget-description,
-.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted .mw-widget-titleOptionWidget-description {
- color: #888;
-}