@codedoc/core
Version:
Create beautiful modern documentation websites.
151 lines • 7.03 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ToCSearchOverlay = void 0;
var core_1 = require("@connectv/core");
var operators_1 = require("rxjs/operators");
var html_1 = require("@connectv/html");
var style_1 = require("./style");
var loading_1 = require("../../../../util/loading");
var config_1 = require("../../../../../transport/config");
function ToCSearchOverlay(options, renderer) {
var classes = this.theme.classes(style_1.ToCSearchOverlayStyle);
var holder = html_1.ref();
var input = html_1.ref();
var toc = html_1.ref();
var findFocus = function () {
var focused = undefined;
var prev = undefined;
var next = undefined;
var first = undefined;
var last = undefined;
holder.$.querySelectorAll('a[tabindex]').forEach(function (a$) {
if (!first)
first = a$;
if (a$ === document.activeElement)
focused = a$;
else {
if (!focused)
prev = a$;
else if (!next)
next = a$;
}
last = a$;
});
var res = {};
res.next = next || first;
res.prev = prev || last;
return res;
};
this.track({
bind: function () {
input.$.focus();
holder.$.classList.add('active');
toc.resolve(document.getElementById('-codedoc-toc') || renderer.create("fragment", null));
if (!('backdropFilter' in holder.$.style) && !('-webkit-backdrop-filter' in holder.$.style)) {
holder.$.style.background = 'rgba(64, 64, 64, .95)';
}
}
});
var query = core_1.state(localStorage.getItem('-codedoc-search-query') || '');
var loading = core_1.state(false);
var queryOut = this.expose.out('query');
var results = this.expose.in('results', core_1.pin())
.to(core_1.pipe(operators_1.share()))
.to(core_1.map(function (links) {
var res = links.map(function (l) {
var conf = config_1.getConfig();
if (conf)
l = conf.namespace + l;
return { link: l, title: tocLinkTitle(l) };
});
if (query.value.length > 0) {
toc.$.querySelectorAll('a').forEach(function (a$) {
var _a;
if (((_a = a$.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(query.value.toLowerCase())) && a$.getAttribute('href')
&& !links.includes(a$.getAttribute('href') || ''))
res.push({ link: a$.getAttribute('href') || '',
title: a$.textContent });
});
}
return res;
}))
.to(core_1.sink(function (res) {
if (res.length > 0) {
localStorage.setItem('-codedoc-search-query', query.value);
localStorage.setItem('-codedoc-search-res', JSON.stringify(res));
}
}))
.to(core_1.pipe(operators_1.startWith(core_1.emission(JSON.parse(localStorage.getItem('-codedoc-search-res') || '[]')))));
query
.to(core_1.filter(function (q) { return q && q.trim().length > 0; }))
.to(loading.from(core_1.map(function () { return true; })), queryOut.from(core_1.pipe(operators_1.debounceTime(1000))));
results.to(core_1.map(function () { return false; })).to(loading);
var hideEmpty = core_1.pack(query, results, loading)
.to(core_1.map(function (_a) {
var _query = _a[0], _results = _a[1], _loading = _a[2];
if (_loading)
return true;
else
return !_query || _query.trim().length == 0 || _results.length > 0;
}));
var tocLinkTitle = function (link) { var _a; return ((_a = toc.$.querySelector("a[href=\"" + link + "\"]")) === null || _a === void 0 ? void 0 : _a.textContent) || link; };
var close = function (clean) {
if (clean === void 0) { clean = true; }
holder.$.remove();
if (clean) {
localStorage.removeItem('-codedoc-search-query');
}
};
return renderer.create("div", { class: classes.overlay, _ref: holder, onkeydown: function (event) {
var key = event.key;
if (key === 'Escape') {
event.preventDefault();
event.stopPropagation();
close();
}
if (key === 'ArrowDown') {
var focus_1 = findFocus();
if (focus_1.next) {
focus_1.next.focus();
event.preventDefault();
event.stopPropagation();
}
}
if (key === 'ArrowUp') {
var focus_2 = findFocus();
if (focus_2.prev) {
focus_2.prev.focus();
event.preventDefault();
event.stopPropagation();
}
}
if (key === 'ArrowLeft' || key === 'ArrowRight')
event.stopPropagation();
} },
renderer.create("div", { class: classes.content },
renderer.create("div", { class: "top" },
renderer.create("input", { placeholder: options.placeholder, type: "text", _ref: input, _state: query }),
renderer.create("div", { class: classes.close, onclick: function () {
if (query.value.length > 0)
query.value = '';
else
close();
} })),
renderer.create("div", { class: classes.results },
renderer.create("div", { class: "loading", hidden: loading.to(core_1.map(function (_) { return !_; })) },
renderer.create(loading_1.Loading, null)),
renderer.create("div", { class: "empty", hidden: hideEmpty }, "No Results!"),
renderer.create("div", { hidden: loading },
renderer.create(html_1.List, { of: results, each: function (result) {
return renderer.create("a", { href: result.sub('link'), tabindex: "0", onclick: function () {
close(false);
window.dispatchEvent(new CustomEvent('on-navigation-search', { detail: { query: query.value } }));
} },
renderer.create("span", { class: "title" }, result.sub('title')),
renderer.create("span", { class: "current", hidden: result.sub('link').to(core_1.map(function (l) { return l !== location.pathname; })) }, "Search on Current Page"));
} })))));
}
exports.ToCSearchOverlay = ToCSearchOverlay;
var style_2 = require("./style");
Object.defineProperty(exports, "ToCSearchOverlayStyle", { enumerable: true, get: function () { return style_2.ToCSearchOverlayStyle; } });
//# sourceMappingURL=index.js.map