Skip to content

Commit

Permalink
small javascript refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
Cade Scroggins committed Mar 4, 2017
1 parent 7773687 commit 0c81765
Showing 1 changed file with 29 additions and 53 deletions.
82 changes: 29 additions & 53 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -345,7 +345,8 @@ <h2 class="category-name">${category.name}</h2>
}

_handleKeydown(event) {
if (event.which === 27) this.toggle(false);
const isEsc = event.which === 27;
if (isEsc) this.toggle(false);
}

_registerEvents() {
Expand All @@ -366,11 +367,9 @@ <h2 class="category-name">${category.name}</h2>
this._setHistoryCache();
}

getPromise(query) {
getSuggestionsPromise(query) {
return new Promise(resolve => {
if (CONFIG.suggestionsLimit < 1) resolve([]);

const suggestions = this._getHistory()
const suggestions = this._history
.filter(item => this._itemContainsQuery(query, item[0]))
.slice(0, CONFIG.suggestionsLimit)
.map(item => item[0]);
Expand All @@ -379,10 +378,6 @@ <h2 class="category-name">${category.name}</h2>
});
}

_getHistory() {
return this._history;
}

_getHistoryCache() {
return JSON.parse(localStorage.getItem(this._dbName)) || [];
}
Expand Down Expand Up @@ -429,36 +424,26 @@ <h2 class="category-name">${category.name}</h2>
this._suggestionEls = [];
this._influencers = influencers;
this._handleKeydown = this._handleKeydown.bind(this);
this._registerEvents();
}

setClickEventCallback(callback) {
this._clickEventCallback = callback;
document.addEventListener('keydown', this._handleKeydown);
}

suggest(input) {
suggest(input, clickCallback = () => {}) {
this._clearSuggestions();
if (!input) return;
this._handleClick = clickCallback;

this._influencers
.map(influencer => influencer.getPromise(input))
.map(influencer => influencer.getSuggestionsPromise(input))
.forEach(promise => {
promise.then(suggestions => {
this._clearClickEvents();

suggestions.forEach(suggestion => {
this._appendSuggestion(suggestion);
});

suggestions.forEach(item => this._appendSuggestion(item));
this._suggestionEls = $.els('.js-search-suggestion');
this._registerClickEvents();
});
});
}

_appendSuggestion(suggestion) {
if (this._suggestionsEl.children.length === CONFIG.suggestionsLimit) return false;

this._suggestionsEl.insertAdjacentHTML(
'beforeend',
`<li>
Expand All @@ -474,14 +459,14 @@ <h2 class="category-name">${category.name}</h2>
}

_clearClickEvents() {
if (typeof this._suggestionEls !== 'undefined') {
this._suggestionEls.forEach(el => {
this._removeClickEvent(el, this._clickEventCallback.bind(null, el.value));
});
}
this._suggestionEls.forEach(el => {
const callback = this._handleClick.bind(null, el.value);
el.removeEventListener('click', callback);
});
}

_clearSuggestions() {
this._clearClickEvents();
this._suggestionsEl.innerHTML = '';
document.body.setAttribute('search-suggestions', false);
}
Expand Down Expand Up @@ -527,18 +512,9 @@ <h2 class="category-name">${category.name}</h2>

_registerClickEvents() {
this._suggestionEls.forEach(el => {
const callback = this._clickEventCallback.bind(null, el.value);
el.addEventListener('click', callback);
el.addEventListener('click', this._handleClick.bind(null, el.value));
});
}

_registerEvents() {
document.addEventListener('keydown', this._handleKeydown);
}

_removeClickEvent(el, callback) {
el.removeEventListener('click', callback);
}
}

class QueryParser {
Expand Down Expand Up @@ -580,7 +556,7 @@ <h2 class="category-name">${category.name}</h2>
keypressEvent.preventDefault();
callback(command.url);
}
})
});
}

_loopThroughCommands(callback) {
Expand All @@ -601,7 +577,7 @@ <h2 class="category-name">${category.name}</h2>
_prepSearch(command, query) {
if (!command.search) return command.url;
const baseUrl = this._stripUrlPath(command.url);
const search = this._shiftAndTrimAndEncode(query, CONFIG.searchDelimiter);
const search = this._shiftAndTrimAndEncode(query);
const searchPath = command.search.replace('{}', search);
return `${baseUrl}${searchPath}`;
}
Expand All @@ -611,8 +587,9 @@ <h2 class="category-name">${category.name}</h2>
return arr.join(delimiter).trim();
}

_shiftAndTrimAndEncode(arr, delimiter) {
return encodeURIComponent(this._shiftAndTrim(arr, delimiter));
_shiftAndTrimAndEncode(arr) {
const clean = this._shiftAndTrim(arr, CONFIG.searchDelimiter);
return encodeURIComponent(clean);
}

_stripUrlPath(url) {
Expand All @@ -623,10 +600,10 @@ <h2 class="category-name">${category.name}</h2>
}

class Form {
constructor(help, history, suggestionAggregator, queryParser) {
constructor(help, history, suggester, queryParser) {
this._help = help;
this._history = history;
this._suggestionAggregator = suggestionAggregator;
this._suggester = suggester;
this._queryParser = queryParser;
this._formEl = $.el('#js-search-form');
this._inputEl = $.el('#js-search-input');
Expand All @@ -636,10 +613,6 @@ <h2 class="category-name">${category.name}</h2>
this._handleKeyup = this._handleKeyup.bind(this);
this._submitWithValue = this._submitWithValue.bind(this);
this._registerEvents();

this._suggestionAggregator.setClickEventCallback(value => {
this._submitWithValue(value)
});
}

_clearInput() {
Expand Down Expand Up @@ -668,7 +641,10 @@ <h2 class="category-name">${category.name}</h2>
_handleKeyup(event) {
if (this._inputElVal !== this._inputEl.value) {
if (CONFIG.suggestions) {
this._suggestionAggregator.suggest(this._inputEl.value.trim());
this._suggester.suggest(
this._inputEl.value.trim(),
this._submitWithValue
);
}

this._inputElVal = this._inputEl.value;
Expand All @@ -695,7 +671,7 @@ <h2 class="category-name">${category.name}</h2>
this._help.toggle();
} else {
this._history.addItem(query);
this._suggestionAggregator.suggest('');
this._suggester.suggest('');
this._inputEl.value = '';
this._redirect(this._queryParser.generateRedirect(query));
}
Expand All @@ -710,7 +686,7 @@ <h2 class="category-name">${category.name}</h2>
const clock = new Clock();
const help = new Help();
const history = new History();
const aggregator = new Suggester([history]);
const suggester = new Suggester([history]);
const parser = new QueryParser();
const form = new Form(help, history, aggregator, parser);
const form = new Form(help, history, suggester, parser);
</script>

0 comments on commit 0c81765

Please sign in to comment.