Class: mkr

Requires

• TweenMax

Members

static,readonlymkr.defaultsObject

Default css and attributes applied to HTMLElements and SVGs. Set keys to change defaults settings for created elements

Properties:

Name	Type	Argument	Default	Description
force3d	Boolean	<optional>	true	force3d true for all elements by default, Smooths transforms.
attr	Object	<optional>	{}	attributes applied to all created elements
css	Object	<optional>	{}	styles applied to all created elements Properties Name Type Argument Default Description position String <optional> 'absolute' All elements created my mkr are positioned absolutely by default

staticmkr.DEGNumber

Mathematical constant for converting radians to degrees

staticmkr.RADNumber

Mathematical constant for converting degrees to radians

static,readonlymkr.rulesCSSRuleList

mkr's dynamic stylesheet rules.

static,readonlymkr.stylesStyleSheet

mkr's dynamic stylesheet. Used by mkr.addRule

containerHTMLElement

the default container element used to hold all elements added to/created by the mkr instance

heightNumber

pixel width of this mkr's container

readonlyidint

internal id of this mkr instance

readonlytmlnTimelineMax

reference to this mkr's built-in TimelineMax instance

widthNumber

pixel height of this mkr's container

Methods

staticmkr.add(target, parent, index){*}

mkr.js, line 715

Adds an existing element to the specified parent

Name	Type	Default	Description
target	*		A single element, array of elements, or a css selector string.
parent	Element	document.body	optional The ancestor element to search. Defaults to the document object
index	int		optional Insertion index of the target. Defaults to the number of children. When negative, becomes the sum of itself and the number of children

Returns:

Type	Description
*	The added element, or array of elements

staticmkr.addRule(selector, styles, index){int}

mkr.js, line 823

Adds a CSS rule to mkr's global stylesheet.

Name	Type	Description
selector	String	A selector string, that the rule should target
styles	Object	The styles to add to the new rule
index	int	optional The index at which to insert the rule.

Returns:

Type	Description
int	The index of the newly inserted rule

staticmkr.angle(x1, y1, x2, y2){Number}

mkr.js, line 1082

Calculates the angle(in degrees) between two points

Name	Type	Description
x1	Number	The x-coordinate of the first point
y1	Number	The y-coordinate of the first point
x2	Number	The x-coordinate of the second point
y2	Number	The y-coordinate of the second point

Returns:

Type	Description
Number	The angle(in degrees) between the two points

staticmkr.clearListeners()

mkr.js, line 474

Removes all listeners managed by mkr across all mkr instances. Its a good idea to be sure that you want to do this.

staticmkr.clone(target, options, cloneOpts, parent, index){*}

mkr.js, line 637

clone a dom element using cloneNode and apply with optional params

Name	Type	Default	Description
target	*		A selector string, Array, or element
options	Object		optional A set of attributes and css properties used to create the element Name Type Description css Object optional CSS properties to apply to the new object attr Object optional Attributes to apply to the new object
cloneOpts	Object		optional Options used to fine-tune the behavior of the clone operation Name Type Default Description children Boolean true optional Whether children should also be cloned(sets cloneNodes deep parameter)
parent	*	null	optional The element which to append the new element. Can be an element or a css selector string
index	int		optional Insertion index of the clones. Defaults to the end.

Returns:

Type	Description
*	The added element, or array of elements

staticmkr.construct(type, options, parent){*}

mkr.js, line 610

Creates a new instance of a mkr construct

Name	Type	Description
type	String	The type of construct to create.
options	Object	optional A set of attributes, css, and other properties used to create the construct Name Type Description css Object optional CSS properties to apply to the new construct. attr Object optional Attributes to apply to the new construct.
parent	*	optional The element to append the new construct. Can be an element or a css selector string

Returns:

Type	Description
*	The new construct

staticmkr.copy(src){Object}

mkr.js, line 964

Copies an object. This utility method should only be used on objects holding primitive values!

Name	Type	Description
src	Object	The object to copy

Returns:

Type	Description
Object	The copy

staticmkr.create(type, options, parent, index){Element}

mkr.js, line 671

Creates a new html element

Name	Type	Default	Description
type	String		The type of element to create.
options	Object		optional A set of attributes and css properties used to create the element Name Type Description css Object optional CSS properties to apply to the new object. attr Object optional Attributes to apply to the new object.
parent	*	null	optional The element which to append the new element. Can be an element or a css selector string
index	int		optional Insertion index of the new element. Defaults to the end.

Returns:

Type	Description
Element	The new element

staticmkr.default(value, value){*}

mkr.js, line 763

Examines provided value and returns the fallback if it is undefined

Name	Type	Description
value	String	The value to examine
value	String	The fallback value

Returns:

Type	Description
*	returns value or the fallback if it is undefined

staticmkr.deleteRule(index)

mkr.js, line 877

Delete the CSS rule at the specified index.

Name	Type	Description
index	int	optional The index the rule to remove.

staticmkr.distance(x1, y1, x2, y2){Number}

mkr.js, line 1048

Calculates the distance between two points

Name	Type	Description
x1	Number	The x-coordinate of the first point
y1	Number	The y-coordinate of the first point
x2	Number	The x-coordinate of the second point
y2	Number	The y-coordinate of the second point

Returns:

Type	Description
Number	The distance between the two points

staticmkr.each(target, callback, context)

mkr.js, line 382

Executes the provided function for each target object

Name	Type	Description
target	*	An single element, array of elements, or a css selector string.
callback	*	Function to execute for each object
context	Object	optional Context on which the callback is executed (object that should represent the `this` variable inside callback function)

staticmkr.extend(baseObj){Object}

mkr.js, line 563

shortcut for creating class extensions using protoypal inheritance

Name	Type	Description
baseObj	Object	The object to be extended

Returns:

Type	Description
Object

staticmkr.findRule(selector){int}

mkr.js, line 888

Traverses mkr's stylesheet and returns the index of the first rule to match the selector. Returns -1 if the rule is not found.

Name	Type	Description
selector	String	Selector used to search the stylesheet

Returns:

Type	Description
int	index - The index of the rule or -1 if not found.

staticmkr.fix(n, decimals){int}

mkr.js, line 1099

Formats a number to the provided number of decimal places

Name	Type	Default	Description
n	Number		The number to fix
decimals	Number	3	optional The number of decimal places

Returns:

Type	Description
int	An array of drawing commands.

staticmkr.getDefault(target, key, value){*}

mkr.js, line 776

Returns target[key] or value if target[key] has not be defined

Name	Type	Description
target	Object	The target of this operation
key	String	The name of the property being set
value	String	The value to set

Returns:

Type	Description
*	target[key] or value if target[key] has not be defined

staticmkr.getRule(selector){CSSStyleDeclaration}

mkr.js, line 906

Alias for CSSRulePlugin.getRule. Returns the CSSRules that match the provided selector

Name	Type	Description
selector	String	A selector string by which to select rules

Returns:

Type	Description
CSSStyleDeclaration	- The matched rule(s)

staticmkr.hasClass(target, className)

mkr.js, line 863

Tests whether the target element has the indicated class assigned

Name	Type	Description
target	*	An single element, or a css selector string.
className	String	A string representing the class to search for.

staticmkr.makeDC(width, height, options){mkr}

mkr.js, line 159

Factory method for quickly creating creatives that conform to DCS standards. Differs from the standard constructor in that it adds a border to the container, and sets a few default properties documented below.

Name	Type	Description
width	Number	The width of the creative
height	Number	The height of the creative
options	Object	A set of attributes and css properties used to create the container. A few special properties and default values are documented below. Name Type Default Description parent Element document.body optional Element the mkr instance container is appended to preload Boolean false optional When true, delays loading img elements until the instance's load function in called revealKey String 'isi' optional Optional dom id and URL query param for screen capture border Object optional A set of attributes and css properties used to create the border Name Type Description attr Object optional Attributes to apply to the border element. Name Type Default Description class String 'mkr.border' optional Class string applied to the border element. Applied classes will always include 'mkr-border' css Object optional CSS properties to apply to the border element. Name Type Default Description left Number 0 optional CSS left property top Number 0 optional CSS top property zIndex int 10 optional CSS z-index property borderWidth String '1px' optional CSS border-width property borderStyle String 'solid' optional CSS border-style property borderColor String '#666666' optional CSS border-color pointerEvents String 'none' optional CSS pointer-events width Number width optional CSS width height Number height optional CSS height

Returns:

Type	Description
mkr	The new mkr instance

staticmkr.merge(src, merger, overwrite){Object}

mkr.js, line 935

Merges one object into another, optionally overwriting overlapping keys. This utility method should only be used on objects holding primitive values!

Name	Type	Default	Description
src	Object		the source object
merger	Object		The styles to set of the matched rules
overwrite	Boolean	false	optional Whether to overwrite overlapping values

Returns:

Type	Description
Object	The resulting merge

staticmkr.off(target, type, callback, context)

mkr.js, line 448

Remove listeners from one or many objects. Behaves differently depending on the number of passed arguments. - 3+ arguments: Only removes the specified listener from the target ^ - First 2 arguments only: Removes all listeners of provdied event type - First argument only: Removes all listeners from the target

Name	Type	Description
target	*	An single element, array of elements, or a css selector string.
type	String	optional The event type. Excluding this this argument removes all listeners from the target regardless of type.
callback	function	optional The callback to remove. Excluding this argument removes all listeners of the specified from the target
context	Object	optional Context on which the callback is executed (object that should represent the `this` variable inside callback function)

staticmkr.on(target, type, callback, context, priority)

mkr.js, line 409

Add a listener to one or many objects

Name	Type	Default	Description
target	*		An single element, array of elements, or a css selector string.
type	String		A string representing the type of event the listener is associated with
callback	function		The function to be executed when the associated event is fired
context	Object		optional Context on which the callback is executed (object that should represent the `this` variable inside callback function)
priority	Number	0	optional Affects callback execution order. Higher priority listeners are executed before those with lower priority. Listeners of the same priority are executed in order of insertion

staticmkr.once(target, type, callback, context, priority)

mkr.js, line 429

Add a listener to one or many objects that only executes once per object

Name	Type	Default	Description
target	*		An single element, array of elements, or a css selector string.
type	String		A string representing the type of event the listener is associated with
callback	function		The function to be executed when the associated event is fired
context	Object		optional Context on which the callback is executed (object that should represent the `this` variable inside callback function)
priority	Number	0	optional Affects callback execution order. Higher priority listeners are executed before those with lower priority. Listeners of the same priority are executed in order of insertion

staticmkr.query(selectors, baseElement){Element}

mkr.js, line 582

Returns the first element within the baseElement that matches the specified selectors. element.querySelector(selectors) shortcut

Name	Type	Default	Description
selectors	String		A string containing one or more CSS selectors separated by commas.
baseElement	Element	document	optional The ancestor element to search. Defaults to the document object

Returns:

Type	Description
Element	The first element within the baseElement that matches the specified selectors.

staticmkr.queryAll(selectors, baseElement){NodeList}

mkr.js, line 596

Returns a NodeList of all elements within the baseElement that match the specified selectors. element.querySelectorAll(selectors) shortcut

Name	Type	Default	Description
selectors	String		A string containing one or more CSS selectors separated by commas.
baseElement	Element	document	optional The ancestor element to search. Defaults to the document object

Returns:

Type	Description
NodeList	A NodeList of all elements within the baseElement that match the specified selectors.

staticmkr.randomRange(min, max){Number}

mkr.js, line 1113

returns a random number between the supplied min and max values

Name	Type	Description
min	Number	The minimum value
max	Number	The maximum value

Returns:

Type	Description
Number	A random number between the supplied min and max values

staticmkr.remove(target){Element}

mkr.js, line 747

Removes an existing element from the DOM

Name	Type	Description
target	*	A single element, array of elements, or a css selector string.

Returns:

Type	Description
Element	The removed element, or array of elements

staticmkr.removeRule(selector)

mkr.js, line 849

Traverses mkr's stylesheet and removes first rule to match the selector.

Name	Type	Description
selector	String	The selector text of the rule to remove.

staticmkr.reveal(target, options, parentOpts)

mkr.js, line 484

shortcut for revealing scrollable content.

Name	Type	Description
target	*	A selector string, Array, or element
options	Object	optional An optional set of attributes and css properties applied to the target
parentOpts	Object	optional An optional set of attributes and css properties applied to every parent of the target

staticmkr.rotation(x1, y1, x2, y2){Number}

mkr.js, line 1064

Calculates the angle(in radians) between two points

Name	Type	Description
x1	Number	The x-coordinate of the first point
y1	Number	The y-coordinate of the first point
x2	Number	The x-coordinate of the second point
y2	Number	The y-coordinate of the second point

Returns:

Type	Description
Number	The angle(in radians) between the two points

staticmkr.scroll(target, speed, options){Array}

mkr.js, line 519

Tweens the scrollable area of targets at the specified speed in px/s. Can target multiple objects

Name	Type	Default	Description
target	*		A selector string, Array, or element
speed	Number	14	optional The speed of the tween in px/s
options	Object		optional Additional properties passed to the tween

Returns:

Type	Description
Array	An array of tweens created to facilitate the animation

staticmkr.setDefault(target, key, value){*}

mkr.js, line 794

Sets the the value of target[key] to value if key has not already been assigned

Name	Type	Description
target	Object	The target of this operation
key	String	The name of the property being set
value	String	The value to set

Returns:

Type	Description
*	The value of target[key]

staticmkr.setPolyPath(target, points, unit)

mkr.js, line 1022

Shortcut method for dynamically setting the target's clipPath using the polygon func. Useful for animating clipath arrays

Name	Type	Default	Description
target	Element		Target for clipPath
points	Array		Array of points to be used as the clipPath
unit	unit	%	optional The unit of measure to be used in the clipPath

staticmkr.setRule(selector, styles)

mkr.js, line 919

Updates the matched CSSRules with the provided styles

Name	Type	Description
selector	String	A selector string, that the rule should target
styles	Object	The styles to set of the matched rules

staticmkr.unit(value){String}

mkr.js, line 977

Evaluates the provided value and returns the unit suffix it implements

Name	Type	Description
value	*	The value to evaluate

Returns:

Type	Description
String	The unit suffix

staticmkr.unitize(value, unit, override){String}

mkr.js, line 1001

Evaluates the provided value and returns a string appended with the unit suffix

Name	Type	Default	Description
value	*		The value to evaluate
unit	String	'px'	optional The unit suffix to append
override	Boolean	true	optional Whether to replace an existing unit suffix

Returns:

Type	Description
String	The provided value appended with the unit suffix

staticmkr.unitless(value){Number}

mkr.js, line 989

Evaluates the provided value and returns a number without a unit suffix

Name	Type	Description
value	*	The value to evaluate

Returns:

Type	Description
Number	The numerical value without the unit suffix

batch(type, options, num, parent){Array}

mkr.js, line 348

Creates a specified number of elements with the same parameters

Name	Type	Description
type	String	The type of element to create.
options	Object	optional A set of attributes and css properties used to create the elements
num	Number	The number of elements to produce
parent	*	optional The element to append the new elements. Can be an element or a css selector string

Returns:

Type	Description
Array	An array containing the new elements

clone(target, options, cloneOpts, parent, index){*}

mkr.js, line 297

clone a dom element using cloneNode and apply with optional params

Name	Type	Default	Description
target	*		A selector string, Array, or element
options	Object		optional A set of attributes and css properties used to create the element Name Type Description css Object optional CSS properties to apply to the new object attr Object optional Attributes to apply to the new object
cloneOpts	Object		optional Options used to fine-tune the behavior of the clone operation Name Type Default Description children Boolean true optional Whether children should also be cloned(sets cloneNodes deep parameter)
parent	*	this.container	optional The element which to append the new element. Can be an element or a css selector string
index	int		optional Insertion index of the clones. Defaults to the end.

Returns:

Type	Description
*	The added element, or array of elements

construct(type, options, parent){*}

mkr.js, line 278

Creates a new instance of a mkr construct

Name	Type	Default	Description
type	String		The type of construct to create.
options	Object		optional A set of attributes, css, and other properties used to create the construct Name Type Description css Object optional CSS properties to apply to the new construct. attr Object optional Attributes to apply to the new construct.
parent	*	this.container	optional The element to append the new construct. Can be an element or a css selector string

Returns:

Type	Description
*	The new construct

create(type, options, parent, index){Element}

mkr.js, line 317

Creates a new html element

Name	Type	Default	Description
type	String		The type of element to create.
options	Object		optional A set of attributes and css properties used to create the element Name Type Description css Object optional CSS properties to apply to the new element. attr Object optional Attributes to apply to the new element.
parent	*	this.container	optional The element which to append the new element. Can be an element or a css selector string
index	int		optional Insertion index of the new element. Defaults to the end.

Returns:

Type	Description
Element	The new element

kill()

mkr.js, line 368

Kills this mkr's tweens, child tweens, and timeline. Removes all listeners and removes the container from the DOM

load(callback, context)

mkr.js, line 130

When preloading is enabled, this function begins loading the instances img tags

Name	Type	Description
callback	function	A callback function to call once loading is complete
context	Object	optional Context on which the callback is executed (object that should represent the `this` variable inside callback function)