MatchMedia Attribute Manager

This scripts enables dynamic MediaQuery dependent attributes.

Use case

When adding an attribute ex. ``aria-hidden` to an element to original DOM it is not dependent on the viewport.

When a element should only be hidden in a specific viewport you will either have to show it using CSS but the state in the DOM will essentially be wrong and not reflect the truth.

Installation

`
npm install @wezz/matchmediaattributemanager
`

Usage

$3

`
import MatchMediaAttributeManager from "@wezz/matchmediaattributemanager";
// On document ready
new MatchMediaAttributeManager();
`

$3

`

data-matchmedia-attribute="aria-hidden,true">

`

#### `data-matchmedia-query` attribute
The query attribute takes in a media query, once the viewport changes to match the query, the attribute-attribute will be applied.

#### `data-matchmedia-attribute="attribute,value,removeWhenNotMatched""` attribute
The attribute attribute takes a comma separated string

* The first parameter is the attribute
* The second parameter is the attribute value
* The third parameter is optional, if set to true, the attribute will be removed if the media query no longer matches

In this example, the attribute `aria-hidden="true"` will be added to the element once the viewport is less than 768px wide.

Attribute manipulation depending on matched media query

If the value has been changed and the viewport changes to match the query, the value of the attribute will be reset.

So in this example the attribute will be updated as such:

First load in tablet viewport

Element will not have `aria-hidden="true"`

First load in mobile viewport

Element will have the `aria-hidden` attribute


If something else adds or changes the attribute`aria-hidden` to be `aria-hidden="false"` (such as the ARIAManager) and the viewport changes. It will be reset to match `aria-hidden="true"` once the media query matches again.




Related packages


* ARIAManager - A script that handles the relationship between `aria-controls` and `aria-hidden`
* ARIATabManager - A script that combined with ARIAManager enables tabbing behavior with only additional attributes

Development & Demo

Clone this repo
Run
` npm install `

To run the interactive demo, run
` npm run demo ``