mirror of
https://github.com/Lissy93/dashy.git
synced 2025-12-22 08:26:17 +01:00
433 lines
13 KiB
Vue
433 lines
13 KiB
Vue
<template>
|
|
<div class = "search-settings-row">
|
|
<form
|
|
@submit.prevent="searchSubmitted"
|
|
:class="minimalSearch ? 'minimal' : 'normal'"
|
|
>
|
|
<label for="filter-tiles">
|
|
{{ $t('search.search-label') }}
|
|
</label>
|
|
<div class="search-wrap">
|
|
<input
|
|
id="filter-tiles"
|
|
v-model="input"
|
|
ref="filter"
|
|
:placeholder="$t('search.search-placeholder')"
|
|
v-on:input="userIsTypingSomething"
|
|
@keydown.esc="clearFilterInput"
|
|
/>
|
|
<p
|
|
v-if="(!searchPrefs.disableWebSearch) && input.length > 0"
|
|
class="web-search-note"
|
|
>
|
|
{{ $t('search.enter-to-search-web') }}
|
|
</p>
|
|
</div>
|
|
<i
|
|
v-if="input.length > 0"
|
|
class="clear-search"
|
|
:title="$t('search.clear-search-tooltip')"
|
|
@click="clearFilterInput"
|
|
>x</i>
|
|
</form>
|
|
<div class="settings-block">
|
|
<button
|
|
@click="showSearchPanel = !showSearchPanel"
|
|
class="settings-toggle"
|
|
type="button"
|
|
v-tooltip="showSearchPanel ? $t('Hide Search Options') : $t('Show Search Options')"
|
|
>
|
|
<IconConfigEditor />
|
|
</button>
|
|
<div v-show="showSearchPanel" class="floating-search-panel">
|
|
<label class="theme-label">
|
|
<input
|
|
type="checkbox"
|
|
:checked="searchPrefs.disableWebSearch"
|
|
@change="toggleDisableWebSearch($event)"
|
|
/>
|
|
Disable Web Search
|
|
</label>
|
|
<label class="theme-label">
|
|
<input
|
|
type="checkbox"
|
|
:checked="goToLinkEnabled"
|
|
@change="goToLinkEnabled = $event.target.checked"
|
|
/>
|
|
Go to Link (auto-detect links)
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import router from '@/router';
|
|
import ArrowKeyNavigation from '@/utils/ArrowKeyNavigation';
|
|
import ErrorHandler from '@/utils/ErrorHandler';
|
|
import IconConfigEditor from '@/assets/interface-icons/config-editor.svg';
|
|
import { getCustomKeyShortcuts } from '@/utils/ConfigHelpers';
|
|
import { getSearchEngineFromBang, findUrlForSearchEngine, stripBangs } from '@/utils/Search';
|
|
import {
|
|
searchEngineUrls,
|
|
defaultSearchEngine,
|
|
defaultSearchOpeningMethod,
|
|
searchBangs as defaultSearchBangs,
|
|
} from '@/utils/defaults';
|
|
|
|
export default {
|
|
name: 'FilterTile',
|
|
props: {
|
|
minimalSearch: Boolean, // If true, then keep it simple
|
|
},
|
|
components: {
|
|
IconConfigEditor,
|
|
},
|
|
data() {
|
|
return {
|
|
input: '',
|
|
akn: new ArrowKeyNavigation(),
|
|
getCustomKeyShortcuts,
|
|
showSearchPanel: false,
|
|
// goToLinkEnabled is now managed by Vuex/appConfig
|
|
};
|
|
},
|
|
computed: {
|
|
active() {
|
|
return !this.$store.state.modalOpen;
|
|
},
|
|
searchPrefs() {
|
|
return this.$store.getters.webSearch || {};
|
|
},
|
|
goToLinkEnabled: {
|
|
get() {
|
|
return this.$store.getters.goToLinkEnabled;
|
|
},
|
|
set(value) {
|
|
this.$store.commit('setGoToLinkEnabled', value);
|
|
// Also update appConfig in store for persistence
|
|
const newAppConfig = {
|
|
...this.$store.getters.appConfig,
|
|
goToLinkEnabled: value,
|
|
};
|
|
this.$store.commit('SET_APP_CONFIG', newAppConfig);
|
|
},
|
|
},
|
|
},
|
|
mounted() {
|
|
window.addEventListener('keydown', this.handleKeyPress);
|
|
},
|
|
beforeDestroy() {
|
|
window.removeEventListener('keydown', this.handleKeyPress);
|
|
},
|
|
methods: {
|
|
toggleDisableWebSearch(event) {
|
|
const value = event.target.checked;
|
|
const newAppConfig = {
|
|
...this.$store.getters.appConfig,
|
|
webSearch: {
|
|
...this.$store.getters.appConfig.webSearch,
|
|
disableWebSearch: value,
|
|
},
|
|
};
|
|
this.$store.commit('setDisableWebSearch', value);
|
|
this.$store.commit('SET_APP_CONFIG', newAppConfig);
|
|
},
|
|
/* Call correct function dependending on which key is pressed */
|
|
handleKeyPress(event) {
|
|
const currentElem = document.activeElement.id;
|
|
const { key, keyCode } = event;
|
|
const notAlreadySearching = currentElem !== 'filter-tiles';
|
|
// If a modal is open, then do nothing
|
|
if (!this.active) return;
|
|
if (/^[/:!a-zA-Z]$/.test(key) && notAlreadySearching) {
|
|
// Letter or bang key pressed - start searching
|
|
if (this.$refs.filter) this.$refs.filter.focus();
|
|
this.userIsTypingSomething();
|
|
} else if (/^[0-9]$/.test(key)) {
|
|
// Number key pressed, check if user has a custom binding
|
|
this.handleHotKey(key);
|
|
} else if (keyCode >= 37 && keyCode <= 40) {
|
|
// Arrow key pressed - start navigation
|
|
this.akn.arrowNavigation(keyCode);
|
|
} else if (keyCode === 27) {
|
|
// Esc key pressed - reset form
|
|
this.clearFilterInput();
|
|
}
|
|
},
|
|
/* Emmits users's search term up to parent */
|
|
userIsTypingSomething() {
|
|
this.$emit('user-is-searchin', this.input);
|
|
},
|
|
/* Resets everything to initial state, when user is finished */
|
|
clearFilterInput() {
|
|
this.input = ''; // Clear input model
|
|
this.userIsTypingSomething(); // Emmit new empty value
|
|
document.activeElement.blur(); // Remove focus
|
|
this.akn.resetIndex(); // Reset current element index
|
|
},
|
|
/* If configured, launch specific app when hotkey pressed */
|
|
handleHotKey(key) {
|
|
const sections = this.$store.getters.sections || [];
|
|
const usersHotKeys = this.getCustomKeyShortcuts(sections);
|
|
usersHotKeys.forEach((hotkey) => {
|
|
if (hotkey.hotkey === parseInt(key, 10)) {
|
|
if (hotkey.url) window.open(hotkey.url, '_blank');
|
|
}
|
|
});
|
|
},
|
|
/* Launch search results, with users desired opening method */
|
|
launchWebSearch(url, method) {
|
|
switch (method) {
|
|
case 'newtab':
|
|
window.open(url, '_blank');
|
|
break;
|
|
case 'sametab':
|
|
window.open(url, '_self');
|
|
break;
|
|
case 'workspace':
|
|
router.push({ name: 'workspace', query: { url } });
|
|
break;
|
|
default:
|
|
ErrorHandler(`Unknown opening method: ${method}`);
|
|
window.open(url, '_blank');
|
|
}
|
|
},
|
|
|
|
/* Launch web search, to correct search engine, passing in users query */
|
|
searchSubmitted() {
|
|
const { searchPrefs, goToLinkEnabled } = this;
|
|
const input = this.input.trim();
|
|
// 1. If "Go to Link" is enabled and input is URL-like, always open as link
|
|
if (goToLinkEnabled && this.isUrlLike(input)) {
|
|
window.open(this.normalizeUrl(input), '_blank');
|
|
this.clearFilterInput();
|
|
return;
|
|
}
|
|
// 2. If not URL-like, or "Go to Link" is disabled, only search if web search is enabled
|
|
if (!searchPrefs.disableWebSearch) {
|
|
const bangList = { ...defaultSearchBangs, ...(searchPrefs.searchBangs || {}) };
|
|
const openingMethod = searchPrefs.openingMethod || defaultSearchOpeningMethod;
|
|
const searchBang = getSearchEngineFromBang(input, bangList);
|
|
const searchEngine = searchPrefs.searchEngine || defaultSearchEngine;
|
|
const desiredSearchEngine = searchBang || searchEngine;
|
|
const isCustomSearch = (searchPrefs.searchEngine === 'custom' && searchPrefs.customSearchEngine);
|
|
let searchUrl = isCustomSearch
|
|
? searchPrefs.customSearchEngine
|
|
: findUrlForSearchEngine(desiredSearchEngine, searchEngineUrls);
|
|
if (searchUrl) {
|
|
searchUrl += encodeURIComponent(stripBangs(input, bangList));
|
|
this.launchWebSearch(searchUrl, openingMethod);
|
|
this.clearFilterInput();
|
|
}
|
|
}
|
|
},
|
|
// Utility: Detect if input is a URL or domain-like string
|
|
isUrlLike(input) {
|
|
// Matches URLs with protocol, www, or domain.tld (e.g., youtube.com)
|
|
const urlPattern = /^(https?:\/\/)?([\w-]+\.)+[a-zA-Z]{2,}(\/.*)?$/;
|
|
return urlPattern.test(input.trim());
|
|
},
|
|
// Utility: Normalize input to a full URL (adds https:// if missing)
|
|
normalizeUrl(input) {
|
|
let url = input.trim();
|
|
if (!/^https?:\/\//.test(url)) {
|
|
url = `https://${url}`;
|
|
}
|
|
return url;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
@import '@/styles/media-queries.scss';
|
|
|
|
.search-settings-row {
|
|
display: flex;
|
|
// flex-direction: column;
|
|
align-items: center;
|
|
// width: 100%;
|
|
}
|
|
form.normal {
|
|
display: flex;
|
|
align-items: center;
|
|
// border-radius: 0 0 var(--curve-factor-navbar) 0;
|
|
padding: 0 0.2rem 0.2rem 0;
|
|
background: var(--search-container-background);
|
|
.search-wrap {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
p.web-search-note {
|
|
margin: 0 0.5rem;
|
|
font-size: 0.8rem;
|
|
color: var(--minimal-view-search-color);
|
|
opacity: var(--dimming-factor);
|
|
}
|
|
}
|
|
label {
|
|
display: inline;
|
|
color: var(--search-label-color);
|
|
margin: 0.5rem;
|
|
display: inline;
|
|
word-break: keep-all;
|
|
}
|
|
input {
|
|
display: inline-block;
|
|
width: 200px;
|
|
height: 1rem;
|
|
padding: 0.5rem;
|
|
margin: 0.5rem;
|
|
outline: none;
|
|
border: none;
|
|
border-radius: var(--curve-factor);
|
|
background: var(--search-field-background);
|
|
color: var(--settings-text-color);
|
|
border: 1px solid var(--outline-color);
|
|
&:focus {
|
|
border-color: var(--settings-text-color);
|
|
opacity: var(--dimming-factor);
|
|
}
|
|
}
|
|
.clear-search {
|
|
color: var(--settings-text-color);
|
|
padding: 0 0.3rem 0.1rem 0.3rem;
|
|
font-style: normal;
|
|
font-size: 1rem;
|
|
opacity: var(--dimming-factor);
|
|
border-radius: 50px;
|
|
cursor: pointer;
|
|
right: 0.5rem;
|
|
top: 1rem;
|
|
border: 1px solid var(--settings-text-color);
|
|
margin: 0.25rem;
|
|
&:hover {
|
|
opacity: 1;
|
|
background: var(--background-darker);
|
|
}
|
|
}
|
|
}
|
|
|
|
.settings-block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin: 0.5rem 0;
|
|
width: 100%;
|
|
position: relative;
|
|
|
|
border-radius: 0 0 var(--curve-factor-navbar) 0;
|
|
padding: 0 0.2rem 0.2rem 0;
|
|
background: var(--search-container-background);
|
|
.settings-toggle {
|
|
background: var(--settings-background);
|
|
color: var(--settings-text-color);
|
|
border: none;
|
|
padding: 0.5rem;
|
|
margin: 0.5rem 0.5rem 0.5rem 0;
|
|
border-radius: var(--curve-factor);
|
|
cursor: pointer;
|
|
&:hover {
|
|
background: var(--settings-text-color);
|
|
color: var(--settings-background);
|
|
}
|
|
}
|
|
|
|
.settings-toggle svg {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
fill: currentColor;
|
|
display: block;
|
|
}
|
|
|
|
.floating-search-panel {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
min-width: 180px;
|
|
max-width: max-content;
|
|
background: var(--settings-background);
|
|
border: 1px solid var(--settings-text-color);
|
|
border-radius: var(--curve-factor);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
z-index: 10;
|
|
}
|
|
}
|
|
|
|
@include tablet {
|
|
form.normal {
|
|
display: block;
|
|
text-align: center;
|
|
}
|
|
}
|
|
@include phone {
|
|
form.nomral {
|
|
flex: 1;
|
|
border-radius: 0;
|
|
text-align: center;
|
|
padding: 0.25rem 0;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
form.minimal {
|
|
display: flex;
|
|
align-items: center;
|
|
label { display: none; }
|
|
.search-wrap {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100%;
|
|
p.web-search-note {
|
|
margin: 0;
|
|
color: var(--minimal-view-search-color);
|
|
opacity: var(--dimming-factor);
|
|
}
|
|
}
|
|
input {
|
|
display: inline-block;
|
|
width: 80%;
|
|
max-width: 400px;
|
|
font-size: 1.2rem;
|
|
padding: 0.5rem 1rem;
|
|
margin: 1rem auto;
|
|
outline: none;
|
|
border: 1px solid var(--outline-color);
|
|
border-radius: var(--curve-factor);
|
|
background: var(--minimal-view-search-background);
|
|
color: var(--minimal-view-search-color);
|
|
&:focus {
|
|
border-color: var(--minimal-view-search-color);
|
|
opacity: var(--dimming-factor);
|
|
}
|
|
}
|
|
.clear-search {
|
|
color: var(--minimal-view-search-color);
|
|
padding: 0.15rem 0.5rem 0.2rem 0.5rem;
|
|
font-style: normal;
|
|
font-size: 1rem;
|
|
opacity: var(--dimming-factor);
|
|
border-radius: 50px;
|
|
cursor: pointer;
|
|
right: 0.5rem;
|
|
top: 1rem;
|
|
border: 1px solid var(--minimal-view-search-color);
|
|
margin: 0.5rem;
|
|
&:hover {
|
|
opacity: 1;
|
|
color: var(--minimal-view-search-background);
|
|
background: var(--minimal-view-search-color);
|
|
}
|
|
}
|
|
}
|
|
.theme-label {
|
|
color: var(--settings-text-color);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
</style>
|