@wener/console/lib/utils/UserAgentPreference.js

Base console UI toolkit

import { getGlobalStates } from "@wener/utils";
import { createStore, useStore } from "zustand";
import { mutative } from "zustand-mutative";
export function getUserAgentPreferenceStore() {
    return getGlobalStates('UserAgentPreferenceStore', ()=>{
        return createUserAgentPreferenceStore();
    });
}
export function getUserAgentPreferences() {
    return getUserAgentPreferenceStore().getState();
}
export function useUserAgentPreferences() {
    return useStore(getUserAgentPreferenceStore());
}
function createUserAgentPreferenceStore({ watch = true } = {}) {
    return createStore(mutative((setState, getState, store)=>{
        let initial = {
            colorTheme: 'light',
            contrast: 'no-preference',
            reducedMotion: 'no-preference',
            reducedData: 'no-preference',
            reducedTransparency: 'no-preference',
            devicePixelRatio: globalThis.devicePixelRatio ?? 1
        };
        const closer = [];
        let reset = ()=>undefined;
        if (typeof window === 'undefined' || typeof window.matchMedia === 'undefined') {} else {
            let resolution = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
            let prefersColorScheme = window.matchMedia('(prefers-color-scheme: dark)');
            let prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
            let prefersReducedData = window.matchMedia('(prefers-reduced-data: reduce)');
            let prefersReducedTransparency = window.matchMedia('(prefers-reduced-transparency: reduce)');
            let prefersContrast = window.matchMedia('(prefers-contrast: more)');
            let set = (out)=>{
                out.colorTheme = prefersColorScheme.matches ? 'dark' : 'light';
                out.reducedMotion = prefersReducedMotion.matches ? 'reduce' : 'no-preference';
                out.reducedData = prefersReducedData.matches ? 'reduce' : 'no-preference';
                out.reducedTransparency = prefersReducedTransparency.matches ? 'reduce' : 'no-preference';
                out.contrast = prefersContrast.matches ? 'more' : 'no-preference';
                out.devicePixelRatio = globalThis.devicePixelRatio ?? 1;
            };
            // initial
            set(initial);
            const allQuery = [
                prefersColorScheme,
                prefersReducedMotion,
                prefersReducedData,
                prefersReducedTransparency,
                prefersContrast,
                resolution
            ];
            const onChange = ()=>{
                setState((s)=>{
                    set(s);
                    return s;
                });
            };
            reset = onChange;
            if (watch) {
                for (let query of allQuery){
                    query.addEventListener('change', onChange);
                    closer.push(()=>query.removeEventListener('change', onChange));
                }
            }
        }
        return {
            ...initial,
            close: ()=>{
                for (let c of closer){
                    c();
                }
                closer.splice(0, closer.length);
            },
            reset
        };
    }));
}

//# sourceMappingURL=UserAgentPreference.js.map