diff --git a/README.md b/README.md index 28e6809..9a3cd81 100644 --- a/README.md +++ b/README.md @@ -67,7 +67,7 @@ Add more buttons or web shortcuts in web menu by editing the `webSites` array in `js/config.js`. Make sure to put an icon with `svg` format for the shortcut in `assets/webcons/` folder. ```js -let webSites = [ +const webSites = [ { site: 'Reddit', icon: 'reddit', @@ -83,7 +83,7 @@ let webSites = [ To add more web shortcuts/buttons in the dock, you have to edit the `dockSites` array in `js/config.js`. Make sure to put an icon with `svg` format for the shortcut in `assets/webcons/` folder. ```js -let dockSites = [ +const dockSites = [ { site: 'Reddit', icon: 'reddit', @@ -93,6 +93,20 @@ let dockSites = [ ] ``` +#### Adding more search engine in selection + +Add more search engine in selection by editing the `searchEngines` object in `js/config.js`. Make sure to follow the format below: + +```js +const searchEngines = { + 'duckduckgo': { + name: 'Duckduckgo', + prefix: 'https://duckduckgo.com/?q=' + }, + ... +} +``` + #### Set your OpenWeatherMap API key Setting your OpenWeatherMap credential is a breeze. diff --git a/index.html b/index.html index 6584636..2035667 100644 --- a/index.html +++ b/index.html @@ -134,11 +134,10 @@
diff --git a/js/config.js b/js/config.js index 065a2cc..6d070c6 100644 --- a/js/config.js +++ b/js/config.js @@ -1,10 +1,39 @@ class Config { constructor() { + this.getSearchEngines = this.getSearchEngines.bind(this); this.getWebSites = this.getWebSites.bind(this); this.getDockSites = this.getDockSites.bind(this); } + getSearchEngines = () => { + + const searchEngines = { + 'google': { + name: 'Google', + prefix: 'https://www.google.com/search?q=' + }, + 'duckduckgo': { + name: 'Duckduckgo', + prefix: 'https://duckduckgo.com/?q=' + }, + 'ecosia': { + name: 'Ecosia', + prefix: 'https://www.ecosia.org/search?q=' + }, + 'yahoo': { + name: 'Yahoo', + prefix: 'https://search.yahoo.com/search?p=' + }, + 'bing': { + name: 'Bing', + prefix: 'https://www.bing.com/search?q=' + } + } + + return searchEngines; + } + getWebSites = () => { // Web menu // A list of websites that will be generated and put on the web menu diff --git a/js/search-engine-settings.js b/js/search-engine-settings.js index 228f877..698b848 100644 --- a/js/search-engine-settings.js +++ b/js/search-engine-settings.js @@ -7,10 +7,11 @@ class SearchEngineSettings { this._selectSearchEngine = document.querySelector('#searchEngineSelect'); this._selectSearchEngineApply = document.querySelector('#searchEngineAsDefault'); - this._defaultSearchEngine = this._localStorage.getItem('searchEngine') || 'google'; this._placeholderPrefix = ' Search with '; this._searchQueryPrefix = 'http://www.google.com/search?q='; + this._searchEngines = config.getSearchEngines(); + this._onClickEvent = this._onClickEvent.bind(this); this._onChangeEvent = this._onChangeEvent.bind(this); @@ -18,69 +19,80 @@ class SearchEngineSettings { } _init = () => { - this._selectQueryString(); + this._updateDefaultSearchEngine(); + this._createSearchEngineOptions(); this._selectTheEngine(); this._registerOnChangeEvent(); this._registerOnClickEvent(); } - // Update query string and placeholder - _selectQueryString = () => { - - if (this._defaultSearchEngine === 'google') { - this._searchQueryPrefix = 'http://www.google.com/search?q='; - this._searchBox.placeholder = this._placeholderPrefix + 'Google'; - - } else if (this._defaultSearchEngine === 'duckduckgo') { - this._searchQueryPrefix = 'https://duckduckgo.com/?q='; - this._searchBox.placeholder = this._placeholderPrefix + 'Duckduckgo'; - - } else if (this._defaultSearchEngine === 'ecosia') { - this._searchQueryPrefix = 'https://www.ecosia.org/search?q='; - this._searchBox.placeholder = this._placeholderPrefix + 'Ecosia'; - - } else if (this._defaultSearchEngine === 'yahoo') { - this._searchQueryPrefix = 'http://search.yahoo.com/search?p='; - this._searchBox.placeholder = this._placeholderPrefix + 'Yahoo'; - - } else if (this._defaultSearchEngine === 'bing') { - this._searchQueryPrefix = 'https://www.bing.com/search?q='; - this._searchBox.placeholder = this._placeholderPrefix + 'Bing'; - - } else { - this._searchQueryPrefix = 'http://www.google.com/search?q='; - this._searchBox.placeholder = this._placeholderPrefix + 'Google'; - } + _updateDefaultSearchEngine = () => { + // Update default search engine and current search engine + this._defaultSearchEngine = this._localStorage.getItem('searchEngine') || 'google'; + this._currentSearchEngine = this._defaultSearchEngine; } - _getSearchQueryPrefix = () => { + // Get query prefix + getSearchQueryPrefix = () => { return this._searchQueryPrefix; } - // Use this to select the default search engine on startup - _selectTheEngine = () => { - // Available values: google, duckduckgo, ecosia, etc. - this._selectSearchEngine.value = this._defaultSearchEngine; - this._selectQueryString(); + // Parse the this._searchEngines object to automatically create a selection + _createSearchEngineOptions = () => { + Object.keys(this._searchEngines) + .forEach(key => { + const seValue = key; + const seData = this._searchEngines[key]; + const seOption = document.createElement('option'); + seOption.value = seValue; + seOption.innerText = seData.name; + this._selectSearchEngine.appendChild(seOption); + }) + + // Call to update query string and placeholder + this._updateSearchEngineElements(); } + // Update query string and placeholder + _updateSearchEngineElements = () => { + + const seData = this._searchEngines[this._currentSearchEngine]; + + this._searchQueryPrefix = seData.prefix; + this._searchBox.placeholder = this._placeholderPrefix + seData.name; + } + + // Use this to select the current/default search engine on startup + _selectTheEngine = () => { + this._selectSearchEngine.value = this._currentSearchEngine; + this._updateSearchEngineElements(); + } + + // Execute this on change event of