Security News
Nightmares on npm: How Two Malicious Packages Facilitate Data Theft and Destruction
Our threat research team breaks down two malicious npm packages designed to exploit developer trust, steal your data, and destroy data on your machine.
ember-responds-to
Advanced tools
This Ember CLI addon makes it easy to handle browser events in your components.
resize
and call resize
.scroll
and call scroll
.enterKeydown
and call enterKeydown
.escKeydown
and call escKeydown
.print
and call print
.The scroll and resize events are debounced using requestAnimationFrame
.
The enter and esc keydown event handlers are called in LIFO order and each can stop "propagation" with a truthy return value.
The print event is detected with matchMedia
so does not support IE9 and below (see http://caniuse.com/#feat=matchmedia for browser support).
Install the addon.
ember install ember-responds-to
Import the mixins in a component and use the events or the handlers.
import Component from '@ember/component';
import RespondsToEnterKeydown from 'ember-responds-to/mixins/responds-to-enter-keydown';
import RespondsToEscKeydown from 'ember-responds-to/mixins/responds-to-esc-keydown';
import RespondsToResize from 'ember-responds-to/mixins/responds-to-resize';
import RespondsToScroll from 'ember-responds-to/mixins/responds-to-scroll';
import RespondsToPrint from 'ember-responds-to/mixins/responds-to-print';
import { on } from '@ember/object/evented';
export default Component.extend(
RespondsToEnterKeydown,
RespondsToEscKeydown,
RespondsToResize,
RespondsToScroll,
RespondsToPrint,
{
classNameBindings: [ 'isLandscape:landscape:portrait' ],
enterKeydown() {
this.sendAction('submit');
},
escKeydown() {
this.sendAction('close');
},
logResize: on('resize', function () {
console.log('resize event triggered');
}),
logScroll: on('scroll', function () {
console.log('scroll event triggered');
}),
logPrint: on('print', function () {
console.log('print event triggered');
}),
resize: () => console.log('resize handler called'),
scroll: () => console.log('scroll handler called'),
print: () => console.log('print handler called'),
setLandscape: on('didInsertElement', 'resize', function () {
this.set('isLandscape', window.innerWidth > window.innerHeight);
}),
});
If you use phantomjs
for testing you need to include a polyfill for requestAnimationFrame
. To do so, add the file at https://gist.github.com/paulirish/1579671 to vendor/
and add the following line to your ember-cli-build.js
.
app.import('vendor/rAF.js', { type: 'test' });
FAQs
Ember mixins for browser event handling.
The npm package ember-responds-to receives a total of 2 weekly downloads. As such, ember-responds-to popularity was classified as not popular.
We found that ember-responds-to demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Our threat research team breaks down two malicious npm packages designed to exploit developer trust, steal your data, and destroy data on your machine.
Security News
A senior white house official is urging insurers to stop covering ransomware payments, indicating possible stricter regulations to deter cybercrime.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.