mediawiki.widgets: Cleanup TitleWidget styles and improve API

* Cleanup LESS
* Make label an <a> instead of appending $link
* Make real thumbnails get darker during over using opacity
* Increase gap between results to 2px
* Make config and config.data required
* Replace config.title with config.url
* Remove link 'click' event killer, may be reapplied in later,
  more complete, commit
* Fix documentation

Change-Id: I3cca0c2c546e1c9f840c33b7cb8281aeb75a81f1

diff --git a/resources/src/mediawiki.widgets/mw.widgets.TitleOptionWidget.js b/resources/src/mediawiki.widgets/mw.widgets.TitleOptionWidget.js
index 1154c9f..138715a 100644 (file)
--- a/resources/src/mediawiki.widgets/mw.widgets.TitleOptionWidget.js
+++ b/resources/src/mediawiki.widgets/mw.widgets.TitleOptionWidget.js
@@ -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
@@ -40,24 +40,22 @@
                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 ) {
@@ -73,11 +71,6 @@
                                        .text( config.description )
                        );
                }
-
-               // Events
-               this.$link.on( 'click', function () {
-                       return false;
-               } );
        };
 
        /* Setup */

diff --git a/resources/src/mediawiki.widgets/mw.widgets.TitleWidget.js b/resources/src/mediawiki.widgets/mw.widgets.TitleWidget.js
index f51c559..672b54a 100644 (file)
--- a/resources/src/mediawiki.widgets/mw.widgets.TitleWidget.js
+++ b/resources/src/mediawiki.widgets/mw.widgets.TitleWidget.js
@@ -47,6 +47,7 @@
                this.cache = config.cache;
 
                // Initialization
+               this.$element.addClass( 'mw-widget-titleWidget' );
                this.interwikiPrefixes = [];
                this.interwikiPrefixesPromise = new mw.Api().get( {
                        action: 'query',
@@ -239,7 +240,7 @@
        /**
         * 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
         */
@@ -249,7 +250,7 @@
                        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,

diff --git a/resources/src/mediawiki.widgets/mw.widgets.TitleWidget.less b/resources/src/mediawiki.widgets/mw.widgets.TitleWidget.less
index 93c4b20..ecd0824 100644 (file)
--- a/resources/src/mediawiki.widgets/mw.widgets.TitleWidget.less
+++ b/resources/src/mediawiki.widgets/mw.widgets.TitleWidget.less
@@ -5,59 +5,73 @@
  * @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;
-}