mediawiki-extensions-Visual.../modules/ve/ui/widgets/ve.ui.MWLinkTargetInputWidget.js
Trevor Parscal fb22e4df50 Group, Select, Option, Outline and MenuSection widgets
Objective: Refactor menu widgets so that the majority of their code can be reused, and then add an outline widget which shares the same base classes.

ve.ui.Dialog.css
* Make dialog a fixed width and have a minimum and maximum height while always being centered in the window.
* Add style for the outline panel
* Add border below the title
* Move font-size adjustment to child elements to preserve layout scale

ve.ui.Inspector.css
* Make inspectors fade in when being opened (will happen after the size transition is complete)
* Add initial size for inspector to prevent the default size of the unfinished contents from making it too large while loading

ve.ui.Tool.css
* Update classes according to changes in labeled widgets

ve.ui.Widget.css
* Add display: block to widget labels to support use of autoEllipsis on them
* Update classes according to changes in labeled widgets
* Add styles for new select, option and outline item widgets
* Remove unused group and items classes for menu widgets (which are now subclasses of the select widget and no longer have grouping built-in)

ve.ui.Window.css.js
* Moved selection disabling rules up to the head to prevent selection drawing around the title

ve.ui.GroupWidget.js
* New widget that manages "items", allowing getting, adding, removing and clearing

ve.ui.MenuSectionItemWidget.js
* New widget that can be used inside a menu to create an unselectable, unhighlightable item that describes a section of the menu

ve.ui.OptionWidget.js
* New widget to be used with select widgets, provides select and highlight functionality

ve.ui.OutlineItemWidget.js
* New widget to be used with outline widgets, extends option and adds support for an icon to be rendered to the left of the label

ve.ui.OutlineWidget.js
* New widget that provides a vertically stacked list of mutually exclusive options, extends select

ve.ui.SelectWidget.js
* New widget that implements most of what menu once did, only now it also handles all the events for it's child elements internally

ve.ui.MetaDialog.js
* Hacked in support for an outline widget in the outline pane
* Added classes for styling purposes

ve.ui.FormatDropDownTool.js
* Modified call to menu item constructor as per changes therein
* Reorganized options config to make construction simpler
* Changed to setLabel after selecting the item to prevent the label from being changed to the wrong value as a side-effect of setting the item

ve.ui.DropDownTool.js
* Added $$ in config for menu widget - just in case later on we use a drop-down inside of a frame
* Using jQuery .text() method to propagate the selected item's text to the label rather than keeping around a plain text copy of the label in a property

ve.ui.Context.js
* Improve context/inspector behavior in regards to initial sizing

ve.ui.js
* Added context property to $$ returned by get$$ so it's easy to get the document object (for event binding) wherever you have a $$

ve.ui.Window.js
* Fixed incorrect case for boolean type in comment
* Added getFrame method

ve.ui.ButtonWidget.js
* Removed extra class being set on label

ve.ui.LabeledWidget.js
* Added class on label
* Added fitLabel method which uses autoEllipsis internally

ve.ui.MenuItemWidget.js
* Moved nearly all of the implementation to option so it could be reused

ve.ui.Menu.js
* Moved most of the implementation to select and group

ve.ui.MWLinkTargetInputWidget
* Prevent aborting and re-querying if the value hasn't actually changed
* Updated populateMenu method as per changes in menu class

*.php
* Added links to new files

Change-Id: I2271b5cc0554973b13cfbff94caf16901c02caa5
2013-03-20 22:55:32 +00:00

400 lines
10 KiB
JavaScript

/*!
* VisualEditor UserInterface MWLinkTargetInputWidget class.
*
* @copyright 2011-2013 VisualEditor Team and others; see AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
/*global mw*/
/**
* Creates an ve.ui.MWLinkTargetInputWidget object.
*
* @class
* @extends ve.ui.LinkTargetInputWidget
*
* @constructor
* @param {Object} [config] Config options
* @cfg {jQuery} [$overlay=this.$$( 'body' )] Element to append menu to
*/
ve.ui.MWLinkTargetInputWidget = function VeUiMWLinkTargetInputWidget( config ) {
// Config intialization
config = config || {};
// Parent constructor
ve.ui.LinkTargetInputWidget.call( this, config );
// Properties
this.$overlay = config.$overlay || this.$$( 'body' );
this.menu = new ve.ui.TextInputMenuWidget(
this, { '$$': ve.ui.get$$( this.$overlay ), 'input': this }
);
this.annotation = null;
this.existingPages = {};
this.matchingPages = {};
this.existingPagesQuery = null;
this.existingPagesRequest = null;
this.matchingPagesQuery = null;
this.matchingPagesRequest = null;
this.previousMatches = null;
// Events
this.$overlay.append( this.menu.$ );
this.$input.on( {
'click': ve.bind( this.onClick, this ),
'focus': ve.bind( this.onFocus, this ),
'blur': ve.bind( this.onBlur, this )
} );
this.menu.on( 'select', ve.bind( this.onMenuItemSelect, this ) );
this.addListenerMethods( this, {'change': 'onChange'} );
// Initialization
this.$.addClass( 've-ui-mwLinkTargetInputWidget' );
this.menu.$.addClass( 've-ui-mwLinkTargetInputWidget-menu' );
};
/* Inheritance */
ve.inheritClass( ve.ui.MWLinkTargetInputWidget, ve.ui.LinkTargetInputWidget );
/* Methods */
/**
* Handles click events.
*
* @method
* @param {jQuery.Event} e Mouse click event
*/
ve.ui.MWLinkTargetInputWidget.prototype.onClick = function () {
if ( !this.disabled ) {
this.openMenu();
}
};
/**
* Handles focus events.
*
* @method
* @param {jQuery.Event} e Input focus event
*/
ve.ui.MWLinkTargetInputWidget.prototype.onFocus = function () {
if ( !this.disabled ) {
this.openMenu();
}
};
/**
* Handles blur events.
*
* @method
* @param {jQuery.Event} e Input blur
*/
ve.ui.MWLinkTargetInputWidget.prototype.onBlur = function () {
this.menu.hide();
};
/**
* Handles change events.
*
* @method
* @param {ve.ui.MenuItemWidget} item Menu item
*/
ve.ui.MWLinkTargetInputWidget.prototype.onMenuItemSelect = function ( item ) {
if ( item ) {
this.setAnnotation( item.getData() );
}
};
/**
* Opens the suggestion menu on input change.
*
*
* @method
* @param {string} value New value
*/
ve.ui.MWLinkTargetInputWidget.prototype.onChange = function () {
this.openMenu();
};
/**
* Set the value of the input.
*
* Overrides setValue to keep annotations in sync.
*
* @method
* @param {string} value New value
*/
ve.ui.MWLinkTargetInputWidget.prototype.setValue = function ( value ) {
// Keep annotation in sync with value, call parent method.
ve.ui.TextInputWidget.prototype.setValue.call( this, value );
};
/**
* Opens the menu.
*
* @method
* @chainable
*/
ve.ui.MWLinkTargetInputWidget.prototype.openMenu = function () {
this.populateMenu();
this.queryPageExistence();
this.queryMatchingPages();
if ( this.value.length && !this.menu.isVisible() ) {
this.menu.show();
}
return this;
};
/**
* Populates the menu.
*
* @method
* @chainable
*/
ve.ui.MWLinkTargetInputWidget.prototype.populateMenu = function () {
var i, len,
menu$$ = this.menu.$$,
items = [],
pageExists = this.existingPages[this.value],
matchingPages = this.matchingPages[this.value];
// Reset
this.menu.clearItems();
// Hide on empty target
if ( !this.value.length ) {
this.menu.hide();
return this;
}
// External link
if ( ve.init.platform.getExternalLinkUrlProtocolsRegExp().test( this.value ) ) {
items.push( new ve.ui.MenuSectionItemWidget(
'externalLink', { '$$': menu$$, 'label': 'External link' }
) );
items.push( new ve.ui.MenuItemWidget(
this.getExternalLinkAnnotationFromUrl( this.value ),
{ '$$': menu$$, 'rel': 'externalLink', 'label': this.value }
) );
}
// Internal link
if ( !pageExists && ( !matchingPages || matchingPages.indexOf( this.value ) === -1 ) ) {
items.push( new ve.ui.MenuSectionItemWidget(
'newPage', { '$$': menu$$, 'label': 'New page' }
) );
items.push( new ve.ui.MenuItemWidget(
this.getInternalLinkAnnotationFromTitle( this.value ),
{ '$$': menu$$, 'rel': 'newPage', 'label': this.value }
) );
}
// Matching pages
if ( matchingPages && matchingPages.length ) {
items.push( new ve.ui.MenuSectionItemWidget(
'matchingPages', { '$$': menu$$, 'label': 'Matching page' }
) );
for ( i = 0, len = matchingPages.length; i < len; i++ ) {
items.push( new ve.ui.MenuItemWidget(
new ve.dm.MWInternalLinkAnnotation( { 'title': matchingPages[i] } ),
{ '$$': menu$$, 'rel': 'matchingPage', 'label': matchingPages[i] }
) );
}
this.previousMatches = matchingPages;
}
// Add items
this.menu.addItems( items );
// Auto-select
this.menu.selectItem( this.menu.getItemFromData( this.annotation ), true );
if ( !this.menu.getSelectedItem() ) {
this.menu.selectItem( this.menu.getClosestSelectableItem( 0 ), true );
}
this.menu.highlightItem( this.menu.getSelectedItem() );
return this;
};
/**
* Signals that an response is pending.
*
* @method
* @chainable
*/
ve.ui.MWLinkTargetInputWidget.prototype.pushPending = function () {
this.pending++;
this.$.addClass( 've-ui-mwLinkTargetInputWidget-pending' );
return this;
};
/**
* Signals that an response is complete.
*
* @method
* @chainable
*/
ve.ui.MWLinkTargetInputWidget.prototype.popPending = function () {
this.pending--;
this.$.removeClass( 've-ui-mwLinkTargetInputWidget-pending' );
return this;
};
/**
* Gets an internal link annotation.
*
* File: or Category: links will be prepended with a colon so they are interpreted as a links rather
* than image inclusions or categorizations.
*
* @method
* @param {string} target Page title
* @returns {ve.dm.MWInternalLinkAnnotation}
*/
ve.ui.MWLinkTargetInputWidget.prototype.getInternalLinkAnnotationFromTitle = function ( target ) {
var title;
try {
title = new mw.Title( target );
if ( title.getNamespaceId() === 6 || title.getNamespaceId() === 14 ) {
target = ':' + target;
}
} catch ( e ) { }
return new ve.dm.MWInternalLinkAnnotation( { 'title': target } );
};
/**
* Gets an external link annotation.
*
* @method
* @param {string} target Web address
* @returns {ve.dm.MWExternalLinkAnnotation}
*/
ve.ui.MWLinkTargetInputWidget.prototype.getExternalLinkAnnotationFromUrl = function ( target ) {
return new ve.dm.MWExternalLinkAnnotation( { 'href': target } );
};
/**
* Gets a target from an annotation.
*
* @method
* @param {ve.dm.MWExternalLinkAnnotation|ve.dm.MWInternalLinkAnnotation} annotation Annotation
* @returns {string} Target
*/
ve.ui.MWLinkTargetInputWidget.prototype.getTargetFromAnnotation = function ( annotation ) {
if ( annotation instanceof ve.dm.MWExternalLinkAnnotation ) {
return annotation.data.href;
} else if ( annotation instanceof ve.dm.MWInternalLinkAnnotation ) {
return annotation.data.title;
}
return '';
};
/**
* Checks page existence for the current value.
*
* {ve.ui.MWLinkTargetInputWidget.populateMenu} will be called immediately if the page existence has
* been cached, or as soon as the API returns a result.
*
* @method
* @chainable
*/
ve.ui.MWLinkTargetInputWidget.prototype.queryPageExistence = function () {
if ( this.existingPagesQuery === this.value ) {
// Ignore duplicate requests
return;
}
if ( this.existingPagesRequest ) {
this.existingPagesRequest.abort();
this.existingPagesQuery = null;
this.existingPagesRequest = null;
}
if ( this.value in this.existingPages ) {
this.populateMenu();
} else {
this.pushPending();
this.existingPagesQuery = this.value;
this.existingPagesRequest = $.ajax( {
'url': mw.util.wikiScript( 'api' ),
'data': {
'format': 'json',
'action': 'query',
'indexpageids': '',
'titles': this.value,
'converttitles': ''
},
'dataType': 'json',
'success': ve.bind( function ( data ) {
this.existingPagesQuery = null;
this.existingPagesRequest = null;
var page,
exists = false;
if ( data.query ) {
page = data.query.pages[data.query.pageids[0]];
exists = ( page.missing === undefined && page.invalid === undefined );
// Cache result for normalized title
this.existingPages[page.title] = exists;
}
// Cache result for original input
this.existingPages[this.value] = exists;
this.populateMenu();
}, this ),
'complete': ve.bind( function () {
this.popPending();
}, this )
} );
}
return this;
};
/**
* Checks matching pages for the current value.
*
* {ve.ui.MWLinkTargetInputWidget.populateMenu} will be called immediately if matching pages have
* been cached, or as soon as the API returns a result.
*
* @method
* @chainable
*/
ve.ui.MWLinkTargetInputWidget.prototype.queryMatchingPages = function () {
if ( this.matchingPagesQuery === this.value ) {
// Ignore duplicate requests
return;
}
if ( this.matchingPagesRequest ) {
this.matchingPagesRequest.abort();
this.matchingPagesQuery = null;
this.matchingPagesRequest = null;
}
if ( this.value in this.matchingPages ) {
this.populateMenu();
} else {
this.pushPending();
this.matchingPagesQuery = this.value;
this.matchingPagesRequest = $.ajax( {
'url': mw.util.wikiScript( 'api' ),
'data': {
'format': 'json',
'action': 'opensearch',
'search': this.value,
'namespace': 0,
'suggest': ''
},
'dataType': 'json',
'success': ve.bind( function ( data ) {
this.matchingPagesQuery = null;
this.matchingPagesRequest = null;
if ( ve.isArray( data ) && data.length ) {
// Cache the matches to the query
this.matchingPages[this.value] = data[1];
this.populateMenu();
} else {
// Don't repeat queries that resulted in invalid responses
this.matchingPages[this.value] = [];
}
}, this ),
'complete': ve.bind( function () {
this.popPending();
}, this )
} );
}
return this;
};