ember-hold-button

Published on Sep 02, 2015

Ever accidentally delete a record or send a message before it's complete?

ember-hold-button is a fantastic addon that lets you put a small time barrier in front of sensitive actions so you don't complete them by accident.


Links

Code

$ ember install ember-hold-button
{{#hold-button delay=2000 type="rectangle" action="delete" class="pull-right"}}
  Delete
{{/hold-button}}
.ember-hold-button.rectangle {
  background: transparent;
  color: #aaa;
}

.ember-hold-button.rectangle span {
  z-index: -1;
  height: 100%;
  background-color: black;
}


 .ember-hold-button.rectangle.is-holding {
   color: red;
 }

Transcript

Today we’re going to be talking about ember-hold-button. So when you’re in your ember app, lots of times you click on something and it happens immediately, and that’s awesome. That’s one of the reasons we love ember. But other times, something happening immediately isn’t so great. Let’s say you accidentally hit this ‘Delete’ key. Oops! It’s all gone forever.

So, there are some ways around this. One of them is doing a pop-up and saying hey, are you sure you want to delete this? But that’s really annoying, especially for things that are of middling importance that you would legitimately want to delete.

So enter ember-hold-button. What happens when you want to delete something or if you want to just take any action that you want to be sure to confirm, you hold, and then if you hold it for a certain amount of time, then it takes that action.

To get started with this add-on, we’ll run ember-install. After we’re done installing the add-on, we’ll go find our ‘Delete’ button and replace it. We replace it with the ‘Hold’ button component. It’ll take a type, which for now we’ll have as rectangle, and then an action, which our action here has been delete, so we’ll use that.

Since this is a component, it can take something like a class which we’ll put on the outside div, and we’ll make this pull-right, just like before, so it’ll be in the same position. Then we’ll put in what we want the button to say, and close it off.

Now let’s go ahead and see how that looks. Well, here’s our ‘Delete’ button. Let’s see how it works. If we hold it, a timer will go up and then it will delete. Let’s look at some other behavior. If we hold and then go off of it, then the timer will go back down. If we hold and release, the timer will go back down. And notice when we’re holding it down, we don’t have to release it like we would here. Here I can hold this down as long as I want, move away, release, and it doesn’t do anything. Here if I try to do that, I’m not going to release this whole time and it’s still gone. So that’s something to keep in mind when you’re using this. It will normally save you a lot, but there are still some differences in behavior you have to account for.

Now let’s look at some of the ways we can configure this. The most important is ‘delay’. So it’s automatically set to 500, but we can set it to any number of milliseconds that we want. For something that’s really important, we might want to have it for two seconds instead of half a second. So that delay will see that it takes considerably longer to do it. This can add in a measure of safety for your more vital things that you really don’t want to be deleted on accident or clicked on accident.

There’s also the different types. We’ve been using rectangle. There’s also circle, which goes from the inside out, filling out like that. There’s the border circle. There is the progress bar, which you have to do a little bit of extra CSS styling to make it work. And the reverse circle animation.

A little explanation on this CSS. So ember-hold-button is the class applied to every ember-hold-button, and then you have the class of the type. And then, when you... the thing that’s happening after you hold a long time is the span. So here, this is the starting one, and then the one that’s filling up is the span, defined here. There’s also the is-holding, is-complete attributes.

So let’s go ahead and use this to make something really cool. First, we’ll copy this CSS for the full progress bar, and then we’ll paste it in our style sheet. This will make a progress bar just like we saw on the README. Then to add our own flare, let’s use the is-holding class and turn the color red. So when we test this out, we see that it slowly turns red as we hold it. That’s really cool.

So that’s the ember-hold-button add-on. It’s extremely easy to get started with, and it’s fairly easy to customize. I hope you enjoy using it in your apps, and I’ll see you next time.

Subscribe to our mailing list