Class: Main

Responsiville. Main

This is the main object of the Responsiville framework. The whole Responsiville framework depends on this object to function and so do all the plugins that belong to the framework as well. It contains core functions that handle the breakpoints and the responsiveness of the web page in development.

new Responsiville.Main(options)

responsiville.main.js, line 50
Creates and initialises the main Responsiville object.
Name Type Description
options Object The initialisation options of the module.
Properties:
Name Type Description
options Object The options that define the object behaviour.
Properties
Name Type Description
debug boolean Whether to print debug messages in the browser console.
debugUI boolean Whether to show the debug panel at the edge of the screen.
debugPos string Where to position the debug panel (br means bottom-right, tl means top-left and so on).
throttle int Time delay to throttle expensive function calls as a result of repeated operations like the browser resize event.
slug boolean A special codename for the instance of the element, to be used as a class on its container and as a key in arrays where it is grouped with other elements of its kind.
breakpoints Array Array of extra breakpoints to include to the framework. Each breakpoint is an associative array like { name: 'small', width: 320, icon: 'uE800' }. One might need to add breakpoints to this array but they probably should not remove any beacuse this might break behaviour of other code that depends on them.
Author:
  • Nevma, info@nevma.gr
License:
  • Nevma Copyright (c) http://www.nevma.gr
Fires:

Extends

Members

staticResponsiville.Main.AUTO_RUN

Properties:
Name Type Description
AUTO_RUN boolean Controls whether this module should run by default, without the developer calling it, using its default settings. Defaults to true.

staticResponsiville.Main.defaults

Properties:
Name Type Description
defaults Object Default values for this module settings.

Methods

staticResponsiville.Main.autoRun(){void}

responsiville.main.js, line 212
Automatically initialises the Responsiville framework. It is dependendent on the fact that the jQuery and the main Responsiville scripts (not the modules) have loaded. It is activated via the global RESPONSIVILLE_AUTO_INIT and it uses the global RESPONSIVILLE_DEBUG.
Returns:
Type Description
void

staticResponsiville.Main.getInstance(){Responsiville.Main}

responsiville.main.js, line 247
Get the singleton responsiville instance. Oh, did we mention? Responsiville is a singleton, because in a browser you only get one responsive web page at a time.
Returns:
Type Description
Responsiville.Main The singleton Responsiville object instance which is responsible for the current page.

adjust(){void}

responsiville.main.js, line 390
Window resize event handler which takes care of manipulating the breakpoints, setting and unsetting them accordingly.
Fires:
Returns:
Type Description
void

calculateCurrentBreakpoint(){Object}

responsiville.main.js, line 863
Calculate the current breakpoint according to the current browser window size.
Returns:
Type Description
Object The current breakpoint.

calculateDimensions()

responsiville.main.js, line 572
Calculates and caches internally the current viewport dimensions.
Returns:
void

compareTo(testBreakpointName){boolean}

responsiville.main.js, line 671
Compares a given breakpoint to the current breakpoint in order to determnine which one is bigger or if they are equal. Note that the comparison refers to the general breakpoint notion and not actual dimensions in pixels.
Name Type Description
testBreakpointName string The breakpoint name against which to check.
Returns:
Type Description
boolean A positive number if the given breakpoint is bigger than the current breakpoint, a negative number if it is smaller and zero if they are equal.

deregisterBreakpoint(breakpointName){void}

responsiville.main.js, line 359
Deregisters an existing breakpoint.
Name Type Description
breakpointName string The code name of the breakpoint to deregister.
Returns:
Type Description
void

getProperty(name){Object}

responsiville.main.js, line 898
Gets a property from the browser local storage.
Name Type Description
name string The key name of the property to retrieve from the browser local storage.
Returns:
Type Description
Object The value that corresponds to the given property from the browser local storage.

hasGrown(){boolean}

responsiville.main.js, line 814
Checks whether the last breakpoint change was towards a bigger screen.
Returns:
Type Description
boolean Whether the last breakpoint change was towards a bigger screen.

init(){void}

responsiville.main.js, line 263
Initilalises the responsive magic. Sets up the necessary event handlers on browser window resize that assist in controlling the desired responsive behaviour. Runs exactly once.
Returns:
Type Description
void

is(breakpointNames){boolean}

responsiville.main.js, line 711
Checks whether the current browser window size is currently at the given breakpoint(s). Useful in order to check if we are inside the range of a specific breakpoint.
Name Type Description
breakpointNames Array.<string> | string The breakpoint name(s) against which to check. Can be just a single breakpoint name or a comma separated list of breakpoint names or an array of breakpoint names.
Returns:
Type Description
boolean Whether the browser window is at the given breakpoint(s).

isBiggerThan(testBreakpointName){boolean}

responsiville.main.js, line 780
Checks whether the current window is at a breakpoint bigger than the given breakpoint.
Name Type Description
testBreakpointName string The breakpoint name against which to check.
Returns:
Type Description
boolean Whether the browser window is at a breakpoint bigger than the given one.

isDevice(){boolean}

responsiville.main.js, line 648
Checks whether the current device is a mobile and not a desktop one based on the user agent of the browser.
Returns:
Type Description
boolean Whether the current device is a mobile one.

isEqualOrBiggerThan(testBreakpointName){boolean}

responsiville.main.js, line 799
Checks whether the current window is at a size equal or bigger than the given breakpoint.
Name Type Description
testBreakpointName string The breakpoint name against which to check.
Returns:
Type Description
boolean Whether the browser window is at a breakpoint bigger or equal to the given one.

isEqualOrSmallerThan(testBreakpointName){boolean}

responsiville.main.js, line 761
Checks whether the current window is at a breakpoint equal or smaller than the given breakpoint.
Name Type Description
testBreakpointName string The breakpoint name against which to check.
Returns:
Type Description
boolean Whether the browser window is at a breakpoint smaller or equal to the given one.

isHiDPI(){boolean}

responsiville.main.js, line 617
Checks whether the current screen has a high devide pixel ratio, that is greater than 1 (HiDPI, retina, etc).
Returns:
Type Description
boolean Whether the current screen has a high device pixel ratio.

isSmallerThan(testBreakpointName){boolean}

responsiville.main.js, line 742
Checks whether the current window is at a breakpoint smaller than the given breakpoint. Remember that we are checking mobile first.
Name Type Description
testBreakpointName string The breakpoint name against which to check.
Returns:
Type Description
boolean Whether the browser window is at a smaller breakpoint than the given one.

printBreakpoints(){void}

responsiville.main.js, line 960
Prints the current registered breakpoints in the browser console.
Returns:
Type Description
void

registerBreakpoint(breakpointName, breakpointWidth){void}

responsiville.main.js, line 324
Registers a new, non-default, breakpoint in the system.
Name Type Description
breakpointName string The code name of the new breakpoint.
breakpointWidth int The window width of the new breakpoint.
Returns:
Type Description
void

runBreakpointChangeCallbacks(){void}

responsiville.main.js, line 552
Runs all callbacks registered on breakpoint change events (either entering or leaving a breakpoint).
Returns:
Type Description
void

setProperty(name, value){void}

responsiville.main.js, line 926
Sets a property in the browser local storage.
Name Type Description
name string The key name of the property to set in the browser local storage.
value Object The value that is to be set for the given property code name in the browser local storage.
Returns:
Type Description
void

windowResize()

responsiville.main.js, line 592
Runs all the function callbacks which are attached to the Responsiville Main object's resize event. The call to this function has been registered as throttled to begin with, so that the browser is protected from repeated calls of the same callbacks.
Fires:
Returns:
void

Events

change

responsiville.main.js, line 515
Called after a breakpoint change has occured.

init

responsiville.main.js, line 293
Called after the module has been initialised.

resize

responsiville.main.js, line 598
Called after a breakpoint change has occured.