-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
142 lines (118 loc) · 4.14 KB
/
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
const translations = ['se'];
var fuse;
var lang;
function render(p_item) {
let item = p_item.item || p_item;
let score = p_item.score ? 1 - p_item.score : '';
let opacity = score/latestMaxScore;
let tagDots = '';
item.tags.forEach(tagId => {
let borderCss = document.querySelector('#tag_'+tagId).checked ? '2px solid ffffff80' : 'none';
let extraClass = document.querySelector('#tag_'+tagId).checked ? 'pulse' : '';
if(tags[tagId]) tagDots += `<span class="dot ${extraClass}" onclick="document.getElementById('tag_${tagId}').click();" title="${tags[tagId].title}" >${tags[tagId].icon}</span>`;
});
return `<span style="opacity:${Math.max(opacity-0.2,0.15)}" class="item" title="${Math.round(score*100)}/100 match">${item.title} ${tagDots}</span>`;
}
let latestMaxScore;
function search() {
let searchInput = sIn.value.length > 0 ? sIn.value : ' ';
sOut.innerHTML = "";
let selectedTags = [];
// Collect slected tags
document.querySelectorAll('.tag').forEach( el => {
if(el.checked) selectedTags.push({tags:el.dataset.key})
});
// Setup search options
let searchArray = [
{
$path: ['title'],
$val: searchInput
}
];
searchArray = searchArray.concat(selectedTags);
// Search
let searchResult = fuse.search({ $and:searchArray })
// Find best match
latestMaxScore = 0;
searchResult.forEach( el => {latestMaxScore = Math.max(latestMaxScore, 1-el.score)});
// Render each advantage
searchResult.forEach( el => {sOut.innerHTML += render(el);});
// Show all matches if nothing was found
if(sOut.innerHTML == "") index.forEach( el => {sOut.innerHTML += render(el);});
}
function init() {
const fuseOptions = {
// isCaseSensitive: false,
includeScore: true,
// shouldSort: true,
includeMatches: true,
findAllMatches: true,
// minMatchCharLength: 1,
// location: 0,
threshold: 1.0,
//distance: 1000,
// useExtendedSearch: false,
ignoreLocation: true,
ignoreFieldNorm: true,
// fieldNormWeight: 1,
keys: [
"title",
"tags"
]
};
fuse = new Fuse(index, fuseOptions);
// Render tags
Object.keys(tags).forEach(function(key,index) {
let el = tags[key];
let tagContainer = document.createElement('span');
let tagCheckbox = document.createElement('input');
let checkboxId = 'tag_'+key;
tagContainer.class = 'tag-container';
tagContainer.innerHTML = `<label for="${checkboxId}">${el.title}${el.icon}</label>`;
tagCheckbox.className = 'tag';
tagCheckbox.type = 'checkbox';
tagCheckbox.id = checkboxId;
tagCheckbox.dataset.key = key;
tagCheckbox.onclick = search;
tagContainer.appendChild(tagCheckbox);
taglist.appendChild(tagContainer);
});
// Translate texts
if(lang) {
document.getElementById('furtherReading').innerHTML = texts.furtherReading;
document.getElementById('shareText').innerHTML = texts.shareText;
document.querySelector('#suggestions span').innerHTML = texts.suggestions;
document.getElementById('header').innerHTML = texts.pageTitle;
document.title = texts.pageTitle;
let selectedLang = document.getElementById('selectedLang');
selectedLang.classList.remove("usFlag");
selectedLang.classList.add(lang + "Flag");
Array.from(document.getElementsByClassName('share-link')).forEach(el => { el.href = el.href.replace("https%3A%2F%2Fcutt.ly%2FWork-From-Home-Advantages", encodeURIComponent(texts.shortUrl) ); });
let qrShare = document.querySelector('.share-link.qr');
qrShare.href = qrShare.href.replace('qr', 'qr' + lang);
}
// Render list
search('');
}
document.addEventListener("DOMContentLoaded", function(event) {
const urlParams = new URLSearchParams(window.location.search);
let langParam = urlParams.get('l');
// Perpare to load data
let head = document.getElementsByTagName('head')[0];
let dataPath = 'data.js';
let dataScriptElem = document.createElement('script');
dataScriptElem.addEventListener('load', function() {
init();
});
// Do we need to load a translation?
if(langParam) {
langParam = langParam.toLowerCase();
// Valid transaltion?
if(translations.includes(langParam)) {
lang = langParam;
dataPath = `data_${langParam}.js`;
}
}
dataScriptElem.src = dataPath;
head.appendChild(dataScriptElem);
});