Listen to media changes in the viewport with ease.

Manages events dispatched by watchMedia, binds listeners to the right scope and dispatches only the media query events that were added by the codebase.

Class type: Manager

• EventDispatcher 1.0.0
• Ticker 1.0.0

Class can both be constructed directly or extended to provide classes with media query management.

const manager = new MQManager({
    queries: [
        { name: 'ready',            query: '(min-width: 0rem)' },
        { name: 'mobileNavInit',    query: '(max-width: 46.875rem)' },
        { name: 'mobileNavDestroy', query: '(min-width: 46.875rem)' },
    ],
});


// add listener
manager.on('biggest', (e) => {
	console.log('biggest media query event')
})

Type: Object Default: {}

Config options that will be used when instance is created

Type: String Default: 'MQManager'

Object name that will be used as recognisable identifier and as prefix in logs

Type: Array Default: []

Query definitions it has to listen to. Each query definition needs 2 properties

• Name => will be the name of the event
• Mq => the media query it has to listen to, like you’d define it in css

Type: Array Default: []

Collection of added query definitions with their bound listeners.

Parameters: Args:object, objectName:String Return: Self

Creates the class, sets the element and applies the given state definitions if any. Adds all given queries automatically.

Parameters: mq:String, name:String or mqs:Array Return: undefined

Adds a query definition to the manager so it will dispatch events when

Parameters: identifier:String Return: Array

Get a query definitions that match a given string. It will check both the name and the query.

Parameters: identifier:String Return: undefined

Remove a query definition based on a string that matches the name or the query

Parameters: none Return: undefined

Removes the listeners & destroys the instance.

Parameters: Event

Dispatches an event with extra information in the data object.

• Make mqs property private