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

1 files changed, 33 insertions, 24 deletions

diff --git a/src/js/theme.js b/src/js/theme.js
index 8459a05..b0ef2db 100644
--- a/src/js/theme.js
+++ b/src/js/theme.js
@@ -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);
                         },