|
5 | 5 | <hgroup> |
6 | 6 | <h1><span class="thin">Awesome</span> Vue.js</h1> |
7 | 7 | <h2 class="tagline thin">A curated list of awesome things related to |
8 | | - <a href="https://vuejs.org/">Vue.js</a></h2> |
| 8 | + <a href="https://vuejs.org/">Vue.js</a> |
| 9 | + </h2> |
9 | 10 | </hgroup> |
10 | 11 | <form> |
11 | 12 | <label> |
12 | 13 | <input |
13 | 14 | type="search" |
14 | 15 | placeholder="type to filter" |
15 | 16 | v-model="q" |
| 17 | + @input="debounceFilter()" |
16 | 18 | id="seachField" |
17 | 19 | autofocus="autofocus"> |
18 | 20 | <a :href="'#' + q" |
@@ -59,39 +61,49 @@ export default { |
59 | 61 | } |
60 | 62 | }, |
61 | 63 |
|
62 | | - watch: { |
63 | | - q() { |
64 | | - let q = this.q.trim() |
65 | | -
|
66 | | - if (q === 'everything') { |
67 | | - q = '' |
68 | | - } |
69 | | -
|
70 | | - if (!q) { |
71 | | - this.groups = window.data |
72 | | - return |
73 | | - } |
74 | | -
|
75 | | - this.groups = this.filter(_.cloneDeep(window.data), q) |
76 | | - } |
77 | | - }, |
78 | | -
|
79 | 64 | created() { |
| 65 | + // Listen to the 'tag-selected' event to trigger the filtering process. |
80 | 66 | event.on('tag-selected', tag => { |
81 | 67 | this.q = tag[0] |
82 | 68 |
|
83 | 69 | // Set the focus into the search field. Some little UX doesn't kill. |
84 | 70 | this.$nextTick(() => { |
85 | 71 | document.getElementById('seachField').focus() |
86 | 72 | }) |
| 73 | +
|
| 74 | + this.debounceFilter() |
87 | 75 | }) |
88 | 76 |
|
| 77 | + // Also, upon page load, tf there's a hash, we filter the awesome list |
| 78 | + // right away. |
89 | 79 | if (window.location.hash) { |
90 | 80 | this.q = /^#(.*)/.exec(window.location.hash)[1].toLowerCase() |
| 81 | + this.debounceFilter() |
91 | 82 | } |
92 | 83 | }, |
93 | 84 |
|
94 | 85 | methods: { |
| 86 | + /** |
| 87 | + * Limit filtering using lodash's debounce. |
| 88 | + * @param {Event} |
| 89 | + * @param {VueComponent} |
| 90 | + * @return {Function} |
| 91 | + */ |
| 92 | + debounceFilter: _.debounce(function () { |
| 93 | + let q = this.q.trim() |
| 94 | +
|
| 95 | + if (q === 'everything') { |
| 96 | + q = '' |
| 97 | + } |
| 98 | +
|
| 99 | + if (!q) { |
| 100 | + this.groups = window.data |
| 101 | + return |
| 102 | + } |
| 103 | +
|
| 104 | + this.groups = this.filter(_.cloneDeep(window.data), q) |
| 105 | + }, 100), |
| 106 | +
|
95 | 107 | /** |
96 | 108 | * Filter our awesome data. |
97 | 109 | * @param {Array.<Object>} groups The groups to apply filtering on |
|
0 commit comments