-
Notifications
You must be signed in to change notification settings - Fork 426
/
templates.js
93 lines (80 loc) · 3.92 KB
/
templates.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
import {ZERO_WIDTH_UNICODE_CHAR} from './constants'
export default {
/**
*
* @param {DOM Object} input Original input DOm element
* @param {Object} settings Tagify instance settings Object
*/
wrapper(input, _s){
return `<tags class="${_s.classNames.namespace} ${_s.mode ? `${_s.classNames[_s.mode + "Mode"]}` : ""} ${input.className}"
${_s.readonly ? 'readonly' : ''}
${_s.disabled ? 'disabled' : ''}
${_s.required ? 'required' : ''}
${_s.mode === 'select' ? "spellcheck='false'" : ''}
tabIndex="-1">
${this.settings.templates.input.call(this)}
${ZERO_WIDTH_UNICODE_CHAR}
</tags>`
},
input() {
var _s = this.settings,
placeholder = _s.placeholder || ZERO_WIDTH_UNICODE_CHAR;
return `<span ${!_s.readonly && _s.userInput ? 'contenteditable' : ''} tabIndex="0" data-placeholder="${placeholder}" aria-placeholder="${_s.placeholder || ''}"
class="${_s.classNames.input}"
role="textbox"
autocapitalize="false"
autocorrect="off"
spellcheck="false"
aria-autocomplete="both"
aria-multiline="${_s.mode=='mix'?true:false}"></span>`
},
tag(tagData, {settings: _s}){
return `<tag title="${(tagData.title || tagData.value)}"
contenteditable='false'
tabIndex="${_s.a11y.focusableTags ? 0 : -1}"
class="${_s.classNames.tag} ${tagData.class || ""}"
${this.getAttributes(tagData)}>
<x title='' tabIndex="${_s.a11y.focusableTags ? 0 : -1}" class="${_s.classNames.tagX}" role='button' aria-label='remove tag'></x>
<div>
<span ${_s.mode === 'select' && _s.userInput ? "contenteditable='true'" : ''} autocapitalize="false" autocorrect="off" spellcheck='false' class="${_s.classNames.tagText}">${tagData[_s.tagTextProp] || tagData.value}</span>
</div>
</tag>`
},
dropdown(settings){
var _sd = settings.dropdown,
isManual = _sd.position == 'manual';
return `<div class="${isManual ? '' : settings.classNames.dropdown } ${_sd.classname}" role="listbox" aria-labelledby="dropdown" dir="${_sd.RTL ? 'rtl' : ''}">
<div data-selector='tagify-suggestions-wrapper' class="${settings.classNames.dropdownWrapper}"></div>
</div>`
},
dropdownContent(HTMLContent) {
var _t = this.settings.templates,
suggestions = this.state.dropdown.suggestions;
return `
${_t.dropdownHeader.call(this, suggestions)}
${HTMLContent}
${_t.dropdownFooter.call(this, suggestions)}
`
},
dropdownItem(item){
return `<div ${this.getAttributes(item)}
class='${this.settings.classNames.dropdownItem} ${this.isTagDuplicate(item.value) ? this.settings.classNames.dropdownItemSelected: ""} ${item.class || ""}'
tabindex="0"
role="option">${item.mappedValue || item.value}</div>`
},
/**
* @param {Array} suggestions An array of all the matched suggested items, including those which were sliced away due to the "dropdown.maxItems" setting
*/
dropdownHeader(suggestions){
return `<header data-selector='tagify-suggestions-header' class="${this.settings.classNames.dropdownHeader}"></header>`
},
dropdownFooter(suggestions){
var hasMore = suggestions.length - this.settings.dropdown.maxItems;
return hasMore > 0
? `<footer data-selector='tagify-suggestions-footer' class="${this.settings.classNames.dropdownFooter}">
${hasMore} more items. Refine your search.
</footer>`
: '';
},
dropdownItemNoMatch: null
}