mirror of
https://github.com/Combodo/iTop.git
synced 2026-02-27 22:24:12 +01:00
4c1ad0f4f2
- Form SDK implementation - Basic Forms - Dynamics Forms - Basic Blocks + Data Model Block - Form Compilation - Turbo integration
2783 lines
65 KiB
TypeScript
2783 lines
65 KiB
TypeScript
|
|
import MicroEvent from './contrib/microevent.ts';
|
|
import MicroPlugin from './contrib/microplugin.ts';
|
|
import { Sifter } from '@orchidjs/sifter';
|
|
import { escape_regex } from '@orchidjs/unicode-variants';
|
|
import { TomInput, TomArgObject, TomOption, TomOptions, TomCreateFilter, TomCreateCallback, TomItem, TomSettings, TomTemplateNames, TomClearFilter, RecursivePartial } from './types/index.ts';
|
|
import {highlight, removeHighlight} from './contrib/highlight.ts';
|
|
import * as constants from './constants.ts';
|
|
import getSettings from './getSettings.ts';
|
|
import {
|
|
hash_key,
|
|
get_hash,
|
|
escape_html,
|
|
debounce_events,
|
|
getSelection,
|
|
preventDefault,
|
|
addEvent,
|
|
loadDebounce,
|
|
timeout,
|
|
isKeyDown,
|
|
getId,
|
|
addSlashes,
|
|
append,
|
|
iterate
|
|
} from './utils.ts';
|
|
|
|
import {
|
|
getDom,
|
|
isHtmlString,
|
|
escapeQuery,
|
|
triggerEvent,
|
|
applyCSS,
|
|
addClasses,
|
|
removeClasses,
|
|
parentMatch,
|
|
getTail,
|
|
isEmptyObject,
|
|
nodeIndex,
|
|
setAttr,
|
|
replaceNode
|
|
} from './vanilla.ts';
|
|
|
|
var instance_i = 0;
|
|
|
|
export default class TomSelect extends MicroPlugin(MicroEvent){
|
|
|
|
public control_input : HTMLInputElement;
|
|
public wrapper : HTMLElement;
|
|
public dropdown : HTMLElement;
|
|
public control : HTMLElement;
|
|
public dropdown_content : HTMLElement;
|
|
public focus_node : HTMLElement;
|
|
|
|
public order : number = 0;
|
|
public settings : TomSettings;
|
|
public input : TomInput;
|
|
public tabIndex : number;
|
|
public is_select_tag : boolean;
|
|
public rtl : boolean;
|
|
private inputId : string;
|
|
|
|
private _destroy !: () => void;
|
|
public sifter : Sifter;
|
|
|
|
|
|
public isOpen : boolean = false;
|
|
public isDisabled : boolean = false;
|
|
public isReadOnly : boolean = false;
|
|
public isRequired : boolean;
|
|
public isInvalid : boolean = false; // @deprecated 1.8
|
|
public isValid : boolean = true;
|
|
public isLocked : boolean = false;
|
|
public isFocused : boolean = false;
|
|
public isInputHidden : boolean = false;
|
|
public isSetup : boolean = false;
|
|
public ignoreFocus : boolean = false;
|
|
public ignoreHover : boolean = false;
|
|
public hasOptions : boolean = false;
|
|
public currentResults ?: ReturnType<Sifter['search']>;
|
|
public lastValue : string = '';
|
|
public caretPos : number = 0;
|
|
public loading : number = 0;
|
|
public loadedSearches : { [key: string]: boolean } = {};
|
|
|
|
public activeOption : null|HTMLElement = null;
|
|
public activeItems : TomItem[] = [];
|
|
|
|
public optgroups : TomOptions = {};
|
|
public options : TomOptions = {};
|
|
public userOptions : {[key:string]:boolean} = {};
|
|
public items : string[] = [];
|
|
|
|
private refreshTimeout : null|number = null;
|
|
|
|
|
|
constructor( input_arg: string|TomInput, user_settings:RecursivePartial<TomSettings> ){
|
|
super();
|
|
|
|
instance_i++;
|
|
|
|
var dir;
|
|
var input = getDom( input_arg ) as TomInput;
|
|
|
|
if( input.tomselect ){
|
|
throw new Error('Tom Select already initialized on this element');
|
|
}
|
|
|
|
|
|
input.tomselect = this;
|
|
|
|
|
|
// detect rtl environment
|
|
var computedStyle = window.getComputedStyle && window.getComputedStyle(input, null);
|
|
dir = computedStyle.getPropertyValue('direction');
|
|
|
|
// setup default state
|
|
const settings = getSettings( input, user_settings );
|
|
this.settings = settings;
|
|
this.input = input;
|
|
this.tabIndex = input.tabIndex || 0;
|
|
this.is_select_tag = input.tagName.toLowerCase() === 'select';
|
|
this.rtl = /rtl/i.test(dir);
|
|
this.inputId = getId(input, 'tomselect-'+instance_i);
|
|
this.isRequired = input.required;
|
|
|
|
|
|
// search system
|
|
this.sifter = new Sifter(this.options, {diacritics: settings.diacritics});
|
|
|
|
// option-dependent defaults
|
|
settings.mode = settings.mode || (settings.maxItems === 1 ? 'single' : 'multi');
|
|
if (typeof settings.hideSelected !== 'boolean') {
|
|
settings.hideSelected = settings.mode === 'multi';
|
|
}
|
|
|
|
if( typeof settings.hidePlaceholder !== 'boolean' ){
|
|
settings.hidePlaceholder = settings.mode !== 'multi';
|
|
}
|
|
|
|
// set up createFilter callback
|
|
var filter = settings.createFilter;
|
|
if( typeof filter !== 'function' ){
|
|
|
|
if( typeof filter === 'string' ){
|
|
filter = new RegExp(filter);
|
|
}
|
|
|
|
if( filter instanceof RegExp ){
|
|
settings.createFilter = (input: string) => (filter as RegExp).test(input);
|
|
}else{
|
|
settings.createFilter = (value: string) => {
|
|
return this.settings.duplicates || !this.options[value];
|
|
};
|
|
}
|
|
}
|
|
|
|
|
|
this.initializePlugins(settings.plugins);
|
|
this.setupCallbacks();
|
|
this.setupTemplates();
|
|
|
|
|
|
// Create all elements
|
|
const wrapper = getDom('<div>');
|
|
const control = getDom('<div>');
|
|
const dropdown = this._render('dropdown');
|
|
const dropdown_content = getDom(`<div role="listbox" tabindex="-1">`);
|
|
|
|
const classes = this.input.getAttribute('class') || '';
|
|
const inputMode = settings.mode;
|
|
|
|
var control_input: HTMLInputElement;
|
|
|
|
|
|
addClasses( wrapper, settings.wrapperClass, classes, inputMode);
|
|
|
|
|
|
addClasses(control,settings.controlClass);
|
|
append( wrapper, control );
|
|
|
|
|
|
addClasses(dropdown, settings.dropdownClass, inputMode);
|
|
if( settings.copyClassesToDropdown ){
|
|
addClasses( dropdown, classes);
|
|
}
|
|
|
|
|
|
addClasses(dropdown_content, settings.dropdownContentClass);
|
|
append( dropdown, dropdown_content );
|
|
|
|
getDom( settings.dropdownParent || wrapper ).appendChild( dropdown );
|
|
|
|
|
|
// default controlInput
|
|
if( isHtmlString(settings.controlInput) ){
|
|
control_input = getDom(settings.controlInput ) as HTMLInputElement;
|
|
|
|
// set attributes
|
|
var attrs = ['autocorrect','autocapitalize','autocomplete','spellcheck'];
|
|
iterate(attrs,(attr:string) => {
|
|
if( input.getAttribute(attr) ){
|
|
setAttr(control_input,{[attr]:input.getAttribute(attr)});
|
|
}
|
|
});
|
|
|
|
control_input.tabIndex = -1;
|
|
control.appendChild( control_input );
|
|
this.focus_node = control_input;
|
|
|
|
// dom element
|
|
}else if( settings.controlInput ){
|
|
control_input = getDom( settings.controlInput ) as HTMLInputElement;
|
|
this.focus_node = control_input;
|
|
|
|
}else{
|
|
control_input = getDom('<input/>') as HTMLInputElement;
|
|
this.focus_node = control;
|
|
}
|
|
|
|
this.wrapper = wrapper;
|
|
this.dropdown = dropdown;
|
|
this.dropdown_content = dropdown_content;
|
|
this.control = control;
|
|
this.control_input = control_input;
|
|
|
|
this.setup();
|
|
}
|
|
|
|
/**
|
|
* set up event bindings.
|
|
*
|
|
*/
|
|
setup(){
|
|
|
|
const self = this;
|
|
const settings = self.settings;
|
|
const control_input = self.control_input;
|
|
const dropdown = self.dropdown;
|
|
const dropdown_content = self.dropdown_content;
|
|
const wrapper = self.wrapper;
|
|
const control = self.control;
|
|
const input = self.input;
|
|
const focus_node = self.focus_node;
|
|
const passive_event = { passive: true };
|
|
const listboxId = self.inputId +'-ts-dropdown';
|
|
|
|
|
|
setAttr(dropdown_content,{
|
|
id: listboxId
|
|
});
|
|
|
|
setAttr(focus_node,{
|
|
role:'combobox',
|
|
'aria-haspopup':'listbox',
|
|
'aria-expanded':'false',
|
|
'aria-controls':listboxId
|
|
});
|
|
|
|
const control_id = getId(focus_node,self.inputId + '-ts-control');
|
|
const query = "label[for='"+escapeQuery(self.inputId)+"']";
|
|
const label = document.querySelector(query);
|
|
const label_click = self.focus.bind(self);
|
|
if( label ){
|
|
addEvent(label,'click', label_click );
|
|
setAttr(label,{for:control_id});
|
|
const label_id = getId(label,self.inputId+'-ts-label');
|
|
setAttr(focus_node,{'aria-labelledby':label_id});
|
|
setAttr(dropdown_content,{'aria-labelledby':label_id});
|
|
}
|
|
|
|
wrapper.style.width = input.style.width;
|
|
|
|
if (self.plugins.names.length) {
|
|
const classes_plugins = 'plugin-' + self.plugins.names.join(' plugin-');
|
|
addClasses( [wrapper,dropdown], classes_plugins);
|
|
}
|
|
|
|
if ((settings.maxItems === null || settings.maxItems > 1) && self.is_select_tag ){
|
|
setAttr(input,{multiple:'multiple'});
|
|
}
|
|
|
|
if (settings.placeholder) {
|
|
setAttr(control_input,{placeholder:settings.placeholder});
|
|
}
|
|
|
|
// if splitOn was not passed in, construct it from the delimiter to allow pasting universally
|
|
if (!settings.splitOn && settings.delimiter) {
|
|
settings.splitOn = new RegExp('\\s*' + escape_regex(settings.delimiter) + '+\\s*');
|
|
}
|
|
|
|
// debounce user defined load() if loadThrottle > 0
|
|
// after initializePlugins() so plugins can create/modify user defined loaders
|
|
if( settings.load && settings.loadThrottle ){
|
|
settings.load = loadDebounce(settings.load,settings.loadThrottle)
|
|
}
|
|
|
|
addEvent(dropdown,'mousemove', () => {
|
|
self.ignoreHover = false;
|
|
});
|
|
|
|
addEvent(dropdown,'mouseenter', (e) => {
|
|
|
|
var target_match = parentMatch(e.target as HTMLElement, '[data-selectable]', dropdown);
|
|
if( target_match ) self.onOptionHover( e as MouseEvent, target_match );
|
|
|
|
}, {capture:true});
|
|
|
|
// clicking on an option should select it
|
|
addEvent(dropdown,'click',(evt) => {
|
|
const option = parentMatch(evt.target as HTMLElement, '[data-selectable]');
|
|
if( option ){
|
|
self.onOptionSelect( evt as MouseEvent, option );
|
|
preventDefault(evt,true);
|
|
}
|
|
});
|
|
|
|
addEvent(control,'click', (evt) => {
|
|
|
|
var target_match = parentMatch( evt.target as HTMLElement, '[data-ts-item]', control);
|
|
if( target_match && self.onItemSelect(evt as MouseEvent, target_match as TomItem) ){
|
|
preventDefault(evt,true);
|
|
return;
|
|
}
|
|
|
|
// retain focus (see control_input mousedown)
|
|
if( control_input.value != '' ){
|
|
return;
|
|
}
|
|
|
|
self.onClick();
|
|
preventDefault(evt,true);
|
|
});
|
|
|
|
|
|
// keydown on focus_node for arrow_down/arrow_up
|
|
addEvent(focus_node,'keydown', (e) => self.onKeyDown(e as KeyboardEvent) );
|
|
|
|
// keypress and input/keyup
|
|
addEvent(control_input,'keypress', (e) => self.onKeyPress(e as KeyboardEvent) );
|
|
addEvent(control_input,'input', (e) => self.onInput(e as KeyboardEvent) );
|
|
addEvent(focus_node,'blur', (e) => self.onBlur(e as FocusEvent) );
|
|
addEvent(focus_node,'focus', (e) => self.onFocus(e as MouseEvent) );
|
|
addEvent(control_input,'paste', (e) => self.onPaste(e as MouseEvent) );
|
|
|
|
|
|
const doc_mousedown = (evt:Event) => {
|
|
|
|
// blur if target is outside of this instance
|
|
// dropdown is not always inside wrapper
|
|
const target = evt.composedPath()[0];
|
|
if( !wrapper.contains(target as HTMLElement) && !dropdown.contains(target as HTMLElement) ){
|
|
if (self.isFocused) {
|
|
self.blur();
|
|
}
|
|
self.inputState();
|
|
return;
|
|
}
|
|
|
|
|
|
// retain focus by preventing native handling. if the
|
|
// event target is the input it should not be modified.
|
|
// otherwise, text selection within the input won't work.
|
|
// Fixes bug #212 which is no covered by tests
|
|
if( target == control_input && self.isOpen ){
|
|
evt.stopPropagation();
|
|
|
|
// clicking anywhere in the control should not blur the control_input (which would close the dropdown)
|
|
}else{
|
|
preventDefault(evt,true);
|
|
}
|
|
|
|
};
|
|
|
|
const win_scroll = () => {
|
|
if (self.isOpen) {
|
|
self.positionDropdown();
|
|
}
|
|
};
|
|
|
|
|
|
addEvent(document,'mousedown', doc_mousedown);
|
|
addEvent(window,'scroll', win_scroll, passive_event);
|
|
addEvent(window,'resize', win_scroll, passive_event);
|
|
|
|
this._destroy = () => {
|
|
document.removeEventListener('mousedown',doc_mousedown);
|
|
window.removeEventListener('scroll',win_scroll);
|
|
window.removeEventListener('resize',win_scroll);
|
|
if( label ) label.removeEventListener('click',label_click);
|
|
};
|
|
|
|
// store original html and tab index so that they can be
|
|
// restored when the destroy() method is called.
|
|
this.revertSettings = {
|
|
innerHTML : input.innerHTML,
|
|
tabIndex : input.tabIndex
|
|
};
|
|
|
|
|
|
input.tabIndex = -1;
|
|
input.insertAdjacentElement('afterend', self.wrapper);
|
|
|
|
self.sync(false);
|
|
settings.items = [];
|
|
delete settings.optgroups;
|
|
delete settings.options;
|
|
|
|
addEvent(input,'invalid', () => {
|
|
if( self.isValid ){
|
|
self.isValid = false;
|
|
self.isInvalid = true;
|
|
self.refreshState();
|
|
}
|
|
});
|
|
|
|
self.updateOriginalInput();
|
|
self.refreshItems();
|
|
self.close(false);
|
|
self.inputState();
|
|
self.isSetup = true;
|
|
|
|
if( input.disabled ){
|
|
self.disable();
|
|
}else if( input.readOnly ){
|
|
self.setReadOnly(true);
|
|
}else{
|
|
self.enable(); //sets tabIndex
|
|
}
|
|
|
|
self.on('change', this.onChange);
|
|
|
|
addClasses(input,'tomselected','ts-hidden-accessible');
|
|
self.trigger('initialize');
|
|
|
|
// preload options
|
|
if (settings.preload === true) {
|
|
self.preload();
|
|
}
|
|
|
|
}
|
|
|
|
|
|
/**
|
|
* Register options and optgroups
|
|
*
|
|
*/
|
|
setupOptions(options:TomOption[] = [], optgroups:TomOption[] = []){
|
|
|
|
// build options table
|
|
this.addOptions(options);
|
|
|
|
|
|
// build optgroup table
|
|
iterate( optgroups, (optgroup:TomOption) => {
|
|
this.registerOptionGroup(optgroup);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Sets up default rendering functions.
|
|
*/
|
|
setupTemplates() {
|
|
var self = this;
|
|
var field_label = self.settings.labelField;
|
|
var field_optgroup = self.settings.optgroupLabelField;
|
|
|
|
var templates = {
|
|
'optgroup': (data:TomOption) => {
|
|
let optgroup = document.createElement('div');
|
|
optgroup.className = 'optgroup';
|
|
optgroup.appendChild(data.options);
|
|
return optgroup;
|
|
|
|
},
|
|
'optgroup_header': (data:TomOption, escape:typeof escape_html) => {
|
|
return '<div class="optgroup-header">' + escape(data[field_optgroup]) + '</div>';
|
|
},
|
|
'option': (data:TomOption, escape:typeof escape_html) => {
|
|
return '<div>' + escape(data[field_label]) + '</div>';
|
|
},
|
|
'item': (data:TomOption, escape:typeof escape_html) => {
|
|
return '<div>' + escape(data[field_label]) + '</div>';
|
|
},
|
|
'option_create': (data:TomOption, escape:typeof escape_html) => {
|
|
return '<div class="create">Add <strong>' + escape(data.input) + '</strong>…</div>';
|
|
},
|
|
'no_results':() => {
|
|
return '<div class="no-results">No results found</div>';
|
|
},
|
|
'loading':() => {
|
|
return '<div class="spinner"></div>';
|
|
},
|
|
'not_loading':() => {},
|
|
'dropdown':() => {
|
|
return '<div></div>';
|
|
}
|
|
};
|
|
|
|
|
|
self.settings.render = Object.assign({}, templates, self.settings.render);
|
|
}
|
|
|
|
/**
|
|
* Maps fired events to callbacks provided
|
|
* in the settings used when creating the control.
|
|
*/
|
|
setupCallbacks() {
|
|
var key, fn;
|
|
var callbacks:{[key:string]:string} = {
|
|
'initialize' : 'onInitialize',
|
|
'change' : 'onChange',
|
|
'item_add' : 'onItemAdd',
|
|
'item_remove' : 'onItemRemove',
|
|
'item_select' : 'onItemSelect',
|
|
'clear' : 'onClear',
|
|
'option_add' : 'onOptionAdd',
|
|
'option_remove' : 'onOptionRemove',
|
|
'option_clear' : 'onOptionClear',
|
|
'optgroup_add' : 'onOptionGroupAdd',
|
|
'optgroup_remove' : 'onOptionGroupRemove',
|
|
'optgroup_clear' : 'onOptionGroupClear',
|
|
'dropdown_open' : 'onDropdownOpen',
|
|
'dropdown_close' : 'onDropdownClose',
|
|
'type' : 'onType',
|
|
'load' : 'onLoad',
|
|
'focus' : 'onFocus',
|
|
'blur' : 'onBlur'
|
|
};
|
|
|
|
for (key in callbacks) {
|
|
|
|
fn = this.settings[callbacks[key] as (keyof TomSettings)];
|
|
if (fn) this.on(key, fn);
|
|
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Sync the Tom Select instance with the original input or select
|
|
*
|
|
*/
|
|
sync(get_settings:boolean=true):void{
|
|
const self = this;
|
|
const settings = get_settings ? getSettings( self.input, {delimiter:self.settings.delimiter} as RecursivePartial<TomSettings> ) : self.settings;
|
|
|
|
self.setupOptions(settings.options,settings.optgroups);
|
|
|
|
self.setValue(settings.items||[],true); // silent prevents recursion
|
|
|
|
self.lastQuery = null; // so updated options will be displayed in dropdown
|
|
}
|
|
|
|
/**
|
|
* Triggered when the main control element
|
|
* has a click event.
|
|
*
|
|
*/
|
|
onClick():void {
|
|
var self = this;
|
|
|
|
if( self.activeItems.length > 0 ){
|
|
self.clearActiveItems();
|
|
self.focus();
|
|
return;
|
|
}
|
|
|
|
if( self.isFocused && self.isOpen ){
|
|
self.blur();
|
|
} else {
|
|
self.focus();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @deprecated v1.7
|
|
*
|
|
*/
|
|
onMouseDown():void {}
|
|
|
|
/**
|
|
* Triggered when the value of the control has been changed.
|
|
* This should propagate the event to the original DOM
|
|
* input / select element.
|
|
*/
|
|
onChange() {
|
|
triggerEvent(this.input, 'input');
|
|
triggerEvent(this.input, 'change');
|
|
}
|
|
|
|
/**
|
|
* Triggered on <input> paste.
|
|
*
|
|
*/
|
|
onPaste(e:MouseEvent|KeyboardEvent):void {
|
|
var self = this;
|
|
|
|
if( self.isInputHidden || self.isLocked ){
|
|
preventDefault(e);
|
|
return;
|
|
}
|
|
|
|
// If a regex or string is included, this will split the pasted
|
|
// input and create Items for each separate value
|
|
if( !self.settings.splitOn ){
|
|
return;
|
|
}
|
|
|
|
// Wait for pasted text to be recognized in value
|
|
setTimeout(() => {
|
|
var pastedText = self.inputValue();
|
|
if( !pastedText.match(self.settings.splitOn)){
|
|
return
|
|
}
|
|
|
|
var splitInput = pastedText.trim().split(self.settings.splitOn);
|
|
iterate( splitInput, (piece:string) => {
|
|
|
|
const hash = hash_key(piece);
|
|
if( hash ){
|
|
if( this.options[piece] ){
|
|
self.addItem(piece);
|
|
}else{
|
|
self.createItem(piece);
|
|
}
|
|
}
|
|
});
|
|
}, 0);
|
|
|
|
}
|
|
|
|
/**
|
|
* Triggered on <input> keypress.
|
|
*
|
|
*/
|
|
onKeyPress(e:KeyboardEvent):void {
|
|
var self = this;
|
|
if(self.isLocked){
|
|
preventDefault(e);
|
|
return;
|
|
}
|
|
var character = String.fromCharCode(e.keyCode || e.which);
|
|
if (self.settings.create && self.settings.mode === 'multi' && character === self.settings.delimiter) {
|
|
self.createItem();
|
|
preventDefault(e);
|
|
return;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Triggered on <input> keydown.
|
|
*
|
|
*/
|
|
onKeyDown(e:KeyboardEvent):void {
|
|
var self = this;
|
|
|
|
self.ignoreHover = true;
|
|
|
|
if (self.isLocked) {
|
|
if (e.keyCode !== constants.KEY_TAB) {
|
|
preventDefault(e);
|
|
}
|
|
return;
|
|
}
|
|
|
|
switch (e.keyCode) {
|
|
|
|
// ctrl+A: select all
|
|
case constants.KEY_A:
|
|
if( isKeyDown(constants.KEY_SHORTCUT,e) ){
|
|
if( self.control_input.value == '' ){
|
|
preventDefault(e);
|
|
self.selectAll();
|
|
return;
|
|
}
|
|
}
|
|
break;
|
|
|
|
// esc: close dropdown
|
|
case constants.KEY_ESC:
|
|
if (self.isOpen) {
|
|
preventDefault(e,true);
|
|
self.close();
|
|
}
|
|
self.clearActiveItems();
|
|
return;
|
|
|
|
// down: open dropdown or move selection down
|
|
case constants.KEY_DOWN:
|
|
if (!self.isOpen && self.hasOptions) {
|
|
self.open();
|
|
} else if (self.activeOption) {
|
|
let next = self.getAdjacent(self.activeOption, 1);
|
|
if (next) self.setActiveOption(next);
|
|
}
|
|
preventDefault(e);
|
|
return;
|
|
|
|
// up: move selection up
|
|
case constants.KEY_UP:
|
|
if (self.activeOption) {
|
|
let prev = self.getAdjacent(self.activeOption, -1);
|
|
if (prev) self.setActiveOption(prev);
|
|
}
|
|
preventDefault(e);
|
|
return;
|
|
|
|
// return: select active option
|
|
case constants.KEY_RETURN:
|
|
if( self.canSelect(self.activeOption) ){
|
|
self.onOptionSelect(e,self.activeOption!);
|
|
preventDefault(e);
|
|
|
|
// if the option_create=null, the dropdown might be closed
|
|
}else if (self.settings.create && self.createItem()) {
|
|
preventDefault(e);
|
|
|
|
// don't submit form when searching for a value
|
|
}else if( document.activeElement == self.control_input && self.isOpen ){
|
|
preventDefault(e);
|
|
}
|
|
|
|
return;
|
|
|
|
// left: modifiy item selection to the left
|
|
case constants.KEY_LEFT:
|
|
self.advanceSelection(-1, e);
|
|
return;
|
|
|
|
// right: modifiy item selection to the right
|
|
case constants.KEY_RIGHT:
|
|
self.advanceSelection(1, e);
|
|
return;
|
|
|
|
// tab: select active option and/or create item
|
|
case constants.KEY_TAB:
|
|
|
|
if( self.settings.selectOnTab ){
|
|
if( self.canSelect(self.activeOption) ){
|
|
self.onOptionSelect(e,self.activeOption!);
|
|
|
|
// prevent default [tab] behaviour of jump to the next field
|
|
// if select isFull, then the dropdown won't be open and [tab] will work normally
|
|
preventDefault(e);
|
|
}
|
|
if (self.settings.create && self.createItem()) {
|
|
preventDefault(e);
|
|
}
|
|
}
|
|
return;
|
|
|
|
// delete|backspace: delete items
|
|
case constants.KEY_BACKSPACE:
|
|
case constants.KEY_DELETE:
|
|
self.deleteSelection(e);
|
|
return;
|
|
}
|
|
|
|
// don't enter text in the control_input when active items are selected
|
|
if( self.isInputHidden && !isKeyDown(constants.KEY_SHORTCUT,e) ){
|
|
preventDefault(e);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Triggered on <input> keyup.
|
|
*
|
|
*/
|
|
onInput(e:MouseEvent|KeyboardEvent):void {
|
|
|
|
if( this.isLocked ){
|
|
return;
|
|
}
|
|
|
|
const value = this.inputValue();
|
|
if( this.lastValue === value ) return;
|
|
this.lastValue = value;
|
|
|
|
if( value == '' ){
|
|
this._onInput();
|
|
return;
|
|
}
|
|
|
|
if( this.refreshTimeout ){
|
|
window.clearTimeout(this.refreshTimeout);
|
|
}
|
|
|
|
this.refreshTimeout = timeout(()=> {
|
|
this.refreshTimeout = null;
|
|
this._onInput();
|
|
}, this.settings.refreshThrottle);
|
|
}
|
|
|
|
_onInput():void {
|
|
const value = this.lastValue;
|
|
|
|
if( this.settings.shouldLoad.call(this,value) ){
|
|
this.load(value);
|
|
}
|
|
|
|
this.refreshOptions();
|
|
this.trigger('type', value);
|
|
}
|
|
|
|
/**
|
|
* Triggered when the user rolls over
|
|
* an option in the autocomplete dropdown menu.
|
|
*
|
|
*/
|
|
onOptionHover( evt:MouseEvent|KeyboardEvent, option:HTMLElement ):void{
|
|
if( this.ignoreHover ) return;
|
|
this.setActiveOption(option, false);
|
|
}
|
|
|
|
/**
|
|
* Triggered on <input> focus.
|
|
*
|
|
*/
|
|
onFocus(e?:MouseEvent|KeyboardEvent):void {
|
|
var self = this;
|
|
var wasFocused = self.isFocused;
|
|
|
|
if( self.isDisabled || self.isReadOnly ){
|
|
self.blur();
|
|
preventDefault(e);
|
|
return;
|
|
}
|
|
|
|
if (self.ignoreFocus) return;
|
|
self.isFocused = true;
|
|
if( self.settings.preload === 'focus' ) self.preload();
|
|
|
|
if (!wasFocused) self.trigger('focus');
|
|
|
|
if (!self.activeItems.length) {
|
|
self.inputState();
|
|
self.refreshOptions(!!self.settings.openOnFocus);
|
|
}
|
|
|
|
self.refreshState();
|
|
}
|
|
|
|
/**
|
|
* Triggered on <input> blur.
|
|
*
|
|
*/
|
|
onBlur(e?:FocusEvent):void {
|
|
|
|
if( document.hasFocus() === false ) return;
|
|
|
|
var self = this;
|
|
if (!self.isFocused) return;
|
|
self.isFocused = false;
|
|
self.ignoreFocus = false;
|
|
|
|
var deactivate = () => {
|
|
self.close();
|
|
self.setActiveItem();
|
|
self.setCaret(self.items.length);
|
|
self.trigger('blur');
|
|
};
|
|
|
|
if (self.settings.create && self.settings.createOnBlur) {
|
|
self.createItem(null, deactivate);
|
|
} else {
|
|
deactivate();
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* Triggered when the user clicks on an option
|
|
* in the autocomplete dropdown menu.
|
|
*
|
|
*/
|
|
onOptionSelect( evt:MouseEvent|KeyboardEvent, option:HTMLElement ){
|
|
var value, self = this;
|
|
|
|
|
|
// should not be possible to trigger a option under a disabled optgroup
|
|
if( option.parentElement && option.parentElement.matches('[data-disabled]') ){
|
|
return;
|
|
}
|
|
|
|
|
|
if( option.classList.contains('create') ){
|
|
self.createItem(null, () => {
|
|
if (self.settings.closeAfterSelect) {
|
|
self.close();
|
|
}
|
|
});
|
|
} else {
|
|
value = option.dataset.value;
|
|
if (typeof value !== 'undefined') {
|
|
self.lastQuery = null;
|
|
self.addItem(value);
|
|
if (self.settings.closeAfterSelect) {
|
|
self.close();
|
|
}
|
|
|
|
if( !self.settings.hideSelected && evt.type && /click/.test(evt.type) ){
|
|
self.setActiveOption(option);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Return true if the given option can be selected
|
|
*
|
|
*/
|
|
canSelect(option:HTMLElement|null):boolean{
|
|
|
|
if( this.isOpen && option && this.dropdown_content.contains(option) ) {
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
/**
|
|
* Triggered when the user clicks on an item
|
|
* that has been selected.
|
|
*
|
|
*/
|
|
onItemSelect( evt?:MouseEvent, item?:TomItem ):boolean{
|
|
var self = this;
|
|
|
|
if( !self.isLocked && self.settings.mode === 'multi' ){
|
|
preventDefault(evt);
|
|
self.setActiveItem(item, evt);
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
/**
|
|
* Determines whether or not to invoke
|
|
* the user-provided option provider / loader
|
|
*
|
|
* Note, there is a subtle difference between
|
|
* this.canLoad() and this.settings.shouldLoad();
|
|
*
|
|
* - settings.shouldLoad() is a user-input validator.
|
|
* When false is returned, the not_loading template
|
|
* will be added to the dropdown
|
|
*
|
|
* - canLoad() is lower level validator that checks
|
|
* the Tom Select instance. There is no inherent user
|
|
* feedback when canLoad returns false
|
|
*
|
|
*/
|
|
canLoad(value:string):boolean{
|
|
|
|
if( !this.settings.load ) return false;
|
|
if( this.loadedSearches.hasOwnProperty(value) ) return false;
|
|
|
|
return true;
|
|
}
|
|
|
|
/**
|
|
* Invokes the user-provided option provider / loader.
|
|
*
|
|
*/
|
|
load(value:string):void {
|
|
const self = this;
|
|
|
|
if( !self.canLoad(value) ) return;
|
|
|
|
addClasses(self.wrapper,self.settings.loadingClass);
|
|
self.loading++;
|
|
|
|
const callback = self.loadCallback.bind(self);
|
|
self.settings.load.call(self, value, callback);
|
|
}
|
|
|
|
/**
|
|
* Invoked by the user-provided option provider
|
|
*
|
|
*/
|
|
loadCallback( options:TomOption[], optgroups:TomOption[] ):void{
|
|
const self = this;
|
|
self.loading = Math.max(self.loading - 1, 0);
|
|
self.lastQuery = null;
|
|
|
|
self.clearActiveOption(); // when new results load, focus should be on first option
|
|
self.setupOptions(options,optgroups);
|
|
|
|
self.refreshOptions(self.isFocused && !self.isInputHidden);
|
|
|
|
if (!self.loading) {
|
|
removeClasses(self.wrapper,self.settings.loadingClass);
|
|
}
|
|
|
|
self.trigger('load', options, optgroups);
|
|
}
|
|
|
|
preload():void{
|
|
var classList = this.wrapper.classList;
|
|
if( classList.contains('preloaded') ) return;
|
|
classList.add('preloaded');
|
|
this.load('');
|
|
}
|
|
|
|
|
|
/**
|
|
* Sets the input field of the control to the specified value.
|
|
*
|
|
*/
|
|
setTextboxValue(value:string = '') {
|
|
var input = this.control_input;
|
|
var changed = input.value !== value;
|
|
if (changed) {
|
|
input.value = value;
|
|
triggerEvent(input,'update');
|
|
this.lastValue = value;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Returns the value of the control. If multiple items
|
|
* can be selected (e.g. <select multiple>), this returns
|
|
* an array. If only one item can be selected, this
|
|
* returns a string.
|
|
*
|
|
*/
|
|
getValue():string|string[] {
|
|
|
|
if( this.is_select_tag && this.input.hasAttribute('multiple')) {
|
|
return this.items;
|
|
}
|
|
|
|
return this.items.join(this.settings.delimiter);
|
|
}
|
|
|
|
/**
|
|
* Resets the selected items to the given value.
|
|
*
|
|
*/
|
|
setValue( value:string|string[], silent?:boolean ):void{
|
|
var events = silent ? [] : ['change'];
|
|
|
|
debounce_events(this, events,() => {
|
|
this.clear(silent);
|
|
this.addItems(value, silent);
|
|
});
|
|
}
|
|
|
|
|
|
/**
|
|
* Resets the number of max items to the given value
|
|
*
|
|
*/
|
|
setMaxItems(value:null|number){
|
|
if(value === 0) value = null; //reset to unlimited items.
|
|
this.settings.maxItems = value;
|
|
this.refreshState();
|
|
}
|
|
|
|
/**
|
|
* Sets the selected item.
|
|
*
|
|
*/
|
|
setActiveItem( item?:TomItem, e?:MouseEvent|KeyboardEvent ){
|
|
var self = this;
|
|
var eventName;
|
|
var i, begin, end, swap;
|
|
var last;
|
|
|
|
if (self.settings.mode === 'single') return;
|
|
|
|
// clear the active selection
|
|
if( !item ){
|
|
self.clearActiveItems();
|
|
if (self.isFocused) {
|
|
self.inputState();
|
|
}
|
|
return;
|
|
}
|
|
|
|
// modify selection
|
|
eventName = e && e.type.toLowerCase();
|
|
|
|
if (eventName === 'click' && isKeyDown('shiftKey',e) && self.activeItems.length) {
|
|
last = self.getLastActive();
|
|
begin = Array.prototype.indexOf.call(self.control.children, last);
|
|
end = Array.prototype.indexOf.call(self.control.children, item);
|
|
|
|
if (begin > end) {
|
|
swap = begin;
|
|
begin = end;
|
|
end = swap;
|
|
}
|
|
for (i = begin; i <= end; i++) {
|
|
item = self.control.children[i] as TomItem;
|
|
if (self.activeItems.indexOf(item) === -1) {
|
|
self.setActiveItemClass(item);
|
|
}
|
|
}
|
|
preventDefault(e);
|
|
} else if ((eventName === 'click' && isKeyDown(constants.KEY_SHORTCUT,e) ) || (eventName === 'keydown' && isKeyDown('shiftKey',e))) {
|
|
if( item.classList.contains('active') ){
|
|
self.removeActiveItem( item );
|
|
} else {
|
|
self.setActiveItemClass(item);
|
|
}
|
|
} else {
|
|
self.clearActiveItems();
|
|
self.setActiveItemClass(item);
|
|
}
|
|
|
|
// ensure control has focus
|
|
self.inputState();
|
|
if (!self.isFocused) {
|
|
self.focus();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Set the active and last-active classes
|
|
*
|
|
*/
|
|
setActiveItemClass( item:TomItem ){
|
|
const self = this;
|
|
const last_active = self.control.querySelector('.last-active');
|
|
if( last_active ) removeClasses(last_active as HTMLElement,'last-active');
|
|
|
|
addClasses(item,'active last-active');
|
|
self.trigger('item_select', item);
|
|
if( self.activeItems.indexOf(item) == -1 ){
|
|
self.activeItems.push( item );
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Remove active item
|
|
*
|
|
*/
|
|
removeActiveItem( item:TomItem ){
|
|
var idx = this.activeItems.indexOf(item);
|
|
this.activeItems.splice(idx, 1);
|
|
removeClasses(item,'active');
|
|
}
|
|
|
|
/**
|
|
* Clears all the active items
|
|
*
|
|
*/
|
|
clearActiveItems(){
|
|
removeClasses(this.activeItems,'active');
|
|
this.activeItems = [];
|
|
}
|
|
|
|
/**
|
|
* Sets the selected item in the dropdown menu
|
|
* of available options.
|
|
*
|
|
*/
|
|
setActiveOption( option:null|HTMLElement,scroll:boolean=true ):void{
|
|
|
|
if( option === this.activeOption ){
|
|
return;
|
|
}
|
|
|
|
this.clearActiveOption();
|
|
if( !option ) return;
|
|
|
|
this.activeOption = option;
|
|
setAttr(this.focus_node,{'aria-activedescendant':option.getAttribute('id')});
|
|
setAttr(option,{'aria-selected':'true'});
|
|
addClasses(option,'active');
|
|
if( scroll ) this.scrollToOption(option);
|
|
}
|
|
|
|
/**
|
|
* Sets the dropdown_content scrollTop to display the option
|
|
*
|
|
*/
|
|
scrollToOption( option:null|HTMLElement, behavior?:string ):void{
|
|
|
|
if( !option ) return;
|
|
|
|
const content = this.dropdown_content;
|
|
const height_menu = content.clientHeight;
|
|
const scrollTop = content.scrollTop || 0;
|
|
const height_item = option.offsetHeight;
|
|
const y = option.getBoundingClientRect().top - content.getBoundingClientRect().top + scrollTop;
|
|
|
|
if (y + height_item > height_menu + scrollTop) {
|
|
this.scroll(y - height_menu + height_item, behavior);
|
|
|
|
} else if (y < scrollTop) {
|
|
this.scroll(y, behavior);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Scroll the dropdown to the given position
|
|
*
|
|
*/
|
|
scroll( scrollTop:number, behavior?:string ):void{
|
|
const content = this.dropdown_content;
|
|
if( behavior ){
|
|
content.style.scrollBehavior = behavior;
|
|
}
|
|
content.scrollTop = scrollTop;
|
|
content.style.scrollBehavior = '';
|
|
}
|
|
|
|
/**
|
|
* Clears the active option
|
|
*
|
|
*/
|
|
clearActiveOption(){
|
|
if( this.activeOption ){
|
|
removeClasses(this.activeOption,'active');
|
|
setAttr(this.activeOption,{'aria-selected':null});
|
|
}
|
|
this.activeOption = null;
|
|
setAttr(this.focus_node,{'aria-activedescendant':null});
|
|
}
|
|
|
|
|
|
/**
|
|
* Selects all items (CTRL + A).
|
|
*/
|
|
selectAll() {
|
|
const self = this;
|
|
|
|
if (self.settings.mode === 'single') return;
|
|
|
|
const activeItems = self.controlChildren();
|
|
|
|
if( !activeItems.length ) return;
|
|
|
|
self.inputState();
|
|
self.close();
|
|
|
|
self.activeItems = activeItems;
|
|
iterate( activeItems, (item:TomItem) => {
|
|
self.setActiveItemClass(item);
|
|
});
|
|
|
|
}
|
|
|
|
/**
|
|
* Determines if the control_input should be in a hidden or visible state
|
|
*
|
|
*/
|
|
inputState(){
|
|
var self = this;
|
|
|
|
if( !self.control.contains(self.control_input) ) return;
|
|
|
|
setAttr(self.control_input,{placeholder:self.settings.placeholder});
|
|
|
|
if( self.activeItems.length > 0 || (!self.isFocused && self.settings.hidePlaceholder && self.items.length > 0) ){
|
|
self.setTextboxValue();
|
|
self.isInputHidden = true;
|
|
|
|
}else{
|
|
|
|
if( self.settings.hidePlaceholder && self.items.length > 0 ){
|
|
setAttr(self.control_input,{placeholder:''});
|
|
}
|
|
self.isInputHidden = false;
|
|
}
|
|
|
|
self.wrapper.classList.toggle('input-hidden', self.isInputHidden );
|
|
}
|
|
|
|
/**
|
|
* Get the input value
|
|
*/
|
|
inputValue(){
|
|
return this.control_input.value.trim();
|
|
}
|
|
|
|
/**
|
|
* Gives the control focus.
|
|
*/
|
|
focus() {
|
|
var self = this;
|
|
if( self.isDisabled || self.isReadOnly) return;
|
|
|
|
self.ignoreFocus = true;
|
|
|
|
if( self.control_input.offsetWidth ){
|
|
self.control_input.focus();
|
|
}else{
|
|
self.focus_node.focus();
|
|
}
|
|
|
|
setTimeout(() => {
|
|
self.ignoreFocus = false;
|
|
self.onFocus();
|
|
}, 0);
|
|
}
|
|
|
|
/**
|
|
* Forces the control out of focus.
|
|
*
|
|
*/
|
|
blur():void {
|
|
this.focus_node.blur();
|
|
this.onBlur();
|
|
}
|
|
|
|
/**
|
|
* Returns a function that scores an object
|
|
* to show how good of a match it is to the
|
|
* provided query.
|
|
*
|
|
* @return {function}
|
|
*/
|
|
getScoreFunction(query:string) {
|
|
return this.sifter.getScoreFunction(query, this.getSearchOptions());
|
|
}
|
|
|
|
/**
|
|
* Returns search options for sifter (the system
|
|
* for scoring and sorting results).
|
|
*
|
|
* @see https://github.com/orchidjs/sifter.js
|
|
* @return {object}
|
|
*/
|
|
getSearchOptions() {
|
|
var settings = this.settings;
|
|
var sort = settings.sortField;
|
|
if (typeof settings.sortField === 'string') {
|
|
sort = [{field: settings.sortField}];
|
|
}
|
|
|
|
return {
|
|
fields : settings.searchField,
|
|
conjunction : settings.searchConjunction,
|
|
sort : sort,
|
|
nesting : settings.nesting
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Searches through available options and returns
|
|
* a sorted array of matches.
|
|
*
|
|
*/
|
|
search(query:string) : ReturnType<Sifter['search']>{
|
|
var result, calculateScore;
|
|
var self = this;
|
|
var options = this.getSearchOptions();
|
|
|
|
// validate user-provided result scoring function
|
|
if ( self.settings.score ){
|
|
calculateScore = self.settings.score.call(self,query);
|
|
if (typeof calculateScore !== 'function') {
|
|
throw new Error('Tom Select "score" setting must be a function that returns a function');
|
|
}
|
|
}
|
|
|
|
// perform search
|
|
if (query !== self.lastQuery) {
|
|
self.lastQuery = query;
|
|
result = self.sifter.search(query, Object.assign(options, {score: calculateScore}));
|
|
self.currentResults = result;
|
|
} else {
|
|
result = Object.assign( {}, self.currentResults);
|
|
}
|
|
|
|
// filter out selected items
|
|
if( self.settings.hideSelected ){
|
|
result.items = result.items.filter((item) => {
|
|
let hashed = hash_key(item.id);
|
|
return !(hashed && self.items.indexOf(hashed) !== -1 );
|
|
});
|
|
}
|
|
|
|
return result;
|
|
}
|
|
|
|
/**
|
|
* Refreshes the list of available options shown
|
|
* in the autocomplete dropdown menu.
|
|
*
|
|
*/
|
|
refreshOptions( triggerDropdown:boolean = true ){
|
|
var i, j, k, n, optgroup, optgroups, html:DocumentFragment, has_create_option, active_group;
|
|
var create;
|
|
|
|
type Group = {fragment:DocumentFragment,order:number,optgroup:string}
|
|
const groups: {[key:string]:number} = {};
|
|
const groups_order:Group[] = [];
|
|
|
|
var self = this;
|
|
var query = self.inputValue();
|
|
const same_query = query === self.lastQuery || (query == '' && self.lastQuery == null);
|
|
var results = self.search(query);
|
|
var active_option:HTMLElement|null = null;
|
|
var show_dropdown = self.settings.shouldOpen || false;
|
|
var dropdown_content = self.dropdown_content;
|
|
|
|
|
|
if( same_query ){
|
|
active_option = self.activeOption;
|
|
|
|
if( active_option ){
|
|
active_group = active_option.closest('[data-group]') as HTMLElement;
|
|
}
|
|
}
|
|
|
|
// build markup
|
|
n = results.items.length;
|
|
if (typeof self.settings.maxOptions === 'number') {
|
|
n = Math.min(n, self.settings.maxOptions);
|
|
}
|
|
|
|
if( n > 0 ){
|
|
show_dropdown = true;
|
|
}
|
|
|
|
// get fragment for group and the position of the group in group_order
|
|
const getGroupFragment = (optgroup:string,order:number):[number,DocumentFragment] => {
|
|
|
|
let group_order_i = groups[optgroup];
|
|
|
|
if( group_order_i !== undefined ){
|
|
let order_group = groups_order[group_order_i];
|
|
if( order_group !== undefined ){
|
|
return [group_order_i,order_group.fragment];
|
|
}
|
|
}
|
|
|
|
let group_fragment = document.createDocumentFragment();
|
|
group_order_i = groups_order.length;
|
|
groups_order.push({fragment:group_fragment,order,optgroup});
|
|
|
|
return [group_order_i,group_fragment]
|
|
}
|
|
|
|
// render and group available options individually
|
|
for (i = 0; i < n; i++) {
|
|
|
|
// get option dom element
|
|
let item = results.items[i];
|
|
if( !item ) continue;
|
|
|
|
let opt_value = item.id;
|
|
let option = self.options[opt_value];
|
|
|
|
if( option === undefined ) continue;
|
|
|
|
let opt_hash = get_hash(opt_value);
|
|
let option_el = self.getOption(opt_hash,true) as HTMLElement;
|
|
|
|
// toggle 'selected' class
|
|
if( !self.settings.hideSelected ){
|
|
option_el.classList.toggle('selected', self.items.includes(opt_hash) );
|
|
}
|
|
|
|
optgroup = option[self.settings.optgroupField] || '';
|
|
optgroups = Array.isArray(optgroup) ? optgroup : [optgroup];
|
|
|
|
|
|
for (j = 0, k = optgroups && optgroups.length; j < k; j++) {
|
|
optgroup = optgroups[j];
|
|
|
|
let order = option.$order;
|
|
let self_optgroup = self.optgroups[optgroup];
|
|
if( self_optgroup === undefined ){
|
|
optgroup = '';
|
|
}else{
|
|
order = self_optgroup.$order;
|
|
}
|
|
|
|
const [group_order_i,group_fragment] = getGroupFragment(optgroup,order);
|
|
|
|
|
|
// nodes can only have one parent, so if the option is in mutple groups, we need a clone
|
|
if( j > 0 ){
|
|
option_el = option_el.cloneNode(true) as HTMLElement;
|
|
setAttr(option_el,{id: option.$id+'-clone-'+j,'aria-selected':null});
|
|
option_el.classList.add('ts-cloned');
|
|
removeClasses(option_el,'active');
|
|
|
|
|
|
// make sure we keep the activeOption in the same group
|
|
if( self.activeOption && self.activeOption.dataset.value == opt_value ){
|
|
if( active_group && active_group.dataset.group === optgroup.toString() ){
|
|
active_option = option_el;
|
|
}
|
|
}
|
|
}
|
|
|
|
group_fragment.appendChild(option_el);
|
|
if( optgroup != '' ){
|
|
groups[optgroup] = group_order_i;
|
|
}
|
|
}
|
|
}
|
|
|
|
// sort optgroups
|
|
if( self.settings.lockOptgroupOrder ){
|
|
groups_order.sort((a, b) => {
|
|
return a.order - b.order;
|
|
});
|
|
}
|
|
|
|
// render optgroup headers & join groups
|
|
html = document.createDocumentFragment();
|
|
iterate( groups_order, (group_order:Group) => {
|
|
|
|
let group_fragment = group_order.fragment;
|
|
let optgroup = group_order.optgroup
|
|
|
|
if( !group_fragment || !group_fragment.children.length ) return;
|
|
|
|
let group_heading = self.optgroups[optgroup];
|
|
|
|
if( group_heading !== undefined ){
|
|
|
|
let group_options = document.createDocumentFragment();
|
|
let header = self.render('optgroup_header', group_heading);
|
|
append( group_options, header );
|
|
append( group_options, group_fragment );
|
|
|
|
let group_html = self.render('optgroup', {group:group_heading,options:group_options} );
|
|
|
|
append( html, group_html );
|
|
|
|
} else {
|
|
append( html, group_fragment );
|
|
}
|
|
});
|
|
|
|
dropdown_content.innerHTML = '';
|
|
append( dropdown_content, html );
|
|
|
|
// highlight matching terms inline
|
|
if (self.settings.highlight) {
|
|
removeHighlight( dropdown_content );
|
|
if (results.query.length && results.tokens.length) {
|
|
iterate( results.tokens, (tok) => {
|
|
highlight( dropdown_content, tok.regex);
|
|
});
|
|
}
|
|
}
|
|
|
|
// helper method for adding templates to dropdown
|
|
var add_template = (template:TomTemplateNames) => {
|
|
let content = self.render(template,{input:query});
|
|
if( content ){
|
|
show_dropdown = true;
|
|
dropdown_content.insertBefore(content, dropdown_content.firstChild);
|
|
}
|
|
return content;
|
|
};
|
|
|
|
|
|
// add loading message
|
|
if( self.loading ){
|
|
add_template('loading');
|
|
|
|
// invalid query
|
|
}else if( !self.settings.shouldLoad.call(self,query) ){
|
|
add_template('not_loading');
|
|
|
|
// add no_results message
|
|
}else if( results.items.length === 0 ){
|
|
add_template('no_results');
|
|
|
|
}
|
|
|
|
|
|
|
|
// add create option
|
|
has_create_option = self.canCreate(query);
|
|
if (has_create_option) {
|
|
create = add_template('option_create');
|
|
}
|
|
|
|
|
|
// activate
|
|
self.hasOptions = results.items.length > 0 || has_create_option;
|
|
if( show_dropdown ){
|
|
|
|
if (results.items.length > 0) {
|
|
|
|
if( !active_option && self.settings.mode === 'single' && self.items[0] != undefined ){
|
|
active_option = self.getOption(self.items[0]);
|
|
}
|
|
|
|
if( !dropdown_content.contains(active_option) ){
|
|
|
|
let active_index = 0;
|
|
if( create && !self.settings.addPrecedence ){
|
|
active_index = 1;
|
|
}
|
|
active_option = self.selectable()[active_index] as HTMLElement;
|
|
}
|
|
|
|
}else if( create ){
|
|
active_option = create;
|
|
}
|
|
|
|
if( triggerDropdown && !self.isOpen ){
|
|
self.open();
|
|
self.scrollToOption(active_option,'auto');
|
|
}
|
|
self.setActiveOption(active_option);
|
|
|
|
}else{
|
|
self.clearActiveOption();
|
|
if( triggerDropdown && self.isOpen ){
|
|
self.close(false); // if create_option=null, we want the dropdown to close but not reset the textbox value
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Return list of selectable options
|
|
*
|
|
*/
|
|
selectable():NodeList{
|
|
return this.dropdown_content.querySelectorAll('[data-selectable]');
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
* Adds an available option. If it already exists,
|
|
* nothing will happen. Note: this does not refresh
|
|
* the options list dropdown (use `refreshOptions`
|
|
* for that).
|
|
*
|
|
* Usage:
|
|
*
|
|
* this.addOption(data)
|
|
*
|
|
*/
|
|
addOption( data:TomOption, user_created = false ):false|string {
|
|
const self = this;
|
|
|
|
// @deprecated 1.7.7
|
|
// use addOptions( array, user_created ) for adding multiple options
|
|
if( Array.isArray(data) ){
|
|
self.addOptions( data, user_created);
|
|
return false;
|
|
}
|
|
|
|
const key = hash_key(data[self.settings.valueField]);
|
|
if( key === null || self.options.hasOwnProperty(key) ){
|
|
return false;
|
|
}
|
|
|
|
data.$order = data.$order || ++self.order;
|
|
data.$id = self.inputId + '-opt-' + data.$order;
|
|
self.options[key] = data;
|
|
self.lastQuery = null;
|
|
|
|
if( user_created ){
|
|
self.userOptions[key] = user_created;
|
|
self.trigger('option_add', key, data);
|
|
}
|
|
|
|
return key;
|
|
}
|
|
|
|
/**
|
|
* Add multiple options
|
|
*
|
|
*/
|
|
addOptions( data:TomOption[], user_created = false ):void{
|
|
iterate( data, (dat:TomOption) => {
|
|
this.addOption(dat, user_created);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* @deprecated 1.7.7
|
|
*/
|
|
registerOption( data:TomOption ):false|string {
|
|
return this.addOption(data);
|
|
}
|
|
|
|
/**
|
|
* Registers an option group to the pool of option groups.
|
|
*
|
|
* @return {boolean|string}
|
|
*/
|
|
registerOptionGroup(data:TomOption) {
|
|
var key = hash_key(data[this.settings.optgroupValueField]);
|
|
|
|
if ( key === null ) return false;
|
|
|
|
data.$order = data.$order || ++this.order;
|
|
this.optgroups[key] = data;
|
|
return key;
|
|
}
|
|
|
|
/**
|
|
* Registers a new optgroup for options
|
|
* to be bucketed into.
|
|
*
|
|
*/
|
|
addOptionGroup(id:string, data:TomOption) {
|
|
var hashed_id;
|
|
data[this.settings.optgroupValueField] = id;
|
|
|
|
if( hashed_id = this.registerOptionGroup(data) ){
|
|
this.trigger('optgroup_add', hashed_id, data);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Removes an existing option group.
|
|
*
|
|
*/
|
|
removeOptionGroup(id:string) {
|
|
if (this.optgroups.hasOwnProperty(id)) {
|
|
delete this.optgroups[id];
|
|
this.clearCache();
|
|
this.trigger('optgroup_remove', id);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Clears all existing option groups.
|
|
*/
|
|
clearOptionGroups() {
|
|
this.optgroups = {};
|
|
this.clearCache();
|
|
this.trigger('optgroup_clear');
|
|
}
|
|
|
|
/**
|
|
* Updates an option available for selection. If
|
|
* it is visible in the selected items or options
|
|
* dropdown, it will be re-rendered automatically.
|
|
*
|
|
*/
|
|
updateOption(value:string, data:TomOption) {
|
|
const self = this;
|
|
var item_new;
|
|
var index_item;
|
|
|
|
const value_old = hash_key(value);
|
|
const value_new = hash_key(data[self.settings.valueField]);
|
|
|
|
// sanity checks
|
|
if( value_old === null ) return;
|
|
|
|
const data_old = self.options[value_old];
|
|
|
|
if( data_old == undefined ) return;
|
|
if( typeof value_new !== 'string' ) throw new Error('Value must be set in option data');
|
|
|
|
|
|
const option = self.getOption(value_old);
|
|
const item = self.getItem(value_old);
|
|
|
|
|
|
data.$order = data.$order || data_old.$order;
|
|
delete self.options[value_old];
|
|
|
|
// invalidate render cache
|
|
// don't remove existing node yet, we'll remove it after replacing it
|
|
self.uncacheValue(value_new);
|
|
|
|
self.options[value_new] = data;
|
|
|
|
// update the option if it's in the dropdown
|
|
if( option ){
|
|
if( self.dropdown_content.contains(option) ){
|
|
|
|
const option_new = self._render('option', data);
|
|
replaceNode(option, option_new);
|
|
|
|
if( self.activeOption === option ){
|
|
self.setActiveOption(option_new);
|
|
}
|
|
}
|
|
option.remove();
|
|
}
|
|
|
|
// update the item if we have one
|
|
if( item ){
|
|
index_item = self.items.indexOf(value_old);
|
|
if (index_item !== -1) {
|
|
self.items.splice(index_item, 1, value_new);
|
|
}
|
|
|
|
item_new = self._render('item', data);
|
|
|
|
if( item.classList.contains('active') ) addClasses(item_new,'active');
|
|
|
|
replaceNode( item, item_new);
|
|
}
|
|
|
|
// invalidate last query because we might have updated the sortField
|
|
self.lastQuery = null;
|
|
}
|
|
|
|
/**
|
|
* Removes a single option.
|
|
*
|
|
*/
|
|
removeOption(value:string, silent?:boolean):void {
|
|
const self = this;
|
|
value = get_hash(value);
|
|
|
|
self.uncacheValue(value);
|
|
|
|
delete self.userOptions[value];
|
|
delete self.options[value];
|
|
self.lastQuery = null;
|
|
self.trigger('option_remove', value);
|
|
self.removeItem(value, silent);
|
|
}
|
|
|
|
/**
|
|
* Clears all options.
|
|
*/
|
|
clearOptions(filter?:TomClearFilter ) {
|
|
|
|
const boundFilter = (filter || this.clearFilter).bind(this);
|
|
|
|
this.loadedSearches = {};
|
|
this.userOptions = {};
|
|
this.clearCache();
|
|
|
|
const selected:TomOptions = {};
|
|
iterate(this.options,(option:TomOption,key:string)=>{
|
|
if( boundFilter(option,key as string) ){
|
|
selected[key] = option;
|
|
}
|
|
});
|
|
|
|
this.options = this.sifter.items = selected;
|
|
this.lastQuery = null;
|
|
this.trigger('option_clear');
|
|
}
|
|
|
|
/**
|
|
* Used by clearOptions() to decide whether or not an option should be removed
|
|
* Return true to keep an option, false to remove
|
|
*
|
|
*/
|
|
clearFilter(option:TomOption,value:string){
|
|
if( this.items.indexOf(value) >= 0 ){
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
/**
|
|
* Returns the dom element of the option
|
|
* matching the given value.
|
|
*
|
|
*/
|
|
getOption(value:undefined|null|boolean|string|number, create:boolean=false):null|HTMLElement {
|
|
|
|
const hashed = hash_key(value);
|
|
if( hashed === null ) return null;
|
|
|
|
const option = this.options[hashed];
|
|
if( option != undefined ){
|
|
|
|
if( option.$div ){
|
|
return option.$div;
|
|
}
|
|
|
|
if( create ){
|
|
return this._render('option', option);
|
|
}
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
/**
|
|
* Returns the dom element of the next or previous dom element of the same type
|
|
* Note: adjacent options may not be adjacent DOM elements (optgroups)
|
|
*
|
|
*/
|
|
getAdjacent( option:null|HTMLElement, direction:number, type:string = 'option' ) : HTMLElement|null{
|
|
var self = this, all;
|
|
|
|
if( !option ){
|
|
return null;
|
|
}
|
|
|
|
if( type == 'item' ){
|
|
all = self.controlChildren();
|
|
}else{
|
|
all = self.dropdown_content.querySelectorAll('[data-selectable]');
|
|
}
|
|
|
|
for( let i = 0; i < all.length; i++ ){
|
|
if( all[i] != option ){
|
|
continue;
|
|
}
|
|
|
|
if( direction > 0 ){
|
|
return all[i+1] as HTMLElement;
|
|
}
|
|
|
|
return all[i-1] as HTMLElement;
|
|
}
|
|
return null;
|
|
}
|
|
|
|
|
|
/**
|
|
* Returns the dom element of the item
|
|
* matching the given value.
|
|
*
|
|
*/
|
|
getItem(item:string|TomItem|null):null|TomItem {
|
|
|
|
if( typeof item == 'object' ){
|
|
return item;
|
|
}
|
|
|
|
var value = hash_key(item);
|
|
return value !== null
|
|
? this.control.querySelector(`[data-value="${addSlashes(value)}"]`)
|
|
: null;
|
|
}
|
|
|
|
/**
|
|
* "Selects" multiple items at once. Adds them to the list
|
|
* at the current caret position.
|
|
*
|
|
*/
|
|
addItems( values:string|string[], silent?:boolean ):void{
|
|
var self = this;
|
|
|
|
var items = Array.isArray(values) ? values : [values];
|
|
items = items.filter(x => self.items.indexOf(x) === -1);
|
|
const last_item = items[items.length - 1];
|
|
items.forEach(item => {
|
|
self.isPending = (item !== last_item);
|
|
self.addItem(item, silent);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* "Selects" an item. Adds it to the list
|
|
* at the current caret position.
|
|
*
|
|
*/
|
|
addItem( value:string, silent?:boolean ):void{
|
|
var events = silent ? [] : ['change','dropdown_close'];
|
|
|
|
debounce_events(this, events, () => {
|
|
var item, wasFull;
|
|
const self = this;
|
|
const inputMode = self.settings.mode;
|
|
const hashed = hash_key(value);
|
|
|
|
if( hashed && self.items.indexOf(hashed) !== -1 ){
|
|
|
|
if( inputMode === 'single' ){
|
|
self.close();
|
|
}
|
|
|
|
if( inputMode === 'single' || !self.settings.duplicates ){
|
|
return;
|
|
}
|
|
}
|
|
|
|
if (hashed === null || !self.options.hasOwnProperty(hashed)) return;
|
|
if (inputMode === 'single') self.clear(silent);
|
|
if (inputMode === 'multi' && self.isFull()) return;
|
|
|
|
item = self._render('item', self.options[hashed]);
|
|
|
|
if( self.control.contains(item) ){ // duplicates
|
|
item = item.cloneNode(true) as HTMLElement;
|
|
}
|
|
|
|
wasFull = self.isFull();
|
|
self.items.splice(self.caretPos, 0, hashed);
|
|
self.insertAtCaret(item);
|
|
|
|
if (self.isSetup) {
|
|
|
|
// update menu / remove the option (if this is not one item being added as part of series)
|
|
if( !self.isPending && self.settings.hideSelected ){
|
|
let option = self.getOption(hashed);
|
|
let next = self.getAdjacent(option, 1);
|
|
if( next ){
|
|
self.setActiveOption(next);
|
|
}
|
|
}
|
|
|
|
// refreshOptions after setActiveOption(),
|
|
// otherwise setActiveOption() will be called by refreshOptions() with the wrong value
|
|
if( !self.isPending && !self.settings.closeAfterSelect ){
|
|
self.refreshOptions(self.isFocused && inputMode !== 'single');
|
|
}
|
|
|
|
// hide the menu if the maximum number of items have been selected or no options are left
|
|
if( self.settings.closeAfterSelect != false && self.isFull() ){
|
|
self.close();
|
|
} else if (!self.isPending) {
|
|
self.positionDropdown();
|
|
}
|
|
|
|
self.trigger('item_add', hashed, item);
|
|
|
|
if (!self.isPending) {
|
|
self.updateOriginalInput({silent: silent});
|
|
}
|
|
}
|
|
|
|
if (!self.isPending || (!wasFull && self.isFull())) {
|
|
self.inputState();
|
|
self.refreshState();
|
|
}
|
|
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Removes the selected item matching
|
|
* the provided value.
|
|
*
|
|
*/
|
|
removeItem( item:string|TomItem|null=null, silent?:boolean ){
|
|
const self = this;
|
|
item = self.getItem(item);
|
|
|
|
if( !item ) return;
|
|
|
|
var i,idx;
|
|
const value = item.dataset.value;
|
|
i = nodeIndex(item);
|
|
|
|
item.remove();
|
|
if( item.classList.contains('active') ){
|
|
idx = self.activeItems.indexOf(item);
|
|
self.activeItems.splice(idx, 1);
|
|
removeClasses(item,'active');
|
|
}
|
|
|
|
self.items.splice(i, 1);
|
|
self.lastQuery = null;
|
|
if (!self.settings.persist && self.userOptions.hasOwnProperty(value)) {
|
|
self.removeOption(value, silent);
|
|
}
|
|
|
|
if (i < self.caretPos) {
|
|
self.setCaret(self.caretPos - 1);
|
|
}
|
|
|
|
self.updateOriginalInput({silent: silent});
|
|
self.refreshState();
|
|
self.positionDropdown();
|
|
self.trigger('item_remove', value, item);
|
|
|
|
}
|
|
|
|
/**
|
|
* Invokes the `create` method provided in the
|
|
* TomSelect options that should provide the data
|
|
* for the new item, given the user input.
|
|
*
|
|
* Once this completes, it will be added
|
|
* to the item list.
|
|
*
|
|
*/
|
|
createItem( input:null|string=null, callback:TomCreateCallback = ()=>{} ):boolean{
|
|
|
|
// triggerDropdown parameter @deprecated 2.1.1
|
|
if( arguments.length === 3 ){
|
|
callback = arguments[2];
|
|
}
|
|
if( typeof callback != 'function' ){
|
|
callback = () => {};
|
|
}
|
|
|
|
var self = this;
|
|
var caret = self.caretPos;
|
|
var output;
|
|
input = input || self.inputValue();
|
|
|
|
if (!self.canCreate(input)) {
|
|
callback();
|
|
return false;
|
|
}
|
|
|
|
self.lock();
|
|
|
|
var created = false;
|
|
var create = (data?:boolean|TomOption) => {
|
|
self.unlock();
|
|
|
|
if (!data || typeof data !== 'object') return callback();
|
|
var value = hash_key(data[self.settings.valueField]);
|
|
if( typeof value !== 'string' ){
|
|
return callback();
|
|
}
|
|
|
|
self.setTextboxValue();
|
|
self.addOption(data,true);
|
|
self.setCaret(caret);
|
|
self.addItem(value);
|
|
callback(data);
|
|
created = true;
|
|
};
|
|
|
|
if( typeof self.settings.create === 'function' ){
|
|
output = self.settings.create.call(this, input, create);
|
|
}else{
|
|
output = {
|
|
[self.settings.labelField]: input,
|
|
[self.settings.valueField]: input,
|
|
};
|
|
}
|
|
|
|
if( !created ){
|
|
create(output);
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
/**
|
|
* Re-renders the selected item lists.
|
|
*/
|
|
refreshItems() {
|
|
var self = this;
|
|
self.lastQuery = null;
|
|
|
|
if (self.isSetup) {
|
|
self.addItems(self.items);
|
|
}
|
|
|
|
self.updateOriginalInput();
|
|
self.refreshState();
|
|
}
|
|
|
|
/**
|
|
* Updates all state-dependent attributes
|
|
* and CSS classes.
|
|
*/
|
|
refreshState() {
|
|
const self = this;
|
|
|
|
self.refreshValidityState();
|
|
|
|
const isFull = self.isFull();
|
|
const isLocked = self.isLocked;
|
|
|
|
self.wrapper.classList.toggle('rtl',self.rtl);
|
|
|
|
|
|
const wrap_classList = self.wrapper.classList;
|
|
|
|
wrap_classList.toggle('focus', self.isFocused)
|
|
wrap_classList.toggle('disabled', self.isDisabled)
|
|
wrap_classList.toggle('readonly', self.isReadOnly)
|
|
wrap_classList.toggle('required', self.isRequired)
|
|
wrap_classList.toggle('invalid', !self.isValid)
|
|
wrap_classList.toggle('locked', isLocked)
|
|
wrap_classList.toggle('full', isFull)
|
|
wrap_classList.toggle('input-active', self.isFocused && !self.isInputHidden)
|
|
wrap_classList.toggle('dropdown-active', self.isOpen)
|
|
wrap_classList.toggle('has-options', isEmptyObject(self.options) )
|
|
wrap_classList.toggle('has-items', self.items.length > 0);
|
|
|
|
}
|
|
|
|
|
|
/**
|
|
* Update the `required` attribute of both input and control input.
|
|
*
|
|
* The `required` property needs to be activated on the control input
|
|
* for the error to be displayed at the right place. `required` also
|
|
* needs to be temporarily deactivated on the input since the input is
|
|
* hidden and can't show errors.
|
|
*/
|
|
refreshValidityState() {
|
|
var self = this;
|
|
|
|
if( !self.input.validity ){
|
|
return;
|
|
}
|
|
|
|
self.isValid = self.input.validity.valid;
|
|
self.isInvalid = !self.isValid;
|
|
}
|
|
|
|
/**
|
|
* Determines whether or not more items can be added
|
|
* to the control without exceeding the user-defined maximum.
|
|
*
|
|
* @returns {boolean}
|
|
*/
|
|
isFull() {
|
|
return this.settings.maxItems !== null && this.items.length >= this.settings.maxItems;
|
|
}
|
|
|
|
/**
|
|
* Refreshes the original <select> or <input>
|
|
* element to reflect the current state.
|
|
*
|
|
*/
|
|
updateOriginalInput( opts:TomArgObject = {} ){
|
|
const self = this;
|
|
var option, label;
|
|
|
|
const empty_option = self.input.querySelector('option[value=""]') as HTMLOptionElement;
|
|
|
|
if( self.is_select_tag ){
|
|
|
|
const selected:HTMLOptionElement[] = [];
|
|
const has_selected:number = self.input.querySelectorAll('option:checked').length;
|
|
|
|
function AddSelected(option_el:HTMLOptionElement|null, value:string, label:string):HTMLOptionElement{
|
|
|
|
if( !option_el ){
|
|
option_el = getDom('<option value="' + escape_html(value) + '">' + escape_html(label) + '</option>') as HTMLOptionElement;
|
|
}
|
|
|
|
// don't move empty option from top of list
|
|
// fixes bug in firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1725293
|
|
if( option_el != empty_option ){
|
|
self.input.append(option_el);
|
|
}
|
|
|
|
selected.push(option_el);
|
|
|
|
// marking empty option as selected can break validation
|
|
// fixes https://github.com/orchidjs/tom-select/issues/303
|
|
if( option_el != empty_option || has_selected > 0 ){
|
|
option_el.selected = true;
|
|
}
|
|
|
|
return option_el;
|
|
}
|
|
|
|
// unselect all selected options
|
|
self.input.querySelectorAll('option:checked').forEach((option_el:Element) => {
|
|
(<HTMLOptionElement>option_el).selected = false;
|
|
});
|
|
|
|
|
|
// nothing selected?
|
|
if( self.items.length == 0 && self.settings.mode == 'single' ){
|
|
|
|
AddSelected(empty_option, "", "");
|
|
|
|
// order selected <option> tags for values in self.items
|
|
}else{
|
|
|
|
self.items.forEach((value)=>{
|
|
option = self.options[value]!;
|
|
label = option[self.settings.labelField] || '';
|
|
|
|
if( selected.includes(option.$option) ){
|
|
const reuse_opt = self.input.querySelector(`option[value="${addSlashes(value)}"]:not(:checked)`) as HTMLOptionElement;
|
|
AddSelected(reuse_opt, value, label);
|
|
}else{
|
|
option.$option = AddSelected(option.$option, value, label);
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
} else {
|
|
self.input.value = self.getValue() as string;
|
|
}
|
|
|
|
if (self.isSetup) {
|
|
if (!opts.silent) {
|
|
self.trigger('change', self.getValue() );
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Shows the autocomplete dropdown containing
|
|
* the available options.
|
|
*/
|
|
open() {
|
|
var self = this;
|
|
|
|
if (self.isLocked || self.isOpen || (self.settings.mode === 'multi' && self.isFull())) return;
|
|
self.isOpen = true;
|
|
setAttr(self.focus_node,{'aria-expanded': 'true'});
|
|
self.refreshState();
|
|
applyCSS(self.dropdown,{visibility: 'hidden', display: 'block'});
|
|
self.positionDropdown();
|
|
applyCSS(self.dropdown,{visibility: 'visible', display: 'block'});
|
|
self.focus();
|
|
self.trigger('dropdown_open', self.dropdown);
|
|
}
|
|
|
|
/**
|
|
* Closes the autocomplete dropdown menu.
|
|
*/
|
|
close(setTextboxValue=true) {
|
|
var self = this;
|
|
var trigger = self.isOpen;
|
|
|
|
if( setTextboxValue ){
|
|
|
|
// before blur() to prevent form onchange event
|
|
self.setTextboxValue();
|
|
|
|
if (self.settings.mode === 'single' && self.items.length) {
|
|
self.inputState();
|
|
}
|
|
}
|
|
|
|
self.isOpen = false;
|
|
setAttr(self.focus_node,{'aria-expanded': 'false'});
|
|
applyCSS(self.dropdown,{display: 'none'});
|
|
if( self.settings.hideSelected ){
|
|
self.clearActiveOption();
|
|
}
|
|
self.refreshState();
|
|
|
|
if (trigger) self.trigger('dropdown_close', self.dropdown);
|
|
}
|
|
|
|
/**
|
|
* Calculates and applies the appropriate
|
|
* position of the dropdown if dropdownParent = 'body'.
|
|
* Otherwise, position is determined by css
|
|
*/
|
|
positionDropdown(){
|
|
|
|
if( this.settings.dropdownParent !== 'body' ){
|
|
return;
|
|
}
|
|
|
|
var context = this.control;
|
|
var rect = context.getBoundingClientRect();
|
|
var top = context.offsetHeight + rect.top + window.scrollY;
|
|
var left = rect.left + window.scrollX;
|
|
|
|
|
|
applyCSS(this.dropdown,{
|
|
width : rect.width + 'px',
|
|
top : top + 'px',
|
|
left : left + 'px'
|
|
});
|
|
|
|
}
|
|
|
|
/**
|
|
* Resets / clears all selected items
|
|
* from the control.
|
|
*
|
|
*/
|
|
clear(silent?:boolean) {
|
|
var self = this;
|
|
|
|
if (!self.items.length) return;
|
|
|
|
var items = self.controlChildren();
|
|
iterate(items,(item:TomItem)=>{
|
|
self.removeItem(item,true);
|
|
});
|
|
|
|
self.inputState();
|
|
if( !silent ) self.updateOriginalInput();
|
|
self.trigger('clear');
|
|
}
|
|
|
|
/**
|
|
* A helper method for inserting an element
|
|
* at the current caret position.
|
|
*
|
|
*/
|
|
insertAtCaret(el:HTMLElement) {
|
|
const self = this;
|
|
const caret = self.caretPos;
|
|
const target = self.control;
|
|
|
|
target.insertBefore(el, target.children[caret] || null);
|
|
self.setCaret(caret + 1);
|
|
}
|
|
|
|
/**
|
|
* Removes the current selected item(s).
|
|
*
|
|
*/
|
|
deleteSelection(e:KeyboardEvent):boolean {
|
|
var direction, selection, caret, tail;
|
|
var self = this;
|
|
|
|
direction = (e && e.keyCode === constants.KEY_BACKSPACE) ? -1 : 1;
|
|
selection = getSelection(self.control_input);
|
|
|
|
|
|
// determine items that will be removed
|
|
const rm_items:TomItem[] = [];
|
|
|
|
if (self.activeItems.length) {
|
|
|
|
tail = getTail(self.activeItems, direction);
|
|
caret = nodeIndex(tail);
|
|
|
|
if (direction > 0) { caret++; }
|
|
|
|
iterate(self.activeItems, (item:TomItem) => rm_items.push(item) );
|
|
|
|
} else if ((self.isFocused || self.settings.mode === 'single') && self.items.length) {
|
|
const items = self.controlChildren();
|
|
let rm_item;
|
|
if( direction < 0 && selection.start === 0 && selection.length === 0 ){
|
|
rm_item = items[self.caretPos - 1];
|
|
|
|
}else if( direction > 0 && selection.start === self.inputValue().length ){
|
|
rm_item = items[self.caretPos];
|
|
}
|
|
|
|
if( rm_item !== undefined ){
|
|
rm_items.push( rm_item );
|
|
}
|
|
}
|
|
|
|
if( !self.shouldDelete(rm_items,e) ){
|
|
return false;
|
|
}
|
|
|
|
preventDefault(e,true);
|
|
|
|
// perform removal
|
|
if (typeof caret !== 'undefined') {
|
|
self.setCaret(caret);
|
|
}
|
|
|
|
while( rm_items.length ){
|
|
self.removeItem(rm_items.pop());
|
|
}
|
|
|
|
self.inputState();
|
|
self.positionDropdown();
|
|
self.refreshOptions(false);
|
|
|
|
return true;
|
|
}
|
|
|
|
/**
|
|
* Return true if the items should be deleted
|
|
*/
|
|
shouldDelete(items:TomItem[],evt:MouseEvent|KeyboardEvent){
|
|
|
|
const values = items.map(item => item.dataset.value);
|
|
|
|
// allow the callback to abort
|
|
if( !values.length || (typeof this.settings.onDelete === 'function' && this.settings.onDelete(values,evt) === false) ){
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
/**
|
|
* Selects the previous / next item (depending on the `direction` argument).
|
|
*
|
|
* > 0 - right
|
|
* < 0 - left
|
|
*
|
|
*/
|
|
advanceSelection(direction:number, e?:MouseEvent|KeyboardEvent) {
|
|
var last_active, adjacent, self = this;
|
|
|
|
if (self.rtl) direction *= -1;
|
|
if( self.inputValue().length ) return;
|
|
|
|
|
|
// add or remove to active items
|
|
if( isKeyDown(constants.KEY_SHORTCUT,e) || isKeyDown('shiftKey',e) ){
|
|
|
|
last_active = self.getLastActive(direction);
|
|
if( last_active ){
|
|
|
|
if( !last_active.classList.contains('active') ){
|
|
adjacent = last_active;
|
|
}else{
|
|
adjacent = self.getAdjacent(last_active,direction,'item');
|
|
}
|
|
|
|
// if no active item, get items adjacent to the control input
|
|
}else if( direction > 0 ){
|
|
adjacent = self.control_input.nextElementSibling;
|
|
}else{
|
|
adjacent = self.control_input.previousElementSibling;
|
|
}
|
|
|
|
|
|
if( adjacent ){
|
|
if( adjacent.classList.contains('active') ){
|
|
self.removeActiveItem(last_active);
|
|
}
|
|
self.setActiveItemClass(adjacent); // mark as last_active !! after removeActiveItem() on last_active
|
|
}
|
|
|
|
// move caret to the left or right
|
|
}else{
|
|
self.moveCaret(direction);
|
|
}
|
|
}
|
|
|
|
moveCaret(direction:number){}
|
|
|
|
/**
|
|
* Get the last active item
|
|
*
|
|
*/
|
|
getLastActive(direction?:number){
|
|
|
|
let last_active = this.control.querySelector('.last-active');
|
|
if( last_active ){
|
|
return last_active;
|
|
}
|
|
|
|
|
|
var result = this.control.querySelectorAll('.active');
|
|
if( result ){
|
|
return getTail(result,direction);
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* Moves the caret to the specified index.
|
|
*
|
|
* The input must be moved by leaving it in place and moving the
|
|
* siblings, due to the fact that focus cannot be restored once lost
|
|
* on mobile webkit devices
|
|
*
|
|
*/
|
|
setCaret(new_pos:number) {
|
|
this.caretPos = this.items.length;
|
|
}
|
|
|
|
/**
|
|
* Return list of item dom elements
|
|
*
|
|
*/
|
|
controlChildren():TomItem[]{
|
|
return Array.from( this.control.querySelectorAll('[data-ts-item]') ) as TomItem[];
|
|
}
|
|
|
|
/**
|
|
* Disables user input on the control. Used while
|
|
* items are being asynchronously created.
|
|
*/
|
|
lock() {
|
|
this.setLocked(true);
|
|
}
|
|
|
|
/**
|
|
* Re-enables user input on the control.
|
|
*/
|
|
unlock() {
|
|
this.setLocked(false);
|
|
}
|
|
|
|
/**
|
|
* Disable or enable user input on the control
|
|
*/
|
|
setLocked( lock:boolean = this.isReadOnly || this.isDisabled ){
|
|
this.isLocked = lock;
|
|
this.refreshState();
|
|
}
|
|
|
|
/**
|
|
* Disables user input on the control completely.
|
|
* While disabled, it cannot receive focus.
|
|
*/
|
|
disable() {
|
|
this.setDisabled(true);
|
|
this.close();
|
|
}
|
|
|
|
/**
|
|
* Enables the control so that it can respond
|
|
* to focus and user input.
|
|
*/
|
|
enable() {
|
|
this.setDisabled(false);
|
|
}
|
|
|
|
setDisabled(disabled:boolean){
|
|
this.focus_node.tabIndex = disabled ? -1 : this.tabIndex;
|
|
this.isDisabled = disabled;
|
|
this.input.disabled = disabled;
|
|
this.control_input.disabled = disabled;
|
|
this.setLocked();
|
|
}
|
|
|
|
setReadOnly(isReadOnly:boolean){
|
|
this.isReadOnly = isReadOnly;
|
|
this.input.readOnly = isReadOnly;
|
|
this.control_input.readOnly = isReadOnly;
|
|
this.setLocked();
|
|
}
|
|
|
|
/**
|
|
* Completely destroys the control and
|
|
* unbinds all event listeners so that it can
|
|
* be garbage collected.
|
|
*/
|
|
destroy() {
|
|
var self = this;
|
|
var revertSettings = self.revertSettings;
|
|
|
|
self.trigger('destroy');
|
|
self.off();
|
|
self.wrapper.remove();
|
|
self.dropdown.remove();
|
|
|
|
self.input.innerHTML = revertSettings.innerHTML;
|
|
self.input.tabIndex = revertSettings.tabIndex;
|
|
|
|
removeClasses(self.input,'tomselected','ts-hidden-accessible');
|
|
|
|
self._destroy();
|
|
|
|
delete self.input.tomselect;
|
|
}
|
|
|
|
/**
|
|
* A helper method for rendering "item" and
|
|
* "option" templates, given the data.
|
|
*
|
|
*/
|
|
render( templateName:TomTemplateNames, data?:any ):null|HTMLElement{
|
|
var id, html;
|
|
const self = this;
|
|
|
|
if( typeof this.settings.render[templateName] !== 'function' ){
|
|
return null;
|
|
}
|
|
|
|
// render markup
|
|
html = self.settings.render[templateName].call(this, data, escape_html);
|
|
|
|
if( !html ){
|
|
return null;
|
|
}
|
|
|
|
html = getDom( html );
|
|
|
|
// add mandatory attributes
|
|
if (templateName === 'option' || templateName === 'option_create') {
|
|
|
|
if( data[self.settings.disabledField] ){
|
|
setAttr(html,{'aria-disabled':'true'});
|
|
}else{
|
|
setAttr(html,{'data-selectable': ''});
|
|
}
|
|
|
|
}else if (templateName === 'optgroup') {
|
|
id = data.group[self.settings.optgroupValueField];
|
|
setAttr(html,{'data-group': id});
|
|
if(data.group[self.settings.disabledField]) {
|
|
setAttr(html,{'data-disabled': ''});
|
|
}
|
|
}
|
|
|
|
if (templateName === 'option' || templateName === 'item') {
|
|
const value = get_hash(data[self.settings.valueField]);
|
|
setAttr(html,{'data-value': value });
|
|
|
|
|
|
// make sure we have some classes if a template is overwritten
|
|
if( templateName === 'item' ){
|
|
addClasses(html,self.settings.itemClass);
|
|
setAttr(html,{'data-ts-item':''});
|
|
}else{
|
|
addClasses(html,self.settings.optionClass);
|
|
setAttr(html,{
|
|
role:'option',
|
|
id:data.$id
|
|
});
|
|
|
|
// update cache
|
|
data.$div = html;
|
|
self.options[value] = data;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
return html;
|
|
|
|
}
|
|
|
|
|
|
/**
|
|
* Type guarded rendering
|
|
*
|
|
*/
|
|
_render( templateName:TomTemplateNames, data?:any ):HTMLElement{
|
|
const html = this.render(templateName, data);
|
|
|
|
if( html == null ){
|
|
throw 'HTMLElement expected';
|
|
}
|
|
return html;
|
|
}
|
|
|
|
|
|
/**
|
|
* Clears the render cache for a template. If
|
|
* no template is given, clears all render
|
|
* caches.
|
|
*
|
|
*/
|
|
clearCache():void{
|
|
|
|
iterate(this.options, (option:TomOption)=>{
|
|
if( option.$div ){
|
|
option.$div.remove();
|
|
delete option.$div;
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
/**
|
|
* Removes a value from item and option caches
|
|
*
|
|
*/
|
|
uncacheValue(value:string){
|
|
|
|
const option_el = this.getOption(value);
|
|
if( option_el ) option_el.remove();
|
|
|
|
}
|
|
|
|
/**
|
|
* Determines whether or not to display the
|
|
* create item prompt, given a user input.
|
|
*
|
|
*/
|
|
canCreate( input:string ):boolean {
|
|
return this.settings.create && (input.length > 0) && (this.settings.createFilter as TomCreateFilter ).call(this, input);
|
|
}
|
|
|
|
|
|
/**
|
|
* Wraps this.`method` so that `new_fn` can be invoked 'before', 'after', or 'instead' of the original method
|
|
*
|
|
* this.hook('instead','onKeyDown',function( arg1, arg2 ...){
|
|
*
|
|
* });
|
|
*/
|
|
hook( when:string, method:string, new_fn:any ){
|
|
var self = this;
|
|
var orig_method = self[method];
|
|
|
|
|
|
self[method] = function(){
|
|
var result, result_new;
|
|
|
|
if( when === 'after' ){
|
|
result = orig_method.apply(self, arguments);
|
|
}
|
|
|
|
result_new = new_fn.apply(self, arguments );
|
|
|
|
if( when === 'instead' ){
|
|
return result_new;
|
|
}
|
|
|
|
if( when === 'before' ){
|
|
result = orig_method.apply(self, arguments);
|
|
}
|
|
|
|
return result;
|
|
};
|
|
|
|
}
|
|
|
|
};
|