edited suggestions to work with names

This commit is contained in:
Furkan Ünsalan 2024-07-24 08:46:46 +03:00
parent 8ee94bc1de
commit e9a3596007

View file

@ -1,4 +1,4 @@
<!doctype html>
<!DOCTYPE html>
<meta charset="utf-8" />
<meta name="color-scheme" content="dark light" />
<meta name="robots" content="noindex" />
@ -62,6 +62,23 @@
['0:54323', { url: 'http://localhost:54323' }],
['0:54324', { url: 'http://localhost:54324' }],
]);
// Usage of suggestions with names
/* const COMMANDS = new Map([
[
'g',
{
url: 'https://www.google.com/search?q={}',
searchTemplate: '/search?q={}',
suggestions: [
{ name: 'Google Search', url: 'https://www.google.com' },
{ name: 'Google Images', url: 'https://images.google.com' },
{ name: 'Google Maps', url: 'https://maps.google.com' },
],
},
],
]); */
</script>
<template id="commands-template">
@ -152,15 +169,17 @@
const commands = clone.querySelector('.commands');
const commandTemplate = document.getElementById('command-template');
for (const [key, { name, url }] of COMMANDS.entries()) {
if (!name || !url) continue;
const clone = commandTemplate.content.cloneNode(true);
const command = clone.querySelector('.command');
command.href = url;
if (CONFIG.openLinksInNewTab) command.target = '_blank';
clone.querySelector('.key').innerText = key;
clone.querySelector('.name').innerText = name;
commands.append(clone);
for (const [key, { suggestions }] of COMMANDS.entries()) {
if (!suggestions) continue;
for (const { name, url } of suggestions) {
const clone = commandTemplate.content.cloneNode(true);
const command = clone.querySelector('.command');
command.href = url;
if (CONFIG.openLinksInNewTab) command.target = '_blank';
clone.querySelector('.key').innerText = key;
clone.querySelector('.name').innerText = name;
commands.append(clone);
}
}
this.shadowRoot.append(clone);
@ -324,7 +343,10 @@
for (const item of res) {
if (item.phrase === search.toLowerCase()) continue;
suggestions.push(item.phrase);
suggestions.push({
name: item.phrase,
url: `https://duckduckgo.com/?q=${item.phrase}`,
});
}
resolve(suggestions);
@ -430,7 +452,10 @@
suggestions = suggestions.concat(
oq.splitBy
? res.map((search) => `${oq.key}${oq.splitBy}${search}`)
? res.map((search) => ({
name: `${oq.key}${oq.splitBy}${search}`,
url: `https://duckduckgo.com/?q=${search}`,
}))
: res
);
}
@ -484,7 +509,7 @@
#onSuggestionClick = (e) => {
const ref = e.target.closest('.suggestion');
if (!ref) return;
this.#execute(ref.dataset.suggestion);
this.#execute(ref.dataset.url);
};
#renderSuggestions(suggestions, query) {
@ -496,24 +521,8 @@
const clone = template.content.cloneNode(true);
const ref = clone.querySelector('.suggestion');
ref.dataset.index = index;
ref.dataset.suggestion = suggestion;
const escapedQuery = Search.#escapeRegexCharacters(query);
const matched = suggestion.match(new RegExp(escapedQuery, 'i'));
if (matched) {
const template = document.getElementById('match-template');
const clone = template.content.cloneNode(true);
const matchRef = clone.querySelector('.match');
const pre = suggestion.slice(0, matched.index);
const post = suggestion.slice(matched.index + matched[0].length);
matchRef.innerText = matched[0];
matchRef.insertAdjacentHTML('beforebegin', pre);
matchRef.insertAdjacentHTML('afterend', post);
ref.append(clone);
} else {
ref.innerText = suggestion;
}
ref.dataset.url = suggestion.url;
ref.innerText = suggestion.name;
this.#suggestions.append(clone);
}
}