RwdHandler

Handling responsive behavior.

Execute given behavior under specific width, and execute rollback function when the screen width not in the specific width.

Installation

Just clone or download the zip of this repository

or via npm:

# npm install --save rwd-handler

or

$ yarn add rwd-handler

Setup

<script src='path/to/RwdHandler.min.js'></script>

or

// import in your .js file
import RwdHandler from 'rwd-handler';

RwdHandler()

• minWidth: number Minimum width of screen.
• maxWidth: number Maximum width of screen.
• behavior: function
  The function going to execute under given screen width.
• rollback: function
  The function for returning behavior to previous state.

NOTE: If rollback function is given and an event listener is added in behavior, the event should call off() in rollback function. e.g. $(element).off('event'), or call off() before bind the event in behavior. e.g. $(element).off('event').on('event', fn).

const rwdHandler = new RwdHandler({
    minWidth: 480,
    maxWidth: 720,
    behavior: rwdBehavior, //behavior function
    rollback: rollback //rollback function
});

execute()

Execute rwd behavior under specific width, and execute rollback function when the screen width not in the specific width.

rwdHandler.execute();

stopExecute()

Stop executing rwd behavior.

rwdHandler.stopExecute();

changeDetectWidth(minWidth, maxWidth)

Change rwd detect width.

• minWidth: number Minimum width of screen.
• maxWidth: number Maximum width of screen.

rwdHandler.changeDetectWidth(0, 720);

changeBehavior(behavior)

Change rwd behavior.

• behavior: function
  The function going to execute under given screen width.

rwdHandler.changeBehavior(behavior);

changeRollback(rollback)

Change rwd rollback function.

• rollback: function
  The function for returning behavior to previous state.

rwdHandler.changeRollback(rollback);

changeConfig(options)

Change all handler config.

• options: object
  RwdHandler options.

rwdHandler.changeConfig(options);