Gitiles
Code Review Sign In
gerrit.avm99963.com / monorail-avm99963 / 7cc6337c69fde9a3e7053641ed101d318f51be8a / . / static / js / tracker / ac.js
blob: 4c0bf2b3982a22af8d05449bac956c37004706bb [file] [log] [blame]
/* Copyright 2016 The Chromium Authors. All Rights Reserved.
*
* Use of this source code is governed by a BSD-style
* license that can be found in the LICENSE file or at
* https://developers.google.com/open-source/licenses/bsd
*/
/**
* An autocomplete library for javascript.
* Public API
* - _ac_install() install global handlers required for everything else to
* function.
* - _ac_register(SC) register a store constructor (see below)
* - _ac_isCompleting() true iff focus is in an auto complete box and the user
* has triggered completion with a keystroke, and completion has not been
* cancelled (programatically or otherwise).
* - _ac_isCompleteListShowing() true if _as_isCompleting and the complete list
* is visible to the user.
* - _ac_cancel() if completing, stop it, otherwise a no-op.
*
*
* A quick example
* // an auto complete store
* var myFavoritestAutoCompleteStore = new _AC_SimpleStore(
* ['some', 'strings', 'to', 'complete']);
*
* // a store constructor
* _ac_register(function (inputNode, keyEvent) {
* if (inputNode.id == 'my-auto-completing-check-box') {
* return myFavoritestAutoCompleteStore;
* }
* return null;
* });
*
* <html>
* <head>
* <script type=text/javascript src=ac.js></script>
* </head>
* <body onload=_ac_install()>
* <!-- the constructor above looks at the id. It could as easily
* - look at the class, name, or value.
* - The autocomplete=off stops browser autocomplete from
* - interfering with our autocomplete
* -->
* <input type=text id="my-auto-completing-check-box"
* autocomplete=off>
* </body>
* </html>
*
*
* Concepts
* - Store Constructor function
* A store constructor is a policy function with the signature
* _AC_Store myStoreConstructor(
* HtmlInputElement|HtmlTextAreaElement inputNode, Event keyEvent)
* When a key event is received on a text input or text area, the autocomplete
* library will try each of the store constructors in turn until it finds one
* that returns an AC_Store which will be used for auto-completion of that
* text box until focus is lost.
*
* - interface _AC_Store
* An autocomplete store encapsulates all operations that affect how a
* particular text node is autocompleted. It has the following operations:
* - String completable(String inputValue, int caret)
* This method returns null if not completable or the section of inputValue
* that is subject to completion. If autocomplete works on items in a
* comma separated list, then the input value "foo, ba" might yield "ba"
* as the completable chunk since it is separated from its predecessor by
* a comma.
* caret is the position of the text cursor (caret) in the text input.
* - _AC_Completion[] completions(String completable,
* _AC_Completion[] toFilter)
* This method returns null if there are no completions. If toFilter is
* not null or undefined, then this method may assume that toFilter was
* returned as a set of completions that contain completable.
* - String substitute(String inputValue, int caret,
* String completable, _AC_Completion completion)
* returns the inputValue with the given completion substituted for the
* given completable. caret has the same meaning as in the
* completable operation.
* - String oncomplete(boolean completed, String key,
* HTMLElement element, String text)
* This method is called when the user hits a completion key. The default
* value is to do nothing, but you can override it if you want. Note that
* key will be null if the user clicked on it to select
* - Boolean autoselectFirstRow()
* This method returns True by default, but subclasses can override it
* to make autocomplete fields that require the user to press the down
* arrow or do a mouseover once before any completion option is considered
* to be selected.
*
* - class _AC_SimpleStore
* An implementation of _AC_Store that completes a set of strings given at
* construct time in a text field with a comma separated value.
*
* - struct _AC_Completion
* a struct with two fields
* - String value : the plain text completion value
* - String html : the value, as html, with the completable in bold.
*
* Key Handling
* Several keys affect completion in an autocompleted input.
* ESC - the escape key cancels autocompleting. The autocompletion will have
* no effect on the focused textbox until it loses focus, regains it, and
* a key is pressed.
* ENTER - completes using the currently selected completion, or if there is
* only one, uses that completion.
* UP ARROW - selects the completion above the current selection.
* DOWN ARROW - selects the completion below the current selection.
*
*
* CSS styles
* The following CSS selector rules can be used to change the completion list
* look:
* #ac-list style of the auto-complete list
* #ac-list .selected style of the selected item
* #ac-list b style of the matching text in a candidate completion
*
* Dependencies
* The library depends on the following libraries:
* javascript:base for definition of key constants and SetCursorPos
* javascript:shapes for nodeBounds()
*/
/**
* install global handlers required for the rest of the module to function.
*/
function _ac_install() {
ac_addHandler_(document.body, 'onkeydown', ac_keyevent_);
ac_addHandler_(document.body, 'onkeypress', ac_keyevent_);
}
/**
* register a store constructor
* @param storeConstructor a function like
* _AC_Store myStoreConstructor(HtmlInputElement|HtmlTextArea, Event)
*/
function _ac_register(storeConstructor) {
// check that not already registered
for (let i = ac_storeConstructors.length; --i >= 0;) {
if (ac_storeConstructors[i] === storeConstructor) {
return;
}
}
ac_storeConstructors.push(storeConstructor);
}
/**
* may be attached as an onfocus handler to a text input to popup autocomplete
* immediately on the box gaining focus.
*/
function _ac_onfocus(event) {
ac_keyevent_(event);
}
/**
* true iff the autocomplete widget is currently active.
*/
function _ac_isCompleting() {
return !!ac_store && !ac_suppressCompletions;
}
/**
* true iff the completion list is displayed.
*/
function _ac_isCompleteListShowing() {
return !!ac_store && !ac_suppressCompletions && ac_completions &&
ac_completions.length;
}
/**
* cancel any autocomplete in progress.
*/
function _ac_cancel() {
ac_suppressCompletions = true;
ac_updateCompletionList(false);
}
/** add a handler without whacking any existing handler. @private */
function ac_addHandler_(node, handlerName, handler) {
const oldHandler = node[handlerName];
if (!oldHandler) {
node[handlerName] = handler;
} else {
node[handlerName] = ac_fnchain_(node[handlerName], handler);
}
return oldHandler;
}
/** cancel the event. @private */
function ac_cancelEvent_(event) {
if ('stopPropagation' in event) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
// This is handled in IE by returning false from the handler
if ('preventDefault' in event) {
event.preventDefault();
}
}
/** Call two functions, a and b, and return false if either one returns
false. This is used as a primitive way to attach multiple event
handlers to an element without using addEventListener(). This
library predates the availablity of addEventListener().
@private
*/
function ac_fnchain_(a, b) {
return function() {
const ar = a.apply(this, arguments);
const br = b.apply(this, arguments);
// NOTE 1: (undefined && false) -> undefined
// NOTE 2: returning FALSE from a onkeypressed cancels it,
// returning UNDEFINED does not.
// As such, we specifically look for falses here
if (ar === false || br === false) {
return false;
} else {
return true;
}
};
}
/** key press handler. @private */
function ac_keyevent_(event) {
event = event || window.event;
const source = getTargetFromEvent(event);
const isInput = 'INPUT' == source.tagName &&
source.type.match(/^text|email$/i);
const isTextarea = 'TEXTAREA' == source.tagName;
if (!isInput && !isTextarea) return true;
const key = event.key;
const isDown = event.type == 'keydown';
const isShiftKey = event.shiftKey;
let storeFound = true;
if ((source !== ac_focusedInput) || (ac_store === null)) {
ac_focusedInput = source;
storeFound = false;
if (ENTER_KEYNAME !== key && ESC_KEYNAME !== key) {
for (let i = 0; i < ac_storeConstructors.length; ++i) {
const store = (ac_storeConstructors[i])(source, event);
if (store) {
ac_store = store;
ac_store.setAvoid(event);
ac_oldBlurHandler = ac_addHandler_(
ac_focusedInput, 'onblur', _ac_ob);
storeFound = true;
break;
}
}
// There exists an odd condition where an edit box with autocomplete
// attached can be removed from the DOM without blur being called
// In which case we are left with a store around that will try to
// autocomplete the next edit box to receive focus. We need to clean
// this up
// If we can't find a store, force a blur
if (!storeFound) {
_ac_ob(null);
}
}
// ac-table rows need to be removed when switching to another input.
ac_updateCompletionList(false);
}
// If the user typed Esc when the auto-complete menu was not shown,
// then blur the input text field so that the user can use keyboard
// shortcuts.
const acList = document.getElementById('ac-list');
if (ESC_KEYNAME == key &&
(!acList || acList.style.display == 'none')) {
ac_focusedInput.blur();
}
if (!storeFound) return true;
const isCompletion = ac_store.isCompletionKey(key, isDown, isShiftKey);
const hasResults = ac_completions && (ac_completions.length > 0);
let cancelEvent = false;
if (isCompletion && hasResults) {
// Cancel any enter keystrokes if something is selected so that the
// browser doesn't go submitting the form.
cancelEvent = (!ac_suppressCompletions && !!ac_completions &&
(ac_selected != -1));
window.setTimeout(function() {
if (ac_store) {
ac_handleKey_(key, isDown, isShiftKey);
}
}, 0);
} else if (!isCompletion) {
// Don't want to also blur the field. Up and down move the cursor (in
// Firefox) to the start/end of the field. We also don't want that while
// the list is showing.
cancelEvent = (key == ESC_KEYNAME ||
key == DOWN_KEYNAME ||
key == UP_KEYNAME);
window.setTimeout(function() {
if (ac_store) {
ac_handleKey_(key, isDown, isShiftKey);
}
}, 0);
} else { // implicit if (isCompletion && !hasResults)
if (ac_store.oncomplete) {
ac_store.oncomplete(false, key, ac_focusedInput, undefined);
}
}
if (cancelEvent) {
ac_cancelEvent_(event);
}
return !cancelEvent;
}
/** Autocomplete onblur handler. */
function _ac_ob(event) {
if (ac_focusedInput) {
ac_focusedInput.onblur = ac_oldBlurHandler;
}
ac_store = null;
ac_focusedInput = null;
ac_everTyped = false;
ac_oldBlurHandler = null;
ac_suppressCompletions = false;
ac_updateCompletionList(false);
}
/** @constructor */
function _AC_Store() {
}
/** returns the chunk of the input to treat as completable. */
_AC_Store.prototype.completable = function(inputValue, caret) {
console.log('UNIMPLEMENTED completable');
};
/** returns the chunk of the input to treat as completable. */
_AC_Store.prototype.completions = function(prefix, tofilter) {
console.log('UNIMPLEMENTED completions');
};
/** returns the chunk of the input to treat as completable. */
_AC_Store.prototype.oncomplete = function(completed, key, element, text) {
// Call the onkeyup handler so that choosing an autocomplete option has
// the same side-effect as typing. E.g., exposing the next row of input
// fields.
element.dispatchEvent(new Event('keyup'));
_ac_ob();
};
/** substitutes a completion for a completable in a text input's value. */
_AC_Store.prototype.substitute =
function(inputValue, caret, completable, completion) {
console.log('UNIMPLEMENTED substitute');
};
/** true iff hitting a comma key should complete. */
_AC_Store.prototype.commaCompletes = true;
/**
* true iff the given keystroke should cause a completion (and be consumed in
* the process.
*/
_AC_Store.prototype.isCompletionKey = function(key, isDown, isShiftKey) {
if (!isDown && (ENTER_KEYNAME === key ||
(COMMA_KEYNAME == key && this.commaCompletes))) {
return true;
}
if (TAB_KEYNAME === key && !isShiftKey) {
// IE doesn't fire an event for tab on click in a text field, and firefox
// requires that the onkeypress event for tab be consumed or it navigates
// to next field.
return false;
// JER: return isDown == BR_IsIE();
}
return false;
};
_AC_Store.prototype.setAvoid = function(event) {
if (event && event.avoidValues) {
ac_avoidValues = event.avoidValues;
} else {
ac_avoidValues = this.computeAvoid();
}
ac_avoidValues = ac_avoidValues.map((val) => val.toLowerCase());
};
/* Subclasses may implement this to compute values to avoid
offering in the current input field, i.e., because those
values are already used. */
_AC_Store.prototype.computeAvoid = function() {
return [];
};
function _AC_AddItemToFirstCharMap(firstCharMap, ch, s) {
let l = firstCharMap[ch];
if (!l) {
l = firstCharMap[ch] = [];
} else if (l[l.length - 1].value == s) {
return;
}
l.push(new _AC_Completion(s, null, ''));
}
/**
* an _AC_Store implementation suitable for completing lists of email
* addresses.
* @constructor
*/
function _AC_SimpleStore(strings, opt_docStrings) {
this.firstCharMap_ = {};
for (let i = 0; i < strings.length; ++i) {
let s = strings[i];
if (!s) {
continue;
}
if (opt_docStrings && opt_docStrings[s]) {
s = s + ' ' + opt_docStrings[s];
}
const parts = s.split(/\W+/);
for (let j = 0; j < parts.length; ++j) {
if (parts[j]) {
_AC_AddItemToFirstCharMap(
this.firstCharMap_, parts[j].charAt(0).toLowerCase(), strings[i]);
}
}
}
// The maximimum number of results that we are willing to show
this.countThreshold = 2500;
this.docstrings = opt_docStrings || {};
}
_AC_SimpleStore.prototype = new _AC_Store();
_AC_SimpleStore.prototype.constructor = _AC_SimpleStore;
_AC_SimpleStore.prototype.completable =
function(inputValue, caret) {
// complete after the last comma not inside ""s
let start = 0;
let state = 0;
for (let i = 0; i < caret; ++i) {
const ch = inputValue.charAt(i);
switch (state) {
case 0:
if ('"' == ch) {
state = 1;
} else if (',' == ch || ' ' == ch) {
start = i + 1;
}
break;
case 1:
if ('"' == ch) {
state = 0;
}
break;
}
}
while (start < caret &&
' \t\r\n'.indexOf(inputValue.charAt(start)) >= 0) {
++start;
}
return inputValue.substring(start, caret);
};
/** Simple function to create a <span> with matching text in bold.
*/
function _AC_CreateSpanWithMatchHighlighted(match) {
const span = document.createElement('span');
span.appendChild(document.createTextNode(match[1] || ''));
const bold = document.createElement('b');
span.appendChild(bold);
bold.appendChild(document.createTextNode(match[2]));
span.appendChild(document.createTextNode(match[3] || ''));
return span;
};
/**
* Get all completions matching the given prefix.
* @param {string} prefix The prefix of the text to autocomplete on.
* @param {List.<string>?} toFilter Optional list to filter on. Otherwise will
* use this.firstCharMap_ using the prefix's first character.
* @return {List.<_AC_Completion>} The computed list of completions.
*/
_AC_SimpleStore.prototype.completions = function(prefix) {
if (!prefix) {
return [];
}
toFilter = this.firstCharMap_[prefix.charAt(0).toLowerCase()];
// Since we use prefix to build a regular expression, we need to escape RE
// characters. We match '-', '{', '$' and others in the prefix and convert
// them into "\-", "\{", "\$".
const regexForRegexCharacters = /([\^*+\-\$\\\{\}\(\)\[\]\#?\.])/g;
const modifiedPrefix = prefix.replace(regexForRegexCharacters, '\\$1');
// Match the modifiedPrefix anywhere as long as it is either at the very
// beginning "Th" -> "The Hobbit", or comes immediately after a word separator
// such as "Ga" -> "The-Great-Gatsby".
const patternRegex = '^(.*\\W)?(' + modifiedPrefix + ')(.*)';
const pattern = new RegExp(patternRegex, 'i' /* ignore case */);
// We keep separate lists of possible completions that were generated
// by matching a value or generated by matching a docstring. We return
// a concatenated list so that value matches all come before docstring
// matches.
const completions = [];
const docCompletions = [];
if (toFilter) {
const toFilterLength = toFilter.length;
for (let i = 0; i < toFilterLength; ++i) {
const docStr = this.docstrings[toFilter[i].value];
let compSpan = null;
let docSpan = null;
const matches = toFilter[i].value.match(pattern);
const docMatches = docStr && docStr.match(pattern);
if (matches) {
compSpan = _AC_CreateSpanWithMatchHighlighted(matches);
if (docStr) docSpan = document.createTextNode(docStr);
} else if (docMatches) {
compSpan = document.createTextNode(toFilter[i].value);
docSpan = _AC_CreateSpanWithMatchHighlighted(docMatches);
}
if (compSpan) {
const newCompletion = new _AC_Completion(
toFilter[i].value, compSpan, docSpan);
if (matches) {
completions.push(newCompletion);
} else {
docCompletions.push(newCompletion);
}
if (completions.length + docCompletions.length > this.countThreshold) {
break;
}
}
}
}
return completions.concat(docCompletions);
};
// Normally, when the user types a few characters, we aggressively
// select the first possible completion (if any). When the user
// hits ENTER, that first completion is substituted. When that
// behavior is not desired, override this to return false.
_AC_SimpleStore.prototype.autoselectFirstRow = function() {
return true;
};
// Comparison function for _AC_Completion
function _AC_CompareACCompletion(a, b) {
// convert it to lower case and remove all leading junk
const aval = a.value.toLowerCase().replace(/^\W*/, '');
const bval = b.value.toLowerCase().replace(/^\W*/, '');
if (a.value === b.value) {
return 0;
} else if (aval < bval) {
return -1;
} else {
return 1;
}
}
_AC_SimpleStore.prototype.substitute =
function(inputValue, caret, completable, completion) {
return inputValue.substring(0, caret - completable.length) +
completion.value + ', ' + inputValue.substring(caret);
};
/**
* a possible completion.
* @constructor
*/
function _AC_Completion(value, compSpan, docSpan) {
/** plain text. */
this.value = value;
if (typeof compSpan == 'string') compSpan = document.createTextNode(compSpan);
this.compSpan = compSpan;
if (typeof docSpan == 'string') docSpan = document.createTextNode(docSpan);
this.docSpan = docSpan;
}
_AC_Completion.prototype.toString = function() {
return '(AC_Completion: ' + this.value + ')';
};
/** registered store constructors. @private */
var ac_storeConstructors = [];
/**
* the focused text input or textarea whether store is null or not.
* A text input may have focus and this may be null iff no key has been typed in
* the text input.
*/
var ac_focusedInput = null;
/**
* null or the autocomplete store used to complete ac_focusedInput.
* @private
*/
var ac_store = null;
/** store handler from ac_focusedInput. @private */
var ac_oldBlurHandler = null;
/**
* true iff user has indicated completions are unwanted (via ESC key)
* @private
*/
var ac_suppressCompletions = false;
/**
* chunk of completable text seen last keystroke.
* Used to generate ac_completions.
* @private
*/
let ac_lastCompletable = null;
/** an array of _AC_Completions. @private */
var ac_completions = null;
/** -1 or in [0, _AC_Completions.length). @private */
var ac_selected = -1;
/** Maximum number of options displayed in menu. @private */
const ac_max_options = 100;
/** Don't offer these values because they are already used. @private */
let ac_avoidValues = [];
/**
* handles all the key strokes, updating the completion list, tracking selected
* element, performing substitutions, etc.
* @private
*/
function ac_handleKey_(key, isDown, isShiftKey) {
// check completions
ac_checkCompletions();
let show = true;
const numCompletions = ac_completions ? ac_completions.length : 0;
// handle enter and tab on key press and the rest on key down
if (ac_store.isCompletionKey(key, isDown, isShiftKey)) {
if (ac_selected < 0 && numCompletions >= 1 &&
ac_store.autoselectFirstRow()) {
ac_selected = 0;
}
if (ac_selected >= 0) {
const backupInput = ac_focusedInput;
const completeValue = ac_completions[ac_selected].value;
ac_complete();
if (ac_store.oncomplete) {
ac_store.oncomplete(true, key, backupInput, completeValue);
}
}
} else {
switch (key) {
case ESC_KEYNAME: // escape
// JER?? ac_suppressCompletions = true;
ac_selected = -1;
show = false;
break;
case UP_KEYNAME: // up
if (isDown) {
// firefox fires arrow events on both down and press, but IE only fires
// then on press.
ac_selected = Math.max(numCompletions >= 0 ? 0 : -1, ac_selected - 1);
}
break;
case DOWN_KEYNAME: // down
if (isDown) {
ac_selected = Math.min(
ac_max_options - 1, Math.min(numCompletions - 1, ac_selected + 1));
}
break;
}
if (isDown) {
switch (key) {
case ESC_KEYNAME:
case ENTER_KEYNAME:
case UP_KEYNAME:
case DOWN_KEYNAME:
case RIGHT_KEYNAME:
case LEFT_KEYNAME:
case TAB_KEYNAME:
case SHIFT_KEYNAME:
case BACKSPACE_KEYNAME:
case DELETE_KEYNAME:
break;
default: // User typed some new characters.
ac_everTyped = true;
}
}
}
if (ac_focusedInput) {
ac_updateCompletionList(show);
}
}
/**
* called when an option is clicked on to select that option.
*/
function _ac_select(optionIndex) {
ac_selected = optionIndex;
ac_complete();
if (ac_store.oncomplete) {
ac_store.oncomplete(true, null, ac_focusedInput, ac_focusedInput.value);
}
// check completions
ac_checkCompletions();
ac_updateCompletionList(true);
}
function _ac_mouseover(optionIndex) {
ac_selected = optionIndex;
ac_updateCompletionList(true);
}
/** perform the substitution of the currently selected item. */
function ac_complete() {
const caret = ac_getCaretPosition_(ac_focusedInput);
const completion = ac_completions[ac_selected];
ac_focusedInput.value = ac_store.substitute(
ac_focusedInput.value, caret,
ac_lastCompletable, completion);
// When the prefix starts with '*' we want to return the complete set of all
// possible completions. We treat the ac_lastCompletable value as empty so
// that the caret is correctly calculated (i.e. the caret should not consider
// placeholder values like '*member').
let new_caret = caret + completion.value.length;
if (!ac_lastCompletable.startsWith('*')) {
// Only consider the ac_lastCompletable length if it does not start with '*'
new_caret = new_caret - ac_lastCompletable.length;
}
// If we inserted something ending in two quotation marks, position
// the cursor between the quotation marks. If we inserted a complete term,
// skip over the trailing space so that the user is ready to enter the next
// term. If we inserted just a search operator, leave the cursor immediately
// after the colon or equals and don't skip over the space.
if (completion.value.substring(completion.value.length - 2) == '""') {
new_caret--;
} else if (completion.value.substring(completion.value.length - 1) != ':' &&
completion.value.substring(completion.value.length - 1) != '=') {
new_caret++; // To account for the comma.
new_caret++; // To account for the space after the comma.
}
ac_selected = -1;
ac_completions = null;
ac_lastCompletable = null;
ac_everTyped = false;
SetCursorPos(window, ac_focusedInput, new_caret);
}
/**
* True if the user has ever typed any actual characters in the currently
* focused text field. False if they have only clicked, backspaced, and
* used the arrow keys.
*/
var ac_everTyped = false;
/**
* maintains ac_completions, ac_selected, ac_lastCompletable.
* @private
*/
function ac_checkCompletions() {
if (ac_focusedInput && !ac_suppressCompletions) {
const caret = ac_getCaretPosition_(ac_focusedInput);
const completable = ac_store.completable(ac_focusedInput.value, caret);
// If we already have completed, then our work here is done.
if (completable == ac_lastCompletable) {
return;
}
ac_completions = null;
ac_selected = -1;
const oldSelected =
((ac_selected >= 0 && ac_selected < ac_completions.length) ?
ac_completions[ac_selected].value : null);
ac_completions = ac_store.completions(completable);
// Don't offer options for values that the user has already used
// in another part of the current form.
ac_completions = ac_completions.filter((comp) =>
FindInArray(ac_avoidValues, comp.value.toLowerCase()) === -1);
ac_selected = oldSelected ? 0 : -1;
ac_lastCompletable = completable;
return;
}
ac_lastCompletable = null;
ac_completions = null;
ac_selected = -1;
}
/**
* maintains the completion list GUI.
* @private
*/
function ac_updateCompletionList(show) {
let clist = document.getElementById('ac-list');
const input = ac_focusedInput;
if (input) {
input.setAttribute('aria-activedescendant', 'ac-status-row-none');
}
let tableEl;
let tableBody;
if (show && ac_completions && ac_completions.length) {
if (!clist) {
clist = document.createElement('DIV');
clist.id = 'ac-list';
clist.style.position = 'absolute';
clist.style.display = 'none';
// with 'listbox' and 'option' roles, screenreader narrates total
// number of options eg. 'New = issue has not .... 1 of 9'
document.body.appendChild(clist);
tableEl = document.createElement('table');
tableEl.setAttribute('cellpadding', 0);
tableEl.setAttribute('cellspacing', 0);
tableEl.id = 'ac-table';
tableEl.setAttribute('role', 'presentation');
tableBody = document.createElement('tbody');
tableBody.id = 'ac-table-body';
tableEl.appendChild(tableBody);
tableBody.setAttribute('role', 'listbox');
clist.appendChild(tableEl);
input.setAttribute('aria-controls', 'ac-table');
input.setAttribute('aria-haspopup', 'grid');
} else {
tableEl = document.getElementById('ac-table');
tableBody = document.getElementById('ac-table-body');
while (tableBody.childNodes.length) {
tableBody.removeChild(tableBody.childNodes[0]);
}
}
// If no choice is selected, then select the first item, if desired.
if (ac_selected < 0 && ac_store && ac_store.autoselectFirstRow()) {
ac_selected = 0;
}
let headerCount= 0;
for (let i = 0; i < Math.min(ac_max_options, ac_completions.length); ++i) {
if (ac_completions[i].heading) {
var rowEl = document.createElement('tr');
tableBody.appendChild(rowEl);
const cellEl = document.createElement('th');
rowEl.appendChild(cellEl);
cellEl.setAttribute('colspan', 2);
if (headerCount) {
cellEl.appendChild(document.createElement('br'));
}
cellEl.appendChild(
document.createTextNode(ac_completions[i].heading));
headerCount++;
} else {
var rowEl = document.createElement('tr');
tableBody.appendChild(rowEl);
if (i == ac_selected) {
rowEl.className = 'selected';
}
rowEl.id = `ac-status-row-${i}`;
rowEl.setAttribute('data-index', i);
rowEl.setAttribute('role', 'option');
rowEl.addEventListener('mousedown', function(event) {
event.preventDefault();
});
rowEl.addEventListener('mouseup', function(event) {
let target = event.target;
while (target && target.tagName != 'TR') {
target = target.parentNode;
}
const idx = Number(target.getAttribute('data-index'));
try {
_ac_select(idx);
} finally {
return false;
}
});
rowEl.addEventListener('mouseover', function(event) {
let target = event.target;
while (target && target.tagName != 'TR') {
target = target.parentNode;
}
const idx = Number(target.getAttribute('data-index'));
_ac_mouseover(idx);
});
const valCellEl = document.createElement('td');
rowEl.appendChild(valCellEl);
if (ac_completions[i].compSpan) {
valCellEl.appendChild(ac_completions[i].compSpan);
}
const docCellEl = document.createElement('td');
rowEl.appendChild(docCellEl);
if (ac_completions[i].docSpan &&
ac_completions[i].docSpan.textContent) {
docCellEl.appendChild(document.createTextNode(' = '));
docCellEl.appendChild(ac_completions[i].docSpan);
}
}
}
// position
const inputBounds = nodeBounds(ac_focusedInput);
clist.style.left = inputBounds.x + 'px';
clist.style.top = (inputBounds.y + inputBounds.h) + 'px';
window.setTimeout(ac_autoscroll, 100);
input.setAttribute('aria-activedescendant', `ac-status-row-${ac_selected}`);
// Note - we use '' instead of 'block', since 'block' has odd effects on
// the screen in IE, and causes scrollbars to resize
clist.style.display = '';
} else {
tableBody = document.getElementById('ac-table-body');
if (clist && tableBody) {
clist.style.display = 'none';
while (tableBody.childNodes.length) {
tableBody.removeChild(tableBody.childNodes[0]);
}
}
}
}
// TODO(jrobbins): make arrow keys and mouse not conflict if they are
// used at the same time.
/** Scroll the autocomplete menu to show the currently selected row. */
function ac_autoscroll() {
const acList = document.getElementById('ac-list');
const acSelRow = acList.getElementsByClassName('selected')[0];
const acSelRowTop = acSelRow ? acSelRow.offsetTop : 0;
const acSelRowHeight = acSelRow ? acSelRow.offsetHeight : 0;
const EXTRA = 8; // Go an extra few pixels so the next row is partly exposed.
if (!acList || !acSelRow) return;
// Autoscroll upward if the selected item is above the visible area,
// else autoscroll downward if the selected item is below the visible area.
if (acSelRowTop < acList.scrollTop) {
acList.scrollTop = acSelRowTop - EXTRA;
} else if (acSelRowTop + acSelRowHeight + EXTRA >
acList.scrollTop + acList.offsetHeight) {
acList.scrollTop = (acSelRowTop + acSelRowHeight -
acList.offsetHeight + EXTRA);
}
}
/** the position of the text caret in the given text field.
*
* @param textField an INPUT node with type=text or a TEXTAREA node
* @return an index in [0, textField.value.length]
*/
function ac_getCaretPosition_(textField) {
if ('INPUT' == textField.tagName) {
let caret = textField.value.length;
// chrome/firefox
if (undefined != textField.selectionStart) {
caret = textField.selectionEnd;
// JER: Special treatment for issue status field that makes all
// options show up more often
if (textField.id.startsWith('status')) {
caret = textField.selectionStart;
}
// ie
} else if (document.selection) {
// get an empty selection range
const range = document.selection.createRange();
const origSelectionLength = range.text.length;
// Force selection start to 0 position
range.moveStart('character', -caret);
// the caret end position is the new selection length
caret = range.text.length;
// JER: Special treatment for issue status field that makes all
// options show up more often
if (textField.id.startsWith('status')) {
// The amount that the selection grew when we forced start to
// position 0 is == the original start position.
caret = range.text.length - origSelectionLength;
}
}
return caret;
} else {
// a textarea
return GetCursorPos(window, textField);
}
}
function getTargetFromEvent(event) {
let targ = event.target || event.srcElement;
if (targ.shadowRoot) {
// Find the element within the shadowDOM.
const path = event.path || event.composedPath();
targ = path[0];
}
return targ;
}