An AngularJS directive that turns a regular <button>
into one that has to be held for a configurable amount of time before it performs an action. It can be used instead of a confirmation dialog for destructive actions.
Live view of examples/demo.html.
npm install angular-hold-button --save
bower install angular-hold-button --save
Copy dist/angular-hold-button.min.js
to your project.
Include the JS and CSS files:
<script src="angular-hold-button.min.js"></script>
<link rel="stylesheet" href="angular-hold-button.min.css">
Add rmHoldButton
to dependencies
var app = angular.module('ExampleApp', [
'rmHoldButton',
]);
Add rm-onhold
attribute to a <button>
in your template
<button rm-onhold="deleteSomething()">Hold me tight!</button>
You can customise how long the button has to be held:
<button rm-onhold="deleteSomething()" rm-onhold-options="{ duration: 2000 }">Hold me tight for 2s!</button>
duration
is a value in milliseconds.
.rm-hold-button {
border: 1px solid red;
color: red;
line-height: 24px;
padding: 10px 20px;
}
.rm-hold-button-fill {
background-color: red;
}
.rm-hold-button-text {
color: white;
}
.rm-hold-button-fill {
height: 3px;
}
.rm-hold-button-fill {
bottom: 0;
height: 3px;
top: auto;
}