You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
145 lines
4.2 KiB
145 lines
4.2 KiB
/*!
|
|
* Copyright (C) 2019 Josh Habdas <jhabdas@protonmail.com>
|
|
*
|
|
* This file is part of After Dark.
|
|
*
|
|
* After Dark is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU Affero General Public License as published
|
|
* by the Free Software Foundation, either version 3 of the License, or
|
|
* (at your option) any later version.
|
|
*
|
|
* After Dark is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU Affero General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU Affero General Public License
|
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
*/
|
|
|
|
fetchInject([
|
|
"{{ "/js/vue.min.js" | relURL }}",
|
|
"{{ "/js/lodash.custom.min.js" | relURL }}",
|
|
"{{ "/js/fuse.min.js" | relURL }}",
|
|
"{{ "/js/mark.min.js" | relURL }}"
|
|
]).then(() => {
|
|
(function (window, document, undefined) {
|
|
'use strict';
|
|
|
|
const getQueryByParam = param => decodeURIComponent(
|
|
(location.search.split(param + '=')[1] || '').split('&')[0]
|
|
).replace(/\+/g, ' ');
|
|
|
|
const queryParam = 's';
|
|
const hotkeys = {{ (.Params.form.hotkeys | default (slice "/" "s")) | jsonify }};
|
|
const selectors = {
|
|
appContainer: '#search-app',
|
|
resultContainer: '#search-results',
|
|
searchInput: '#query'
|
|
};
|
|
|
|
const fuseOpts = {
|
|
shouldSort: true,
|
|
tokenize: true,
|
|
matchAllTokens: true,
|
|
includeScore: true,
|
|
includeMatches: true,
|
|
keys: [
|
|
{ name: "title", weight: 0.8 },
|
|
{ name: "contents", weight: 0.5 },
|
|
{ name: "tags", weight: 0.3 },
|
|
{ name: "categories", weight: 0.3 }
|
|
]
|
|
};
|
|
|
|
const getSearchInput = () => document.querySelector(selectors.searchInput);
|
|
const focusSearchInput = () => getSearchInput().focus();
|
|
const searchQuery = getSearchInput().value = getQueryByParam(queryParam);
|
|
|
|
const fuse = new Fuse([], fuseOpts);
|
|
window.fetch('/index.json').then(response => {
|
|
response.text().then(searchData => {
|
|
fuse.setCollection(JSON.parse(searchData));
|
|
searchQuery && search(searchQuery);
|
|
});
|
|
});
|
|
|
|
const getUrl = (query) => {
|
|
const encodedQuery = encodeURIComponent(query);
|
|
const url = "{{ .RelPermalink }}";
|
|
return (encodedQuery)
|
|
? `${url}?${queryParam}=${encodedQuery}`
|
|
: url;
|
|
};
|
|
|
|
let mark = new Mark(
|
|
document.querySelector(
|
|
selectors.resultContainer
|
|
)
|
|
);
|
|
|
|
const app = new Vue({
|
|
delimiters: ['{', '}'],
|
|
el: selectors.appContainer,
|
|
data: {
|
|
fuse: null,
|
|
results: [],
|
|
query: getQueryByParam(queryParam),
|
|
resultsForSearch: getQueryByParam(queryParam)
|
|
},
|
|
mounted () {
|
|
this.fuse = fuse;
|
|
window.onpopstate = (evt) => {
|
|
this.query = evt.state.query;
|
|
};
|
|
const searchInput = getSearchInput();
|
|
document.onkeydown = function (evt) {
|
|
if (evt.target === searchInput) return;
|
|
if (hotkeys.includes(evt.key)) {
|
|
evt.preventDefault();
|
|
focusSearchInput();
|
|
getSearchInput().select();
|
|
};
|
|
}
|
|
focusSearchInput();
|
|
},
|
|
watch: {
|
|
query () {
|
|
this.executeSearch();
|
|
window.history.replaceState(
|
|
{query: this.query},
|
|
null,
|
|
getUrl(this.query)
|
|
);
|
|
}
|
|
},
|
|
beforeUpdate: function () {
|
|
mark.unmark();
|
|
},
|
|
updated: function () {
|
|
this.$nextTick(function () {
|
|
mark = new Mark(
|
|
document.querySelector(
|
|
selectors.resultContainer
|
|
)
|
|
)
|
|
mark.mark(this.query.trim());
|
|
})
|
|
},
|
|
methods: {
|
|
executeSearch: _.debounce(function () {
|
|
const trimmedQuery = this.query.trim();
|
|
this.resultsForSearch = trimmedQuery;
|
|
this.results = (trimmedQuery)
|
|
? this.fuse.search(trimmedQuery)
|
|
: [];
|
|
}, 250)
|
|
}
|
|
});
|
|
|
|
const search = query => {
|
|
app.results = fuse.search(query);
|
|
};
|
|
|
|
})(window, document);
|
|
});
|