🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
DemoInstallSign in
Socket
DemoInstallSign in

stimulus-scroll-to

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

stimulus-scroll-to - npm Package Compare versions

Comparing version

1.0.0
to
2.0.0

15

CHANGELOG.md

@@ -9,2 +9,17 @@ # Changelog

## [2.0.0] - 2020-12-05
### Added
- Support for Stimulus 2.0
- Namespace warn message
### Changed
** Breaking ** Using the new `values` static property.
```diff
- <a href="#awesome-stuff-here" data-controller="scroll-to" data-scroll-to-offset="50">Scroll</a>
+ <a href="#awesome-stuff-here" data-controller="scroll-to" data-scroll-to-offset-value="50">Scroll</a>
## [1.0.0] - 2020-11-24

@@ -11,0 +26,0 @@

29

dist-node/index.js

@@ -7,3 +7,17 @@ 'use strict';

class index extends stimulus.Controller {
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
class _class extends stimulus.Controller {
initialize() {

@@ -15,4 +29,4 @@ this.scroll = this.scroll.bind(this);

this.element.addEventListener('click', this.scroll);
this.offset = this.data.get('offset') || this.defaultOptions.offset || 10;
this.behavior = this.data.get('behavior') || this.defaultOptions.behavior || 'smooth';
this.offset = this.offsetValue || this.defaultOptions.offset || 10;
this.behavior = this.behaviorValue || this.defaultOptions.behavior || 'smooth';
}

@@ -30,3 +44,3 @@

if (!target) {
console.warn(`The element with the id: "${id}" does not exist on the page.`);
console.warn(`[stimulus-scroll-to] The element with the id: "${id}" does not exist on the page.`);
return;

@@ -49,3 +63,8 @@ }

exports.default = index;
_defineProperty(_class, "values", {
offset: Number,
behavior: String
});
exports.default = _class;
//# sourceMappingURL=index.js.map

17

dist-src/index.js

@@ -0,3 +1,5 @@

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
import { Controller } from 'stimulus';
export default class extends Controller {
export default class _class extends Controller {
initialize() {

@@ -9,4 +11,4 @@ this.scroll = this.scroll.bind(this);

this.element.addEventListener('click', this.scroll);
this.offset = this.data.get('offset') || this.defaultOptions.offset || 10;
this.behavior = this.data.get('behavior') || this.defaultOptions.behavior || 'smooth';
this.offset = this.offsetValue || this.defaultOptions.offset || 10;
this.behavior = this.behaviorValue || this.defaultOptions.behavior || 'smooth';
}

@@ -24,3 +26,3 @@

if (!target) {
console.warn(`The element with the id: "${id}" does not exist on the page.`);
console.warn(`[stimulus-scroll-to] The element with the id: "${id}" does not exist on the page.`);
return;

@@ -41,2 +43,7 @@ }

}
}
_defineProperty(_class, "values", {
offset: Number,
behavior: String
});

16

dist-web/index.js
import { Controller } from 'stimulus';
class index extends Controller {
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
class _class extends Controller {
initialize() {

@@ -10,4 +11,4 @@ this.scroll = this.scroll.bind(this);

this.element.addEventListener('click', this.scroll);
this.offset = this.data.get('offset') || this.defaultOptions.offset || 10;
this.behavior = this.data.get('behavior') || this.defaultOptions.behavior || 'smooth';
this.offset = this.offsetValue || this.defaultOptions.offset || 10;
this.behavior = this.behaviorValue || this.defaultOptions.behavior || 'smooth';
}

@@ -25,3 +26,3 @@

if (!target) {
console.warn(`The element with the id: "${id}" does not exist on the page.`);
console.warn(`[stimulus-scroll-to] The element with the id: "${id}" does not exist on the page.`);
return;

@@ -44,3 +45,8 @@ }

export default index;
_defineProperty(_class, "values", {
offset: Number,
behavior: String
});
export default _class;
//# sourceMappingURL=index.js.map

5

package.json
{
"name": "stimulus-scroll-to",
"description": "A Stimulus controller to scroll to elements.",
"version": "1.0.0",
"version": "2.0.0",
"license": "MIT",

@@ -40,4 +40,5 @@ "files": [

"prettier-standard": "16.4.1",
"smoothscroll-polyfill": "^0.4.4",
"snowpack": "^2.17.1",
"stimulus": "^1.1.1"
"stimulus": "^2.0.0"
},

@@ -44,0 +45,0 @@ "private": false,

86

README.md

@@ -13,90 +13,12 @@ # Stimulus ScrollTo

## Installation
## 📚 Documentation
```bash
$ yarn add stimulus-scroll-to
```
See [stimulus-scroll-to documentation](https://stimulus-components.netlify.app/docs/components/stimulus-scroll-to/).
And use it in your JS file:
```js
import { Application } from "stimulus"
import ScrollTo from "stimulus-scroll-to"
## 👷‍♂️ Contributing
const application = Application.start()
application.register("scroll-to", ScrollTo)
```
## Usage
```html
<a href="#awesome-stuff-here" data-controller="scroll-to">Scroll to #awesome-stuff-here</a>
<h2 id="awesome-stuff-here">Awesome stuff here</h2>
```
With options:
```html
<a
href="#awesome-stuff-here"
data-controller="scroll-to"
data-scroll-to-offset="150"
data-scroll-to-behavior="auto"
>Scroll to #awesome-stuff-here</a>
<h2 id="awesome-stuff-here">Awesome stuff here</h2>
```
## Configuration
| Attribute | Default | Description | Optional |
| --------- | ------- | ----------- | -------- |
| `data-scroll-to-offset` | `10` | Offset in pixels from top of the element. | ✅ |
| `data-scroll-to-behavior` | `smooth` | The scroll behavior. `auto` or `smooth`. | ✅ |
## Extending Controller
You can use inheritance to extend the functionality of any Stimulus component.
```js
import ScrollTo from "stimulus-scroll-to"
export default class extends ScrollTo {
connect() {
super.connect()
console.log("Do what you want here.")
}
// You can set default options in this getter for all your anchors.
get defaultOptions () {
return {
offset: 100,
behavior: 'auto'
}
}
}
```
This controller will automatically have access to targets defined in the parent class.
If you override the `connect`, `disconnect` or any other methods from the parent, you'll want to call `super.method()` to make sure the parent functionality is executed.
## Development
### Linter
[Prettier](https://prettier.io/) and [ESLint](https://eslint.org/) are responsible to lint and format this component:
```bash
$ yarn lint
$ yarn format
```
## Contributing
Do not hesitate to contribute to the project by adapting or adding features ! Bug reports or pull requests are welcome.
## Credits
## 📝 License
This controller is inspired [excid3/tailwindcss-stimulus-components](https://github.com/excid3/tailwindcss-stimulus-components/blob/master/src/autosave.js).
## License
This project is released under the [MIT](http://opensource.org/licenses/MIT) license.
dist-node/index.js.map

Sorry, the diff of this file is not supported yet

dist-web/index.js.map

Sorry, the diff of this file is not supported yet