mirror of https://github.com/mue/mue.git
285 lines
7.9 KiB
JavaScript
285 lines
7.9 KiB
JavaScript
import variables from 'config/variables';
|
|
import { PureComponent, createRef } from 'react';
|
|
import { MdSearch, MdMic, MdScreenSearchDesktop } from 'react-icons/md';
|
|
import { BsGoogle } from 'react-icons/bs';
|
|
import { SiDuckduckgo, SiMicrosoftbing, SiYahoo, SiBaidu } from 'react-icons/si';
|
|
import { FaYandex } from 'react-icons/fa';
|
|
import { Tooltip } from 'components/Elements';
|
|
import { Autocomplete as AutocompleteInput } from './components/autocomplete';
|
|
|
|
import EventBus from 'utils/eventbus';
|
|
|
|
import './search.scss';
|
|
|
|
import searchEngines from './search_engines.json';
|
|
|
|
export default class Search extends PureComponent {
|
|
constructor() {
|
|
super();
|
|
this.state = {
|
|
url: '',
|
|
query: '',
|
|
microphone: null,
|
|
suggestions: [],
|
|
searchDropdown: false,
|
|
classList:
|
|
localStorage.getItem('widgetStyle') === 'legacy' ? 'searchIcons old' : 'searchIcons',
|
|
};
|
|
this.micIcon = createRef();
|
|
}
|
|
|
|
startSpeechRecognition = () => {
|
|
const voiceSearch = new window.webkitSpeechRecognition();
|
|
voiceSearch.start();
|
|
|
|
this.micIcon.current.classList.add('micActive');
|
|
|
|
const searchText = document.getElementById('searchtext');
|
|
|
|
voiceSearch.onresult = (event) => {
|
|
searchText.value = event.results[0][0].transcript;
|
|
};
|
|
|
|
voiceSearch.onend = () => {
|
|
this.micIcon.current.classList.remove('micActive');
|
|
if (searchText.value === '') {
|
|
return;
|
|
}
|
|
|
|
setTimeout(() => {
|
|
variables.stats.postEvent('feature', 'Voice search');
|
|
window.location.href = this.state.url + `?${this.state.query}=` + searchText.value;
|
|
}, 1000);
|
|
};
|
|
};
|
|
|
|
searchButton = (e) => {
|
|
e.preventDefault();
|
|
const value = e.target.value || document.getElementById('searchtext').value || 'mue fast';
|
|
variables.stats.postEvent('feature', 'Search');
|
|
window.location.href = this.state.url + `?${this.state.query}=` + value;
|
|
};
|
|
|
|
async getSuggestions(input) {
|
|
window.setResults = (results) => {
|
|
window.searchResults = results;
|
|
};
|
|
|
|
const results = await (await fetch(`https://ac.ecosia.org/?q=${input}`)).json();
|
|
|
|
try {
|
|
this.setState({
|
|
suggestions: results.suggestions.splice(0, 3),
|
|
});
|
|
} catch (e) {
|
|
// ignore error if empty
|
|
}
|
|
}
|
|
|
|
init() {
|
|
let url, microphone;
|
|
let query = 'q';
|
|
|
|
const setting = localStorage.getItem('searchEngine');
|
|
const info = searchEngines.find((i) => i.settingsName === setting);
|
|
|
|
if (info !== undefined) {
|
|
url = info.url;
|
|
if (info.query) {
|
|
query = info.query;
|
|
}
|
|
}
|
|
|
|
if (setting === 'custom') {
|
|
const custom = localStorage.getItem('customSearchEngine');
|
|
if (custom !== null) {
|
|
url = custom;
|
|
}
|
|
}
|
|
|
|
if (localStorage.getItem('voiceSearch') === 'true') {
|
|
microphone = (
|
|
<button
|
|
className="navbarButton"
|
|
onClick={this.startSpeechRecognition}
|
|
ref={this.micIcon}
|
|
aria-label="Microphone Search"
|
|
>
|
|
<MdMic className="micIcon" />
|
|
</button>
|
|
);
|
|
}
|
|
|
|
this.setState({
|
|
url,
|
|
query,
|
|
microphone,
|
|
currentSearch: info ? info.name : 'Custom',
|
|
});
|
|
}
|
|
|
|
/**
|
|
* If the user selects a search engine from the dropdown menu, the function will set the state of the
|
|
* search engine to the selected search engine.
|
|
* @param {string} name - The name of the search engine
|
|
* @param {boolean} custom - If the search engine is custom
|
|
*/
|
|
setSearch(name, custom) {
|
|
let url;
|
|
let query = 'q';
|
|
const info = searchEngines.find((i) => i.name === name);
|
|
|
|
if (info !== undefined) {
|
|
url = info.url;
|
|
if (info.query) {
|
|
query = info.query;
|
|
}
|
|
}
|
|
|
|
if (custom) {
|
|
const customSetting = localStorage.getItem('customSearchEngine');
|
|
if (customSetting !== null) {
|
|
url = customSetting;
|
|
} else {
|
|
url = this.state.url;
|
|
}
|
|
} else {
|
|
localStorage.setItem('searchEngine', info.settingsName);
|
|
}
|
|
|
|
this.setState({
|
|
url,
|
|
query,
|
|
currentSearch: name,
|
|
searchDropdown: false,
|
|
});
|
|
}
|
|
|
|
componentDidMount() {
|
|
EventBus.on('refresh', (data) => {
|
|
if (data === 'search') {
|
|
this.init();
|
|
}
|
|
});
|
|
|
|
this.init();
|
|
|
|
if (localStorage.getItem('searchFocus') === 'true') {
|
|
const element = document.getElementById('searchtext');
|
|
if (element) {
|
|
element.focus();
|
|
}
|
|
}
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
EventBus.off('refresh');
|
|
}
|
|
|
|
/**
|
|
* Gets the icon for the search engine dropdown.
|
|
* @param {string} name - The name of the search engine.
|
|
* @returns A React component.
|
|
*/
|
|
getSearchDropdownicon(name) {
|
|
switch (name) {
|
|
case 'Google':
|
|
return <BsGoogle />;
|
|
case 'DuckDuckGo':
|
|
return <SiDuckduckgo />;
|
|
case 'Bing':
|
|
return <SiMicrosoftbing />;
|
|
case 'Yahoo':
|
|
case 'Yahoo! JAPAN':
|
|
return <SiYahoo />;
|
|
case 'Яндекс':
|
|
return <FaYandex />;
|
|
case '百度':
|
|
return <SiBaidu />;
|
|
default:
|
|
return <MdScreenSearchDesktop />;
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const customText = variables
|
|
.getMessage('modals.main.settings.sections.search.custom')
|
|
.split(' ')[0];
|
|
|
|
return (
|
|
<div className="searchComponents">
|
|
<div className="searchMain">
|
|
<div className={this.state.classList}>
|
|
{localStorage.getItem('searchDropdown') === 'true' ? (
|
|
<Tooltip
|
|
title={variables.getMessage('modals.main.settings.sections.search.search_engine')}
|
|
>
|
|
<button
|
|
className="navbarButton"
|
|
aria-label="Search Engine"
|
|
onClick={() => this.setState({ searchDropdown: !this.state.searchDropdown })}
|
|
>
|
|
{this.getSearchDropdownicon(this.state.currentSearch)}
|
|
</button>
|
|
</Tooltip>
|
|
) : (
|
|
''
|
|
)}
|
|
<Tooltip
|
|
title={variables.getMessage('modals.main.settings.sections.search.voice_search')}
|
|
>
|
|
{this.state.microphone}
|
|
</Tooltip>
|
|
</div>
|
|
<form onSubmit={this.searchButton} className="searchBar">
|
|
<div className={this.state.classList}>
|
|
<Tooltip title={variables.getMessage('widgets.search')}>
|
|
<button className="navbarButton" onClick={this.searchButton} aria-label="Search">
|
|
<MdSearch />
|
|
</button>
|
|
</Tooltip>
|
|
</div>
|
|
<AutocompleteInput
|
|
placeholder={variables.getMessage('widgets.search')}
|
|
id="searchtext"
|
|
suggestions={this.state.suggestions}
|
|
onChange={(e) => this.getSuggestions(e)}
|
|
onClick={this.searchButton}
|
|
/>
|
|
</form>
|
|
</div>
|
|
<div>
|
|
{localStorage.getItem('searchDropdown') === 'true' &&
|
|
this.state.searchDropdown === true && (
|
|
<div className="searchDropdown">
|
|
{searchEngines.map(({ name }, key) => {
|
|
return (
|
|
<span
|
|
className={
|
|
'searchDropdownList' +
|
|
(this.state.currentSearch === name ? ' searchDropdownListActive' : '')
|
|
}
|
|
onClick={() => this.setSearch(name)}
|
|
key={key}
|
|
>
|
|
{name}
|
|
</span>
|
|
);
|
|
})}
|
|
<span
|
|
className={
|
|
'searchDropdownList' +
|
|
(this.state.currentSearch === customText ? ' searchDropdownListActive' : '')
|
|
}
|
|
onClick={() => this.setSearch(customText, 'custom')}
|
|
>
|
|
{customText}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|