holm/the-glorious-startpage
1
0
Fork 0
forked from extern/the-glorious-startpage
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix search engine settings logic and probably add more bugs

Browse Source
This commit is contained in:
Gerome Matilla 2020-06-10 09:09:43 +08:00
parent a9329109e5
commit 9e6703134b
5 changed files with 103 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
README.md
View File

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

9
index.html
View File

@ -134,11 +134,10 @@
</div>
<div id='searchEngineContainer'>
<select id='searchEngineSelect'>
<option value='google'>Google</option>
<option value='duckduckgo'>Duckduckgo</option>
<option value='ecosia'>Ecosia</option>
<option value='yahoo'>Yahoo</option>
<option value='bing'>Bing</option>
<!-- Below is the structure of an option that will be generated in js/search-engine-settings.js -->
<!--
<option value='example'>Example</option>
-->
</select>
<button type='button' id='searchEngineAsDefault'>Set as Default</button>
</div>

29
js/config.js
View File

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

90
js/search-engine-settings.js
View File

@ -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 <select>
_onChangeEvent = e => {
const selectedEngine = this._selectSearchEngine.options[this._selectSearchEngine.selectedIndex].value;
this._defaultSearchEngine = selectedEngine;
this._selectTheEngine()
this._currentSearchEngine = selectedEngine;
this._selectTheEngine();
}
_registerOnChangeEvent = () => {
this._selectSearchEngine.onchange = this._onChangeEvent;
}
// Apply button callback
_onClickEvent = e => {
const selectCurrentIndex = this._selectSearchEngine.options[this._selectSearchEngine.selectedIndex]
// Get selected <options>
const selectCurrentIndex = this._selectSearchEngine.options[this._selectSearchEngine.selectedIndex];
// Alert
alert('Success! ' + selectCurrentIndex.text +
' is now your default search engine!');
// Save search engine
// Save and apply default search engine
this._localStorage.setItem('searchEngine', selectCurrentIndex.value);
// Update default search engine and current search engine
this._updateDefaultSearchEngine();
}
_registerOnClickEvent = () => {

6
js/search-query-send.js
View File

@ -1,7 +1,7 @@
class SearchQuerySend extends SearchEngineSettings {
class SearchQuerySend {
constructor() {
super();
// super();
this._searchBox = document.querySelector('#searchBox');
this._keyUpEvent = this._keyUpEvent.bind(this);
this._registerKeyUpEvent();
@ -9,7 +9,7 @@ class SearchQuerySend extends SearchEngineSettings {
_sendQuery = () => {
// Search
window.location.href = encodeURI(this._getSearchQueryPrefix() + this._searchBox.value);
window.location.href = encodeURI(searchEngineSettings.getSearchQueryPrefix() + this._searchBox.value);
};
_keyUpEvent = event => {