feat(typeit): add some config for TypeIt (#314)

This commit is contained in:
Dillon
2020-05-04 13:20:01 +08:00
committed by GitHub
parent 8c706548c7
commit e4c71edddf
16 changed files with 126 additions and 74 deletions

View File

@@ -97,9 +97,9 @@ class Theme {
const isMobile = this.util.isMobile();
if (!searchConfig || isMobile && this._searchMobileOnce || !isMobile && this._searchDesktopOnce) return;
if (!searchConfig.maxResultLength) searchConfig.maxResultLength = 10;
if (!searchConfig.snippetLength) searchConfig.snippetLength = 50;
if (!searchConfig.highlightTag) searchConfig.highlightTag = 'em';
const maxResultLength = searchConfig.maxResultLength ? searchConfig.maxResultLength : 10;
const snippetLength = searchConfig.snippetLength ? searchConfig.snippetLength : 50;
const highlightTag = searchConfig.highlightTag ? searchConfig.highlightTag : 'em';
const suffix = isMobile ? 'mobile' : 'desktop';
const $header = document.getElementById(`header-${suffix}`);
@@ -190,16 +190,16 @@ class Theme {
if (matchPosition < position || position === 0) position = matchPosition;
}
});
position -= searchConfig.snippetLength / 5;
position -= snippetLength / 5;
if (position > 0) {
position += context.substr(position, 20).lastIndexOf(' ') + 1;
context = '...' + context.substr(position, searchConfig.snippetLength);
context = '...' + context.substr(position, snippetLength);
} else {
context = context.substr(0, searchConfig.snippetLength);
context = context.substr(0, snippetLength);
}
Object.keys(metadata).forEach(key => {
title = title.replace(new RegExp(`(${key})`, 'gi'), `<${searchConfig.highlightTag}>$1</${searchConfig.highlightTag}>`);
context = context.replace(new RegExp(`(${key})`, 'gi'), `<${searchConfig.highlightTag}>$1</${searchConfig.highlightTag}>`);
title = title.replace(new RegExp(`(${key})`, 'gi'), `<${highlightTag}>$1</${highlightTag}>`);
context = context.replace(new RegExp(`(${key})`, 'gi'), `<${highlightTag}>$1</${highlightTag}>`);
});
results[uri] = {
'uri': uri,
@@ -208,7 +208,7 @@ class Theme {
'context' : context,
};
});
return Object.values(results).slice(0, searchConfig.maxResultLength);
return Object.values(results).slice(0, maxResultLength);
}
if (!this._index) {
fetch(searchConfig.lunrIndexURL)
@@ -240,11 +240,11 @@ class Theme {
this._algoliaIndex
.search(query, {
offset: 0,
length: searchConfig.maxResultLength * 8,
length: maxResultLength * 8,
attributesToHighlight: ['title'],
attributesToSnippet: [`content:${searchConfig.snippetLength}`],
highlightPreTag: `<${searchConfig.highlightTag}>`,
highlightPostTag: `</${searchConfig.highlightTag}>`,
attributesToSnippet: [`content:${snippetLength}`],
highlightPreTag: `<${highlightTag}>`,
highlightPostTag: `</${highlightTag}>`,
})
.then(({ hits }) => {
const results = {};
@@ -257,7 +257,7 @@ class Theme {
context: content.value,
};
});
finish(Object.values(results).slice(0, searchConfig.maxResultLength));
finish(Object.values(results).slice(0, maxResultLength));
})
.catch(err => {
console.error(err);
@@ -281,7 +281,7 @@ class Theme {
return `<div class="search-footer">Search by <a href="${href}" rel="noopener noreffer" target="_blank">${icon} ${searchType}</a></div>`;},
},
});
autosearch.on('autocomplete:selected', (event, suggestion, dataset, context) => {
autosearch.on('autocomplete:selected', (_event, suggestion, _dataset, _context) => {
window.location.assign(suggestion.uri);
});
if (isMobile) this._searchMobile = autosearch;
@@ -366,7 +366,7 @@ class Theme {
$copy.setAttribute('data-clipboard-text', code);
$copy.title = this.config.code.copyTitle;
const clipboard = new ClipboardJS($copy);
clipboard.on('success', e => {
clipboard.on('success', _e => {
this.util.animateCSS($code, 'flash');
});
$header.appendChild($copy);
@@ -558,18 +558,27 @@ class Theme {
initTypeit() {
if (this.config.typeit) {
this.config.typeit.forEach(group => {
const typeitConfig = this.config.typeit;
const speed = typeitConfig.speed ? typeitConfig.speed : 100;
const cursorSpeed = typeitConfig.cursorSpeed ? typeitConfig.cursorSpeed : 1000;
const cursorChar = typeitConfig.cursorChar ? typeitConfig.cursorChar : '|';
Object.values(typeitConfig.data).forEach(group => {
const typeone = (i) => {
const id = group[i];
if (i === group.length - 1) {
new TypeIt(`#${id}`, {
strings: this.data[id],
}).go();
return;
}
let instance = new TypeIt(`#${id}`, {
const instance = new TypeIt(`#${id}`, {
strings: this.data[id],
speed: speed,
lifeLike: true,
cursorSpeed: cursorSpeed,
cursorChar: cursorChar,
waitUntilVisible: true,
afterComplete: () => {
if (i === group.length - 1) {
if (typeitConfig.duration >= 0) window.setTimeout(() => {
instance.destroy();
}, typeitConfig.duration);
return;
}
instance.destroy();
typeone(i + 1);
},