- Home
- Design system
- Guidelines
- Scripts
Scripts
These reference scripts demonstrate additional functionality required to enhance SDS
Options
data-ds-size
The following reference script observes the resizing of any element that has a data-attribute data-ds-size
. It then creates and dynamically updates css vars with naming based on the value of the data-ds-size
attribute value, and adds a class to element if it is overflowing. This is then used by SDS for dynamically calculating element offset (such as scrolling to anchors) and triggering mobile display in certain situations.
HTML element with data-attribute
html
Copy
<div data-ds-size="my-element">... content ...</div>
// Observe ds-elements with the required data-attribute and update css vars with their dimensions
if ("ResizeObserver" in window) {
const dsElements = document.querySelectorAll("[data-ds-size]");
const observer = new ResizeObserver((elements) => {
elements.forEach((element) => {
const width = element.target.clientWidth; // Displayed width of element
const scrollwidth = element.target.scrollWidth; // Actual width of content
const height = element.target.clientHeight;
const { top, left } = element.target.getBoundingClientRect();
// Get the value of the attribute to use in the css var name
const propertyName = element.target
.getAttribute("data-ds-size")
.trim()
.toLowerCase();
// Check overflow
// As soon as this element transitions from not-overflowing to overflowing save the
// current width as a data-attribute and add a class to indicate this element is now overflowing
if (
scrollwidth > width &&
!element.target.classList.contains("ds-overflow")
) {
element.target.setAttribute("data-ds-overflow-width", width);
element.target.classList.toggle("ds-overflow", true);
}
// As the element no longer overflowing, now check if the element
// is wider than the last recorded overflow width, if so update
else if (width > element.target.getAttribute("data-ds-overflow-width")) {
element.target.setAttribute("data-ds-overflow-width", "");
element.target.classList.toggle("ds-overflow", false);
}
// Set the css vars on the root html element
const htmlElement = document.documentElement;
htmlElement.style.setProperty(
"--ds-" + propertyName + "-height",
height + "px"
);
htmlElement.style.setProperty(
"--ds-" + propertyName + "-width",
width + "px"
);
htmlElement.style.setProperty(
"--ds-" + propertyName + "-top",
top + "px"
);
htmlElement.style.setProperty(
"--ds-" + propertyName + "-left",
left + "px"
);
});
});
dsElements.forEach((elements) => {
observer.observe(elements);
});
}
html {
--ds-my-element-height: 60px;
--ds-my-element-width: 1100px;
--ds-my-element-top: 100px;
--ds-my-element-left: 50px;
}
Resulting html updated (the class ds-overflow will be added if the element has overflowing content)
html
Copy
<div data-ds-size="my-element" class="ds-overflow">... content ...</div>