(key)
| 278 | } |
| 279 | |
| 280 | #doSpecial(key) { |
| 281 | const node = document.createElement('div') |
| 282 | switch (key) { |
| 283 | case 'font_size' : { |
| 284 | node.innerHTML = [ |
| 285 | '<i18n-text class="inset-block-header" data-key="user_pref_title_font_size"></i18n-text>', |
| 286 | '<div class="row">', |
| 287 | '<i18n-text class="inset-block-blurb-option col-10" data-key="user_pref_blurb_font_size"></i18n-text>', |
| 288 | '<div class="col-2 text-center small text-body-emphasis" id="pref--font_size_value">XX</div>', |
| 289 | '<div class="col-12 mt-2">', |
| 290 | '<input id="pref--font_size_input" type="range" class="form-range" min="70" max="150" step="1" >', |
| 291 | '<div class="p-0" style="margin-top: -0.95rem"><i style="margin-left: calc(38% - 0.5rem)" class="text-body-tertiary bi-caret-up"></i></div>', |
| 292 | '</div><div class="col-10 offset-1 mt-2">', |
| 293 | '<i18n-text id="pref--font_size_reset" class="d-block btn btn-outline-primary btn-sm w-100 mx-auto" data-key="user_pref_font_size_default"></i18n-text>', |
| 294 | '</div></div>', |
| 295 | ].join('') |
| 296 | |
| 297 | const font_size_number = node.querySelector('#pref--font_size_value') |
| 298 | const font_size_slider = node.querySelector('#pref--font_size_input') |
| 299 | const font_size_reset = node.querySelector('#pref--font_size_reset') |
| 300 | |
| 301 | font_size_reset.addEventListener('click', () => { |
| 302 | window.settings.set('font_size', 14).then((value) => { |
| 303 | const percent = (value / 100) * 14 |
| 304 | font_size_slider.value = value |
| 305 | font_size_number.textContent = `${percent}%` |
| 306 | }) |
| 307 | }) |
| 308 | font_size_slider.addEventListener('input', () => { |
| 309 | font_size_number.textContent = `${Math.floor(font_size_slider.value)}%` |
| 310 | }) |
| 311 | font_size_slider.addEventListener('change', () => { |
| 312 | const numberValue = (font_size_slider.value / 100) * 14 |
| 313 | window.settings.set('font_size', numberValue).then((value) => { |
| 314 | const percent = (value / 14) * 100 |
| 315 | font_size_slider.value = value |
| 316 | font_size_number.textContent = `${Math.floor(percent)}%` |
| 317 | }) |
| 318 | }) |
| 319 | |
| 320 | const font_size_update = () => { |
| 321 | window.settings.get('font_size').then((value) => { |
| 322 | const percent = (value / 14) * 100 |
| 323 | font_size_slider.value = percent |
| 324 | font_size_number.textContent = `${Math.floor(percent)}%` |
| 325 | }) |
| 326 | } |
| 327 | |
| 328 | window?.operations?.receive('win:updateFontSize', font_size_update) |
| 329 | |
| 330 | this.update.push(font_size_update) |
| 331 | break |
| 332 | } |
| 333 | case 'theme_color' : { |
| 334 | node.innerHTML = [ |
| 335 | '<i18n-text class="inset-block-header" data-key="user_pref_title_theme_color"></i18n-text>', |
| 336 | '<i18n-text class="inset-block-blurb-option" data-key="user_pref_blurb_theme_color"></i18n-text>', |
| 337 | '<select class="form-select mt-3 px-4" name="theme_select" id="theme_select"></select>', |
no test coverage detected