Dereku/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-07-13 03:27:39 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Removed fakeSpan from Inputosaurus and cleanup

Browse source
This commit is contained in:
djmaze 2020-10-23 15:16:42 +02:00
parent 76c4f62186
commit 48a9a03762
1 changed files with 49 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

105
vendors/inputosaurus/inputosaurus.js vendored
View file

@ -20,11 +20,10 @@ const createEl = (name, attr) => {
return el; return el;
}, },
datalist = createEl('datalist',{id:"inputosaurus-datalist"}), datalist = createEl('datalist',{id:"inputosaurus-datalist"}),
fakeSpan = createEl('span',{class:"inputosaurus-fake-span"}),
contentType = 'inputosaurus/item'; contentType = 'inputosaurus/item';
doc.body.append(fakeSpan, datalist); doc.body.append(datalist);
let dragData; let dragData;
@ -33,10 +32,9 @@ this.Inputosaurus = class {
constructor(element, options) { constructor(element, options) {
var self = this, var self = this,
els = {},
// In Chrome we have no access to dataTransfer.getData unless it's the 'drop' event // In Chrome we have no access to dataTransfer.getData unless it's the 'drop' event
// In Chrome Mobile dataTransfer.types.includes(contentType) fails, only text/plain is set // In Chrome Mobile dataTransfer.types.includes(contentType) fails, only text/plain is set
validDropzone = () => dragData && dragData.li.parentNode !== els.ul, validDropzone = () => dragData && dragData.li.parentNode !== self.ul,
fnDrag = e => validDropzone(e) && e.preventDefault(); fnDrag = e => validDropzone(e) && e.preventDefault();
self.element = element; self.element = element;
@ -66,63 +64,59 @@ this.Inputosaurus = class {
self._lastEdit = ''; self._lastEdit = '';
// Create the elements // Create the elements
els.ul = createEl('ul',{class:"inputosaurus-container"}); self.ul = createEl('ul',{class:"inputosaurus-container"});
els.ul.addEventListener("dragenter", fnDrag); self.ul.addEventListener('click', e => self._focus(e));
els.ul.addEventListener("dragover", fnDrag); self.ul.addEventListener('dblclick', e => self._editTag(e));
els.ul.addEventListener("drop", e => { self.ul.addEventListener("dragenter", fnDrag);
self.ul.addEventListener("dragover", fnDrag);
self.ul.addEventListener("drop", e => {
if (validDropzone(e) && dragData.value) { if (validDropzone(e) && dragData.value) {
e.preventDefault(); e.preventDefault();
dragData.source._removeDraggedTag(dragData.li); dragData.source._removeDraggedTag(dragData.li);
els.input.value = dragData.value; self.input.value = dragData.value;
self.parseInput(); self.parseInput();
} }
}); });
els.input = createEl('input',{type:"text", list:datalist.id, self.input = createEl('input',{type:"text", list:datalist.id,
autocomplete:"off", autocorrect:"off", autocapitalize:"off", spellcheck:"false"}); autocomplete:"off", autocorrect:"off", autocapitalize:"off", spellcheck:"false"});
els.input.addEventListener('focus', () => self._focusTrigger(true)); self.input.addEventListener('focus', () => self._focusTrigger(true));
els.input.addEventListener('blur', () => self._focusTrigger(false)); self.input.addEventListener('blur', () => self._focusTrigger(false));
self.input.addEventListener('keyup', e => self._inputKeypress(e));
self.input.addEventListener('keydown', e => self._inputKeypress(e));
self.input.addEventListener('change', e => self._inputKeypress(e));
self.input.addEventListener('input', e => self._inputKeypress(e));
self.input.addEventListener('focus', () => self.input.value || self._resetDatalist());
self.input.addEventListener('blur', e => self.parseInput(e));
// define starting placeholder // define starting placeholder
if (element.placeholder) { if (element.placeholder) {
els.input.placeholder = element.placeholder; self.input.placeholder = element.placeholder;
} }
element.replaceWith(els.ul); self.inputCont = createEl('li',{class:"inputosaurus-input"});
self.inputCont.append(self.input);
self.ul.append(self.inputCont);
els.inputCont = createEl('li',{class:"inputosaurus-input"}); element.replaceWith(self.ul);
els.inputCont.append(els.input);
els.ul.append(els.inputCont);
self.elements = els;
els.input.addEventListener('keyup', e => self._inputKeypress(e));
els.input.addEventListener('keydown', e => self._inputKeypress(e));
els.input.addEventListener('change', e => self._inputKeypress(e));
els.input.addEventListener('input', e => self._inputKeypress(e));
els.input.addEventListener('focus', () => els.input.value || self._resetAutocomplete());
els.input.addEventListener('blur', e => self.parseInput(e));
els.ul.addEventListener('click', e => self._focus(e));
els.ul.addEventListener('dblclick', e => self._editTag(e));
// if instantiated input already contains a value, parse that junk // if instantiated input already contains a value, parse that junk
if (element.value.trim()) { if (element.value.trim()) {
els.input.value = element.value; self.input.value = element.value;
self.parseInput(); self.parseInput();
} }
self._updateAutocomplete = self.options.autoCompleteSource self._updateDatalist = self.options.autoCompleteSource
? (() => { ? (() => {
let value = self.elements.input.value.trim(); let value = self.input.value.trim();
if (datalist.inputValue !== value) { if (datalist.inputValue !== value) {
datalist.inputValue = value; datalist.inputValue = value;
value.length && self.options.autoCompleteSource( value.length && self.options.autoCompleteSource(
{term:value}, {term:value},
items => { items => {
self._resetAutocomplete(); self._resetDatalist();
items && items.forEach(item => datalist.append(new Option(item))); items && items.forEach(item => datalist.append(new Option(item)));
} }
) )
@ -132,11 +126,11 @@ this.Inputosaurus = class {
} }
_focusTrigger(bValue) { _focusTrigger(bValue) {
this.elements.ul.classList.toggle('inputosaurus-focused', bValue); this.ul.classList.toggle('inputosaurus-focused', bValue);
this.options.focusCallback(bValue); this.options.focusCallback(bValue);
} }
_resetAutocomplete() { _resetDatalist() {
datalist.textContent = ''; datalist.textContent = '';
} }
@ -147,7 +141,7 @@ this.Inputosaurus = class {
delimiterFound = false, delimiterFound = false,
values = []; values = [];
val = self.elements.input.value; val = self.input.value;
if (val) { if (val) {
hook = self.options.splitHook(val); hook = self.options.splitHook(val);
@ -170,7 +164,7 @@ this.Inputosaurus = class {
if (values.length) { if (values.length) {
self._setChosen(values); self._setChosen(values);
self.elements.input.value = ''; self.input.value = '';
self.resizeInput(); self.resizeInput();
} }
} }
@ -183,8 +177,8 @@ this.Inputosaurus = class {
case 'ArrowLeft': case 'ArrowLeft':
// if our input contains no value and backspace has been pressed, select the last tag // if our input contains no value and backspace has been pressed, select the last tag
if (ev.type === 'keydown') { if (ev.type === 'keydown') {
var lastTag = self.elements.inputCont.previousElementSibling, var lastTag = self.inputCont.previousElementSibling,
input = self.elements.input; input = self.input;
if (lastTag && (!input.value if (lastTag && (!input.value
|| (('selectionStart' in input) && input.selectionStart === 0 && input.selectionEnd === 0)) || (('selectionStart' in input) && input.selectionStart === 0 && input.selectionEnd === 0))
) { ) {
@ -200,16 +194,15 @@ this.Inputosaurus = class {
self.resizeInput(); self.resizeInput();
} }
self._updateAutocomplete(); self._updateDatalist();
} }
// the input dynamically resizes based on the length of its value // the input dynamically resizes based on the length of its value
resizeInput() { resizeInput() {
let input = this.elements.input; let input = this.input;
fakeSpan.textContent = input.value; if (input.clientWidth < input.scrollWidth) {
// setTimeout(function () { input.style.width = Math.min(500, Math.max(200, input.scrollWidth)) + 'px';
input.style.width = Math.min(500, Math.max(200, 25 + fakeSpan.clientWidth)) + 'px'; }
// }, 1);
} }
_editTag(ev) { _editTag(ev) {
@ -243,10 +236,10 @@ this.Inputosaurus = class {
self._lastEdit = oPrev.value; self._lastEdit = oPrev.value;
} }
li.after(self.elements.inputCont); li.after(self.inputCont);
self.elements.input.value = tagName; self.input.value = tagName;
setTimeout(() => self.elements.input.select(), 100); setTimeout(() => self.input.select(), 100);
self._removeTag(ev, li); self._removeTag(ev, li);
self.resizeInput(ev); self.resizeInput(ev);
@ -325,8 +318,8 @@ this.Inputosaurus = class {
} }
_renderTags() { _renderTags() {
let self = this, els = self.elements; let self = this;
[...els.ul.children].forEach(node => node !== els.inputCont && node.remove()); [...self.ul.children].forEach(node => node !== self.inputCont && node.remove());
self._chosenValues.forEach(v => { self._chosenValues.forEach(v => {
if (v.obj) { if (v.obj) {
@ -366,7 +359,7 @@ this.Inputosaurus = class {
case 'ArrowRight': case 'ArrowRight':
// select the next tag or input if no more tags exist // select the next tag or input if no more tags exist
var next = el.closest('li').nextElementSibling; var next = el.closest('li').nextElementSibling;
if (next !== this.elements.inputCont) { if (next !== this.inputCont) {
next.querySelector('a').focus(); next.querySelector('a').focus();
} else { } else {
this.focus(); this.focus();
@ -400,7 +393,7 @@ this.Inputosaurus = class {
li.style.cssText = ''; li.style.cssText = '';
}); });
els.inputCont.before(li); self.inputCont.before(li);
} }
}); });
} }
@ -417,7 +410,7 @@ this.Inputosaurus = class {
self._setValue(self._buildValue()); self._setValue(self._buildValue());
li.remove(); li.remove();
setTimeout(() => self.elements.input.focus(), 100); setTimeout(() => self.input.focus(), 100);
} }
_removeDraggedTag(li) { _removeDraggedTag(li) {
@ -436,11 +429,11 @@ this.Inputosaurus = class {
} }
focus () { focus () {
this.elements.input.focus(); this.input.focus();
} }
blur() { blur() {
this.elements.input.blur(); this.input.blur();
} }
_focus(ev) { _focus(ev) {
@ -473,7 +466,7 @@ this.Inputosaurus = class {
self._setChosen(values); self._setChosen(values);
self._renderTags(); self._renderTags();
self.elements.input.value = ''; self.input.value = '';
self.resizeInput(); self.resizeInput();
} }
} }