Merge pull request #14 from shgysk8zer0/bug/media-queries-module

Add `media-queries.js` module

CHANGELOG.md

@@ -6,6 +6,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [v.0.0.10] - 2023-05-14
+
+### Added
+- Import `media-queries.js` module
+
 ## [v0.0.9] - 2023-05-14
 
 ## Added

media-queries.js

@@ -0,0 +1,46 @@
+/**
+ * @copyright 2023 Chris Zuber <admin@kernvalley.us>
+ */
+import { when } from './dom.js';
+export const supported = globalThis.matchMedia instanceof Function;
+
+export function mediaQuery(query = {}) {
+	console.warn('`mediaQuery()` is deprecated. Please use `matches()` instead.');
+	return matches(query);
+}
+
+export function matches(what = {}) {
+	return query(what).matches;
+}
+
+export function query(query = {}) {
+	if (! supported) {
+		return { matches: false, addEventListener: () => null, removeEventListener: () => null };
+	} else {
+		const queries = Object.entries(query).map(([k, v]) => `(${k}: ${v})`).join(' and ');
+		return matchMedia(queries);
+	}
+}
+
+export async function whenMatches(what = {}, { signal } = {}) {
+	const mq = query(what);
+
+	if (! mq.matches) {
+		await when(mq, 'change', { signal });
+	}
+
+	return mq;
+}
+
+export function prefersReducedMotion() {
+	return matches({ 'prefers-reduced-motion': 'reduce' });
+}
+
+export function prefersColorScheme() {
+	return matches({ 'prefers-color-scheme': 'dark' }) ? 'dark': 'light';
+}
+
+export function displayMode() {
+	const displays = ['browser', 'standalone', 'minimal-ui', 'fullscreen'];
+	return displays.find(mode => matches({ 'display-mode': mode })) || 'browser';
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shgysk8zer0/kazoo",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "private": false,
   "description": "A JavaScript monorepo for all the things!",
   "main": "index.js",