@ouroboros/browser 0.3.0 → 0.4.0

package/README.md

@@ -5,12 +5,12 @@
 A library of classes to manage functionality in browsers.
 
 ## Installation
-npm
+
 ```bash
 npm install @ouroboros/browser
 ```
 
-## Getting Started
+## clipboard
 
 Import clipboard into your code
 
@@ -24,6 +24,10 @@ or
 import { clipboard } from '@ouroboros/browser';
 ```
 
+copy()
+
+## cookies
+
 Import Cookies into your code
 
 ```javascript
@@ -36,6 +40,10 @@ or
 import { cookies } from '@ouroboros/browser';
 ```
 
+get(), remove(), set()
+
+## hash
+
 Import hash into your code
 
 ```javascript
@@ -48,6 +56,10 @@ or
 import { hash } from '@ouroboros/browser';
 ```
 
+get(), set(), subscribe(), unsubscribe()
+
+## network
+
 Import network into your code
 
 ```javascript
@@ -60,6 +72,10 @@ or
 import { network } from '@ouroboros/browser';
 ```
 
+default (network)
+
+## pageVisibility
+
 Import pageVisibility into your code
 
 ```javascript
@@ -72,6 +88,10 @@ or
 import { pageVisibility } from '@ouroboros/browser';
 ```
 
+default (pageVisibility)
+
+## safeLocalStorage
+
 Import safeLocalStorage into your code
 
 ```javascript
@@ -82,4 +102,22 @@ or
 
 ```javascript
 import { safeLocalStorage } from '@ouroboros/browser';
-```
+```
+
+bool(), json(), string()
+
+## size
+
+Import size into your code
+
+```javascript
+import size from '@ouroboros/browser/size';
+```
+
+or
+
+```javascript
+import { size } from '@ouroboros/browser';
+```
+
+xs, sm, md, lg, xl, compare(), get(), greaterThan(), lessThan()

package/hash.js

@@ -173,7 +173,7 @@ function subscribe(name, callback) {
     // If we don't already have the name
     if (!(name in oSubscribe)) {
         // Create a new subscribe instance
-        oSubscribe[name] = new Subscribe();
+        oSubscribe[name] = new Subscribe(name in dHash ? dHash[name] : null);
     }
     // Add the callback and return
     return oSubscribe[name].subscribe(callback);

package/hash.ts

@@ -220,7 +220,9 @@ function subscribe(name: string, callback: SubscribeCallback): SubscribeReturn {
 	if(!(name in oSubscribe)) {
 
 		// Create a new subscribe instance
-		oSubscribe[name] = new Subscribe();
+		oSubscribe[name] = new Subscribe(
+			name in (dHash as HashType) ? (dHash as HashType)[name] : null
+		);
 	}
 
 	// Add the callback and return

package/index.d.ts

@@ -4,3 +4,4 @@ export { default as hash } from './hash';
 export { default as network } from './network';
 export { default as pageVisibility } from './pageVisibility';
 export { default as safeLocalStorage } from './safeLocalStorage';
+export { default as size } from './size';

package/index.js

@@ -4,3 +4,4 @@ export { default as hash } from './hash';
 export { default as network } from './network';
 export { default as pageVisibility } from './pageVisibility';
 export { default as safeLocalStorage } from './safeLocalStorage';
+export { default as size } from './size';

package/index.ts

@@ -3,4 +3,5 @@ export { default as cookies } from './cookies';
 export { default as hash } from './hash';
 export { default as network } from './network';
 export { default as pageVisibility } from './pageVisibility';
-export { default as safeLocalStorage } from './safeLocalStorage';
+export { default as safeLocalStorage } from './safeLocalStorage';
+export { default as size } from './size';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ouroboros/browser",
-	"version": "0.3.0",
+	"version": "0.4.0",
 	"description": "Package to handle common browser functionality.",
 	"main": "index.js",
 	"types": "index.d.ts",

package/size.d.ts

@@ -0,0 +1,72 @@
+/**
+ * Size
+ *
+ * JS Library to manage the current client width of the screen in specific sizes
+ *
+ * @author Chris Nasr <chris@ouroboroscoding.com>
+ * @copyright Ouroboros Coding Inc.
+ * @created 2024-09-19
+ */
+export declare const xs = "xs";
+export declare const sm = "sm";
+export declare const md = "md";
+export declare const lg = "lg";
+export declare const xl = "xl";
+export type SIZE = typeof xs | typeof sm | typeof md | typeof lg | typeof xl;
+export declare const SIZES: Record<SIZE, number>;
+/**
+ * Compare
+ *
+ * Compares two widths and returns the standard -1,0,1 values as a result. -1
+ * if `a` is less than `b, 0 for equality, and 1 if `a` is greater than `b`.
+ *
+ * @name compare
+ * @access public
+ * @param against The size to compare the current size against
+ * @returns -1 || 0 || 1
+ */
+export declare function compare(against: SIZE): 0 | 1 | -1;
+/**
+ * Greater Than
+ *
+ * Returns true only if `a` is a larger width than `b`
+ *
+ * @name greaterThan
+ * @access public
+ * @param against The size to compare the current size against
+ * @returns boolean
+ */
+export declare function greaterThan(against: SIZE): boolean;
+/**
+ * Less Than
+ *
+ * Returns true only if `a` is a smaller width than `b`
+ *
+ * @name greaterThan
+ * @access public
+ * @param against The size to compare the current size against
+ * @returns boolean
+ */
+export declare function lessThan(against: SIZE): boolean;
+/**
+ * Get
+ *
+ * Returns the current width type based on the current client width
+ *
+ * @name get
+ * @access public
+ * @returns The current width
+ */
+export declare function get(): SIZE;
+declare const width: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    compare: typeof compare;
+    greaterThan: typeof greaterThan;
+    lessThan: typeof lessThan;
+    get: typeof get;
+};
+export default width;

package/size.js

@@ -0,0 +1,132 @@
+/**
+ * Size
+ *
+ * JS Library to manage the current client width of the screen in specific sizes
+ *
+ * @author Chris Nasr <chris@ouroboroscoding.com>
+ * @copyright Ouroboros Coding Inc.
+ * @created 2024-09-19
+ */
+// Constants
+export const xs = 'xs';
+export const sm = 'sm';
+export const md = 'md';
+export const lg = 'lg';
+export const xl = 'xl';
+// The minimum pixels necessary for each size type
+export const SIZES = {
+    [xs]: 0, [sm]: 600, [md]: 900,
+    [lg]: 1200, [xl]: 1536
+};
+// The current size
+let _current = null;
+/**
+ * Init
+ *
+ * Called internally to setup the module
+ *
+ * @name _init
+ * @access private
+ */
+function _init() {
+    // Const private function to calculate size from client width
+    const _calculate = () => {
+        if (document.documentElement.clientWidth < 600) {
+            return xs;
+        }
+        if (document.documentElement.clientWidth < 900) {
+            return sm;
+        }
+        if (document.documentElement.clientWidth < 1200) {
+            return md;
+        }
+        if (document.documentElement.clientWidth < 1536) {
+            return lg;
+        }
+        return xl;
+    };
+    // If we don't have the size
+    if (_current === null) {
+        _current = _calculate();
+        window.addEventListener('resize', () => {
+            _current = _calculate();
+        });
+    }
+}
+/**
+ * Compare
+ *
+ * Compares two widths and returns the standard -1,0,1 values as a result. -1
+ * if `a` is less than `b, 0 for equality, and 1 if `a` is greater than `b`.
+ *
+ * @name compare
+ * @access public
+ * @param against The size to compare the current size against
+ * @returns -1 || 0 || 1
+ */
+export function compare(against) {
+    // Init if necessary
+    if (_current === null)
+        _init();
+    // If the current size is the same as the passed value
+    if (_current === against)
+        return 0;
+    // Else, if the current value is less than the passed value
+    if (SIZES[_current] < SIZES[against])
+        return -1;
+    // Else, the current value is more than the passed value
+    return 1;
+}
+/**
+ * Greater Than
+ *
+ * Returns true only if `a` is a larger width than `b`
+ *
+ * @name greaterThan
+ * @access public
+ * @param against The size to compare the current size against
+ * @returns boolean
+ */
+export function greaterThan(against) {
+    // Init if necessary
+    if (_current === null)
+        _init();
+    // If the current value is greater than the passed value
+    return SIZES[_current] > SIZES[against];
+}
+/**
+ * Less Than
+ *
+ * Returns true only if `a` is a smaller width than `b`
+ *
+ * @name greaterThan
+ * @access public
+ * @param against The size to compare the current size against
+ * @returns boolean
+ */
+export function lessThan(against) {
+    // Init if necessary
+    if (_current === null)
+        _init();
+    // If the current value is less than the passed value
+    return SIZES[_current] < SIZES[against];
+}
+/**
+ * Get
+ *
+ * Returns the current width type based on the current client width
+ *
+ * @name get
+ * @access public
+ * @returns The current width
+ */
+export function get() {
+    // Init if necessary
+    if (_current === null)
+        _init();
+    // Return the current size
+    return _current;
+}
+// Default export
+const width = { xs, sm, md, lg, xl, compare, greaterThan, lessThan, get };
+export default width;

package/size.ts

@@ -0,0 +1,142 @@
+/**
+ * Size
+ *
+ * JS Library to manage the current client width of the screen in specific sizes
+ *
+ * @author Chris Nasr <chris@ouroboroscoding.com>
+ * @copyright Ouroboros Coding Inc.
+ * @created 2024-09-19
+ */
+
+// Constants
+export const xs = 'xs';
+export const sm = 'sm';
+export const md = 'md';
+export const lg = 'lg';
+export const xl = 'xl';
+
+// Types
+export type SIZE = typeof xs | typeof sm | typeof md | typeof lg | typeof xl;
+
+// The minimum pixels necessary for each size type
+export const SIZES: Record<SIZE, number> = {
+	[xs]: 0,	[sm]: 600,	[md]: 900,
+	[lg]: 1200,	[xl]: 1536
+}
+
+// The current size
+let _current: SIZE | null = null;
+
+/**
+ * Init
+ *
+ * Called internally to setup the module
+ *
+ * @name _init
+ * @access private
+ */
+function _init(): void {
+
+	// Const private function to calculate size from client width
+	const _calculate = () => {
+		if(document.documentElement.clientWidth < 600) { return xs }
+		if(document.documentElement.clientWidth < 900) { return sm }
+		if(document.documentElement.clientWidth < 1200) { return md }
+		if(document.documentElement.clientWidth < 1536) { return lg }
+		return xl;
+	}
+
+	// If we don't have the size
+	if(_current === null) {
+		_current = _calculate();
+		window.addEventListener('resize', () => {
+			_current = _calculate();
+		});
+	}
+}
+
+/**
+ * Compare
+ *
+ * Compares two widths and returns the standard -1,0,1 values as a result. -1
+ * if `a` is less than `b, 0 for equality, and 1 if `a` is greater than `b`.
+ *
+ * @name compare
+ * @access public
+ * @param against The size to compare the current size against
+ * @returns -1 || 0 || 1
+ */
+export function compare(against: SIZE) {
+
+	// Init if necessary
+	if(_current === null) _init();
+
+	// If the current size is the same as the passed value
+	if(_current === against) return 0;
+
+	// Else, if the current value is less than the passed value
+	if(SIZES[_current as SIZE] < SIZES[against]) return -1;
+
+	// Else, the current value is more than the passed value
+	return 1;
+}
+
+/**
+ * Greater Than
+ *
+ * Returns true only if `a` is a larger width than `b`
+ *
+ * @name greaterThan
+ * @access public
+ * @param against The size to compare the current size against
+ * @returns boolean
+ */
+export function greaterThan(against: SIZE): boolean {
+
+	// Init if necessary
+	if(_current === null) _init();
+
+	// If the current value is greater than the passed value
+	return SIZES[_current as SIZE] > SIZES[against];
+}
+
+/**
+ * Less Than
+ *
+ * Returns true only if `a` is a smaller width than `b`
+ *
+ * @name greaterThan
+ * @access public
+ * @param against The size to compare the current size against
+ * @returns boolean
+ */
+export function lessThan(against: SIZE): boolean {
+
+	// Init if necessary
+	if(_current === null) _init();
+
+	// If the current value is less than the passed value
+	return SIZES[_current as SIZE] < SIZES[against];
+}
+
+/**
+ * Get
+ *
+ * Returns the current width type based on the current client width
+ *
+ * @name get
+ * @access public
+ * @returns The current width
+ */
+export function get(): SIZE {
+
+	// Init if necessary
+	if(_current === null) _init();
+
+	// Return the current size
+	return _current as SIZE;
+}
+
+// Default export
+const width = { xs, sm, md, lg, xl, compare, greaterThan, lessThan, get };
+export default width;