Add ability to escape/cancel out of dragging once started

[oscarssanchez]

Hi @helen

Would this work to solve #12 ?

The functionality works as requested, however, i'm not sure if the code could better fit elsewhere.

[helen]

Thanks for the PR, @oscarssanchez! This unfortunately does not seem to work for me - it does cancel the drag in the UI but it still gets updated to the position where you dropped it, which you can then see on a refresh. I see a spinner briefly as well which tells me that the update method is running despite the cancel. Do you see that happening for you?

[oscarssanchez]

Hi @helen,

You were right, the update method was still running. I just modified the file so it now stops the updating method if ESC is pressed.

[helen]

@oscarssanchez I'm a little bogged down at the moment, so I'm going to kick this over to my coworker @dkotter for more timely review and feedback this week. Thanks for staying on top of this!

[oscarssanchez]

Thank you @helen,

Looking forward to keep working on this PR with @dkotter .

[dkotter]

Hey @oscarssanchez, thanks for the work here. Testing this out, it does seem to work for me but I do think there are a few things that can be cleaned up/changed up a bit.

• For the code that listens for escape key clicks, this should probably live within one of the sortable callback events, so it's not just hanging out by itself at the end. I think the create event probably makes the most sense to use here: http://api.jqueryui.com/sortable/#event-create
• Within that function, we utilize the keyCode property, which is widely used by all browsers but it's also deprecated, so I think we can modernize this a bit. From what I've found, checking the key property and then falling back to keyCode is a decent way to go, something like:

var key = e.key || e.keyCode;
if ( 'Escape' === key || 'Esc' === key || 27 === key ) {
}

And finally, in my testing, the proper way to stop sorting is by using sortable( 'cancel' ), which you're already doing. But as you probably discovered during your testing, that doesn't stop the update event from firing. Your current code fixes this by setting a class on the table and checking if that exists in that method, which works, but I think we can use sortable's methods here instead.

There's a method to set an option and it's value that I think would work. Within the escape key function, I'd recommend we do something like sortable_post_table.sortable( 'option', 'disabled', true ), along with the sortable( 'cancel' ) you already have.

Then within the update function, check if that value is true (by default it's false): if ( sortable_post_table.sortable( 'option', 'disabled' ) ). If so, set that value back to false (so the sortable still works), and return early there. I think we'd also need to set that value to false in the stop method, in case the update method doesn't fire, which in my testing seemed to happen occasionally.

Let me know if this all makes sense or if you have any questions. Happy to expand further as needed. Thanks!

[helen]

@oscarssanchez Hey there - we're still interested in getting this feature into a future release, so if you're unable to keep going with this PR for whatever reason, let me know and we'll take it from here. Thanks!

[oscarssanchez]

Hi @helen,

I'm sorry about the confusion, I made some mistakes while updating my branch and I ended up erasing my previous commits due to a force push, hence the PR closed automatically. It seems like it's fine now. Thanks! And sorry about that.

[oscarssanchez]

Hi @dkotter,

Thank you for your very detailed feedback. Your suggestion is great. I was talking about it with someone and he also suggested solving the problem by adding/removing classes may not have been the best approach.

In my testing with this approach however, setting sortable_post_table.sortable( 'option', 'disabled', true ) works as long as you are performing a dragging operation. But, if the ESC key is pressed while not dragging a page, the sortable disables completely and ends up being unusable, unless you perform a page refresh. My guess is that the update and stop methods won't fire (because we are not performing any dragging), hence sortable_post_table.sortable( 'option', 'disabled' ) can't be set to false again, and since the dragging functions have been disabled altogether, it also can't start the operations again.

From what I read in the documentation, you can add new options and set some values with the optionmethod, so I opted to create a new option called preventUpdate and set it to true on the create method, and to false in the update and stop methods.

That way, the sortable still prevents updating while dragging and does not disable the sorting functionality if the user presses ESC by accident while not dragging a page.

I'm not sure if it may be a good solution, i'll be glad to read more feedback. Thanks!

[dkotter]

@oscarssanchez Just tested this out and it works great, thanks for this! And good catch on the use case of someone using the escape key while not in the process of dragging. Using a custom option there is a much better solution.

I've left two minor CR items that would be nice to add and then if you could, we serve the minified version of the JS file unless the SCRIPT_DEBUG constant is set, so we'll need to compile this src file. Should be able to run npm install and then run grunt to compile that file. If you have issues with that, let me know, I can run that compile step myself.

Thanks again for the help here, looking forward to getting this merged in.

[oscarssanchez]

Hi @dkotter, I'm not too familiar with the last step, but no problem I could do it. However, i'm not sure if what you need is the compiled src file or you are going to make some changes before and then compile it. I wanted to check first.

[dkotter]

@oscarssanchez I wasn't planning on making any changes, so when you run the compile step, it will compile the src file you've modified to the minified version. Again, I'm happy to run this step as well, if you'd prefer. If so, I think we're good to go here and I can merge this in.

[dkotter]

@oscarssanchez Can you add a line break here, just so these sections of code are a little more separated?

[dkotter]

@oscarssanchez Can you add a line break here, just so these sections of code are a little more separated?

[oscarssanchez]

Hey @dkotter, I just made the changes.
With regards of the compiling step, it sounds good to me that you take care of it. Let me know if you need anything else. Thanks!

[dkotter]

@oscarssanchez Thanks! Just tested it out and it works great for me. I've compiled that JS file and pushed to your branch. Assigning this over to @helen for final review and merge.

[helen]

This looks great! Nice work, all. I'll get this merged and look at the other PR to see if we can do a new release soon.