Skip to content

Commit 25e1846

Browse files
thetthet
committed
maint(core dom): Move utils.getCSSValue to dom.get_css_value and keep a BBB import.
Move utils.getCSSValue to dom.get_css_value and keep a BBB import in utils. This change is made for these reasons: - Avoid circular imports (even if supported). - Code cleanup - move DOM related methods to dom module.
1 parent 745978b commit 25e1846

File tree

4 files changed

+110
-97
lines changed

4 files changed

+110
-97
lines changed

‎src/core/dom.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,31 @@ const create_from_string = (string) => {
143143
return document.createRange().createContextualFragment(string.trim());
144144
};
145145

146+
/**
147+
* Return a CSS property value for a given DOM node.
148+
* For length-values, relative values are converted to pixels.
149+
* Optionally parse as pixels, if applicable.
150+
*
151+
* Note: The element must be attached to the body to make CSS caluclations work.
152+
*
153+
* @param {Node} el - DOM node.
154+
* @param {String} property - CSS property to query on DOM node.
155+
* @param {Boolean} [as_pixels=false] - Convert value to pixels, if applicable.
156+
* @param {Boolean} [as_float=false] - Convert value to float, if applicable.
157+
*
158+
* @returns {(String|Number)} - The CSS value to return.
159+
*/
160+
function get_css_value(el, property, as_pixels = false, as_float = false) {
161+
let value = window.getComputedStyle(el).getPropertyValue(property);
162+
if (as_pixels || as_float) {
163+
value = parseFloat(value) || 0.0;
164+
}
165+
if (as_pixels && !as_float) {
166+
value = parseInt(Math.round(value), 10);
167+
}
168+
return value;
169+
}
170+
146171
const dom = {
147172
toNodeArray: toNodeArray,
148173
querySelectorAllAndMe: querySelectorAllAndMe,
@@ -155,6 +180,7 @@ const dom = {
155180
acquire_attribute: acquire_attribute,
156181
is_visible: is_visible,
157182
create_from_string: create_from_string,
183+
get_css_value: get_css_value,
158184
add_event_listener: events.add_event_listener, // BBB export. TODO: Remove in an upcoming version.
159185
remove_event_listener: events.remove_event_listener, // BBB export. TODO: Remove in an upcoming version.
160186
};

‎src/core/dom.test.js‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -484,4 +484,87 @@ describe("core.dom tests", () => {
484484
done();
485485
});
486486
});
487+
488+
describe("get_css_value", function () {
489+
beforeEach(function () {
490+
document.body.innerHTML = `
491+
<div
492+
id="el1"
493+
style="
494+
position: relative;
495+
margin-top: 1em;
496+
font-size: 12px;
497+
border: 1px solid black;
498+
">
499+
<div
500+
id="el2"
501+
style="
502+
margin-bottom: 2em;
503+
">
504+
</div>
505+
</div>
506+
`;
507+
});
508+
509+
afterEach(function () {
510+
document.body.innerHTML = "";
511+
});
512+
513+
it("Return values for CSS properties of a HTML node", function () {
514+
const el1 = document.querySelector("#el1");
515+
expect(dom.get_css_value(el1, "font-size")).toBe("12px");
516+
expect(dom.get_css_value(el1, "font-size", true)).toBe(12);
517+
expect(dom.get_css_value(el1, "position")).toBe("relative");
518+
});
519+
520+
it("Return string, int or float, as requested.", function () {
521+
const el1 = document.querySelector("#el1");
522+
expect(dom.get_css_value(el1, "font-size")).toBe("12px");
523+
expect(dom.get_css_value(el1, "font-size", true)).toBe(12);
524+
expect(dom.get_css_value(el1, "font-size", true, true)).toBe(12.0);
525+
expect(dom.get_css_value(el1, "font-size", null, true)).toBe(12.0);
526+
});
527+
528+
it("Returns 0 for when requesting a numerical value which doesn't exist.", function () {
529+
const el = document.createElement("div");
530+
expect(dom.get_css_value(el, "hallo", true)).toBe(0);
531+
expect(dom.get_css_value(el, "hallo", true, true)).toBe(0.0);
532+
expect(dom.get_css_value(el, "hallo", null, true)).toBe(0.0);
533+
});
534+
535+
it.skip("Return inherited values for CSS properties", function () {
536+
// Missing JSDOM support for style inheritance yet. See:
537+
// https://github.com/jsdom/jsdom/issues/2160
538+
// https://github.com/jsdom/jsdom/pull/2668
539+
// https://github.com/jsdom/jsdom/blob/master/Changelog.md
540+
541+
const el2 = document.querySelector("#el2");
542+
expect(dom.get_css_value(el2, "font-size")).toBe("12px");
543+
});
544+
545+
it.skip("Shorthand properties are split up", function () {
546+
// Missing JSDOM support for property split yet.
547+
548+
const el1 = document.querySelector("#el1");
549+
// ``em`` are parsed to pixel values.
550+
// shorthand property sets like ``border`` are split up into their
551+
// individual properties, like ``border-top-width``.
552+
expect(dom.get_css_value(el1, "border-top-width")).toBe("12px");
553+
expect(dom.get_css_value(el1, "border-top-style")).toBe("solid");
554+
expect(dom.get_css_value(el1, "border-top-color")).toBe("rgb(0, 0, 0)");
555+
});
556+
557+
it.skip("Values with relative units are converted to pixels", function () {
558+
// Missing JSDOM support for unit conversion yet.
559+
560+
const el1 = document.querySelector("#el1");
561+
const el2 = document.querySelector("#el2");
562+
// Relative length-type values are converted to absolute pixels.
563+
expect(dom.get_css_value(el1, "margin-top")).toBe("12px");
564+
expect(dom.get_css_value(el1, "margin-top", true)).toBe(12);
565+
expect(dom.get_css_value(el2, "margin-top", true)).toBe(0);
566+
expect(dom.get_css_value(el2, "margin-bottom")).toBe("24px");
567+
expect(dom.get_css_value(el2, "margin-bottom", true)).toBe(24);
568+
});
569+
});
487570
});

‎src/core/utils.js‎

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -469,21 +469,6 @@ function findRelatives(el) {
469469
return $relatives;
470470
}
471471

472-
function getCSSValue(el, property, as_pixels = false, as_float = false) {
473-
/* Return a CSS property value for a given DOM node.
474-
* For length-values, relative values are converted to pixels.
475-
* Optionally parse as pixels, if applicable.
476-
*/
477-
let value = window.getComputedStyle(el).getPropertyValue(property);
478-
if (as_pixels || as_float) {
479-
value = parseFloat(value) || 0.0;
480-
}
481-
if (as_pixels && !as_float) {
482-
value = parseInt(Math.round(value), 10);
483-
}
484-
return value;
485-
}
486-
487472
function get_bounds(el) {
488473
// Return bounds of an element with it's values rounded and converted to ints.
489474
const bounds = el.getBoundingClientRect();
@@ -663,7 +648,6 @@ var utils = {
663648
hasValue: hasValue,
664649
parseTime: parseTime,
665650
findRelatives: findRelatives,
666-
getCSSValue: getCSSValue,
667651
get_bounds: get_bounds,
668652
checkInputSupport: checkInputSupport,
669653
checkCSSFeature: checkCSSFeature,
@@ -676,6 +660,7 @@ var utils = {
676660
localized_isodate: localized_isodate,
677661
escape_html: escape_html,
678662
unescape_html: unescape_html,
663+
getCSSValue: dom.get_css_value, // BBB: moved to dom. TODO: Remove in upcoming version.
679664
};
680665

681666
export default utils;

‎src/core/utils.test.js‎

Lines changed: 0 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -518,87 +518,6 @@ describe("parseTime", function () {
518518
});
519519
});
520520

521-
describe("getCSSValue", function () {
522-
beforeEach(function () {
523-
const el1 = document.createElement("div");
524-
const el2 = document.createElement("div");
525-
526-
el1.setAttribute("id", "el1");
527-
el2.setAttribute("id", "el2");
528-
el1.appendChild(el2);
529-
530-
// Need to attach element to body to make CSS calculation work.
531-
document.body.appendChild(el1);
532-
533-
el1.style["font-size"] = "12px";
534-
el1.style["margin-top"] = "1em";
535-
el1.style.border = "1em solid black";
536-
el1.style.position = "relative";
537-
el2.style["margin-bottom"] = "2em";
538-
});
539-
540-
afterEach(function () {
541-
document.querySelector("#el1").remove();
542-
});
543-
544-
it("Return values for CSS properties of a HTML node", function () {
545-
const el1 = document.querySelector("#el1");
546-
expect(utils.getCSSValue(el1, "font-size")).toBe("12px");
547-
expect(utils.getCSSValue(el1, "font-size", true)).toBe(12);
548-
expect(utils.getCSSValue(el1, "position")).toBe("relative");
549-
});
550-
551-
it("Return string, int or float, as requested.", function () {
552-
const el1 = document.querySelector("#el1");
553-
expect(utils.getCSSValue(el1, "font-size")).toBe("12px");
554-
expect(utils.getCSSValue(el1, "font-size", true)).toBe(12);
555-
expect(utils.getCSSValue(el1, "font-size", true, true)).toBe(12.0);
556-
expect(utils.getCSSValue(el1, "font-size", null, true)).toBe(12.0);
557-
});
558-
559-
it("Returns 0 for when requesting a numerical value which doesn't exist.", function () {
560-
const el = document.createElement("div");
561-
expect(utils.getCSSValue(el, "hallo", true)).toBe(0);
562-
expect(utils.getCSSValue(el, "hallo", true, true)).toBe(0.0);
563-
expect(utils.getCSSValue(el, "hallo", null, true)).toBe(0.0);
564-
});
565-
566-
it.skip("Return inherited values for CSS properties", function () {
567-
// Missing JSDOM support for style inheritance yet. See:
568-
// https://github.com/jsdom/jsdom/issues/2160
569-
// https://github.com/jsdom/jsdom/pull/2668
570-
// https://github.com/jsdom/jsdom/blob/master/Changelog.md
571-
572-
const el2 = document.querySelector("#el2");
573-
expect(utils.getCSSValue(el2, "font-size")).toBe("12px");
574-
});
575-
576-
it.skip("Shorthand properties are split up", function () {
577-
// Missing JSDOM support for property split yet.
578-
579-
const el1 = document.querySelector("#el1");
580-
// ``em`` are parsed to pixel values.
581-
// shorthand property sets like ``border`` are split up into their
582-
// individual properties, like ``border-top-width``.
583-
expect(utils.getCSSValue(el1, "border-top-width")).toBe("12px");
584-
expect(utils.getCSSValue(el1, "border-top-style")).toBe("solid");
585-
expect(utils.getCSSValue(el1, "border-top-color")).toBe("rgb(0, 0, 0)");
586-
});
587-
588-
it.skip("Values with relative units are converted to pixels", function () {
589-
// Missing JSDOM support for unit conversion yet.
590-
591-
const el1 = document.querySelector("#el1");
592-
const el2 = document.querySelector("#el2");
593-
// Relative length-type values are converted to absolute pixels.
594-
expect(utils.getCSSValue(el1, "margin-top")).toBe("12px");
595-
expect(utils.getCSSValue(el1, "margin-top", true)).toBe(12);
596-
expect(utils.getCSSValue(el2, "margin-top", true)).toBe(0);
597-
expect(utils.getCSSValue(el2, "margin-bottom")).toBe("24px");
598-
expect(utils.getCSSValue(el2, "margin-bottom", true)).toBe(24);
599-
});
600-
});
601-
602521
describe("get_bounds", function () {
603522
it("returns the bounds values as integer numbers instead of double/float values.", () => {
604523
const el = document.createElement("div");

0 commit comments

Comments
 (0)