Skip to content

Commit 7b90aad

Browse files
carlos-algmscarlos-algms
committed
refactor search result to looks like a normal listing page
1 parent aff8425 commit 7b90aad

File tree

7 files changed

+100
-54
lines changed

7 files changed

+100
-54
lines changed

‎_config.yml

+5-1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@ exclude:
1515
- Gemfile.lock
1616
- README.md
1717
- vendor/
18+
- node_modules/
19+
- .sass-cache/
20+
- _site/
21+
- globals.d.ts
1822

1923
sass:
2024
sass_dir: _sass
@@ -35,7 +39,7 @@ defaults:
3539
plugins:
3640
- jekyll-seo-tag
3741
- jekyll-sitemap
38-
42+
3943
google_analytics: UA-140681905-3
4044

4145
image_processing:

‎_includes/search-results.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
<ul id="search-results" class="navigation" style="font-family:'Roboto Condensed', 'Helvetica Narrow', 'Arial Narrow';"></ul>
1+
<table id="search-results"></table>
2+
3+
<p id="nothing-found">Nothing found.</p>

‎assets/css/docs.scss

+11
Original file line numberDiff line numberDiff line change
@@ -218,3 +218,14 @@ a.menu {
218218
padding: $base-height;
219219
}
220220
}
221+
222+
223+
// Search Results
224+
225+
#search-results {
226+
margin-top: 10px;
227+
}
228+
229+
#nothing-found {
230+
display: none;
231+
}

‎assets/js/database.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,11 @@ window.database = {
1010
"model": "{{ page.model | xml_escape }}",
1111
"vendor": "{{ page.vendor | xml_escape }}",
1212
"title": "{{ page.title | xml_escape }}",
13-
"zigbeemodel": "{{ page.zigbeemodel | xml_escape }}",
13+
"zigbeemodel": {{ page.zigbeemodel | jsonify }},
1414
"category": "{{ page.category | xml_escape }}",
1515
"url": "{{ page.url | xml_escape }}",
16-
"href": "{{ site.baseurl }}{{ page.url | xml_escape }}"
16+
"href": "{{ site.baseurl }}{{ page.url | xml_escape }}",
17+
"compatible": {{ page.compatible | jsonify }}
1718
}
1819
{% unless forloop.last %},{% endunless %}
1920
{% endfor %}

‎assets/js/search.js

+71-46
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22

33
(function ($, lunr, database) {
44
var resultsContainer = $('#search-results')
5-
var navigationContainer = $('#instructions')
6-
var nothingFound = $('<li>Nothing found.</li>')
5+
var instructionsContainer = $('#instructions')
6+
var nothingFound = $('#nothing-found')
77
var searchQuery = $('#search-input')
88
database = database || {}
99

@@ -12,31 +12,35 @@
1212
*/
1313
function createSearchStore(data) {
1414
var searchStore = lunr(function () {
15-
var self = this
15+
var lunrBuilder = this
1616

17-
self.pipeline.remove(lunr.stemmer);
18-
self.searchPipeline.remove(lunr.stemmer);
17+
lunrBuilder.pipeline.remove(lunr.stemmer);
18+
lunrBuilder.searchPipeline.remove(lunr.stemmer);
1919

2020
let leftAnchoredSearch = function (token) {
2121
token.update(function () { return token.toString() + '*' });
2222
return token;
2323
};
24+
2425
lunr.Pipeline.registerFunction(leftAnchoredSearch, 'las');
25-
self.searchPipeline.add(leftAnchoredSearch);
26+
lunrBuilder.searchPipeline.add(leftAnchoredSearch);
27+
28+
lunrBuilder.field('id');
29+
lunrBuilder.field('vendor');
30+
lunrBuilder.field('model', { boost: 20 });
31+
lunrBuilder.field('title');
32+
lunrBuilder.field('zigbeemodel');
2633

27-
self.field('id');
28-
self.field('vendor');
29-
self.field('model', { boost: 20 });
30-
self.field('title');
31-
self.field('zigbeemodel');
34+
Object.entries(data).forEach(function ([key, entry]) {
35+
var zigbeeModel = entry.zigbeemodel || '';
36+
zigbeeModel = Array.isArray(zigbeeModel) ? zigbeeModel.join(' ') : String(zigbeeModel);
3237

33-
Object.keys(data).forEach(function (key) {
34-
self.add({
38+
lunrBuilder.add({
3539
id: key,
36-
title: data[key].title,
37-
model: data[key].model,
38-
vendor: data[key].vendor,
39-
zigbeemodel: data[key].zigbeemodel,
40+
title: entry.title,
41+
model: entry.model,
42+
vendor: entry.vendor,
43+
zigbeemodel: zigbeeModel,
4044
});
4145
})
4246

@@ -45,30 +49,49 @@
4549
return searchStore
4650
}
4751

52+
4853
/**
4954
* @param {DatabaseEntry} result
5055
*/
5156
function resultEntry(result) {
52-
var searchEntry = $('<li />')
53-
var searchLink = $('<a />')
54-
55-
var categoryPath = result.url.split('/')
56-
categoryPath.shift()
57-
categoryPath.pop()
58-
59-
searchEntry
60-
.append(searchLink)
61-
62-
searchLink.attr('href', result.href)
63-
64-
searchLink
65-
.text(result.vendor)
66-
.append(" ")
67-
.append(result.title)
68-
.append(" ")
69-
.append(result.model)
70-
.append("&emsp;&emsp;ZigbeeID: ")
71-
.append(result.zigbeemodel);
57+
var imgSrc = `/assets/images/devices${result.href.replace('.html', '')}.webp`;
58+
var compatible = Array.isArray(result.compatible) ? result.compatible : [];
59+
60+
var searchEntry = $(`<tr>
61+
<td class="td-first">
62+
<img src="${imgSrc}" height="75" alt="${result.vendor} ${result.model}" loading="lazy" />
63+
</td>
64+
<td class="td-second">
65+
<b>
66+
<a class="menu" href="${result.href}">
67+
${result.vendor} ${result.title}
68+
</a>
69+
</b>
70+
</td>
71+
<td>
72+
${result.model.length >= 18 ? result.model.substring(0, 15) + '...' : result.model}
73+
</td>
74+
75+
<td class="td-compat">
76+
${compatible.includes('zha') ? '<img alt="zha" title="Zigbee Home Automation for Home Assistant" src="/assets/images/zha-icon.png" />' : ''}
77+
</td>
78+
<td class="td-compat">
79+
${compatible.includes('tasmota') || result.category == 'light' || result.category == 'dimmer' ? '<img alt="Tasmota" title="Tasmota" src="/assets/images/tasmota-icon.png" />' : ''}
80+
</td>
81+
<td class="td-compat">
82+
${compatible.includes('z2m') ? '<img alt="Zigbee2MQTT" title="Zigbee2MQTT" src="/assets/images/z2m-icon.png" />' : ''}
83+
</td>
84+
<td class="td-compat">
85+
${compatible.includes('deconz') ? '<img alt="deCONZ" title="deCONZ" src="/assets/images/deconz-icon.png" />' : ''}
86+
</td>
87+
<td class="td-compat">
88+
${compatible.includes('z4d') ? '<img alt="Zigbee for Domoticz" title="Zigbee for Domoticz" src="/assets/images/z4d-icon.png" />' : ''}
89+
</td>
90+
<td class="td-compat">
91+
${compatible.includes('iob') || compatible.includes('z2m') ? '<img alt="ioBroker.zigbee" title="ioBroker.zigbee" src="/assets/images/iobroker-icon.png" />' : ''}
92+
</td>
93+
</tr>`
94+
);
7295

7396
return searchEntry
7497
}
@@ -78,24 +101,26 @@
78101
*/
79102
function displayResults(results) {
80103
resultsContainer.empty()
81-
var fragment = $(document.createDocumentFragment());
104+
instructionsContainer.hide()
82105

83-
if (results.length > 0) {
84-
results.map(function(entry) {
85-
resultsContainer.append(resultEntry(entry))
86-
})
87-
} else {
88-
resultsContainer.append(nothingFound)
106+
if (!results.length) {
107+
nothingFound.show();
108+
return;
89109
}
90110

111+
var fragment = $(document.createDocumentFragment());
112+
results.map(function(entry) {
113+
fragment.append(resultEntry(entry))
114+
})
115+
91116
resultsContainer.append(fragment);
92-
navigationContainer.hide()
93117
resultsContainer.show()
94118
}
95119

96120
function hideResults() {
97121
resultsContainer.hide()
98-
navigationContainer.show()
122+
nothingFound.hide();
123+
instructionsContainer.show()
99124
}
100125

101126
/**

‎globals.d.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@ declare type DatabaseEntry = {
22
title: string;
33
model: string;
44
vendor: string;
5-
zigbeemodel: string;
5+
zigbeemodel: string | string[] | number;
66
href: string;
77
url: string;
88
category: string;
9+
compatible: string[];
910
};
1011

1112
declare type GlobalDatabase = Record<string, DatabaseEntry>;

‎jsconfig.json

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
{
22
"compilerOptions": {
3-
"target": "es5",
3+
"target": "es6",
44
"checkJs": true,
55
"lib": [
6-
"es2015",
6+
"es2019",
77
"dom"
88
]
99
},
1010
"exclude": [
11-
"node_modules"
11+
"node_modules",
12+
"_site",
13+
".sass-cache"
1214
],
1315
"typeAcquisition": {
1416
"include": [

0 commit comments

Comments
 (0)