Notable Pseudocode Mashups

    breakpoints-js

    1.0.6 • Public • Published

    breakpoints-js bower NPM version Dependency Status prs-welcome

    breakpoints-js is a lightweight, pure javascript library for attaching callbacks to breakpoints.

    Table of contents

    Main files

    dist/
    ├── breakpoints.js
    ├── breakpoints.es.js
    └── breakpoints.min.js
    

    Quick start

    Download the production version or the development version.

    Install From Bower

    bower install breakpoints.js --save

    Install From Npm

    npm install breakpoints-js --save

    Install From Yarn

    yarn add breakpoints-js

    Build From Source

    If you want build from source:

    git clone git@github.com:amazingSurge/breakpoints-js.git
    cd breakpoints-js
    npm install
    npm install -g gulp-cli babel-cli
    gulp build

    Done!

    Usage

    Before you try anything, you need to include breakpoints.js in your page.

    <script src="breakpoints.min.js"></script>

    You may need provide a matchMedia polyfill if you wish to support old/incapable browsers.

    Then you can init the script easily by code

    <script type="text/javascript">
        Breakpoints();
    </script>

    Examples

    There are some example usages that you can look at to get started. They can be found in the examples folder.

    Defaults

    It will use the bootstrap media query breakpoints by default:

    Breakpoints.defaults = {
        // Extra small devices (phones)
        xs: {
            min: 0,
            max: 767
        },
        // Small devices (tablets)
        sm: {
            min: 768,
            max: 991
        },
        // Medium devices (desktops)
        md: {
            min: 992,
            max: 1199,
        },
        // Large devices (large desktops)
        lg: {
            min: 1200,
            max: Infinity
        }
    };

    You can set up your own breakpoints when initialize it:

    <script type="text/javascript">
        Breakpoints({
            mobile: {
                min: 0,
                max: 767
            },
            tablet: {
                min: 768,
                max: 991
            },
            destop: {
                min: 992,
                max: Infinity
            }
        });
    </script>

    Methods

    is

    Check if the current screen is a specific size.

    Breakpoints.is('xs'); // return true or false

    get

    Return the size object that you can operate it handily.

    // get size object
    var sm = Breakpoints.get('sm');
     
    // attach events
    sm.on('enter', function(){
        // do something
    });
     
    // remove event handler
    sm.off('enter');
     
    // get min width
    sm.min // 768
     
    // get max width
    sm.max // 991
     
    // get media query
    sm.media // "(min-width: 768px) and (max-width: 991px)"
     
    // check if it's current size
    sm.isMatched(); // true or false
     
    // you can do in a chain
    Breakpoints.get('sm').on({
        enter: function(){
     
        },
        leave: function(){
     
        }
    });

    current

    Return the current screen size object

    Breakpoints.current();

    on

    Attach an event handler function for one or more events to the size

    Breakpoints.on('md', {
        enter: function() {
            console.info('enter '+ this.name);
        },
        leave: function() {
            console.info('leave '+ this.name);
        }
    });
     
    Breakpoints.on('lg', 'enter', function(){
        console.info('hello lg');
    });

    Passing data to the callback

    Breakpoints.on('sm', "enter", {
        name: "Addy"
    }, function(data) {
        console.info(data.name + ' enter '+ this.name);
    });
     
    Breakpoints.on('sm', "leave", {
        name: "Karl"
    }, function(data) {
        console.info(data.name + ' leave '+ this.name);
    });

    Unite sizes

    Breakpoints.on('md lg', {
        enter: function() {
            console.info('enter '+ this.name);
        },
        leave: function() {
            console.info('leave '+ this.name);
        }
    });

    one

    The handler attached to the size will executed at most once.

    Breakpoints.one('md', 'enter', function(){
        console.info('this only appear once when enter md');
    });

    off

    Remove event handlers attached to size.

    // remove all events attached to sm size
    Breakpoints.off('sm');
     
    // remove all enter type events attached to md size
    Breakpoints.off('md', 'enter'); 
     
    // remove specific event handler
    var enterHandler = function(){};
    Breakpoints.on('lg', 'enter', enterHandler);
     
    Breakpoints.off('lg', {
        enter: enterHandler
    })
     
    // alternative way
    Breakpoints.off('lg', 'enter', enterHandler);

    change

    Attach an event handler to the size change event

    // attach handler to change event
    Breakpoints.on('change', function(){
        console.info('enter ' + this.current.name);
    });
     
    // altrnative example
    var changeHandler = function(){
        // do something 
    };
    Breakpoints.on('change', changeHandler);
     
    // remove the handler
    Breakpoints.off('change', changeHandler);
     
    // remove all change handlers
    Breakpoints.off('change');

    Browser support

    Tested on all major browsers.

    Safari Chrome Firefox Edge IE Opera
    Latest ✓ Latest ✓ Latest ✓ Latest ✓ 9-11 ✓ Latest ✓
    • matchMedia browser support work perfect on all modern browsers (IE10+, firefox, chrome, android and safari).
    • With some polyfills (like the ones included in matchMedia.js) Breakpoints works perfect in IE6-9 as well.

    Contributing

    Anyone and everyone is welcome to contribute. Please take a moment to review the guidelines for contributing. Make sure you're using the latest version of jquery-scrollTo before submitting an issue. There are several ways to help out:

    Development

    jquery-scrollTo is built modularly and uses Gulp as a build system to build its distributable files. To install the necessary dependencies for the build system, please run:

    npm install -g gulp
    npm install -g babel-cli
    npm install

    Then you can generate new distributable files from the sources, using:

    gulp build
    

    More gulp tasks can be found here.

    Changelog

    To see the list of recent changes, see Releases section.

    Other Projects

    If you like this project then I encourage you to check out a few of my other hand-selected projects.

    • enquire.js - A lightweight, pure JavaScript library for responding to CSS media queries.
    • mediaquery - A jQuery plugin for responsive media query events.
    • strapPoint - A small jQuery utility plugin to make working with Bootstrap breakpoints easier.
    • pointbreak.js - It provides a friendly interface to matchMedia with named media queries and easy to create callbacks.

    Copyright and license

    Copyright (C) 2016 amazingSurge.

    Licensed under the LGPL license.

    ⬆ back to top

    Install

    npm i breakpoints-js

    DownloadsWeekly Downloads

    828

    Version

    1.0.6

    License

    LGPL-3.0

    Unpacked Size

    81.8 kB

    Total Files

    17

    Last publish

    Collaborators

    • amazingsurge