{"id":16532216,"url":"https://github.com/bigopon/aurelia-blur-attribute","last_synced_at":"2025-10-28T11:30:59.589Z","repository":{"id":57186790,"uuid":"101445881","full_name":"bigopon/aurelia-blur-attribute","owner":"bigopon","description":"Aurelia Blur attribute plugin, manage your application focus with less effort.","archived":false,"fork":false,"pushed_at":"2018-07-02T05:50:18.000Z","size":57,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-01T14:45:08.013Z","etag":null,"topics":["aurelia","aurelia-blur-attribute"],"latest_commit_sha":null,"homepage":"http://aurelia-blur.bigopon.surge.sh/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bigopon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-25T22:16:02.000Z","updated_at":"2018-11-15T19:20:21.000Z","dependencies_parsed_at":"2022-08-28T10:51:39.321Z","dependency_job_id":null,"html_url":"https://github.com/bigopon/aurelia-blur-attribute","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigopon%2Faurelia-blur-attribute","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigopon%2Faurelia-blur-attribute/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigopon%2Faurelia-blur-attribute/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bigopon%2Faurelia-blur-attribute/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bigopon","download_url":"https://codeload.github.com/bigopon/aurelia-blur-attribute/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238638454,"owners_count":19505603,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aurelia","aurelia-blur-attribute"],"created_at":"2024-10-11T18:11:58.896Z","updated_at":"2025-10-28T11:30:54.281Z","avatar_url":"https://github.com/bigopon.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# aurelia-blur-attribute\n\n[![Join the chat at https://gitter.im/aurelia/discuss](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/aurelia/discuss?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n[![CircleCI](https://circleci.com/gh/bigopon/aurelia-blur-attribute.svg?style=svg)](https://circleci.com/gh/bigopon/aurelia-blur-attribute)\n\n## [Introduction]\n\nThis 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](http://aurelia-blur.bigopon.surge.sh/)\n\n\n## [Installing The Plugin]\n\n1. In your **JSPM**-based project install the plugin via `jspm` with following command\n\n```shell\njspm install aurelia-blur-attribute\n```\n\nIf you use **Webpack**, install the plugin with the following command\n\n```shell\nnpm install aurelia-blur-attribute --save\n```\n\nIf you use the **Aurelia CLI**, install the plugin with the following command\n\n```shell\nau import aurelia-blur-attribute\n```\n\nalternatively you can manually add these dependencies to your vendor bundle:\n\n```json\n  ...\n  \"dependencies\": [\n    {\n      \"name\": \"aurelia-blur-attribute\",\n      \"path\": \"../node_modules/aurelia-blur-attribute/dist/amd\",\n      \"main\": \"aurelia-blur-attribute\"\n    }\n  ]\n```\n\n2. Make sure you use [manual bootstrapping](http://aurelia.io/docs#startup-and-configuration). In order to do so open your `index.html` and locate the element with the attribute aurelia-app. Change it to look like this:\n\n```html\n  \u003cbody aurelia-app=\"main\"\u003e...\u003c/body\u003e\n```\n\n3. Create (if you haven't already) a file `main.js` in your `src` folder with following content:\n\n```js\n  export function configure(aurelia) {\n\n    /**\n     * We will cover reasons behind these options in later sections\n     */\n    let listeningModeOptions = {\n      pointer: false, // listen for pointer event interaction\n      touch: false, // listen for touch event interaction\n      mouse: true, // listen for mouse event interaction\n      focus: false, // listen for foucs event\n      windowBlur: false // listen for window blur event (navigating away from window)\n    };\n\n    aurelia.use\n      .standardConfiguration()\n      .developmentLogging()\n      .plugin('aurelia-blur-attribute', listeningModeOptions);\n\n    aurelia.start().then(a =\u003e a.setRoot());\n  }\n```\n\n## [Using The Plugin]\n\nThere are a few scenarios you can take advantage of the Aurelia blur plugin.\n\n1. You can use the dialog service to control when a form should be hidden.\nThis is a common case, consider the following dom structure\n\n![](http://i.imgur.com/oBF5Ryv.png)\n\nIt'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:\n\n```html\n  \u003cdiv\u003e\n    \u003cbutton click.delegate=\"formIsBlur = false\"\u003eShow Form\u003c/button\u003e\n    \u003cform if.bind=\"formIsBlur\"\u003e\n      \u003cinput blur.trigger=\"formIsBlur = true\" /\u003e\n      \u003cselect blur.trigger=\"formIsBlur = true\"\u003e\u003c/select\u003e\n      \u003cinput blur.trigger=\"formIsBlur = true\" /\u003e\n    \u003c/form\u003e\n\n    \u003c!-- Or more optimized version --\u003e\n    \u003cform if.bind=\"formIsBlur\" blur.capture=\"formIsBlur = true\"\u003e\n      \u003cinput /\u003e\n      \u003cselect\u003e\u003c/select\u003e\n      \u003cinput /\u003e\n    \u003c/form\u003e\n  \u003c/div\u003e\n```\n\nThis 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.\n\n```html\n  \u003cdiv\u003e\n    \u003cbutton click.delegate=\"formIsBlur = false\"\u003eShow Form\u003c/button\u003e\n    \u003cform if.bind=\"formIsBlur\" blur.bind=\"formIsBlur\"\u003e\n      \u003cinput /\u003e\n      \u003cselect \u003e\u003c/select\u003e\n      \u003cinput /\u003e\n    \u003c/form\u003e\n```\n\nNotice the attribute differences: `blur.capture` / `blur.trigger` vs `blur.bind`. When using `blur.bind`, we are using the plugin, instead event listener.\n\n## Usage Examples / Scenarios\n\nTODO\n\n## Building The Code\n\nTo build the code, follow these steps.\n\n1. Ensure that [NodeJS](http://nodejs.org/) is installed. This provides the platform on which the build tooling runs.\n2. From the project folder, execute the following command:\n\n  ```shell\n  npm install\n  ```\n3. Ensure that [Gulp](http://gulpjs.com/) is installed. If you need to install it, use the following command:\n\n  ```shell\n  npm install -g gulp\n  ```\n4. To build the code, you can now run:\n\n  ```shell\n  npm run build\n  ```\n\n5. You will find the compiled code in the `dist` folder, available in three module formats: AMD, CommonJS and ES6.\n\n6. See `gulpfile.js` for other tasks related to generating the docs and linting.\n\n## Running The Tests\n\n```shell\nnpm run test\n```\n\n## Acknowledgement\nThanks goes to Dwayne Charrington for his Aurelia-TypeScript starter package https://github.com/Vheissu/aurelia-typescript-plugin\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbigopon%2Faurelia-blur-attribute","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbigopon%2Faurelia-blur-attribute","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbigopon%2Faurelia-blur-attribute/lists"}