yowainwright / mousecase

A JavaScript utility enabling horizontal dragging on mousedown events 🖱

Mousecase 🖱

Mousecase is a JavaScript utility supporting touch-like horizontal scrolling with a mouse! It is a no-nonsense, 0 dependency JavaScript plugin that solves 1 use case:

Scrolling a horizontal browser window plain with a mouse without using a scrollbar.

Synopsis

Being able to horizontally scroll is a default behavior on phones and with trackpads. With Mousecase, the archaic computer mouse pad can keep up! Yay. Users can click down on their computer mouse pad and drag scrollable horizontal browser window content without a scrollbar. This utility can help remove the need to implement a slider or carousel thingy. Therefore, it basically saves lives!

Setup

Install it!

yarn mousecase -D

Use it!

import mouseCase from 'mousecase'

const mousecase = mouseCase('some-selector')
mousecase.init()

That's it! Are you happier now that your customer can scroll horizontal web browser interfaces with a mouse pad just like they are on their phone? I hope so. If not, I'm not a shrink so I can't help you but I empathize—life's tough.

API

Listed below is the small API that Mousecase provides to use it.

MouseCase

MouseCase itself is a factory that takes in 2 arguments.

Arguments

target an string or node that is selected to use mousecase; is required

ex: mouseCase('some-target')

options: {object} containing plugin config

ex: mouseCase('some-target', { cssClass: 'mousecase-fun' })

• activeClass the css class added to the mousecase target element when mousecase is active

• cssClass: the css class added to the mousecase target element

• el the formatted target element

• rule: a boolean rule that defines whether mousecase should run (or not)

• all props are added as defaults if not provided during setup

Methods

init() initiates mousecase (setup).

ex: someMouseCaseInstance.init()

on() turns mousecase back on (after initiation)

ex: someMouseCaseInstance.on()

off() turns mousecase off (after initiation)

ex: someMouseCaseInstance.off()

• There are other methods used within Mousecase but not intended for general use

Demos

Listed below is a basic Mousecase demo. Feel free to share more.

• Bill Murray CodePen
• Please submit a PR with your demo here. 💕

mousecase's Issues

Horizontal Scroll Reference Materials

Requested Update

Reference Materials

Why Is This Update Needed?

Providing reference materials for options and ways to write horizontal scrolling features.

Read about references issues here. Provide paragraph text responses to each header.

Get test coverage up

Why Is This Update Needed?

Test coverage should be as close to 100% as possible.

Read about references issues here. Provide paragraph text responses to each header.

Optimize for Dom thrashing

Requested Update

Optimize for Dom thrashing

Why Is This Update Needed?

It will improve the "working" performance of MouseCase.

Are There Examples Of This Requested Update Elsewhere?

Must look!

Read about references issues here. Provide paragraph text responses to each header.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.