mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-22 22:41:12 +02:00
Code Issues Releases Wiki Activity

add loader and polish library autocompletion

Browse Source
This commit is contained in:
Kushagra Gour
2017-02-05 04:11:50 +05:30
parent 1615c7f889
commit cd583c35c3
3 changed files with 79 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/textarea-autocomplete.js
View File

@@ -19,9 +19,25 @@
this.list.classList.add('autocomplete-dropdown');
wrap.insertBefore(this.list, null);
this.loader = document.createElement('div');
this.loader.classList.add('loader');
this.loader.classList.add('autocomplete__loader');
this.loader.style.display = 'none';
wrap.insertBefore(this.loader, null);
// after list is insrted into the DOM, we put it in the body
// fixed at same position
setTimeout(() => {
requestIdleCallback(() => {
document.body.appendChild(this.list);
this.list.style.position = 'fixed';
});
},100);
this.t.addEventListener('input', e => this.onInput(e));
this.t.addEventListener('keydown', e => this.onKeyDown(e));
this.t.addEventListener('blur', e => this.closeSuggestions())
this.t.addEventListener('blur', e => this.closeSuggestions());
this.list.addEventListener('mousedown', e => this.onListMouseDown(e));
}
get currentLineNumber() {
@@ -32,7 +48,7 @@
return this.t.value.split('\n')[line - 1];
}
closeSuggestions() {
this.list.parentElement.classList.remove('open');
this.list.classList.remove('is-open');
this.isShowingSuggestions = false;
}
getList(input) {
@@ -63,9 +79,12 @@
onInput() {
var currentLine = this.currentLine;
if (currentLine) {
if (currentLine.indexOf('/') !== -1 || currentLine.match(/https*:\/\//)) { return; }
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
this.loader.style.display = 'block';
this.getList(currentLine).then(arr => {
this.loader.style.display = 'none';
if (!arr.length) {
this.closeSuggestions();
return;
@@ -77,13 +96,21 @@
for (var i = 0; i < Math.min(arr.length, 10); i++) {
this.list.innerHTML += `<li data-url="${arr[i].latest}"><a>${arr[i].name}</a></li>`;
}
this.list.parentElement.classList.add('open');
this.isShowingSuggestions = true;
if (!this.textareaBounds) {
this.textareaBounds = this.t.getBoundingClientRect();
this.list.style.top = this.textareaBounds.bottom + 'px';
this.list.style.left = this.textareaBounds.left + 'px';
this.list.style.width = this.textareaBounds.width + 'px';
}
this.list.classList.add('is-open');
});
}, 500);
}
}
onKeyDown(event) {
if (!this.isShowingSuggestions) { return; }
if (event.keyCode === 27) {
this.closeSuggestions();
event.stopPropagation();
@@ -112,6 +139,13 @@
this.closeSuggestions();
}
}
onListMouseDown(event) {
var target = event.target;
if (target.parentElement.dataset.url) {
this.replaceCurrentLine(target.parentElement.dataset.url)
this.closeSuggestions();
}
}
}
window.TextareaAutoComplete = TextareaAutoComplete;