npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

volley

v1.2.0

Published

A JavaScript CSS breakpoint interpreter

Downloads

12

Readme

Volley

A JavaScript CSS breakpoint interpreter

npm version Build Status

Volley is for those times you need to trigger JavaScript functions when your responsive media queries fire. This library works with any grid, it reads your CSS, and it follows your naming conventions. There is no limit on the number of breakpoints you can have either!

Volley is written using commonjs with browserify/webpack in mind. If you think you'll find Volley useful as a standalone global library, please let me know (or submit a PR).

Usage

Setting up Volley is simple. You need to configure a little bit of CSS, and then require the library with either webpack or browserify.

CSS

In order for Volley to read in your media queries, you need to first configure your css with a couple of pseudo selectors on the body element as follows. These values are for demonstration purposes, feel free to substitute with names and breakpoints that fit your project requirements.

  body:before {
    content: "small";
    display: none;
  }

  body:after {
    content: "small,medium,large,extralarge";
    display: none;
  }

  @media only screen and (min-width: 768px) {
    body:before {
      content: "medium";
    }
  }

  @media only screen and (min-width: 922px) {
    body:before {
      content: "large";
    }
  }

  @media only screen and (min-width: 1200px) {
    body:before {
      content: "extralarge";
    }
  }

As you can see, the before pseudo selector's content property holds the current viewport width name (as chosen by you). The after pseudo selector's content property contains all of your viewport width names in ascending order.

When the viewport width changes, the content value changes, and the resize event is triggered, causing the JavaScript event handlers you set up to execute.

API

With the CSS out of the way, you can now get right into using Volley.

Triggers

options

There are currently 2 options you can pass to the trigger functions, they are fireOnSet and nextTick.

fireOnSet [true]

Should the handler function be triggered immediately after it is set, if the current breakpoint meets conditions of the handler. True by default.

nextTick [true]

Should the handler be executed on the next JavaScript frame. True by default.

Methods

triggerAt

The triggerAt method is for setting handlers to execute at a specific breakpoint.

import volley from 'volley';

volley.triggerAt('medium', (evt) => { /* handle medium viewport */ });

// options as a second argument should you want/need to change them
volley.triggerAt(
  'medium',
  {fireOnSet: true, nextTick: true},
  () => { /* handle medium viewport */ }
);

triggerAtAndAbove

The triggerAtAndAbove method is for setting handlers to execute at the stated breakpoint and above (inclusive).

import volley from 'volley';

// This will trigger for medium, large, and extralarge, but not small viewport
volley.triggerAtAndAbove('medium', (evt) => { triggerAtAndAbove });

// options as a second argument should you want/need to change them
volley.triggerAtAndAbove(
  'medium',
  {fireOnSet: true, nextTick: true},
  () => { /* handle medium viewport */ }
);

triggerAtAndBelow

The triggerAtAndBelow method is for setting handlers to execute at the stated breakpoint and below (inclusive).

import volley from 'volley';

// This will trigger for small and medium, but not large or extralarge viewports
volley.triggerAtAndBelow('medium', (evt) => { triggerAtAndBelow });

// options as a second argument should you want/need to change them
volley.triggerAtAndBelow(
  'medium',
  {fireOnSet: true, nextTick: true},
  () => { /* handle medium viewport */ }
);

triggerAtAndBetween

The triggerAtAndBetween method is for setting handlers to execute between the stated breakpoints (inclusive).

import volley from 'volley';

// This will trigger for medium and large, but not small or extralarge viewports
volley.triggerAtAndBetween('medium', 'large', (evt) => { /* handle medium and large viewport */ });

// options as a second argument should you want/need to change them
volley.triggerAtAndBetween(
  'medium',
  'large',
  {fireOnSet: true, nextTick: true},
  () => { /* handle medium viewport */ }
);

Comparators

For comparing the current breakpoint against the others

isGreaterThan -> Boolean

The isGreaterThan method is testing whether the first argument (breakpoint A) is greater than the second argument (breakpoint B). The first argument can be omitted, the current breakpoint is treated as the left hand of the expression when only one argument is passed in. isGreaterThan returns a Boolean, and will return false if either breakpoint does not exist.

import volley from 'volley';
// given that the current breakpoint is medium

// if only one arg, will test if currentBreakpoint > arg1
let breakpoint = volley.isGreaterThan('small'); // true
let breakpoint = volley.isGreaterThan('medium'); // false
let breakpoint = volley.isGreaterThan('nonexistent'); // false

// if 2 args, will test if arg1 > arg2
let breakpoint = volley.isGreaterThan('medium', 'small'); // true
let breakpoint = volley.isGreaterThan('medium','medium'); // false
let breakpoint = volley.isGreaterThan('medium', 'nonexistent'); // false
let breakpoint = volley.isGreaterThan('nonexistent', 'medium'); // false

isGreaterThanOrEqual -> Boolean

The isGreaterThanOrEqual method is testing whether the first argument (breakpoint A) is greater than or equal to the second argument (breakpoint B). The first argument can be omitted, the current breakpoint is treated as the left hand of the expression when only one argument is passed in. isGreaterThanOrEqual returns a Boolean, and will return false if either breakpoint does not exist.

import volley from 'volley';
// given that the current breakpoint is medium

// if only one arg, will test if currentBreakpoint >= arg1
let breakpoint = volley.isGreaterThanOrEqual('small'); // true
let breakpoint = volley.isGreaterThanOrEqual('medium'); // true
let breakpoint = volley.isGreaterThanOrEqual('large'); // false
let breakpoint = volley.isGreaterThanOrEqual('nonexistent'); // false

// if 2 args, will test if arg1 >= arg2
let breakpoint = volley.isGreaterThanOrEqual('medium', 'small'); // true
let breakpoint = volley.isGreaterThanOrEqual('medium', 'medium'); // true
let breakpoint = volley.isGreaterThanOrEqual('medium', 'large'); // false
let breakpoint = volley.isGreaterThanOrEqual('medium', 'nonexistent'); // false
let breakpoint = volley.isGreaterThanOrEqual('nonexistent', 'medium'); // false

isLessThan -> Boolean

The isLessThan method is testing whether the first argument (breakpoint A) is less than the second argument (breakpoint B). The first argument can be omitted, the current breakpoint is treated as the left hand of the expression when only one argument is passed in. isLessThan returns a Boolean, and will return false if either breakpoint does not exist.

import volley from 'volley';
// given that the current breakpoint is medium

// if only one arg, will test if currentBreakpoint < arg1
let breakpoint = volley.isLessThan('large'); // true
let breakpoint = volley.isLessThan('medium'); // false
let breakpoint = volley.isLessThan('nonexistent'); // false

// if 2 args, will test if arg1 < arg2
let breakpoint = volley.isLessThan('medium', 'large'); // true
let breakpoint = volley.isLessThan('medium', 'medium'); // false
let breakpoint = volley.isLessThan('medium', 'nonexistent'); // false
let breakpoint = volley.isLessThan('nonexistent', 'medium'); // false

isLessThanOrEqual -> Boolean

The isLessThanOrEqual method is testing whether the first argument (breakpoint A) is less than or equal to the second argument (breakpoint B). The first argument can be omitted, the current breakpoint is treated as the left hand of the expression when only one argument is passed in. isLessThanOrEqual returns a Boolean, and will return false if either breakpoint does not exist.

import volley from 'volley';
// given that the current breakpoint is medium

// if only one arg, will test if currentBreakpoint <= arg1
let breakpoint = volley.isLessThanOrEqual('large'); // true
let breakpoint = volley.isLessThanOrEqual('medium'); // true
let breakpoint = volley.isLessThanOrEqual('small'); // false
let breakpoint = volley.isLessThanOrEqual('nonexistent'); // false

// if 2 args, will test if arg1 <= arg2
let breakpoint = volley.isLessThanOrEqual('medium', 'large'); // true
let breakpoint = volley.isLessThanOrEqual('medium', 'medium'); // true
let breakpoint = volley.isLessThanOrEqual('medium', 'small'); // false
let breakpoint = volley.isLessThanOrEqual('medium', 'nonexistent'); // false
let breakpoint = volley.isLessThanOrEqual('nonexistent', 'medium'); // false

isEqual -> Boolean

The isEqual method is testing whether the first argument (breakpoint A) is equal to the second argument (breakpoint B). The first argument can be omitted, the current breakpoint is treated as the left hand of the expression when only one argument is passed in. isEqual returns a Boolean, and will return false if either breakpoint does not exist.

import volley from 'volley';
// given that the current breakpoint is medium

// if only one arg, will test if currentBreakpoint === arg1
let breakpoint = volley.isEqual('large'); // false
let breakpoint = volley.isEqual('medium'); // true
let breakpoint = volley.isEqual('nonexistent'); // false

// if 2 args, will test if arg1 === arg2
let breakpoint = volley.isEqual('medium', 'large'); // false
let breakpoint = volley.isEqual('medium', 'medium'); // true
let breakpoint = volley.isEqual('medium', 'nonexistent'); // false
let breakpoint = volley.isEqual('nonexistent', 'medium'); // false

Getters

getCurrentBreakpoint -> String

The getCurrentBreakpoint method is for retrieving the current breakpoint programmatically. It returns a String of the current breakpoint.

import volley from 'volley';
// given that the current breakpoint is medium


let breakpoint = volley.getCurrentBreakpoint(); // "medium"