add loader and polish library autocompletion

src/index.html

@@ -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:

src/style.css

@@ -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-top-left-radius: 0;
-	border-bottom-right-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;
 }

src/textarea-autocomplete.js

@@ -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;