mediawiki-extensions-Visual.../modules/ve/ui/widgets/ve.ui.LookupInputWidget.js

227 lines
5.5 KiB
JavaScript
Raw Normal View History

/*!
* 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] Configuration options
The Great ve.ui.Surface refactor of 2013 Prologue: Farewell ve.Editor my good chap… Oh, hey there HTML frames - I didn't see you there! In a world where iframes are outlaws, and symbols like document and window are global, there were more than a few assumptions about which document or window was being used. But fear not - for this commit (probably) tracks them all down, leaving a trail of iframe-compatible awesomeness in its wake. With the great ve.ui.Surface now able to be used inside of iframes, let the reference editing commence. But there, lurking in the darkness is a DM issue so fierce it may take Roan and/or Ed up to 3 whole hours to sort it out. Note to Roan and/or Ed: Editing references seems to work fine, but when saving the page there are "no changes" which is a reasonable indication to the contrary. Objectives: * Make it possible to have multiple surfaces be instantiated, get along nicely, and be embedded inside of iframes if needed. * Make reference content editable within a dialog Approach: * Move what's left of ve.Editor to ve.ui.Surface and essentially obliterate all use of it * Make even more stuff inherit from ve.Element (long live this.$$) * Use the correct document or window anywhere it was being assumed to be the top level one * Resolve stacking order issues by removing the excessive use of z-index and introducing global and local overlay elements for each editor * Add a surface to the reference dialog, load up the reference contents and save them back on apply * Actually destroy what we create in ce and ui surfaces * Add recursive frame offset calculation method to ve.Element * Moved ve.ce.Surface's getSelectionRect method to the prototype Bonus: * Move ve.ce.DocumentNode.css contents to ve.ce.Node.css (not sure why it was separate in the first place, but I'm likely the one to blame) * Fix blatant lies in documentation * Whitespace cleanup here and there * Get rid of ve.ui.Window overlays - not used or needed Change-Id: Iede83e7d24f7cb249b6ba3dc45d770445b862e08
2013-05-20 22:45:50 +00:00
* @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;
The Great ve.ui.Surface refactor of 2013 Prologue: Farewell ve.Editor my good chap… Oh, hey there HTML frames - I didn't see you there! In a world where iframes are outlaws, and symbols like document and window are global, there were more than a few assumptions about which document or window was being used. But fear not - for this commit (probably) tracks them all down, leaving a trail of iframe-compatible awesomeness in its wake. With the great ve.ui.Surface now able to be used inside of iframes, let the reference editing commence. But there, lurking in the darkness is a DM issue so fierce it may take Roan and/or Ed up to 3 whole hours to sort it out. Note to Roan and/or Ed: Editing references seems to work fine, but when saving the page there are "no changes" which is a reasonable indication to the contrary. Objectives: * Make it possible to have multiple surfaces be instantiated, get along nicely, and be embedded inside of iframes if needed. * Make reference content editable within a dialog Approach: * Move what's left of ve.Editor to ve.ui.Surface and essentially obliterate all use of it * Make even more stuff inherit from ve.Element (long live this.$$) * Use the correct document or window anywhere it was being assumed to be the top level one * Resolve stacking order issues by removing the excessive use of z-index and introducing global and local overlay elements for each editor * Add a surface to the reference dialog, load up the reference contents and save them back on apply * Actually destroy what we create in ce and ui surfaces * Add recursive frame offset calculation method to ve.Element * Moved ve.ce.Surface's getSelectionRect method to the prototype Bonus: * Move ve.ce.DocumentNode.css contents to ve.ce.Node.css (not sure why it was separate in the first place, but I'm likely the one to blame) * Fix blatant lies in documentation * Whitespace cleanup here and there * Get rid of ve.ui.Window overlays - not used or needed Change-Id: Iede83e7d24f7cb249b6ba3dc45d770445b862e08
2013-05-20 22:45:50 +00:00
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 ( this.lookupMenu.$input.is( ':focus' ) && $.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() ) {
Link inspector bug fixes Formerly known as "The greatest commit in the history of the world*". * Within a 3 block radius of Drayton Park and Auburt Park, starting from July 30th at about 9pm or so. Bugs: * (bug 51404) Allow escaping out of the link inspector when in creation mode (no text is selected, text will be inserted based on link target) and the text input is empty * (bug 51065 and bug 51415) Keep model and view in sync when changing the link inspector's text input value and showing options in a menu * (bug 51523) Either restore selection at the time of close to what it was before opening the inspector (when using back) or to what it was before closing (might be changed by transactions processed during the close method) - this makes it simpler and more natural when clicking away from the link inspector, even when there are changes that must be saved by the link inspector on close Bonus: * Use only the light blue highlight color for menu widget items - the checkmark already displays the selected item, the dark blue is just masking the current highlight position and confusing the peoples * Remove links when the user deletes everything from the link inspector's text input and then closes the link inspector * Replace select menu's evil "silent" selectItem/highlightItem argument with a new method called initializeSelection which sets both selection and highlighting to an item without emitting events - this is needed when synchronizing the view with the model so the model isn't immediately told to change to a value it already has * Make the MWTitle lookup menu not flash like crazy as you type (this was caused by a copy-paste oversight overriding initializeLookupMenuSelection unnecessarily) Bug: 51404 Bug: 51065 Bug: 51415 Bug: 51523 Change-Id: I339d9253ad472c2f42c3179edc84a83d27561270
2013-07-30 22:06:35 +00:00
this.lookupMenu.intializeSelection( this.lookupMenu.getFirstSelectableItem() );
}
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 [];
};