media-observer - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

dist/index.d.ts

 export { DEFAULT_BREAKPOINTS } from "./shared/default-breakpoints.const";
-export { DEFAULT_BREAKPOINT_QUERIES } from "./shared/default-breakpoint-queries.const";
+export { DEFAULT_BREAKPOINT_WIDTHS } from "./shared/default-breakpoint-widhts.const";
 export { MediaObserverService } from "./services/media-observer.service";
@@ -4,0 +4,0 @@ export { MediaChange } from "./models/media-change.class";

dist/models/breakpoint.interface.d.ts

@@ -0,3 +1,4 @@
+import { BreakpointAliases } from "./breakpoint-aliases.enum";
 export interface BreakPoint {
-    alias: string;
+    alias: BreakpointAliases | string;
     mediaQuery: string;
@@ -4,0 +5,0 @@ overlapping?: boolean;

dist/services/media-observer.service.d.ts

@@ -0,1 +1,2 @@
+import { BreakpointAliases } from "../models/breakpoint-aliases.enum";
 import { MediaChange } from "../models/media-change.class";
@@ -67,2 +68,8 @@ import { MatchMediaService } from "./match-media.service";
     protected constructor();
+    /**
+     * Builds the array of breakpoints starting with a simple map of base breakpoints
+     * Util to customize the breakpoints before creating the MediaObserverService instance
+     * @param breakpoints: [alias, mediaQuery]
+     */
+    static buildBreakpoints(breakpoints: [BreakpointAliases | string, string][]): BreakPoint[];
     static setBreakpoints(breakpoints: BreakPoint[]): void;
@@ -69,0 +76,0 @@ /**

dist/shared/utils.class.d.ts

@@ -0,1 +1,2 @@
+import { BreakpointAliases } from "../models/breakpoint-aliases.enum";
 import { WithPriority } from "../models/with-priority.interface";
@@ -5,2 +6,8 @@ import { MediaChange } from "../models/media-change.class";
 export declare class Utils {
+    private static _maxPriority;
+    /**
+     * Builds the array of breakpoints starting with a simple map of base breakpoints
+     * @param breakpoints: [alias, mediaQuery]
+     */
+    static buildBreakpoints(breakpoints: [BreakpointAliases | string, string][]): BreakPoint[];
     /** Wraps the provided value in an array, unless the provided value is an array. */
@@ -23,2 +30,3 @@ static coerceArray<T>(value: T | T[]): T[];
     static sortDescendingPriority<T extends WithPriority>(a: T | null, b: T | null): number;
+    private static _getAliasMaxWidth;
 }

package.json

 {
   "name": "media-observer",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Javascript observable (RxJS) resize (event listener) heavily inspired by Angular Flex Layout Media Observer",
@@ -5,0 +5,0 @@ "scripts": {

README.md

@@ -69,4 +69,4 @@ # Media Observer
 
-This is basically identical to `isActive`, except it allows to check any media query, even if not registered.
-So you can use the method to evaluate one or more media queries against the current viewport size.
+This is basically identical to `isActive`, except it allows to check any media query, even if not registered. So you can
+use the method to evaluate one or more media queries against the current viewport size.
 
@@ -84,10 +84,103 @@ ```javascript
 
-* `DEFAULT_BREAKPOINT_QUERIES`: links aliases and media queries
-* `DEFAULT_BREAKPOINTS`: the default breakpoint items that will be watched as soon as MediaObserverService is instantiated
+* `DEFAULT_BREAKPOINT_WIDTHS`: links aliases and media query widths
+* `DEFAULT_BREAKPOINTS`: the default breakpoint items that will be watched as soon as MediaObserverService is
+  instantiated
 * `BreakpointAliases`: contains all the standard aliases (you can use your own if you prefer)
 
-To change the default breakpoints and use your own, just call the **static method** `MediaObserverService.setBreakpoints`,
-passing the list (an *Array* of `BreakPoint`) of your breakpoints, **before anyone calls `MediaObserverService.INSTANCE`.
+To change the default breakpoints and use your own, just call the **static
+method** `MediaObserverService.setBreakpoints`, passing the list (an *Array* of `BreakPoint`) of your breakpoints, **
+before** anyone calls `MediaObserverService.INSTANCE`.
 
-To change the breakpoints after initialization you can call `MediaObserverService.INSTANCE.destroy`, which will destroy the active instance.
+To change the breakpoints after initialization you can call `MediaObserverService.INSTANCE.destroy`, which will destroy
+the active instance.
 
+### Default breakpoints
+
+```typescript
+
+export interface BreakPoint {
+    alias: BreakpointAliases | string;
+    mediaQuery: string;
+    overlapping?: boolean;  // Does this range overlap with any other ranges
+    priority?: number;      // determine order of activation reporting: higher is last reported
+    suffix?: string;
+}
+
+// Generated
+export const DEFAULT_BREAKPOINTS: BreakPoint[] = [
+    {
+        alias: BreakpointAliases.xs,
+        mediaQuery: "screen and (min-width: 0px) and (max-width: 599.98px)",
+        priority: 1000
+    },
+    {
+        alias: BreakpointAliases.sm,
+        mediaQuery: "screen and (min-width: 600px) and (max-width: 959.98px)",
+        priority: 900
+    },
+    {
+        alias: BreakpointAliases.md,
+        mediaQuery: "screen and (min-width: 960px) and (max-width: 1279.98px)",
+        priority: 800
+    },
+    {
+        alias: BreakpointAliases.lg,
+        mediaQuery: "screen and (min-width: 1280px) and (max-width: 1919.98px)",
+        priority: 700
+    },
+    {
+        alias: BreakpointAliases.xl,
+        mediaQuery: "screen and (min-width: 1920px) and (max-width: 4999.98px)",
+        priority: 600
+    },
+    {
+        alias: BreakpointAliases["lt-sm"],
+        overlapping: true,
+        mediaQuery: "screen and (max-width: 599.98px)",
+        priority: 950
+    },
+    {
+        alias: BreakpointAliases["lt-md"],
+        overlapping: true,
+        mediaQuery: "screen and (max-width: 959.98px)",
+        priority: 850
+    },
+    {
+        alias: BreakpointAliases["lt-lg"],
+        overlapping: true,
+        mediaQuery: "screen and (max-width: 1279.98px)",
+        priority: 750
+    },
+    {
+        alias: BreakpointAliases["lt-xl"],
+        overlapping: true,
+        priority: 650,
+        mediaQuery: "screen and (max-width: 1919.98px)",
+    },
+    {
+        alias: BreakpointAliases["gt-xs"],
+        overlapping: true,
+        mediaQuery: "screen and (min-width: 600px)",
+        priority: -950
+    },
+    {
+        alias: BreakpointAliases["gt-sm"],
+        overlapping: true,
+        mediaQuery: "screen and (min-width: 960px)",
+        priority: -850
+    }, {
+        alias: BreakpointAliases["gt-md"],
+        overlapping: true,
+        mediaQuery: "screen and (min-width: 1280px)",
+        priority: -750
+    },
+    {
+        alias: BreakpointAliases["gt-lg"],
+        overlapping: true,
+        mediaQuery: "screen and (min-width: 1920px)",
+        priority: -650
+    }
+];
+
+```
+

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

100340

increased by3.53%

Lines of code

685

increased by2.54%

Number of lines in readme file

185

increased by101.09%

No dependency changes