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
|
(() => {
/**
* ===========
* Font Size
* ===========
*/
const setFontSize = (size) => {
if (size) localStorage.setItem('geedeapro.ui.fontSize', size);
const fontSizeSelected = size || localStorage.getItem('geedeapro.ui.fontSize') || 'medium';
const markdownBodies = document.querySelectorAll('.markdown-body');
const fontSizeClass = {
'small': ['text-size-sm', 'md:text-size-base'],
'medium': ['text-size-lg', 'md:text-size-xl'],
'large': ['text-size-xl', 'md:text-size-2xl']
}
markdownBodies.forEach((body) => {
// remove existing font size classes
body.classList.remove(...fontSizeClass['small'],
...fontSizeClass['medium'],
...fontSizeClass['large'])
// add required font classes
body.classList.add(...fontSizeClass[fontSizeSelected])
});
}
setFontSize();
/**
* ===========================
* Initialize Settings Page
* ===========================
*/
// return if this is not the settings page
if (!document.getElementById('settings')) return;
const initializeSettingsPage = () => {
// initialize text altering buttons
function initTextAlterButtons() {
const textAlterButtons = document.querySelectorAll('#text-alter-buttons button');
textAlterButtons.forEach(button => {
// highlight selected button
if (button.dataset.textSize === localStorage.getItem('geedeapro.ui.fontSize')) {
button.classList.add('bg-neutral-200/50', 'dark:bg-neutral-700/50');
}
// switch font size when clicked
button.addEventListener('click', () => {
setFontSize(button.dataset.textSize);
// highlight selected button
textAlterButtons.forEach(btn => btn.classList.remove('bg-neutral-200/50', 'dark:bg-neutral-700/50'));
button.classList.add('bg-neutral-200/50', 'dark:bg-neutral-700/50');
});
});
}
initTextAlterButtons()
// initialize checkbox options
function initCheckboxes() {
const checkboxOptions = [
{
id: 'dontAllowTracking',
label: '禁止网站使用 Web 分析工具跟踪用户行为',
storage: 'umami.disabled',
default: 'false'
},
{
id: 'hideBatrick',
label: '隐藏 Batrick（返回顶部按钮）',
storage: 'geedeapro.ui.hideBatrick',
default: 'false'
}
]
checkboxOptions.forEach(checkboxOption => {
// create checkbox
const element = document.createElement('input');
element.type = 'checkbox';
element.id = checkboxOption.id;
element.checked = localStorage.getItem(checkboxOption.storage) ||
checkboxOption.default === 'true';
// add event listener to checkbox
element.addEventListener('change', () => {
if (element.checked)
localStorage.setItem(checkboxOption.storage, 1);
else
localStorage.removeItem(checkboxOption.storage);
});
// create label
const label = document.createElement('label');
label.htmlFor = element.id;
label.textContent = checkboxOption.label;
// wrap checkbox and label in a div
const wrapper = document.createElement('div');
wrapper.classList.add('flex', 'items-center', 'mb-2', 'gap-2');
wrapper.appendChild(element);
wrapper.appendChild(label);
// append checkbox and label to container
const container = document.getElementById('checkbox-options');
container.appendChild(wrapper);
});
}
initCheckboxes();
};
initializeSettingsPage();
})();
|
