New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details → →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

mousecase

Package Overview
Dependencies
Maintainers
1
Versions
17
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

mousecase - npm Package Compare versions

Comparing version
1.1.0
 to
1.1.1
+2
-2
dist/mousecase.es.js
/**
mousecase - Mousecase is a JavaScript utility supporting touch-like horizontal scrolling with a mouse!
@version v1.1.0
@version v1.1.1
@link https://github.com/yowainwright/mousecase#readme

@@ -10,3 +10,3 @@ @author Jeff Wainwright <yowainwright@gmail.com> (https://jeffry.in)

* mouseCase
* @param {target} string || node
* @param {target} string || node
* @param {props} object

@@ -13,0 +13,0 @@ * @param {props.cssClass} string

+2
-2
dist/mousecase.js
/**
mousecase - Mousecase is a JavaScript utility supporting touch-like horizontal scrolling with a mouse!
@version v1.1.0
@version v1.1.1
@link https://github.com/yowainwright/mousecase#readme

@@ -16,3 +16,3 @@ @author Jeff Wainwright <yowainwright@gmail.com> (https://jeffry.in)

* mouseCase
* @param {target} string || node
* @param {target} string || node
* @param {props} object

@@ -19,0 +19,0 @@ * @param {props.cssClass} string

+1
-1
dist/mousecase.min.js
/**
mousecase - Mousecase is a JavaScript utility supporting touch-like horizontal scrolling with a mouse!
@version v1.1.0
@version v1.1.1
@link https://github.com/yowainwright/mousecase#readme

@@ -5,0 +5,0 @@ @author Jeff Wainwright <yowainwright@gmail.com> (https://jeffry.in)

+4
-7
package.json
{
"name": "mousecase",
"version": "1.1.0",
"version": "1.1.1",
"description": "Mousecase is a JavaScript utility supporting touch-like horizontal scrolling with a mouse!",

@@ -56,2 +56,3 @@ "main": "dist/mousecase.js",

"babel-jest": "24.7.1",
"codecov": "^3.3.0",
"conventional-changelog-cli": "^2.0.11",

@@ -67,3 +68,2 @@ "eslint": "5.16.0",

"jest": "24.7.1",
"jest-puppeteer": "^4.0.0",
"markdown-spellcheck": "^1.3.1",

@@ -73,10 +73,7 @@ "markdownlint-cli": "^0.16.0",

"rollup": "1.12.3",
"rollup-plugin-babel": "4.3.2",
"rollup-plugin-replace": "2.2.0",
"rollup-plugin-uglify": "6.0.2",
"write-good": "^1.0.0"
},
"dependencies": {
"codecov": "^3.3.0",
"rollup-plugin-babel": "4.3.2",
"rollup-plugin-uglify": "6.0.2"
}
}
+17
-13
README.md

@@ -16,7 +16,7 @@ ![MouseCase](https://yowainwright.imgix.net/mousecase/mousecase.jpg?auto=format)

> Scrolling a horizontal browser window plain with a mouse **without** using a scrollbar.
> Scrolling a horizontal section of a webpage 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!
Being able to horizontally scroll is a default behavior on phones and with trackpads. With Mousecase, the archaic computer mouse can keep up! Yay. Users can click down on their computer mouse and drag scrollable horizontal webpage content without a scrollbar. This utility can help remove the need to implement a slider or carousel thingy. Therefore, it basically saves lives.

@@ -37,10 +37,10 @@ ## Setup

import mouseCase from 'mousecase'
import mousecase from 'mousecase'
const mousecase = mouseCase('some-selector')
mousecase.init()
const someMouseCaseInstance = mousecase('some-selector')
someMouseCaseInstance.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.
That's it! Are you happier now that people that use your webpage 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.

@@ -51,17 +51,17 @@ ## API

### MouseCase
### MouseCase Factory
MouseCase itself is a factory that takes in 2 arguments.
MouseCase itself is a factory function that takes in 2 arguments.
#### `Arguments`
**`target`** an `string` or `node` that is selected to use mousecase; is required
> **ex:** `mouseCase('some-target')`
**`target`:** an `string` or `node` that is selected to use mousecase; is required
> **ex:** `const someMouseCaseInstance = mousecase('some-target')`
**`props`:** `{object}` containing plugin config
> **ex:** `mouseCase('some-target', { cssClass: 'mousecase-fun' })`
> **ex:** `someMouseCaseInstance = mousecase('some-target', { cssClass: 'mousecase-fun' })`
- **`activeClass`** the css class added to the mousecase target element when mousecase is active
- **`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
- **`el`:** the formatted target element
- **`rule`:** a boolean rule that defines whether mousecase should run (or not)

@@ -90,1 +90,5 @@

- Please submit a PR with your demo [here](/pulls). 💕
## Help and thanks
Mousecase was made for ease of use, not to change the world. This utility addresses a common user experience issue. Please help if you'd like! You will get praise and love to the best of my ability with and updates or ideas that you have.
+1
-1
src/index.js
/**
* mouseCase
* @param {target} string || node
* @param {target} string || node
* @param {props} object

@@ -5,0 +5,0 @@ * @param {props.cssClass} string

-9
app.js
const express = require('express')
const app = express()
const port = 3000
app.use(express.static('app'))
app.use(express.static('dist'))
app.listen(port, () => console.info(`App up 🎸; listening on port ${port}!`))
-38
app/index.css
* {
font-family: arial;
font-weight: 700;
}
ul {
display: grid;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
li {
grid-row: 1;
text-align: center;
}
figcaption {
background: #000;
color: #fff;
display: inline-block;
font-size: 1.25rem;
margin-top: -4rem;
padding: .5rem;
}
a {
font-style: italic;
text-decoration: none;
}
.mouse-case {
margin-left: auto;
margin-right: auto;
max-width: 100vw;
overflow-y: auto;
}
-17
app/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tests</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body id="body">
<h1>Tests</div>
<div id="test-1"></div>
<script src="mousecase.js"></script>
<script src="load-dom.js"></script>
<script src="test.js"></script>
</body>
</html>
-72
app/load-dom.js
const test1Dom = `
<div id="test-1-container" class="test-1__container">
<nav id="mouse-case" class="mouse-case">
<ul class="mouse-case__items">
<li class="mouse-case__item">
<figure class="mouse-case__figure">
<a href="" class="mouse-case__link" />
<img class="mouse-case__img" src="https://fillmurray.com/200/400" alt="mouse case" />
<figcaption class="mouse-case__caption">Mouse Case!</figcaption>
</a>
</figure>
</li>
<li class="mouse-case__item">
<figure class="mouse-case__figure">
<a href="" class="mouse-case__link" />
<img class="mouse-case__img" src="https://fillmurray.com/210/400" alt="mouse case" />
<figcaption class="mouse-case__caption">Mouse Case!</figcaption>
</a>
</figure>
</li>
<li class="mouse-case__item">
<figure class="mouse-case__figure">
<a href="" class="mouse-case__link" />
<img class="mouse-case__img" src="https://fillmurray.com/230/400" alt="mouse case" />
<figcaption class="mouse-case__caption">Mouse Case!</figcaption>
</a>
</figure>
</li>
<li class="mouse-case__item">
<figure class="mouse-case__figure">
<a href="" class="mouse-case__link" />
<img class="mouse-case__img" src="https://fillmurray.com/250/400" alt="mouse case" />
<figcaption class="mouse-case__caption">Mouse Case!</figcaption>
</a>
</figure>
</li>
<li class="mouse-case__item">
<figure class="mouse-case__figure">
<a href="" class="mouse-case__link" />
<img class="mouse-case__img" src="https://fillmurray.com/235/400" alt="mouse case" />
<figcaption class="mouse-case__caption">Mouse Case!</figcaption>
</a>
</figure>
</li>
<li class="mouse-case__item">
<figure class="mouse-case__figure">
<a href="" class="mouse-case__link" />
<img class="mouse-case__img" src="https://fillmurray.com/245/400" alt="mouse case" />
<figcaption class="mouse-case__caption">Mouse Case!</figcaption>
</a>
</figure>
</li>
<li class="mouse-case__item">
<figure class="mouse-case__figure">
<a href="" class="mouse-case__link" />
<img class="mouse-case__img" src="https://fillmurray.com/190/400" alt="mouse case" />
<figcaption class="mouse-case__caption">Mouse Case!</figcaption>
</a>
</figure>
</li>
</ul>
</nav>
</div>
`
window.addEventListener('load', () => {
const test1 = document.getElementById('test-1')
test1.innerHTML = test1Dom
/* eslint-disable */
const mouseCase = mousecase('#mouse-case')
mouseCase.init()
})
-1
app/test.js
-6
jest.puppeteer.json
{
"globalSetup": "jest-environment-puppeteer/setup",
"globalTeardown": "jest-environment-puppeteer/teardown",
"preset": "jest-puppeteer",
"testEnvironment": "jest-environment-puppeteer"
}