rwd-handler

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);