add autocomplete in library add textarea. fixes #49

src/index.html

@@ -405,6 +405,7 @@
 		<script src="loader.js"></script>
 		<script src="notifications.js"></script>
 		<script src="library-list.js"></script>
+		<script src="textarea-autocomplete.js"></script>
 		<script src="script.js"></script>
 		<script src="dropdown.js"></script>
 	</body>

src/script.js

@@ -1011,8 +1011,6 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD
 				}, 350);
 				toggleSavedItemsPane();
 			}
-
-			utils.log(event.keyCode)
 		});
 
 		window.addEventListener('click', function(e) {
@@ -1049,8 +1047,11 @@ settingsBtn, onboardModal, notificationsBtn, onboardShowInTabOptionBtn, onboardD
 			trackEvent('ui', 'addLibrarySelect', target.selectedOptions[0].label);
 			onExternalLibChange();
 		});
-		externalJsTextarea.addEventListener('change', onExternalLibChange);
+		externalJsTextarea.addEventListener('blur', onExternalLibChange);
-		externalCssTextarea.addEventListener('change', onExternalLibChange);
+		externalCssTextarea.addEventListener('blur', onExternalLibChange);
+
+		new TextareaAutoComplete(externalJsTextarea, obj => obj.latest.match(/\.js$/));
+		new TextareaAutoComplete(externalCssTextarea, obj => obj.latest.match(/\.css$/));
 
 		chrome.storage.local.get({
 			layoutMode: 1,

src/style.css

@@ -582,6 +582,7 @@ li.CodeMirror-hint-active {
 	color: #333;
 	cursor: pointer;
 }
+.dropdown__menu > li.selected > a,
 .dropdown__menu > li > a:hover {
 	background: var(--color-sidebar);
 	color: white;
@@ -678,3 +679,10 @@ li.CodeMirror-hint-active {
 	background: white url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width:32px;height:32px" viewBox="0 0 24 24"><path fill="limegreen" d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M11,16.5L18,9.5L16.59,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z" /></svg>');
 }
 
+.autocomplete-dropdown {
+	border-bottom-left-radius: 0;
+	border-bottom-right-radius: 0;
+	right: 0;
+	max-height: 200px;
+	overflow-y: auto;
+}

src/textarea-autocomplete.js

@@ -0,0 +1,119 @@
+// textarea-autocomplete.js
+(function() {
+
+	var timeout;
+	var t, list;
+	var isShowingSuggestions = false;
+
+	class TextareaAutoComplete {
+
+		constructor (textarea, filter) {
+			this.t = textarea;
+			this.filter =  filter;
+			var wrap = document.createElement('div');
+			wrap.classList.add('btn-group');
+			textarea.parentElement.insertBefore(wrap, textarea);
+			wrap.insertBefore(textarea, null);
+			this.list = document.createElement('ul');
+			this.list.classList.add('dropdown__menu');
+			this.list.classList.add('autocomplete-dropdown');
+			wrap.insertBefore(this.list, null);
+
+			this.t.addEventListener('input', e => this.onInput(e));
+			this.t.addEventListener('keydown', e => this.onKeyDown(e));
+			this.t.addEventListener('blur', e => this.closeSuggestions())
+		}
+
+		get currentLineNumber() {
+			return this.t.value.substr(0, this.t.selectionStart).split('\n').length;
+		}
+		get currentLine() {
+			var line = this.currentLineNumber;
+			return this.t.value.split('\n')[line - 1];
+		}
+		closeSuggestions() {
+			this.list.parentElement.classList.remove('open');
+			this.isShowingSuggestions = false;
+		}
+		getList(input) {
+			// return new Promise((resolve) => {
+			// 	resolve([
+			// 		{ name: 'asdsd', latest: 'dsfdsfsdf/sdf/sd/f/df'},
+			// 		{ name: 'asdsd', latest: 'dsfdsfsdf/sdf/sd/f/df'},
+			// 		{ name: 'asdsd', latest: 'dsfdsfsdf/sdf/sd/f/df'},
+			// 		{ name: 'asdsd', latest: 'dsfdsfsdf/sdf/sd/f/df'},
+			// 		{ name: 'asdsd', latest: 'dsfdsfsdf/sdf/sd/f/df'},
+			// 		{ name: 'asdsd', latest: 'dsfdsfsdf/sdf/sd/f/df'},
+			// 		{ name: 'asdsd', latest: 'dsfdsfsdf/sdf/sd/f/df'},
+			// 		{ name: 'asdsd', latest: 'dsfdsfsdf/sdf/sd/f/df'},
+			// 		{ name: 'asdsd', latest: 'dsfdsfsdf/sdf/sd/f/df'},
+			// 		 ])
+			// })
+			var url = 'https://api.cdnjs.com/libraries?search=';
+			return fetch(url + input)
+			.then(response => {
+				return response.json().then(json => json.results);
+			});
+		}
+		replaceCurrentLine(val) {
+			var lines = this.t.value.split('\n');
+			lines.splice(this.currentLineNumber - 1, 1, val)
+			this.t.value = lines.join('\n');
+		}
+		onInput() {
+			var currentLine = this.currentLine;
+			if (currentLine) {
+				clearTimeout(this.timeout);
+				this.timeout = setTimeout(() => {
+					this.getList(currentLine).then(arr => {
+						if (!arr.length) {
+							this.closeSuggestions();
+							return;
+						}
+						this.list.innerHTML = '';
+						if (this.filter) {
+							arr = arr.filter(this.filter);
+						}
+						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;
+					});
+				}, 500);
+			}
+		}
+		onKeyDown(event) {
+			if (event.keyCode === 27) {
+				this.closeSuggestions();
+				event.stopPropagation();
+			}
+			if (event.keyCode === 40 && this.isShowingSuggestions) {
+				var selectedItemElement = this.list.querySelector('.selected');
+				if (selectedItemElement) {
+					selectedItemElement.classList.remove('selected');
+					selectedItemElement.nextElementSibling.classList.add('selected');
+				} else {
+					this.list.querySelector('li:first-child').classList.add('selected');
+				}
+				event.preventDefault();
+			} else if (event.keyCode === 38 && this.isShowingSuggestions) {
+				var selectedItemElement = this.list.querySelector('.selected');
+				if (selectedItemElement) {
+					selectedItemElement.classList.remove('selected');
+					selectedItemElement.previousElementSibling.classList.add('selected');
+				} else {
+					this.list.querySelector('li:first-child').classList.add('selected');
+				}
+				event.preventDefault();
+			} else if (event.keyCode === 13 && this.isShowingSuggestions) {
+				var selectedItemElement = this.list.querySelector('.selected');
+				this.replaceCurrentLine(selectedItemElement.dataset.url)
+				this.closeSuggestions();
+			}
+		}
+	}
+
+	window.TextareaAutoComplete = TextareaAutoComplete;
+
+})();