Class: BreakpointObserver

BreakpointObserver

new BreakpointObserver(handleropt, nullable, targetFpsopt, nullable)

Creates a new BreakpointObserver and, optionally, sets a handler for breakpoint changes.

Parameters:
Name Type Attributes Default Description
handler function <optional>
<nullable>
 null

the function to call on breakpoint change, receives two parameters: newBreakpointName, oldBreakpointName (if there is no old breakpoint, the parameter will be undefined)
targetFps Number <optional>
<nullable>
 BREAKPOINT_BASE_FPS

the max amount of updates per second we are aiming for in the observer; since breakpoints are not changing very regularly, low FPS should be alright here for most cases
Source:
Throws:

error if handler is set, but is not a function

Methods

connect(handleropt, nullable) → {BreakpointObserver}

(Re)starts breakpoint observation (resetting all data and states before) and, optionally, sets a new handler.

Parameters:
Name Type Attributes Default Description
handler function <optional>
<nullable>
 null

the function to call on breakpoint change, receives two parameters: newBreakpointName, oldBreakpointName (if there is no old breakpoint, the parameter will be undefined)
Source:
See:
  • disconnect
Returns:
the observer instance
Type
BreakpointObserver
Example
observer
    .connect((to, from) => {
        alert(`breakpoint changed from "${from}" to "${to}"`);
    })
    .observe(
        ['small', 0],
        ['medium', 768],
        ['large', 1024]
    )
;

disconnect() → {BreakpointObserver}

Stops the observation of breakpoints and resets all data and states.

Source:
See:
  • connect
Returns:
the observer instance
Type
BreakpointObserver
Example
observer.disconnect().getCurrentBreakpoint();
=> null

getBreakpoint(breakpoint) → {String|Number|null}

Returns either the width to a breakpoint name or the name to a breakpoint width.

Parameters:
Name Type Description
breakpoint String | Number

if a number, tries to return a corresponding breakpoint name, else we'll try to find a width to the given name
Source:
Returns:
- either a breakpoint name, a breakpoint width or null, if nothing was found
Type
String | Number | null
Example
observer.getBreakpoint('large')
=> 1024
observer.getBreakpoint(1024)
=> 'large'

getBreakpoints() → {Object}

Returns the currently configured breakpoints of the observer as a dictionary.

The return value is a copy, changing values or names in this value will not change the observer's data.

Source:
Returns:
the observer's configured breakpoints
Type
Object

getCurrentBreakpoint() → {String}

Returns the current breakpoint's name.

If you need the width, use this value in .getBreakpoint().

Source:
See:
  • getBreakpoint
Returns:
the current breakpoint's name
Type
String

getCurrentBreakpointObservable() → {Basic.Observable}

Returns an observable, that notifies subscribers of breakpoint changes.

Use this, if you need more than one handler or want a little bit more flexibility.

This observable is read-only, setting its values will not influence breakpoint evaluation in the observer.

Source:
Returns:
the breakpoint observable
Type
Basic.Observable
Example
observer.getCurrentBreakpointObservable().subscribe((to, from) => {
    alert(`breakpoint changed from "${from}" to "${to}"`);
});

observe(…breakpoints) → {BreakpointObserver}

Adds breakpoint(s) to observe.

Parameters:
Name Type Attributes Description
breakpoints Object | Array | Array.<Array> | Array.<Object> <repeatable>

the breakpoint definition, either as a simple dictionary ({breakPointName : breakpointWidth, ...}) with 1 to n props, or as an entry array (['breakpointname', breakpointWidth]); both definitions can also be provided as a list of parameters or an array
Source:
See:
  • unobserve
Returns:
the observer instance
Type
BreakpointObserver
Example
observer.observe({
    small : 0,
    medium : 768,
    large : 1024,
    xlarge : 1440
});
observer.observe(
    {small : 0},
    ['medium', 768],
    [
        {large : 1024},
        ['xlarge', 1440]
    ]
);

unobserve(…breakpoints) → {BreakpointObserver}

Removes breakpoint(s) from observation.

Parameters:
Name Type Attributes Description
breakpoints Array.<String> | Object | Array | Array.<Array> | Array.<Object> <repeatable>

this can either be a definition, as used in observe() or just a list of breakpoint names to remove
Source:
See:
  • observe
Returns:
the observer instance
Type
BreakpointObserver
Example
observer.unobserve('small', 'xlarge');
observer.unobserve(['small', 'xlarge']);
observer.unobserve({
    small : 0,
    xlarge : 1440
});