feat(core utils): add parseLength method for parsing px and % lengths.

Author: thet

src/core/utils.js

@@ -442,6 +442,54 @@ function parseTime(time) {
     }
 }
 
+/*
+
+ * parseLength - Parse a length from a string and return the parsed length in
+ * pixels.
+
+ * @param {String} length - A length string like `1px` or `25%`.
+ * @param {Number} reference_length - The reference length to use for percentage lengths.
+ *
+ * @returns {Number} - A integer which represents the parsed length in pixels.
+ *
+ * @throws {Error} - If the length string is invalid.
+ *
+ * @example
+ * parseLength("1px"); // 1
+ * parseLength("10%", 100); // 10
+ *
+ */
+function parseLength(length, reference_length = null) {
+    const m = /^(\d+(?:\.\d+)?)\s*(\%?\w*)/.exec(length);
+    if (!m) {
+        throw new Error("Invalid length");
+    }
+    const amount = parseFloat(m[1]);
+    switch (m[2]) {
+        case "px":
+            return Math.round(amount);
+        case "%":
+            if (!reference_length) {
+                return 0;
+            }
+            return (reference_length / 100) * Math.round(amount);
+        case "vw":
+            return Math.round((amount * window.innerWidth) / 100);
+        case "vh":
+            return Math.round((amount * window.innerHeight) / 100);
+        case "vmin":
+            return Math.round(
+                (amount * Math.min(window.innerWidth, window.innerHeight)) / 100
+            );
+        case "vmax":
+            return Math.round(
+                (amount * Math.max(window.innerWidth, window.innerHeight)) / 100
+            );
+        default:
+            return null;
+    }
+}
+
 // Return a jQuery object with elements related to an input element.
 function findRelatives(el) {
     var $el = $(el),
@@ -723,6 +771,7 @@ var utils = {
     isElementInViewport: isElementInViewport,
     hasValue: hasValue,
     parseTime: parseTime,
+    parseLength: parseLength,
     findRelatives: findRelatives,
     get_bounds: get_bounds,
     checkInputSupport: checkInputSupport,

src/core/utils.test.js

@@ -472,6 +472,76 @@ describe("parseTime", function () {
     });
 });
 
+describe("parseLength", function () {
+    it("raises exception for invalid input", function () {
+        var p = function () {
+            utils.parseLength("abc");
+        };
+        expect(p).toThrow();
+    });
+
+    it("handles pixel lengths", function () {
+        expect(utils.parseLength("10px")).toBe(10);
+        expect(utils.parseLength("100px")).toBe(100);
+        expect(utils.parseLength("1000.1px")).toBe(1000);
+        expect(utils.parseLength("1000.9px")).toBe(1001);
+
+        expect(utils.parseLength("10 px")).toBe(10);
+    });
+
+    it("handles percent lengths", function () {
+        expect(utils.parseLength("10%", 1)).toBe(0.1);
+        expect(utils.parseLength("10%", 10)).toBe(1);
+        expect(utils.parseLength("10%", 100)).toBe(10);
+        expect(utils.parseLength("10%", 1000)).toBe(100);
+
+        expect(utils.parseLength("10.1%", 100)).toBe(10);
+        expect(utils.parseLength("10.9%", 100)).toBe(11);
+
+        expect(utils.parseLength("10 %", 100)).toBe(10);
+    });
+
+    it("handles vw lengths", function () {
+        jest.replaceProperty(window, "innerWidth", 1000);
+
+        expect(utils.parseLength("1vw")).toBe(10);
+        expect(utils.parseLength("10vw")).toBe(100);
+        expect(utils.parseLength("100vw")).toBe(1000);
+
+        expect(utils.parseLength("10 vw")).toBe(100);
+    });
+
+    it("handles vh lengths", function () {
+        jest.replaceProperty(window, "innerHeight", 1000);
+
+        expect(utils.parseLength("1vh")).toBe(10);
+        expect(utils.parseLength("10vh")).toBe(100);
+        expect(utils.parseLength("100vh")).toBe(1000);
+
+        expect(utils.parseLength("10 vh")).toBe(100);
+    });
+
+    it("handles vmin lengths", function () {
+        jest.replaceProperty(window, "innerHeight", 100);
+        jest.replaceProperty(window, "innerWidth", 200);
+        expect(utils.parseLength("10vmin")).toBe(10);
+
+        jest.replaceProperty(window, "innerHeight", 100);
+        jest.replaceProperty(window, "innerWidth", 50);
+        expect(utils.parseLength("10vmin")).toBe(5);
+    });
+
+    it("handles vmax lengths", function () {
+        jest.replaceProperty(window, "innerHeight", 100);
+        jest.replaceProperty(window, "innerWidth", 200);
+        expect(utils.parseLength("10vmax")).toBe(20);
+
+        jest.replaceProperty(window, "innerHeight", 100);
+        jest.replaceProperty(window, "innerWidth", 50);
+        expect(utils.parseLength("10vmax")).toBe(10);
+    });
+});
+
 describe("get_bounds", function () {
     it("returns the bounds values as integer numbers instead of double/float values.", () => {
         const el = document.createElement("div");