ui/breakpoints

• ui/breakpoints
  • static
    • .BreakpointManager
      • new exports.BreakpointManager(config)
      • .onChange(callback)
      • .removeOnChange(callback)
      • .getBreakpointInPseudo()
      • .getBreakpointInProperty()
      • .getBreakpoint()
      • .update()
      • .at(name) ⇒ Breakpoint
  • inner
    • ~BreakpointDirection
      • .change()
      • ._call()
      • .getHandlers()
      • .add(handler)
      • .remove()
    • ~Breakpoint
      • ._setDirection(direction, active)
      • .max(handler)
      • .min(handler)
      • .only(handler)
      • .remove(handler, direction)

ui/breakpoints.BreakpointManager

Class that provides method for retrieving and acting on breakpoints passed from CSS (using element pseudo content prop)

Kind: static class of ui/breakpoints

• .BreakpointManager
  • new exports.BreakpointManager(config)
  • .onChange(callback)
  • .removeOnChange(callback)
  • .getBreakpointInPseudo()
  • .getBreakpointInProperty()
  • .getBreakpoint()
  • .update()
  • .at(name) ⇒ Breakpoint

new exports.BreakpointManager(config)

Param	Type	Description
config	Object	Configuration object
config.order	Array	Array of strings that correspond to the breakpoints setup in the styles, Breakpoints from smallest to largest, defaults to [small, medium, large]
config.customProperty	Array	Property to grab breakpoint from (default is --breakpoint)
config.valueFromPseudo	Array	Use the legacy method of grabbing breakpoint from pseudo element, default uses custom property
config.element	Node	The element to retrieve active breakpoint from stylesheet. (default is html) For using the old pseudo method, adjust this to document.body
config.pseudoSelector	String	Change pseudo selector used to get the breakpoint from the pseudo's content property

breakpointManager.onChange(callback)

Add a callback for every time a breakpoint changes

• Not recommended, possibly use to watch for changes, etc
• For more control use instance.at(name) with breakpoint methods

Kind: instance method of BreakpointManager

Param	Type	Description
callback	function	Function to call, passed one argument current instance which can be used to get information about breakpoints

breakpointManager.removeOnChange(callback)

Remove change callback

Kind: instance method of BreakpointManager

Param	Type	Description
callback	function	Function to remove

breakpointManager.getBreakpointInPseudo()

Get breakpoint from a pseudo element

Kind: instance method of BreakpointManager

breakpointManager.getBreakpointInProperty()

Get breakpoint from a custom property

Kind: instance method of BreakpointManager

breakpointManager.getBreakpoint()

Get breakpoint from element (design note: user could override prototype)

Kind: instance method of BreakpointManager

breakpointManager.update()

Updates the active breakpoint by checking the element and executes handlers on change

Kind: instance method of BreakpointManager

breakpointManager.at(name) ⇒ Breakpoint

Get a breakpoint by key

Kind: instance method of BreakpointManager
Returns: Breakpoint - Breakpoint to act on (see Breakpoint class)

Param	Type	Description
name	String	The name of the breakpoint to get

ui/breakpoints~BreakpointDirection

Used to handle a breakpoints direction's handler and state

Kind: inner class of ui/breakpoints

• ~BreakpointDirection
  • .change()
  • ._call()
  • .getHandlers()
  • .add(handler)
  • .remove()

breakpointDirection.change()

Change the state of the direction

Kind: instance method of BreakpointDirection

breakpointDirection._call()

Calls all functions in handlers or

Kind: instance method of BreakpointDirection

breakpointDirection.getHandlers()

Returns handlers in normalized object format on/off

Kind: instance method of BreakpointDirection

breakpointDirection.add(handler)

Adds a handler for the direction, optionally use object to add off state handler

Kind: instance method of BreakpointDirection

Param	Type	Description
handler	function | Object	Function to be executed when direction is active, read object description for on/off
handler.on	function | Object	Function to be executed when direction is active
handler.off	function | Object	Function to be executed when direction was active and is now changed to inactive

breakpointDirection.remove()

Removes a handler

Kind: instance method of BreakpointDirection

ui/breakpoints~Breakpoint

Single breakpoint management

Kind: inner class of ui/breakpoints

• ~Breakpoint
  • ._setDirection(direction, active)
  • .max(handler)
  • .min(handler)
  • .only(handler)
  • .remove(handler, direction)

breakpoint._setDirection(direction, active)

Private method used inrternally for managing direction activation

• Each direction manages it's own state and handlers

Kind: instance method of Breakpoint

Param	Type	Description
direction	String	The directional key
active	Boolean	State of that direction to set

breakpoint.max(handler)

Attach handler to be executed from the breakpoint and to all breakpoints below.

• If the browser resizes from a breakpoint below this breakpoint, and above the breakpoint name specified, this handler will fire

Kind: instance method of Breakpoint

Param	Type	Description
handler	function	Handler to be executed

breakpoint.min(handler)

Attach handler to be executed from the breakpoint and to all breakpoints below.

• If the browser resizes from a breakpoint above this breakpoint, and below the breakpoint name specified, this handler will fire

Kind: instance method of Breakpoint

Param	Type	Description
handler	function	Handler to be executed

breakpoint.only(handler)

Attach a handler to fire when the breakpoint is within the key

Kind: instance method of Breakpoint

Param	Type	Description
handler	function	Handler to be executed

breakpoint.remove(handler, direction)

Remove handler

Kind: instance method of Breakpoint

Param	Type	Description
handler	function	Handler to be removed, extended on/off object style can be used
direction	String	Remove handler only from specified direction, else search all directions