Odo Responsive Attributes

Parse data attributes with respect to their breakpoints.

Support

IE9+ with matchMedia polyfill.

Dependencies

Odo Base Component, native matchMedia (IE10+)

Setup

Imagine you're building a component which clamps multi-line text differently per breakpoint.

<div id="clamper" data-responsive.xs="2" data-responsive.md="3"></div>

This component will parse those attributs into the following object:

{xs: "2", sm: "2", md: "3", lg: "3"}

Notice the sm breakpoint was not specified, but it has a value. It gets this value from the last value. xs => sm => md => lg.

You can also provide a default value which will take precendence over the “last value”.

<div id="clamper" data-responsive="2" data-responsive.md="4"></div>

{xs: "2", sm: "2", md: "4", lg: "2"}

Now initialize the responsive attributes component:

const clamper = new OdoResponsiveAttributes(document.getElementById('clamper'));
console.log(clamper.values); // Object with `xs`, `sm`, `md`, and `lg` keys.
console.log(clamper.currentValue); // Value based on the current breakpoint.

Custom Attribute Name

The second parameter in the constructor is a string for the name of the attribute.

<div id="clamper" data-clamp.xs="2" data-clamp.md="3"></div>

const clamper = new OdoResponsiveAttributes(document.getElementById('clamper'), 'clamp');

Updating

OdoResponsiveAttributes instances do not update themselves when the browser is resized. This forces you to do it, but allows for better performance because you can batch your reads (this component) and your writes (whatever you do with this information).

You could call instance.update on the window resize event, or if you’re using OdoBaseComponent, it can be done inside the onMediaQueryChange() method.

class Clamper extends OdoBaseComponent {
  constructor(element) {
    super(element, true);
    this.attributes = new OdoResponsiveAttributes(element, 'clamp');
    this.doClamp(this.attributes.currentValue);
  }

  onMediaQueryChange() {
    let linesToClamp = this.attributes.update().currentValue;
    this.doClamp(linesToClamp);
  }

  doClamp(linesToClamp) {
    console.log('lines to clamp:', linesToClamp);
  }

  dispose() {
    this.attributes.dispose();
    super.dispose();
  }
}

new Clamper(document.getElementById('clamper'));

Breakpoint Delimiter

By default, the delimiter for the responsive key suffix is a period .. It would be awesome to use @ as the delimiter, but although getAttribute() reads @ as expected, using @ inside setAttribute() throws an error. You can change the delimiter by updating OdoResponsiveAttributes.BREAKPOINT_DELIMITER.