@ulu/frontend - npm Package Compare versions

Comparing version 0.0.9 to 0.0.10

js/helpers/css-breakpoint.js

@@ -6,3 +6,2 @@ /**
 // Pass breakpoints from CSS to stylesheet, use this to attach behaviors on breakpoints
-import { debounce } from "@ulu/utils/performance";
 import { removeArrayElement } from "@ulu/utils/array";
@@ -26,3 +25,5 @@ import { getName } from "../events/index.js";
   static defaults = {
-    element: document.body,
+    element: document.documentElement,
+    valueFromPsuedo: false,
+    customProperty: "--breakpoint",
     psuedoSelector: ':before',
@@ -34,3 +35,5 @@ debug: false
    * @param {Array} config.order Required, Array of strings that correspond to the breakpoints setup in the styles, Breakpoints from smallest to largest
-   * @param {Node} config.element The element to retrieve active breakpoint from stylesheet  (default is body)
+   * @param {Array} config.customProperty Property to grab breakpoint from (default is --breakpoint)
+   * @param {Array} config.valueFromPsuedo Use the legacy method of grabbing breakpoint from psuedo element, default uses custom property
+   * @param {Node} config.element The element to retrieve active breakpoint from stylesheet. (default is html) For using the old psuedo method, adjust this to document.body
    * @param {String} config.psuedoSelector Change psuedo selector used to get the breakpoint from the psuedo's content property
@@ -55,6 +58,22 @@ */
   /**
+   * Get breakpoint from a psuedo element
+   */
+  getBreakpointInPsuedo() {
+    return window.getComputedStyle(this.element, this.psuedoSelector).content.replace(/^"|"$/g, '');
+  }
+  /**
+   * Get breakpoint from a custom property
+   */
+  getBreakpointInProperty() {
+    return getComputedStyle(this.element).getPropertyValue(this.customProperty);
+  }
+  /**
    * Get breakpoint from element (design note: user could override prototype)
    */
   getBreakpoint() {
-    return window.getComputedStyle(this.element, this.psuedoSelector).content.replace(/^"|"$/g, '');
+    if (this.valueFromPsuedo) {
+      return this.getBreakpointInPsuedo();
+    } else {
+      return this.getBreakpointInProperty();
+    }
   }
@@ -61,0 +80,0 @@ /**

package.json

 {
   "name": "@ulu/frontend",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "Theming library",
@@ -11,6 +11,11 @@ "browser": "js/index.js",
     "./js/*": "./js/*",
-    "./scss/*.scss" : "./scss/*.scss",
-    "./scss/*" : "./scss/*",
-    "./scss" : "./scss/index.scss"
+    "./scss/*.scss": "./scss/*.scss",
+    "./scss/*": "./scss/*",
+    "./scss": "./scss/index.scss"
   },
+  "typesVersions": {
+    "*" : {
+      "js/*" : ["./types/*"]
+    }
+  },
   "type": "module",
@@ -23,3 +28,4 @@ "scripts": {
     "docs:update:scss:debug": "node --inspect-brk ./docs-src/.vitepress/sassdoc.js",
-    "docs:build:js": "node ./docs-src/.vitepress/jsdoc.js"
+    "docs:build:js": "node ./docs-src/.vitepress/jsdoc.js",
+    "types" : "npx tsc"
   },
@@ -54,4 +60,5 @@ "repository": {
     "sass": "^1.51.0",
+    "typescript": "^5.3.3",
     "vitepress": "^1.0.0-rc.27"
   }
 }

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

293575

increased by8.1%

Number of package files

112

increased by47.37%

Lines of code

3732

increased by15.43%

Worsened metrics

Dev dependency count

10

increased by11.11%

No dependency changes