@advertol/context-media-query

Control zone visibility with CSS media query listeners.

Usage no npm install needed!

<script type="module">
  import advertolContextMediaQuery from 'https://cdn.skypack.dev/@advertol/context-media-query';
</script>

README

@advertol/context-media-query

Build Status BrowserStack Status

Control zone visibility with CSS media query listeners.

Install

npm install @advertol/context-media-query --save

Usage

import advertol from '@advertol/core';
import MediaQueryContext from '@advertol/context-media-query';

const instance = advertol({
    // …
    context: [
        new MediaQueryContext({
            'screen and (min-width:1000px) and (max-width:1199px)': [ 'becky', 'lucy', 'maggie' ],
            'screen and (min-width:1500px)': [ 'becky', 'lucy', 'maggie', 'madison', 'ziggy', 'ruby' ],
            'screen and (min-width:915px) and (max-width:999px)': [ 'becky', 'lucy', 'maggie', 'maggie' ],
            'screen and (min-width:1200px) and (max-width:1499px)': [ 'becky', 'lucy', 'maggie', 'madison', 'ziggy' ],
            'screen and (min-width:728px) and (max-width:914px)': [ 'becky', 'maggie' ],
            'screen and (max-width:599px)': ['bruno']
        })
    ]
});

instance.resolve();

API

mediaQueryContext(contexts)

contexts

Type: Object

List of media query contexts and zones for context.

Each object property has:

Browser support

Tested in IE9+ and all modern browsers, assuimg window.matchMedia and window.matchMedia listeners support is available.

Test

For automated tests, run npm run test:automated (append :watch for watcher support).

License

MIT © Ivan Nikolić