mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-09-27 12:16:51 +00:00
c472b2fe4a
ve.ui.Surface.js * Make local overlay a child of ve-ui-surface and a sibling to ve-ce-surface elements. ** This keeps local overlays relative to their surface and eliminates the need for insane z-indexes. ve.ui.PopupWidget.js * PopupWidget boundaries are now relative to ve-ce-surface and no longer protrude out ve.ce.Node.css, ve.ui.Window.css * Removal or replacement of insane z-indexes. ve.ce.FocusableNode.js, ve.ce.ProtectedNode.js, ve.ce.ResizableNode.js, ve.ui.Context.js * Translate offsets from local overlay ve.init.mw.ViewPageTarget-monobook.css, ve.init.mw.ViewPageTarget-vector.css * Skin specific z-indexes for global overlay ve.init.mw.ViewPageTarget.js * Applied direction specific mw class to ce.Surface vs ui.Surface to prevent mw content styles from being applied to ui elements. ve.ui.Dialog.css * Adjustments to surface inside of dialog so that relative offsets for local overlays can be properly calculated. ve.ui.Surface.css * Explicitly force .ve-ui-surface to be relative so that it's children can be relatively positioned. ve.ui.Widget.css * Removal of unnecessary font-size properties now that local overlay is sibling of surface. ve.js * Added get relative position helper method to translate position offsets from target parent Bug: 50241 Change-Id: Ibadce404a2286bc5dcec48f0d9da89004dbbd867
227 lines
5.5 KiB
JavaScript
227 lines
5.5 KiB
JavaScript
/*!
|
|
* VisualEditor UserInterface LookupInputWidget class.
|
|
*
|
|
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
|
|
* @license The MIT License (MIT); see LICENSE.txt
|
|
*/
|
|
|
|
/**
|
|
* Lookup input widget.
|
|
*
|
|
* Mixin that adds a menu showing suggested values to a text input. Subclasses must handle `select`
|
|
* events on #lookupMenu to make use of selections.
|
|
*
|
|
* @class
|
|
* @abstract
|
|
*
|
|
* @constructor
|
|
* @param {ve.ui.TextInputWidget} input Input widget
|
|
* @param {Object} [config] Config options
|
|
* @cfg {jQuery} [$overlay=this.$$( '.ve-surface-overlay-local:last' )] Overlay layer
|
|
*/
|
|
ve.ui.LookupInputWidget = function VeUiLookupInputWidget( input, config ) {
|
|
// Config intialization
|
|
config = config || {};
|
|
|
|
// Properties
|
|
this.lookupInput = input;
|
|
this.$overlay = config.$overlay || this.$$( '.ve-surface-overlay-local:last' );
|
|
this.lookupMenu = new ve.ui.TextInputMenuWidget( this, {
|
|
'$$': ve.Element.get$$( this.$overlay ),
|
|
'input': this.lookupInput,
|
|
'$container': config.$container
|
|
} );
|
|
this.lookupCache = {};
|
|
this.lookupQuery = null;
|
|
this.lookupRequest = null;
|
|
|
|
// Events
|
|
this.$overlay.append( this.lookupMenu.$ );
|
|
|
|
this.lookupInput.$input.on( {
|
|
'focus': ve.bind( this.onLookupInputFocus, this ),
|
|
'blur': ve.bind( this.onLookupInputBlur, this ),
|
|
'mousedown': ve.bind( this.onLookupInputMouseDown, this )
|
|
} );
|
|
this.lookupInput.connect( this, { 'change': 'onLookupInputChange' } );
|
|
|
|
// Initialization
|
|
this.$.addClass( 've-ui-lookupWidget' );
|
|
this.lookupMenu.$.addClass( 've-ui-lookupWidget-menu' );
|
|
};
|
|
|
|
/* Methods */
|
|
|
|
/**
|
|
* Handle input focus event.
|
|
*
|
|
* @method
|
|
* @param {jQuery.Event} e Input focus event
|
|
*/
|
|
ve.ui.LookupInputWidget.prototype.onLookupInputFocus = function () {
|
|
this.openLookupMenu();
|
|
};
|
|
|
|
/**
|
|
* Handle input blur event.
|
|
*
|
|
* @method
|
|
* @param {jQuery.Event} e Input blur event
|
|
*/
|
|
ve.ui.LookupInputWidget.prototype.onLookupInputBlur = function () {
|
|
this.lookupMenu.hide();
|
|
};
|
|
|
|
/**
|
|
* Handle input mouse down event.
|
|
*
|
|
* @method
|
|
* @param {jQuery.Event} e Input mouse down event
|
|
*/
|
|
ve.ui.LookupInputWidget.prototype.onLookupInputMouseDown = function () {
|
|
this.openLookupMenu();
|
|
};
|
|
|
|
/**
|
|
* Handle input change event.
|
|
*
|
|
* @method
|
|
* @param {string} value New input value
|
|
*/
|
|
ve.ui.LookupInputWidget.prototype.onLookupInputChange = function () {
|
|
this.openLookupMenu();
|
|
};
|
|
|
|
/**
|
|
* Open the menu.
|
|
*
|
|
* @method
|
|
* @chainable
|
|
*/
|
|
ve.ui.LookupInputWidget.prototype.openLookupMenu = function () {
|
|
var value = this.lookupInput.getValue();
|
|
|
|
if ( value.length && $.trim( value ) !== '' ) {
|
|
this.populateLookupMenu();
|
|
if ( !this.lookupMenu.isVisible() ) {
|
|
this.lookupMenu.show();
|
|
}
|
|
} else {
|
|
this.lookupMenu.hide();
|
|
}
|
|
|
|
return this;
|
|
};
|
|
|
|
/**
|
|
* Populate lookup menu with current information.
|
|
*
|
|
* @method
|
|
* @chainable
|
|
*/
|
|
ve.ui.LookupInputWidget.prototype.populateLookupMenu = function () {
|
|
var items = this.getLookupMenuItems();
|
|
|
|
this.lookupMenu.clearItems();
|
|
|
|
if ( items.length ) {
|
|
this.lookupMenu.show();
|
|
this.lookupMenu.addItems( items );
|
|
this.initializeLookupMenuSelection();
|
|
} else {
|
|
this.lookupMenu.hide();
|
|
}
|
|
|
|
return this;
|
|
};
|
|
|
|
/**
|
|
* Set selection in the lookup menu with current information.
|
|
*
|
|
* @method
|
|
* @chainable
|
|
*/
|
|
ve.ui.LookupInputWidget.prototype.initializeLookupMenuSelection = function () {
|
|
if ( !this.lookupMenu.getSelectedItem() ) {
|
|
this.lookupMenu.selectItem( this.lookupMenu.getClosestSelectableItem( 0 ), true );
|
|
}
|
|
this.lookupMenu.highlightItem( this.lookupMenu.getSelectedItem() );
|
|
};
|
|
|
|
/**
|
|
* Get lookup menu items for the current query.
|
|
*
|
|
* @method
|
|
* @returns {ve.ui.MenuItemWidget[]} Menu items
|
|
*/
|
|
ve.ui.LookupInputWidget.prototype.getLookupMenuItems = function () {
|
|
var value = this.lookupInput.getValue();
|
|
|
|
if ( value && value !== this.lookupQuery ) {
|
|
// Abort current request if query has changed
|
|
if ( this.lookupRequest ) {
|
|
this.lookupRequest.abort();
|
|
this.lookupQuery = null;
|
|
this.lookupRequest = null;
|
|
}
|
|
if ( value in this.lookupCache ) {
|
|
return this.getLookupMenuItemsFromData( this.lookupCache[value] );
|
|
} else {
|
|
this.lookupQuery = value;
|
|
this.lookupRequest = this.getLookupRequest()
|
|
.always( ve.bind( function () {
|
|
this.lookupQuery = null;
|
|
this.lookupRequest = null;
|
|
}, this ) )
|
|
.done( ve.bind( function ( data ) {
|
|
this.lookupCache[value] = this.getLookupCacheItemFromData( data );
|
|
this.openLookupMenu();
|
|
}, this ) );
|
|
this.pushPending();
|
|
this.lookupRequest.always( ve.bind( function () {
|
|
this.popPending();
|
|
}, this ) );
|
|
}
|
|
}
|
|
return [];
|
|
};
|
|
|
|
/**
|
|
* Get a new request object of the current lookup query value.
|
|
*
|
|
* @method
|
|
* @abstract
|
|
* @returns {jqXHR} jQuery AJAX object, or promise object with an .abort() method
|
|
*/
|
|
ve.ui.LookupInputWidget.prototype.getLookupRequest = function () {
|
|
// Stub, implemented in subclass
|
|
return null;
|
|
};
|
|
|
|
/**
|
|
* Handle successful lookup request.
|
|
*
|
|
* Overriding methods should call #populateLookupMenu when results are available and cache results
|
|
* for future lookups in #lookupCache as an array of #ve.ui.MenuItemWidget objects.
|
|
*
|
|
* @method
|
|
* @abstract
|
|
* @param {Mixed} data Response from server
|
|
*/
|
|
ve.ui.LookupInputWidget.prototype.onLookupRequestDone = function () {
|
|
// Stub, implemented in subclass
|
|
};
|
|
|
|
/**
|
|
* Get a list of menu item widgets from the data stored by the lookup request's done handler.
|
|
*
|
|
* @method
|
|
* @abstract
|
|
* @param {Mixed} data Cached result data, usually an array
|
|
* @returns {ve.ui.MenuItemWidget[]} Menu items
|
|
*/
|
|
ve.ui.LookupInputWidget.prototype.getLookupMenuItemsFromData = function () {
|
|
// Stub, implemented in subclass
|
|
return [];
|
|
};
|