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

add autocomplete in library add textarea. fixes #49

Browse Source
This commit is contained in:
Kushagra Gour
2017-02-01 10:44:19 +05:30
parent 7aa764cea0
commit 1615c7f889
4 changed files with 133 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/index.html
View File

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

9
src/script.js
View File

@@ -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);
externalCssTextarea.addEventListener('change', onExternalLibChange);
externalJsTextarea.addEventListener('blur', 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,

8
src/style.css
View File

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

119
src/textarea-autocomplete.js Normal file
View File

@@ -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;
})();