MQManager

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

Dependencies

• EventDispatcher 1.0.0
• Ticker 1.0.0

Getting started

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')
})

Constructor Parameters

Args

Type: Object Default: {}

Config options that will be used when instance is created

ObjectName

Type: String Default: 'MQManager'

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

Interface

Options

queries

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

Properties

mqs

Type: Array Default: []

Collection of added query definitions with their bound listeners.

Methods

constructor

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.

add

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

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

get

Parameters: identifier:String Return: Array

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

remove

Parameters: identifier:String Return: undefined

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

destroy

Parameters: none Return: undefined

Removes the listeners & destroys the instance.

Events

[Name of a definition]

Parameters: Event

Dispatches an event with extra information in the data object.

To Do

• Make mqs property private