Namespace: mqa

mqa

mqa is a library that minimizes the overlap of actual media queries between CSS and JavaScript. Other libraries tend to force the developer into duplicating their media queries from CSS to JavaScript, which decreases maintainability a lot. mqa uses a custom syntax that it parses from @media rules and automatically triggers events for by using defined aliases for the media queries.
Source:

Example

// style.css:
@media all and (min-device-width: 800px) {
	#-mqa-alias-myAliasName{}
	.some-class {
		color: red;
	}
	.some-other-class {
		color: blue;
	}
}
// script.js:
mqa.on("myAliasName", function(active) {
	// `active` indicates whether the media query was activated or not
});

Members

<static, readonly> queries :Object

An object imitating the internal list of aliases and their media queries.
Source:
Example
mqa.queries; // => { "landscape": "(orientation: landscape)" }

Methods

<static> add(alias, query)

Add an aliased query that can be used programmatically.
Parameters:
Name Type Description
alias String The unique alias for the media query
query String The full media query to match against
Source:
Example
mqa.add("landscape", "(orientation: landscape)");

<static> match(alias) → {Boolean|null}

Test an alias to see if it's active or not.
Parameters:
Name Type Description
alias String The media query alias
Source:
Returns:
Whether the query is active or not, null if no media query was found
Type
Boolean | null
Example
mqa.add("landscape", "(orientation: landscape");
mqa.match("landscape"); // => true or false

<static> off(alias, callback)

Unbinds a callback from a specific alias.
Parameters:
Name Type Description
alias String The alias that was used to bind the event
callback Function The callback that was used to bind the event
Source:
Example
function handler(active) {
	// remove this handler after being invoked once
	mqa.off("landscape", handler);
}
mqa.on("landscape", handler);

<static> on(alias, callback)

Bind an callback for whenever a specific alias is (de-)activated.
Parameters:
Name Type Description
alias String The alias to listen for
callback Function The handler when the query is triggered
Source:
Example
mqa.on("landscape", function(active) {
	// invoked when the landscape media query is both activated and
	// deactivated, you can check `active` to determine which one it is
});

<static> parse()

Parses the document's CSS/media rules for aliased queries.
Source:

<static> remove(alias) → {Boolean}

Remove an aliased query. Removes all caches and bound listeners.
Parameters:
Name Type Description
alias String The unique alias for the media query to remove
Source:
Returns:
Whether the removal was successful or not (i.e. if the alias existed)
Type
Boolean
Example
if (mqa.remove("landscape")) {
	// removal successful
}