https://github.com/b13/breakpointlistener

https://github.com/b13/breakpointlistener

Last synced: over 1 year ago
JSON representation

• Host: GitHub
• URL: https://github.com/b13/breakpointlistener
• Owner: b13
• Created: 2014-08-25T08:46:42.000Z (almost 12 years ago)
• Default Branch: master
• Last Pushed: 2015-08-24T15:09:37.000Z (almost 11 years ago)
• Last Synced: 2025-03-09T23:38:55.902Z (over 1 year ago)
• Language: JavaScript
• Size: 340 KB
• Stars: 1
• Watchers: 13
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
Breakpoint Listener

===================

Introduction

------------

The breakpointListener is a small tool to listen to breakpoint changes in JS code in a resource economic way. Its 

purpose is to register handlers that will be called on breakpoint changes.

### Initialization with AMD

	require(['breakpointlistener'], function(BPL){

		var BreakpointListener = new BPL({

			breakpoints: {

				"xs": 0,

				"sm": 480,

				"md": 768,

				"lg": 1024

			}

		});

	});

	

Simply load the breakpoint listener as AMD module and create new instances of it. It is required to define the 

breakpoints like in the following example, but it is not required to define 4 breakpoints you could define any number of 

breakpoints that is bigger than 1. You could chose any name you want for the breakpoints, but it is recommended to use

the commonly used identifiers xs, sm, md and lg.

### Getting the current breakpoint

	

	BreakpointListener.getCurrentBreakpoint();

Returns a string representation of the current breakpoint. 

### Binding breakpoint change handlers

	BreakpointListener.onChangeBreakpoint(function(evt){

		switch(evt.currentBreakpoint){

			case "xs":

				if(evt.lastBreakpoint === "sm"){

					. . .

				}

				break;

			case "sm":

				. . .

				break;

			case "md":

				. . .

				break;

			case "lg":

				. . .

				break;

		}

		

		. . .

	});

registerBreakpointHandler(handler); is equivalent to onChangeBreakpoint(handler);

	BreakpointListener.registerBreakpointHandler(function(evt){

		. . .

	});

Simply register callbacks to listen to breakpoint changes. The callback will receive an evt parameter, that contains:

- currentBreakpoint	// The breakpoint that is now active

- lastBreakpoint	// The breakpoint that was active before the breakpoint change

- timestamp			// Time when the change occurred

Functions

---------

Function name | Return value | Description

------------- | ------------ | -----------

getCurrentBreakpoint() | String | Returns the current breakpoint. Possible values are: 'xs', 'sm', 'md', 'lg'

getCssViewPortHeight() | number | Returns the height of the viewport. This value corresponds to the height value that is used in css media queries.

getCssViewPortWidth() | number | Returns the width of the viewport. This value corresponds to the width value that is used in css media queries. 

offChangeBreakpoint(function:handlerFunction) | function/undefined | Same as unregisterBreakpointHandler(function:handlerFunction). Unbinds the given handler from the onChangeBreakpoint event and returns it, if it was bound before. 

onChangeBreakpoint(function:handlerFunction) | function | Same as registerBreakpointHandler(function:handlerFunction). Binds the given handler to the onChangeBreakpoint event and returns it. 

registerBreakpointHandler(function:handlerFunction) | function | Binds the given handler to the onChangeBreakpoint event and returns it.

unregisterBreakpointHandler(function:handlerFunction) | function/undefined | Unbinds the given handler from the onChangeBreakpoint event and returns it, if it was bound before.

updateBreakpoint(boolean:preventEvent) | String | Forces the breakpoint handler to update the breakpoint value and and to trigger the onChangeBreakpoint event if the breakpoint changed and if the given preventEvent argument is false.