ahume / flight-click-trap

Listen for clicks inside and outside of a component node

flight-click-trap

A Flight component for capturing clicks inside and outside of a component node.

Installation

bower install --save flight-click-trap

Example

this.after('initialize', function() {
	this.enableClickTrap();
	this.on('componentReceivedClick', function() {
		this.enableComponent();
	});
	this.on('componentLostClick', function() {
		this.disableComponent();
	});
});

The clicktrap has a small performance overhead as it's called on every user click, so you'll likely want to disable it when your component is hidden or unused.

this.disableClickTrap()

Development

Development of this component requires Bower, and preferably Karma to be globally installed:

npm install -g bower karma

Then install the Node.js and client-side dependencies by running the following commands in the repo's root directory.

npm install
bower install

To continuously run the tests in Chrome and Firefox during development, just run:

karma start

Contributing to this project

Anyone and everyone is welcome to contribute. Please take a moment to review the guidelines for contributing.

• Bug reports
• Feature requests
• Pull requests

flight-click-trap's Issues

Look down the tree instead of up

It'd be nice to see a version of this which can sit at the top level of the document and responds to events instead of having to create a new one for each modal.

If we specify a class name to apply to modals, e.g. .has-click-trap, this component can listen for clicks inside and outside of elements where that class has been applied, and then listen for click-trap-activation-request and click-trap-deactivation-request events (not sure about the event names, might need to think about that). This way the modal doesn't need to implement click trap itself and can fire events instead.

A similar piece could be done for an overlay which would then insert the overlay beneath the component that requested it. This would prevent the need for components to reach outside their dom subtree.