Newtonian Particle Motion

    svelte-window-stores

    1.0.7 • Public • Published

    svelte-window-stores

    A collection of stores that monitor the size, orientation, color scheme and scroll position of the browser window.

    Compatible with Server-Side Rendering.

    NPM Package

    npm install svelte-window-stores

    Documentation

    Highlights

    • Check the user's preferred color scheme:
    <script>
    	import {ColorScheme, prefersColorScheme} from 'svelte-window-stores/appearance';
    </script>
    
    You prefer {$prefersColorScheme === ColorScheme.Dark ? 'dark' : 'light'} mode!
    • Use responsive media query in your code:
    <script>
    	import {makeScreenSizeStore} from 'svelte-window-stores/viewport';
    
    	export const screenSize = makeScreenSizeStore({
    		names: ['sm', 'md', 'lg'],
    		thresholds: [768, 992],
    	});
    </script>
    
    Your screen is categorized as {$screenSize.name}
    • Show a "go to the top" button when the user scrolls down the page:
    <script>
    	import {scrollY} from 'svelte-window-stores/viewport';
    </script>
    
    <button
    	type="button"
    	style="position: fixed; bottom: 0; right: 0; display: {$scrollY > 10 ? 'inline-block' : 'none'}"
    	>Go to the top</button
    >
    • Automatically go full screen when the user rotates their device:
    <script>
    	import {orientation, Orientation} from 'svelte-window-stores/viewport';
    
    	let fullScreenElement;
    
    	let previousOrientation = $orientation;
    	/** @type {'exit'|'enter'|null}*/
    	let btnAction = null;
    	$: handleOrientationChange($orientation);
    	function handleOrientationChange(currentOrientation) {
    		if (
    			previousOrientation === Orientation.Portrait &&
    			currentOrientation === Orientation.Landscape
    		) {
    			if (!document.fullscreenElement) {
    				btnAction = 'enter';
    			}
    		} else if (
    			previousOrientation === Orientation.Landscape &&
    			currentOrientation === Orientation.Portrait
    		) {
    			if (document.fullscreenElement) {
    				btnAction = 'exit';
    			}
    		}
    		previousOrientation = currentOrientation;
    	}
    	function handleBtnAction() {
    		if (btnAction === 'enter') {
    			fullScreenElement?.requestFullscreen();
    		} else {
    			document.exitFullscreen();
    		}
    		btnAction = null;
    	}
    </script>
    
    <div bind:this={fullScreenElement} style="position: relative; background: white; color: black;">
    	Some content here and there
    
    	<button
    		type="button"
    		on:click={handleBtnAction}
    		style="display: {btnAction
    			? 'inline-block'
    			: 'none'};position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%)"
    		>{btnAction === 'exit' ? 'Exit' : 'Enter'} full screen</button
    	>
    </div>

    A possible use case for $viewportSize

    <script>
    	import {viewportSize} from 'svelte-window-stores/viewport';
    </script>
    
    <div style="background-color: blue; color: white; width: 100%; height: {$viewportSize.height}px">
    	This DIV height takes into account collapsible navigation menus and/or the search bar on a mobile
    	browser.
    </div>
    <div style="background: linear-gradient(orange, black); width: 100%; height: 1000vh">Filler</div>

    Install

    npm i svelte-window-stores

    DownloadsWeekly Downloads

    67

    Version

    1.0.7

    License

    MIT

    Unpacked Size

    30.4 kB

    Total Files

    23

    Last publish

    Collaborators

    • cdellacqua