A Javascript library that provides all users with an easy way to easily perform this everyday task without shifting their focus
HoldToDelete currently has no other Javascript libraries it depends on.
HoldToDelete currently works in all modern browsers, IE9 and above and has been tested on the mobile browsers listed below:
Download the files from master branch and insert the HoldToDeletes file before your own Javascript and CSS files:
<link rel="stylesheet" type="text/css" href="path/to/HoldToDelete.min.css">
<link rel="stylesheet" type="text/css" href="path/to/yourcss.css">
<script type="text/javascript" src="path/to/HoldToDelete.min.js"></script>
<script type="text/javascript" src="path/to/yourjs.js"></script>
Simple usage only requires a single parameter, the actual element. This can either be:
new HoldToDelete('button');
Note: HoldToDelete will put a wrapping element around the elements it finds.
Note: Be careful with generic classnames or often used elements in this first parameter. HoldToDelete will use all the elements it will find.
If you want to customize the event to your liking you can use the second parameter. This second parameter should always be an object.
new HoldToDelete(
'button',
{
seconds: 1, // (Number) The timespan of the actual event
timeout: 0.5 // (Number) The timeout before the feedback element goes away
}
);
In addition to the standard customizations, HoldToDelete also offers two advanced customization options. These are also specified in the object that is the second parameter
new HoldToDelete(
'button',
{
remove_feedback: false, // (Boolean) Specify wether the feedback element should be removed or not
class_name: 'custom_class', // (String) A custom class for the clicked element in the current instance
border_radius_percentage: true, // (Boolean) Specify if the usage of border radius is done through percentages or not
placement: 'bottom' // (String) The placement of the feedback element. This should either be 'top' or 'bottom'
}
);
.custom_class {
background-color: white;
color: #39c;
border: 2px solid #39c;
}
Below a list of the standard option values HoldToDelete uses when they are not overwritten.
var options = {
seconds: 3,
timeout: 0,
remove_feedback: true,
border_radius_percentage: false,
class_name: ''
}
The feedback element adjusts to the border radius of your element so it will always look good.
HoldToDelete automatically adds the 'holdtodelete_running' class to the element that is being clicked. HoldToDelete also sets user-select to none based on this class so the user won't accidentally select the text while clicking the element. This class will get removed after the event is either disrupted or finished.
Note: It's best to always put the user-select to none while working with mobile browsers because of the way selecting text works in these browsers.
If you want to run your custom code at certain key moment during the event you can do so by using the custom events that HoldToDelete provides. These custom events will onyl be called when the elements that are initialized by the corrisponding instance are clicked. You can use the 'on' function on your earlier created instance and pass two parameters to this function:
var remove_handler = new HoldToDelete('button');
remove_handler.on('holdtodelete_started', function(){
// Your code goes here
});
Note: Give your instances (in this case 'remove_handler_standard') unique names if you are going to use these custom events to avoid unwanted results.
Every custom event provides you with the clicked reference element and the corrisponding feedback element. You can use these like so:
var remove_handler_standard = new HoldToDelete('button');
remove_handler_standard.on('holdtodelete_started', function(reference_element, feedback_element){
console.log('Reference element: ', reference_element);
console.log('Feedback element:', feedback_element);
});
This custom event will be called when the user clicks on the element.
var remove_handler_started = new HoldToDelete('button.custom-event-started');
remove_handler_started.on('holdtodelete_started', function(reference_element, feedback_element){
console.log('Custom event: Started');
});This custom event will be called every millisecond the actual event is running until before the timeout.
var remove_handler_running = new HoldToDelete('button.custom-event-running');
remove_handler_running.on('holdtodelete_running', function(reference_element, feedback_element){
console.log('Custom event: Running');
});This custom event will be called when the actual event is done and the timeout started.
var remove_handler_before_timeout = new HoldToDelete('button.custom-event-before-timeout');
remove_handler_before_timeout.on('holdtodelete_before_timeout', function(reference_element, feedback_element){
console.log('Custom event: Before timeout');
});This custom event will be called when the actual event and the timeout are done.
var remove_handler_finished = new HoldToDelete('button.custom-event-finished');
remove_handler_finished.on('holdtodelete_finished', function(reference_element, feedback_element){
console.log('Custom event: Finished');
});This event can along with the 'remove_feedback' option set to 'false' give you the option to use anmite and hide the reference and feedback element.
Found a bug or something that needs to be fixed? Create an issue at https://github.com/gavinlight/HoldToDelete/issues/new.