aurelia-blur-attribute
Advanced tools
This article covers the blur plugin for Aurelia. This plugin is created for managing focus in your application. The plugin supports the use of dynamic elements matching, via either element references or CSS selectors. Online Demo
jspm with following commandjspm install aurelia-blur-attribute
If you use Webpack, install the plugin with the following command
npm install aurelia-blur-attribute --save
If you use the Aurelia CLI, install the plugin with the following command
au import aurelia-blur-attribute
alternatively you can manually add these dependencies to your vendor bundle:
...
"dependencies": [
{
"name": "aurelia-blur-attribute",
"path": "../node_modules/aurelia-blur-attribute/dist/amd",
"main": "aurelia-blur-attribute"
}
]
index.html and locate the element with the attribute aurelia-app. Change it to look like this: <body aurelia-app="main">...</body>
main.js in your src folder with following content: export function configure(aurelia) {
/**
* We will cover reasons behind these options in later sections
*/
let listeningModeOptions = {
pointer: false, // listen for pointer event interaction
touch: false, // listen for touch event interaction
mouse: true, // listen for mouse event interaction
focus: false, // listen for foucs event
windowBlur: false // listen for window blur event (navigating away from window)
};
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-blur-attribute', listeningModeOptions);
aurelia.start().then(a => a.setRoot());
}
There are a few scenarios you can take advantage of the Aurelia blur plugin.
It's clear that our intent is only trigger the blur, when we interact with any elements outside the form element. One may implement it like following:
<div>
<button click.delegate="formIsBlur = false">Show Form</button>
<form if.bind="formIsBlur">
<input blur.trigger="formIsBlur = true" />
<select blur.trigger="formIsBlur = true"></select>
<input blur.trigger="formIsBlur = true" />
</form>
<!-- Or more optimized version -->
<form if.bind="formIsBlur" blur.capture="formIsBlur = true">
<input />
<select></select>
<input />
</form>
</div>
This is often insufficient, as what we do want is to react when either (pointer/ touch/ mouse) down, or focus on elements outside of the form, but what we will get is any focus navigation between inputs. The plugin solves this for you, by listening to some critical events to determine if focus is still inside an element.
<div>
<button click.delegate="formIsBlur = false">Show Form</button>
<form if.bind="formIsBlur" blur.bind="formIsBlur">
<input />
<select ></select>
<input />
</form>
Notice the attribute differences: blur.capture / blur.trigger vs blur.bind. When using blur.bind, we are using the plugin, instead event listener.
TODO
To build the code, follow these steps.
npm install
npm install -g gulp
npm run build
You will find the compiled code in the dist folder, available in three module formats: AMD, CommonJS and ES6.
See gulpfile.js for other tasks related to generating the docs and linting.
npm run test
Thanks goes to Dwayne Charrington for his Aurelia-TypeScript starter package https://github.com/Vheissu/aurelia-typescript-plugin
FAQs
A plugin to help manage focus inside an application.
The npm package aurelia-blur-attribute receives a total of 6 weekly downloads. As such, aurelia-blur-attribute popularity was classified as not popular.
We found that aurelia-blur-attribute demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.