@codedoc/core
Version:
Create beautiful modern documentation websites.
86 lines • 3.48 kB
JavaScript
import { state } from '@connectv/core';
import { ref } from '@connectv/html';
import { SearchSwitcherStyles } from './styles';
export function SearchSwitcher(options, renderer) {
const classes = this.theme.classes(SearchSwitcherStyles);
const holder = ref();
const index = state(1);
let focused = undefined;
const focus = (element) => {
var _a;
if (focused)
focused.style.transform = '';
element.style.transform = 'scale(1.15)';
focused = element;
let delay = 1;
let parent = focused.parentElement;
while (parent) {
if (parent.hasAttribute('data-tab-title')) {
if (!parent.classList.contains('selected')) {
const ref = parent.getAttribute('data-tab-title');
const btn$ = (_a = parent
.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector(`.selector>button[data-tab-title="${ref}"]`);
if (btn$) {
btn$.click();
delay = 300;
}
}
}
parent = parent.parentElement;
}
setTimeout(() => focused === null || focused === void 0 ? void 0 : focused.scrollIntoView({ block: 'center' }), delay);
};
const next = () => {
if (index.value >= options.elements.length)
index.value = 1;
else
index.value++;
focus(options.elements[index.value - 1]);
};
const prev = () => {
if (index.value <= 1)
index.value = options.elements.length;
else
index.value--;
focus(options.elements[index.value - 1]);
};
const keyhandler = (event) => {
if (event.key === 'ArrowLeft' || event.key === 'ArrowUp')
prev();
if (event.key === 'ArrowRight' || event.key === 'ArrowDown')
next();
if (event.key === 'Escape') {
holder.$.remove();
event.preventDefault();
}
};
this.track({
bind() {
document.addEventListener('keydown', keyhandler);
focus(options.elements[0]);
},
clear() {
document.removeEventListener('keydown', keyhandler);
options.elements.forEach(element => {
renderer.render(renderer.create("fragment", null, element.textContent)).before(element);
element.remove();
});
}
});
return renderer.create("div", { class: classes.holder, _ref: holder },
renderer.create("span", { class: "icon-font", onclick: () => holder.$.remove() }, "close"),
renderer.create("span", { class: "icon-font", onclick: () => {
var _a;
localStorage.setItem('-codedoc-search-query', options.query);
(_a = document.getElementById('-codedoc-search-btn')) === null || _a === void 0 ? void 0 : _a.click();
} }, "list"),
renderer.create("span", { class: classes.content }, options.elements.length > 0 ?
renderer.create("fragment", null,
index,
"/",
options.elements.length) :
'No Exact Match'),
renderer.create("span", { class: "icon-font", onclick: prev }, "chevron_left"),
renderer.create("span", { class: "icon-font", onclick: next }, "chevron_right"));
}
//# sourceMappingURL=switcher.js.map