media-screen

    1.0.0 • Public • Published

    Control media query with JavaScript.

    Usage

    var MediaScreen = require('media-screen');
     
    MediaScreen()
      .width()
      .gt(640)
      .then(function () {
        // pass
      }, function () {
        // else
      });

    MediaScreen:

    Media screen is the main function that accepts a single argument, which is an element to watch.

    Pararmeters:

    element optional: default window

    Accepts:

    • Dom Object.

    • CSS Selector.

    Also accepts list of elements. not recommended

    MediaScreen();   // defaults to window
    // or
    MediaScreen(docuemnt.getElementById('main'));
    // or
    MediaScreen('.container.fluid');

    Options, Conditions:

    MediaScreen returns a list of options and conditions methods:

    #### width(): option

    Tell the MediaScreen to watch only the width of the element.

    MediaScreen()
      .width()    
      ...

    width() option returns a list of conditions.

    #### height(): option

    Tell the MediaScreen to watch only the height of the element.

    MediaScreen()
      .height()
      ...

    height() option returns a list of conditions.

    #### always(): condition

    Tells MediaScreen to call the handler whenever the width of the element or its height or both are changed.

    MediaScreen()
      .width()
      .always()
      .then(function (dimensions) {
        // passed
      });
      ...

    always condition returns only the then handler.

    note: when always is called without an option 'dimension', MediaScreen will watch both dimensions.

    #### gt(): condition

    Tells MediaScreen to dispatch an event when width or height is greater than the limit.

    Parameters:

    • limit: {Number}.

    • always: {Boolean}. optional default false runs the callback function each time the element is resized instead of only once when its width or height is greater than the limit.

    • elseAlways: {Boolean}. optional default false runs the else callback function each time the element is resized instead of only once when its width or height is less than the limit.

    MediaScreen()
      .width()
      .gt(1024, true)
      .then(...)

    gt() condition returns only the then handler.

    #### lt(): condition

    Tells MediaScreen to dispatch an event when width or height is less than the limit.

    Parameters:

    • limit: {Number}.

    • always: {Boolean}. optional default false runs the callback function each time the element is resized instead of only once when its width or height is less than the limit.

    • elseAlways: {Boolean}. optional default false runs the else callback function each time the element is resized instead of only once when its width or height is greater than the limit.

    MediaScreen()
      .height()
      .lt(1024, false, true)
      .then(...)

    lt() option returns only the then() handler.

    #### in(): condition

    Tells MediaScreen to dispatch an event when width or height is between min and max arguments range.

    Parameters:

    • min: {Number}.

    • max: {Number}.

    • always: {Boolean}. optional default false runs the callback function each time the element is resized instead of only once when its width or height is between min and max arguments range.

    • elseAlways: {Boolean}. optional default false runs the else callback function each time the element is resized instead of only once when its width or height is out of min and max arguments range.

    MediaScreen()
      .height()
      .in(640, 1024, false, true)
      .then(...)

    in() option returns only the then() handler.

    #### out(): condition

    Tells MediaScreen to dispatch an event when width or height is out of min and max arguments range.

    Parameters:

    • min: {Number}.

    • max: {Number}.

    • always: {Boolean}. optional default false runs the callback function each time the element is resized instead of only once when its width or height is out of min and max arguments range.

    • elseAlways: {Boolean}. optional default false runs the else callback function each time the element is resized instead of only once when its width or height is between min and max arguments range.

    MediaScreen()
      .height()
      .in(640, 1024, false, true)
      .then(...)

    out() option returns only the then() handler.

    #### landscape(): condition

    Tells MediaScreen to dispatch an event when the width of the element is greater than its height.

    Parameters:

    • always: {Boolean}. optional default false runs the callback function each time the element is resized instead of only once when its width is greater than its height.

    • elseAlways: {Boolean}. optional default false runs the else callback function each time the element is resized instead of only once when its height is greater than its width.

    MediaScreen()
      .landscape(false, true)
      .then(...)

    landscape() option returns only the then() handler.

    #### portrait(): condition

    Tells MediaScreen to dispatch an event when the height of the element is greater than its width.

    Parameters:

    • always: {Boolean}. optional default false runs the callback function each time the element is resized instead of only once when its height is greater than its width.

    • elseAlways: {Boolean}. optional default false runs the else callback function each time the element is resized instead of only once when its width is greater than its height.

    MediaScreen()
      .portrait(false, true)
      .then(...)

    portrait() option returns only the then() handler.

    Handler:

    #### then():

    then has two callback handlers called whenever a condition is passed unless you set the always paramter to true, then it will be called whenever the element is resized and it still passes the condition.

    Parameters:

    • callback: {Function}.

    • elseCalback: {Function}. optional

    The callbacks will have the context of the element and a single argument object describing the current dimensions of the element.

    MediaScreen()
      .portrait(false, true)
      .then(function (dimensions) {
        console.log(dimensions);  // { width: 465, height: 759 }
      }, function (dimensions) {
     
      })
      .MediaScreen(...)
      ...

    then handler returns a MediaScreen wrapper for new query.

    Thank you...

    Install

    npm i media-screen

    DownloadsWeekly Downloads

    1

    Version

    1.0.0

    License

    ISC

    Last publish

    Collaborators

    • ammar6885