acessibility
This commit is contained in:
@@ -1,15 +1,17 @@
|
||||
<script lang="ts">
|
||||
import { mapState, UMD_LOCATIONS } from '$lib/states/map.svelte';
|
||||
|
||||
import { themeState } from '$lib/states/theme.svelte';
|
||||
|
||||
let { showDropdown = true } = $props<{ showDropdown?: boolean }>();
|
||||
|
||||
const legendItems = [
|
||||
{ label: 'Harmful (80+ dB)', color: '#f38ba8' },
|
||||
{ label: 'Disruptive (65-79 dB)', color: '#fab387' },
|
||||
{ label: 'Manageable (55-64 dB)', color: '#f9e2af' },
|
||||
{ label: 'Great (40-54 dB)', color: '#94e2d5' },
|
||||
{ label: 'Ideal (0-39 dB)', color: '#89b4fa' }
|
||||
];
|
||||
const legendItems = $derived([
|
||||
{ label: 'Harmful (80+ dB)', color: themeState.isColorBlindFriendly ? '#e66100' : '#f38ba8' },
|
||||
{ label: 'Disruptive (65-79 dB)', color: themeState.isColorBlindFriendly ? '#ffb000' : '#fab387' },
|
||||
{ label: 'Manageable (55-64 dB)', color: themeState.isColorBlindFriendly ? '#f0e442' : '#f9e2af' },
|
||||
{ label: 'Great (40-54 dB)', color: themeState.isColorBlindFriendly ? '#56b4e9' : '#94e2d5' },
|
||||
{ label: 'Ideal (0-39 dB)', color: themeState.isColorBlindFriendly ? '#0072b2' : '#89b4fa' }
|
||||
]);
|
||||
</script>
|
||||
|
||||
<div class="absolute top-6 right-6 md:right-8 z-20 flex flex-col gap-3 items-end">
|
||||
|
||||
@@ -12,7 +12,7 @@ export const UMD_LOCATIONS: StudyLocation[] = [
|
||||
{ id: 'mckeldin', name: 'McKeldin Library', hasFloors: true, floors: ['Floor 1', 'Floor 2', 'Floor 3', 'Floor 4', 'Floor 5', 'Floor 6', 'Floor 7'], lng: -76.94494907523277, lat: 38.986021017749366 },
|
||||
{ id: 'hornbake', name: 'Hornbake Library', hasFloors: false, lng: -76.94161787005467, lat: 38.988233373664826 },
|
||||
{ id: 'stem', name: 'STEM Library', hasFloors: false, lng: -76.93942003731279, lat: 38.988991437126195 },
|
||||
{ id: 'clarice', name: 'Clarice Library', hasFloors: false, lng: -76.94967344225785, lat: 38.99029330703877 },
|
||||
{ id: 'clarice', name: 'Clarice Library', hasFloors: false, lng: -76.9500912552473, lat: 38.990547823732285 },
|
||||
{ id: 'yahentamitsi', name: 'Yahentamitsi', hasFloors: false, lng: -76.9448027183373, lat: 38.99108961575231 },
|
||||
{ id: 'iribe', name: 'Iribe', hasFloors: false, lng: -76.93643838603555, lat: 38.98933701397555 },
|
||||
{ id: 'reckord', name: 'Reckord Armory', hasFloors: false, lng: -76.93897470250619, lat: 38.98609556181066 },
|
||||
|
||||
@@ -2,15 +2,61 @@ import { browser } from '$app/environment';
|
||||
|
||||
class ThemeState {
|
||||
isLight = $state(false);
|
||||
isHighContrast = $state(false);
|
||||
isColorBlindFriendly = $state(false);
|
||||
|
||||
constructor() {
|
||||
if (browser) {
|
||||
this.isLight = localStorage.getItem('theme') === 'light';
|
||||
this.isHighContrast = localStorage.getItem('highContrast') === 'true';
|
||||
this.isColorBlindFriendly = localStorage.getItem('colorBlind') === 'true';
|
||||
this.updateDOM();
|
||||
}
|
||||
}
|
||||
|
||||
toggle() {
|
||||
this.isLight = !this.isLight;
|
||||
if (browser) {
|
||||
localStorage.setItem('theme', this.isLight ? 'light' : 'dark');
|
||||
this.updateDOM();
|
||||
}
|
||||
}
|
||||
|
||||
toggleHighContrast() {
|
||||
this.isHighContrast = !this.isHighContrast;
|
||||
if (browser) {
|
||||
localStorage.setItem('highContrast', this.isHighContrast ? 'true' : 'false');
|
||||
this.updateDOM();
|
||||
}
|
||||
}
|
||||
|
||||
toggleColorBlind() {
|
||||
this.isColorBlindFriendly = !this.isColorBlindFriendly;
|
||||
if (browser) {
|
||||
localStorage.setItem('colorBlind', this.isColorBlindFriendly ? 'true' : 'false');
|
||||
this.updateDOM();
|
||||
}
|
||||
}
|
||||
|
||||
private updateDOM() {
|
||||
if (browser) {
|
||||
if (this.isLight) {
|
||||
document.documentElement.classList.add('light-theme');
|
||||
} else {
|
||||
document.documentElement.classList.remove('light-theme');
|
||||
}
|
||||
|
||||
if (this.isHighContrast) {
|
||||
document.documentElement.classList.add('high-contrast');
|
||||
} else {
|
||||
document.documentElement.classList.remove('high-contrast');
|
||||
}
|
||||
|
||||
if (this.isColorBlindFriendly) {
|
||||
document.documentElement.classList.add('color-blind');
|
||||
} else {
|
||||
document.documentElement.classList.remove('color-blind');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user