Scripts

dev

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

<div data-ds-size="my-element">
  ... content ...
</div>

Javascript observing matching elements for resize

// 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);
  });
}

Resulting css vars dynamically updated (the height/width below will update based on the dimensions of the element)

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)

<div data-ds-size="my-element" class="ds-overflow">
  ... content ...
</div>