mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-04-30 07:27:58 +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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/index.html
View File

@ -172,10 +172,10 @@
<div class="modal__content" id="app">
<h1>Add Library</h1>
<h3>JavaScript</h3>
<textarea id="js-external-js" class="full-width" id="" cols="30" rows="5" placeholder="Put each library in new line"></textarea>
<textarea id="js-external-js" class="full-width" id="" cols="30" rows="5" placeholder="Start typing name of a library. Put each library in new line"></textarea>
<h3>CSS</h3>
<textarea id="js-external-css" class="full-width" id="" cols="30" rows="5" placeholder="Put each library in new line"></textarea>
<textarea id="js-external-css" class="full-width" id="" cols="30" rows="5" placeholder="Start typing name of a library. Put each library in new line"></textarea>
<div style="margin-top:20px;">
Choose from popular libraries:

45
src/style.css
View File

@ -554,6 +554,32 @@ li.CodeMirror-hint-active {
top: 2px;
left: 2px;
}
.loader,
.loader:after {
border-radius: 50%;
width: 3em;
height: 3em;
}
.loader {
font-size: 5px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid rgba(118,57,229, 0.2);
border-right: 1.1em solid rgba(118,57,229, 0.2);
border-bottom: 1.1em solid rgba(118,57,229, 0.2);
border-left: 1.1em solid #7639e5;
transform: translateZ(0);
animation: load8 1.1s infinite linear;
}
@keyframes load8 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.btn-group {
position: relative;
cursor: pointer;
@ -566,12 +592,13 @@ li.CodeMirror-hint-active {
margin: 0;
min-width: 200px;
display: block;
font-size: 0.88rem;
list-style: none;
border-radius: 4px;
overflow: hidden;
opacity: 0;
visibility: hidden;
transition: 0.25s ease;
transition: transform 0.25s ease;
transform: translateY(10px);
z-index: 5;
background: white;
@ -591,7 +618,8 @@ li.CodeMirror-hint-active {
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.open .dropdown__menu {
.open > .dropdown__menu,
.dropdown__menu.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
@ -680,9 +708,16 @@ li.CodeMirror-hint-active {
}
.autocomplete-dropdown {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
right: 0;
max-height: 200px;
overflow-y: auto;
}
border: 1px solid rgba(0,0,0,0.5);
z-index: 2001;
}
.autocomplete__loader {
position: absolute;
right: 10px;
bottom: 10px;
}

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;