Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Extract database codes into database-mixin.js #34

Merged
merged 1 commit into from
Oct 2, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 8 additions & 47 deletions src/components/Form.vue
Original file line number Diff line number Diff line change
Expand Up @@ -31,19 +31,15 @@
</template>

<script>
import data from '@dynamic/vuepress-plugin-flexsearch/data';
import Database from './database';
import excerpt from './excerpt';
import ngram from '../tokenizer/ngram';
import databaseMixin from './database-mixin';

/* global FLEX_SEARCH_MAX_SUGGESTIONS */
/* global FLEX_SEARCH_EXCERPT_AROUND_LENGTH */
/* global FLEX_SEARCH_EXCERPT_HEAD_TEXT */
/* global FLEX_SEARCH_EXCERPT_TAIL_TEXT */
/* global FLEX_SEARCH_NGRAM_SIZE */
export default {
name: 'PluginFlexSearchForm',

mixins: [
databaseMixin,
],

props: {
queryParam: {
type: String,
Expand All @@ -53,27 +49,22 @@ export default {

data () {
return {
database: new Database(),

query: '',
searchResult: [],
};
},

mounted() {
for (const locale in data) {
// Consider the case locale defined but no pages created.
this.database.add(locale, data[locale] || {});
}
this.databaseInit();

this.query = this.$router.currentRoute.query[this.queryParam] || '';
this.updateSearchResult();
this.searchResult = this.databaseSearch(this.query);
},

watch: {
$route (to, from) {
this.query = to.query[this.queryParam] || '';
this.updateSearchResult();
this.searchResult = this.databaseSearch(this.query);
},
},

Expand All @@ -90,36 +81,6 @@ export default {
});
}
},
updateSearchResult () {
this.searchResult = this.search();
},
search () {
const query = this.query.trim();

if (query.length === 0) {
return [];
}

const localePath = this.$localePath;
const queryForSearch = ngram.createForSearch(query, FLEX_SEARCH_NGRAM_SIZE);
const max = this.$site.themeConfig.searchMaxSuggestions || FLEX_SEARCH_MAX_SUGGESTIONS;

const matchedKeys = this.database.search(localePath, queryForSearch, max);

return matchedKeys.map((key) => {
const page = data[localePath][key];

return {
title: page.title,
path: page.path,
excerpt: excerpt.create(page.dataForExcerpt, query, {
aroundLength: FLEX_SEARCH_EXCERPT_AROUND_LENGTH,
headText: FLEX_SEARCH_EXCERPT_HEAD_TEXT,
tailText: FLEX_SEARCH_EXCERPT_TAIL_TEXT,
}),
};
});
},
}
};
</script>
Expand Down
47 changes: 7 additions & 40 deletions src/components/SearchBoxFlexSearch.vue
Original file line number Diff line number Diff line change
Expand Up @@ -48,25 +48,19 @@
</template>

<script>
import data from '@dynamic/vuepress-plugin-flexsearch/data'
import Database from './database';
import excerpt from './excerpt'
import ngram from '../tokenizer/ngram'
import databaseMixin from './database-mixin';

/* global FLEX_SEARCH_HOTKEYS */
/* global FLEX_SEARCH_MAX_SUGGESTIONS */
/* global FLEX_SEARCH_EXCERPT_AROUND_LENGTH */
/* global FLEX_SEARCH_EXCERPT_HEAD_TEXT */
/* global FLEX_SEARCH_EXCERPT_TAIL_TEXT */
/* global FLEX_SEARCH_NGRAM_SIZE */
/* global FLEX_SEARCH_UI_ALIGN_RIGHT_FACTOR */
export default {
name: 'SearchBoxFlexSearchBase',

mixins: [
databaseMixin,
],

data () {
return {
database: new Database(),

query: '',
focused: false,
focusIndex: 0,
Expand Down Expand Up @@ -96,31 +90,7 @@ export default {
* @return {{title: string, path: string, excerpt: string}[]}
*/
suggestions () {
const query = this.query.trim();

if (query.length === 0) {
return [];
}

const localePath = this.$localePath;
const queryForSearch = ngram.createForSearch(query, FLEX_SEARCH_NGRAM_SIZE);
const max = this.$site.themeConfig.searchMaxSuggestions || FLEX_SEARCH_MAX_SUGGESTIONS;

const matchedKeys = this.database.search(localePath, queryForSearch, max);

return matchedKeys.map((key) => {
const page = data[localePath][key];

return {
title: page.title,
path: page.path,
excerpt: excerpt.create(page.dataForExcerpt, query, {
aroundLength: FLEX_SEARCH_EXCERPT_AROUND_LENGTH,
headText: FLEX_SEARCH_EXCERPT_HEAD_TEXT,
tailText: FLEX_SEARCH_EXCERPT_TAIL_TEXT,
}),
};
});
return this.databaseSearch(this.query);
},

// make suggestions align right when there are not enough items
Expand All @@ -136,10 +106,7 @@ export default {
window.addEventListener('resize', this.resizeSuggestionsBox);
document.addEventListener('keydown', this.onHotkey);

for (const locale in data) {
// Consider the case locale defined but no pages created.
this.database.add(locale, data[locale] || {});
}
this.databaseInit();
},

beforeDestroy () {
Expand Down
59 changes: 59 additions & 0 deletions src/components/database-mixin.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import data from '@dynamic/vuepress-plugin-flexsearch/data';

import Database from './database';
import excerpt from './excerpt';
import ngram from '../tokenizer/ngram';

/* global FLEX_SEARCH_MAX_SUGGESTIONS */
/* global FLEX_SEARCH_EXCERPT_AROUND_LENGTH */
/* global FLEX_SEARCH_EXCERPT_HEAD_TEXT */
/* global FLEX_SEARCH_EXCERPT_TAIL_TEXT */
/* global FLEX_SEARCH_NGRAM_SIZE */
export default {
data () {
return {
database: new Database(),
};
},

methods: {
databaseInit() {
for (const locale in data) {
// Consider the case locale defined but no pages created.
this.database.add(locale, data[locale] || {});
}
},

/**
* @param {string} queryRow
* @return {{title: string, path: string, excerpt: string}[]}
*/
databaseSearch(queryRow) {
const query = queryRow.trim();

if (query.length === 0) {
return [];
}

const localePath = this.$localePath;
const queryForSearch = ngram.createForSearch(query, FLEX_SEARCH_NGRAM_SIZE);
const limit = this.$site.themeConfig.searchMaxSuggestions || FLEX_SEARCH_MAX_SUGGESTIONS;

const matchedKeys = this.database.search(localePath, queryForSearch, limit);

return matchedKeys.map((key) => {
const page = data[localePath][key];

return {
title: page.title,
path: page.path,
excerpt: excerpt.create(page.dataForExcerpt, query, {
aroundLength: FLEX_SEARCH_EXCERPT_AROUND_LENGTH,
headText: FLEX_SEARCH_EXCERPT_HEAD_TEXT,
tailText: FLEX_SEARCH_EXCERPT_TAIL_TEXT,
}),
};
});
},
},
};