Coffeekraken.io 0.0.1

Gridle JS (1.0)

Gridle js is a little file that allows you to be notified when your page change of states, witch state is active, witch not, and witch states have changed. All of this with a simple syntax.

Installation

Gridle.js is part of the package that you get from NPM. To install it, simply reference the gridle.js in your html file like so :

<head>
    <!-- ... -->
    <script src=".../gridle.js"></script>

    <!-- if need element-queries support -->
    <script src=".../gridle-eq.js"></script>
    <!-- ... -->
</head>

Or load it through your ES6 files like so:

import 'coffeekraken-gridle/js/gridle';

Setup

This part is optional but is you want to configure the plugin, you will need to do this

Gridle.init ( {settings} );

These are the options available

Gridle.init({

    // make gridle output some console.log
    debug : true,

    // callback when the states changes
    onUpdate : function(updatedStates, activeStates, inactiveStates) {
        // do something here...
    }

});

API

Gridle.js provide a simple and clean API.

on

This method allows you to subscribe to an event emited by Gridle.js

Gridle.on('update', function(updatedStates, activeStates, inactiveStates) {
    // do something here
});

isReady

This method allows you to check if gridle is ready. This mean that it has finded the states in your css.

if ( Gridle.isReady() ) {
    // do something here...
}

isActive

This method allows you to check if a state is active

if ( Gridle.isActive('mobile') ) {
    console.log('mobile state is active');
}

getDefaultState

This method allows you to get the default state

var defaultState = Gridle.getDefaultState();

getRegistredStates

This method allows you to get all the registered states

var states = Gridle.getRegisteredStates();

getUpdatedStates

This method allows you to get all updated states. Be careful, this will be available only when the states change, then, when the screen is resized and the states are the same, this will be empty...

var states = Gridle.getUpdatedStates();

getUpdatedStatesNames

Same as getUpdatedStates, but return an array of names only

var states = Gridle.getUpdatedStatesNames();

getActiveStates

Allows you to get the active states

var states = Gridle.getActiveStates();

getActiveStatesNames

Same as getActiveStates, but return an array of names only

var states = Gridle.getActiveStatesNames();

getInactiveStates

Allows you to get the unactive states

var states = Gridle.getInactiveStates();

getInactiveStatesNames

Same as getUnactiveStates, but return an array of names only

var states = Gridle.getInactiveStatesNames();

Events

Gridle js trigger some events to be notified of states change, etc... Here's a list

ready

This event notify that gridle has find the states in css and is ready to check changes

update

This event is the main one. It notifies you that some states have changed.

Subscribe to an event

The events in gridle.js are emitted through multiple channel. jQuery events are supported and you can also use the simple built-in event function to subscribe to an event. Here's how :

Built-in

Gridle.on('update', function(updatedStates, activeStates, inactiveStates) {
    // do something here...
});

jQuery

By using jQuery, you can either subscribe directly on the Gridle object, or through the "body" DOM node

// directly on Gridle :
jQuery(Gridle).bind('update', function(updatedStates, activeStates, inactiveStates) {
    // do something here...
});

// through the body node :
jQuery('body').trigger('gridle.update', function(updatedStates, activeStates, inactiveStates) {
    // do something here...
});

Be careful, when listen for event through the body tag, the event name will be prefixed by "gridle.". For example, update will become "gridle.update"

Element queries support

Gridle support element queries but for now, the browsers did not support them natively. To use element queries, you need to integrate the gridle-eq.js file.

Element queries "polyfill" is provided by Marc J Schmidt. Thanks a lot to him for his wonderfull work! You can integrate his polyfill instead of using the gridle-eq.js file if you prefer.