From 751ae9fb5b05a766498f5429a8209244a7a6f28f Mon Sep 17 00:00:00 2001 From: Cade Scroggins Date: Sun, 17 Jan 2021 16:10:04 +0530 Subject: [PATCH] polish --- README.md | 2 +- index.html | 880 +++++++++++++++++++++++++++-------------------------- 2 files changed, 449 insertions(+), 433 deletions(-) diff --git a/README.md b/README.md index 26cfc9a..4ede0ba 100644 --- a/README.md +++ b/README.md @@ -49,7 +49,7 @@ URL. For example: ## Configuration The above is just the beginning. Open up the [index.html](index.html) file and -read through the `CONFIG`! +make it yours! ## License diff --git a/index.html b/index.html index f3b8016..59b795e 100644 --- a/index.html +++ b/index.html @@ -6,301 +6,39 @@ -
  • - - ${ - this._colors - ? `` - : '' - } + ${key} ${name} @@ -814,7 +824,7 @@ } _handleKeydown(e) { - if ($.key(e) === 'escape') this.toggle(false); + if ($.whichKey(e) === 'escape') this.toggle(false); } _registerEvents() { @@ -825,32 +835,42 @@ class Influencer { constructor(options) { this._limit = options.limit; + this._minChars = options.minChars; this._parseQuery = options.parseQuery; } - addItem() {} - getSuggestions() {} + addItem() { + return undefined; + } + + getSuggestions() { + return Promise.resolve([]); + } _addSearchPrefix(items, query) { - const searchPrefix = this._getSearchPrefix(query); + const { isSearch, key, split } = this._parseQuery(query); + const searchPrefix = isSearch ? `${key}${split} ` : false; return items.map((s) => (searchPrefix ? searchPrefix + s : s)); } - _getSearchPrefix(query) { - const { isSearch, key, split } = this._parseQuery(query); - return isSearch ? `${key}${split} ` : false; + _isTooShort(query) { + return query.length < this._minChars; } } class DefaultInfluencer extends Influencer { - constructor({ defaultSuggestions }) { + constructor({ suggestionDefaults }) { super(...arguments); - this._defaultSuggestions = defaultSuggestions; + this._suggestionDefaults = suggestionDefaults; } - getSuggestions(query) { + getSuggestions(rawQuery) { + if (this._isTooShort(rawQuery)) return Promise.resolve([]); + return new Promise((resolve) => - resolve((this._defaultSuggestions[query] || []).slice(0, this._limit)) + resolve( + (this._suggestionDefaults[rawQuery] || []).slice(0, this._limit) + ) ); } } @@ -858,12 +878,11 @@ class DuckDuckGoInfluencer extends Influencer { constructor({ queryParser }) { super(...arguments); - this.isAsync = true; } getSuggestions(rawQuery) { + if (this._isTooShort(rawQuery)) return Promise.resolve([]); const { query } = this._parseQuery(rawQuery); - if (!query) return Promise.resolve([]); return new Promise((resolve) => { const callback = 'autocompleteCallback'; @@ -913,16 +932,18 @@ this._setHistory(sorted); } - getSuggestions(query) { + getSuggestions(rawQuery) { + if (this._isTooShort(rawQuery)) return Promise.resolve([]); + return new Promise((resolve) => resolve( this._getHistory() .map(([item]) => item) .filter( (item) => - query && - item.toLowerCase() !== query.toLowerCase() && - item.toLowerCase().indexOf(query.toLowerCase()) !== -1 + rawQuery && + item.toLowerCase() !== rawQuery.toLowerCase() && + item.toLowerCase().indexOf(rawQuery.toLowerCase()) !== -1 ) .slice(0, this._limit) ) @@ -950,9 +971,7 @@ class Suggester { constructor(options) { - this.isAsync = false; this._el = $.el('#search-suggestions'); - this._enabled = options.enabled; this._influencers = options.influencers; this._limit = options.limit; this._currentInput = ''; @@ -981,7 +1000,6 @@ } suggest(input) { - if (!this._enabled) return; this._currentInput = input.trim(); if (!this._currentInput) { @@ -989,7 +1007,7 @@ return; } - Promise.all(this._getInfluencers({ input })).then(this._setSuggestions); + Promise.all(this._getInfluencers()).then(this._setSuggestions); } _buildSuggestionsHtml(suggestions) { @@ -998,7 +1016,10 @@ const matched = suggestion.match(match); const suggestionHtml = matched - ? suggestion.replace(match, `${matched[0]}`) + ? suggestion.replace( + match, + `${matched[0]}` + ) : suggestion; return ` @@ -1061,9 +1082,9 @@ if (!exists) this._unHighlight(e); } - _getInfluencers({ input }) { + _getInfluencers() { return this._influencers.map((influencer) => - influencer.getSuggestions(input) + influencer.getSuggestions(this._currentInput) ); } @@ -1158,7 +1179,6 @@ if (query === key) { res.key = key; res.isKey = true; - res.query = ''; res.redirect = url; return true; } @@ -1177,7 +1197,6 @@ res.isPath = true; res.split = this._pathDelimiter; res.path = QueryParser._shiftAndTrim(splitPath, res.split); - res.query = ''; res.redirect = QueryParser._prepPath(url, res.path); return true; } @@ -1230,7 +1249,6 @@ class Form { constructor(options) { - this._colors = options.colors; this._formEl = $.el('#search-form'); this._inputEl = $.el('#search-input'); this._inputElVal = ''; @@ -1256,7 +1274,7 @@ this._inputEl.value = ''; this._inputElVal = ''; this._suggester.suggest(''); - this._setBackgroundFromQuery(''); + this._setColorsFromQuery(''); } show() { @@ -1275,7 +1293,7 @@ const { isKey } = this._parseQuery(newQuery); this._inputElVal = newQuery; this._suggester.suggest(newQuery); - this._setBackgroundFromQuery(newQuery); + this._setColorsFromQuery(newQuery); if (!newQuery || isHelp) this.hide(); if (isHelp) this._toggleHelp(); if (this._instantRedirect && isKey) this._submitWithValue(newQuery); @@ -1284,7 +1302,7 @@ _handleKeydown(e) { if ($.isUp(e) || $.isDown(e) || $.isRemove(e)) return; - switch ($.key(e)) { + switch ($.whichKey(e)) { case 'alt': case 'ctrl': case 'ctrl-*': @@ -1308,7 +1326,7 @@ _previewValue(value) { this._inputEl.value = value; - this._setBackgroundFromQuery(value); + this._setColorsFromQuery(value); } _redirect(redirect) { @@ -1328,9 +1346,9 @@ } } - _setBackgroundFromQuery(query) { - if (!this._colors) return; - this._formEl.style.background = this._parseQuery(query).color || ''; + _setColorsFromQuery(query) { + const color = this._parseQuery(query).color; + this._formEl.style.background = color || ''; } _submitForm(e) { @@ -1349,47 +1367,45 @@ const queryParser = new QueryParser({ commands: CONFIG.commands, - pathDelimiter: CONFIG.pathDelimiter, - searchDelimiter: CONFIG.searchDelimiter, + pathDelimiter: CONFIG.queryPathDelimiter, + searchDelimiter: CONFIG.querySearchDelimiter, }); - const influencers = CONFIG.influencers.map((influencerConfig) => { + const influencers = CONFIG.suggestionInfluencers.map((influencerConfig) => { return new { Default: DefaultInfluencer, DuckDuckGo: DuckDuckGoInfluencer, History: HistoryInfluencer, }[influencerConfig.name]({ - defaultSuggestions: CONFIG.defaultSuggestions, limit: influencerConfig.limit, + minChars: influencerConfig.minChars, parseQuery: queryParser.parse, + suggestionDefaults: CONFIG.suggestionDefaults, }); }); const suggester = new Suggester({ - asyncInfluencersAreBlocking: CONFIG.asyncInfluencersAreBlocking, - enabled: CONFIG.suggestions, influencers, - limit: CONFIG.suggestionsLimit, + limit: CONFIG.suggestionLimit, }); const help = new Help({ - colors: CONFIG.colors, commands: CONFIG.commands, - newTab: CONFIG.newTab, + newTab: CONFIG.queryNewTab, }); const form = new Form({ - colors: CONFIG.colors, - instantRedirect: CONFIG.instantRedirect, - newTab: CONFIG.newTab, + instantRedirect: CONFIG.queryInstantRedirect, + newTab: CONFIG.queryNewTab, parseQuery: queryParser.parse, suggester, toggleHelp: help.toggle, }); new Clock({ + amPm: CONFIG.clockShowAmPm, delimiter: CONFIG.clockDelimiter, - onClick: CONFIG.clockAction === 'Search' ? form.show : help.toggle, - twentyFourHour: CONFIG.twentyFourHourClock, + onClick: CONFIG.clockOnClickAction === 'Search' ? form.show : help.toggle, + twentyFourHour: CONFIG.clockTwentyFourHour, });