mirror of https://github.com/Lissy93/dashy.git
🔥 Refactors minimal search to share code of parent search
This commit is contained in:
Alicia Sykes
parent
96f6a845a2
commit
f517e31cd2
|
|
@ -1,202 +1,39 @@
|
|||
<template>
|
||||
<form @submit.prevent="searchSubmitted">
|
||||
<div class="minimal-search-wrap">
|
||||
<input
|
||||
id="filter-tiles"
|
||||
v-model="input"
|
||||
ref="filter"
|
||||
class="minimal-search"
|
||||
:placeholder="$t('search.search-placeholder')"
|
||||
v-on:input="userIsTypingSomething"
|
||||
@keydown.esc="clearFilterInput"
|
||||
/>
|
||||
<p v-if="webSearchEnabled && 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>
|
||||
<SearchBar
|
||||
ref="MinimalSearchBar"
|
||||
@user-is-searchin="userIsTypingSomething"
|
||||
:active="true"
|
||||
:minimalSearch="true"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import router from '@/router';
|
||||
import ArrowKeyNavigation from '@/utils/ArrowKeyNavigation';
|
||||
import ErrorHandler from '@/utils/ErrorHandler';
|
||||
import { getCustomKeyShortcuts } from '@/utils/ConfigHelpers';
|
||||
import {
|
||||
searchEngineUrls,
|
||||
defaultSearchEngine,
|
||||
defaultSearchOpeningMethod,
|
||||
} from '@/utils/defaults';
|
||||
import SearchBar from '@/components/Settings/SearchBar';
|
||||
|
||||
export default {
|
||||
name: 'MinimalSearch',
|
||||
inject: ['config'],
|
||||
components: {
|
||||
SearchBar,
|
||||
},
|
||||
props: {
|
||||
active: Boolean,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
input: '', // Users current search term
|
||||
akn: new ArrowKeyNavigation(), // Class that manages arrow key naviagtion
|
||||
getCustomKeyShortcuts,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
webSearchEnabled() {
|
||||
const { appConfig } = this.config;
|
||||
if (appConfig && appConfig.webSearch) {
|
||||
return !appConfig.webSearch.disableWebSearch;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
/* Emmits users's search term up to parent */
|
||||
userIsTypingSomething() {
|
||||
this.$emit('user-is-searchin', this.input);
|
||||
userIsTypingSomething(searchValue) {
|
||||
this.input = searchValue;
|
||||
this.$emit('user-is-searchin', searchValue);
|
||||
},
|
||||
/* 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
|
||||
/* Emmits an event to reset state when user is finished searching */
|
||||
clearMinFilterInput() {
|
||||
this.$refs.MinimalSearchBar.clearFilterInput();
|
||||
},
|
||||
/* Launches a given app when hotkey pressed */
|
||||
handleHotKey(key) {
|
||||
const usersHotKeys = this.getCustomKeyShortcuts();
|
||||
usersHotKeys.forEach((hotkey) => {
|
||||
if (hotkey.hotkey === parseInt(key, 10)) {
|
||||
if (hotkey.url) window.open(hotkey.url, '_blank');
|
||||
}
|
||||
});
|
||||
},
|
||||
/* Filter results as user types */
|
||||
startFiltering(event) {
|
||||
const currentElem = document.activeElement.id;
|
||||
const { key, keyCode } = event;
|
||||
/* If a modal is open, then do nothing */
|
||||
if (!this.active) return;
|
||||
if (/^[a-zA-Z]$/.test(key) && currentElem !== 'filter-tiles') {
|
||||
/* Letter 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();
|
||||
}
|
||||
},
|
||||
/* Open web search results in users desired 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');
|
||||
}
|
||||
},
|
||||
/* If web search enabled, then launch search results when enter is pressed */
|
||||
searchSubmitted() {
|
||||
// Get search preferences from appConfig
|
||||
const { appConfig } = this.config;
|
||||
const searchPrefs = appConfig.webSearch || {};
|
||||
if (this.webSearchEnabled) { // Only proceed if user hasn't disabled web search
|
||||
const openingMethod = searchPrefs.openingMethod || defaultSearchOpeningMethod;
|
||||
// Get search engine, and make URL
|
||||
const searchEngine = searchPrefs.searchEngine || defaultSearchEngine;
|
||||
let searchUrl = searchEngineUrls[searchEngine];
|
||||
if (!searchUrl) ErrorHandler(`Search engine not found - ${searchEngine}`);
|
||||
if (searchEngine === 'custom' && searchPrefs.customSearchEngine) {
|
||||
searchUrl = searchPrefs.customSearchEngine;
|
||||
}
|
||||
// Append users encoded query onto search URL, and launch
|
||||
searchUrl += encodeURIComponent(this.input);
|
||||
this.launchWebSearch(searchUrl, openingMethod);
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('keydown', this.startFiltering);
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('keydown', this.startFiltering);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@import '@/styles/media-queries.scss';
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.minimal-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);
|
||||
font-size: 1rem;
|
||||
margin: 0.5rem;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
color: var(--minimal-view-search-background);
|
||||
background: var(--minimal-view-search-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<form @submit.prevent="searchSubmitted">
|
||||
<form @submit.prevent="searchSubmitted" :class="minimalSearch ? 'minimal' : 'normal'">
|
||||
<label for="filter-tiles">{{ $t('search.search-label') }}</label>
|
||||
<div class="search-wrap">
|
||||
<input
|
||||
|
|
@ -38,6 +38,7 @@ export default {
|
|||
inject: ['config'],
|
||||
props: {
|
||||
active: Boolean,
|
||||
minimalSearch: Boolean, // If true, then keep it simple
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -148,13 +149,7 @@ export default {
|
|||
|
||||
@import '@/styles/media-queries.scss';
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: stretch;
|
||||
background: linear-gradient(0deg, var(--background) 0%, var(--background-darker) 100%);
|
||||
}
|
||||
form {
|
||||
form.normal {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 0 0 var(--curve-factor-navbar) 0;
|
||||
|
|
@ -216,13 +211,13 @@ export default {
|
|||
}
|
||||
|
||||
@include tablet {
|
||||
form {
|
||||
form.normal {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@include phone {
|
||||
form {
|
||||
form.nomral {
|
||||
flex: 1;
|
||||
border-radius: 0;
|
||||
text-align: center;
|
||||
|
|
@ -230,4 +225,57 @@ export default {
|
|||
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);
|
||||
font-size: 1rem;
|
||||
margin: 0.5rem;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
color: var(--minimal-view-search-background);
|
||||
background: var(--minimal-view-search-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ const getDomainFromUrl = (url) => {
|
|||
*/
|
||||
const filterHelper = (compareStr, searchStr) => {
|
||||
if (!compareStr) return false;
|
||||
const process = (input) => input.toString().toLowerCase().replace(/[^\w\s]/gi, '');
|
||||
const process = (input) => input && input.toString().toLowerCase().replace(/[^\w\s]/gi, '');
|
||||
return process(compareStr).includes(process(searchStr));
|
||||
};
|
||||
|
||||
|
|
@ -37,6 +37,7 @@ const filterHelper = (compareStr, searchStr) => {
|
|||
* @returns A filtered array of tiles
|
||||
*/
|
||||
export const searchTiles = (allTiles, searchTerm) => {
|
||||
if (!searchTerm) return allTiles; // If no search term, then return all
|
||||
if (!allTiles) return []; // If no data, then skip
|
||||
return allTiles.filter((tile) => {
|
||||
const {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,9 @@
|
|||
<router-link to="/">
|
||||
<h1>{{ pageInfo.title }}</h1>
|
||||
</router-link>
|
||||
<MinimalSearch @user-is-searchin="(s) => { this.searchValue = s; }" :active="!modalOpen" />
|
||||
<MinimalSearch
|
||||
@user-is-searchin="(s) => { this.searchValue = s; }"
|
||||
:active="!modalOpen" ref="filterComp" />
|
||||
</div>
|
||||
<div v-if="checkTheresData(sections)"
|
||||
:class="`item-group-container ${!tabbedView ? 'showing-all' : ''}`">
|
||||
|
|
@ -82,7 +84,7 @@ export default {
|
|||
watch: {
|
||||
/* When the theme changes, then call the update method */
|
||||
searchValue() {
|
||||
this.tabbedView = !(this.searchValue.length > 0);
|
||||
this.tabbedView = !this.searchValue || this.searchValue.length === 0;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -111,7 +113,7 @@ export default {
|
|||
},
|
||||
/* Clears input field, once a searched item is opened */
|
||||
finishedSearching() {
|
||||
this.$refs.filterComp.clearFilterInput();
|
||||
this.$refs.filterComp.clearMinFilterInput();
|
||||
},
|
||||
/* Extracts the site name from domain, used for the searching functionality */
|
||||
getDomainFromUrl(url) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue