Make sortable groups drag sortable

[lipemat]

Fixes #155.

Builds on pull request #1142 to add global support for drag sorting groups which are sortable.

Implement using the same sortable api following the patten of cmb.makeListSortable() Some minor CSS changes to have a move cursor.

I separated this pull out from the original because this implementation is a bit more intense and if not approved I don't want to hold up the other one.

[adriantoll]

@lipemat I've tested this on a local copy of a live site and it's working beautifully with no console errors. Nice one!

[jtsternberg]

Here's a screenshot of the issues I'm seeing. http://b.ustin.co/iD9YvU I have some ideas for how to correct this, but can't get to it right now.

[adriantoll]

I can't replicate that on my local installation. I don't have something like Dropplr to share my screen, but I'm using a simpler group than @jtsternberg with just a single dropdown in each group. Replicated the exact order - start with two items (1,2), move group 2 to the top (2,1), add third group (2,1,3), save page - and it stayed as it was before saving (2,1,3).

[jtsternberg]

@adriantoll you have to set the first 2 (group 1 and 2), then save, then do the move/new group, save.

[adriantoll]

@jtsternberg I didn't explain myself well - that's what I'm doing. Here's a video: https://www.dropbox.com/s/j9cw761dtndw60z/cmb2draggable.mov?dl=0

[lipemat]

I took another run at this and have so far been unable to recreate the issue. Every combination of fields, sorting, adding, sorting that I have tried has saved and ordered properly. There must be some variation that I'm not finding. Maybe a particular field type or argument?

[ljsherlock]

I was able to recreate the issue with repeatable groups.

Is this fork still being actively worked on? I would really like this functionality.

[lipemat]

I spent a couple more hours trying to recreate the issue to no avail. I have also been using this drag sorting on a couple projects without any reported issues.

Perhaps, if someone could provide the configuration they are using to register the fields I could input the exact configuration to recreate?

[tw2113]

@lipemat should I ignore the stuff at https://github.com/CMB2/CMB2/pull/1145/files/2a52d5806018940256da0151b4c65b9ad1534465..eaa9805ceccd2ccb9c4a5979368084bff64df192 at the moment?

[lipemat]

@tw2113 Yes. Sorry about that :) I was testing against another branch and must have pushed. I have now cleaned up this feature branch.

[jtsternberg]

Looks like this PR got some other commits into it (to readme, etc). Please fix merge conflicts and clean up commits/files and I'll try to reproduce the issues again.

[marsjaninzmarsa]

Fixed with #1142, so should be closed?

[lipemat]

Fixed with #1142, so should be closed?

#1142 Was just for single fields. This branch ads support for groups as well.

@jtsternberg Not sure how I missed your comment :(. This branch was cleaned up last fall is ready for you to take another pass at.

[chrisvanpatten]

Really excited for this to land!

I also did some testing with a fairly complex repeatable group and was able to add, reorder, add, delete, etc. and various combinations of the above without issues. The indexes all seemed correct, even after saves and reloads.

If there's any further testing I can help with, let me know!

[chrisvanpatten]

@jtsternberg @lipemat I'd love to help push this forward. Is there anything I can do to help, either getting the branch up-to-date or formal testing or something else?

[ddzyne]

Took the javascript modification and implemented it in the current CMB2, but it causes the TinyMCE editor inside a repeatable group not to initialize, giving you just a simple textarea instead. Any idea how to prevent this?

Edit: seems like something was up with the minified JS. Using unminified the TinyMCE works. However, after dragging and dropping a group, the TinyMCE editor of this group does break. You have to reload the page to get it working again.

[lipemat]

Great find @daancjanssen ! Turns out there is one field in the entire plugin which requires special events to be trigger wysiwyg.

I have added these events when sorting happens as well as added the iterator to the mce ids which fixes some other strange issues.

[ddzyne]

Great work @lipemat! Was on holiday for a few weeks, will check your mods next week.

[Pierronimo]

Hi everybody. I'm very interested in this feature and look like you already did a great job ! Can I help in anything ?

[tw2113]

Could probably use some sort of testing of the new changes to make sure we're no potentially breaking things, as a good next step.

[Pierronimo]

Hi everybody,

I did some test about the issue @jtsternberg report and could repeat it in a more simple way :

• add group 2
• move group 1 to 2nd position
• save => only group in first position is saved

Looking in the code of the page, the id of the group in 2nd position when saved (the one that is moved) still have the original id before the drag and drop. If you change manually this ID to its real position after drag and drop, everything is saved correctly.

Screenshot before drag looking at ID and name of the "D1"

Screenshot after drag looking at ID and name of the "D1 => D2", now in position 2

At this point, if you change manually the ID and Name, everything is ok when you save

You can see a video of the step I follow here : https://web.pierreferron.com/hosting/cmb2-issue-720p.mov

I'm not very good at coding, especially javascript, I can give a try if you can indicate me exactly where the ID and Name are updated in the code

I will do more test with more groups and movement.

For the TinyMCE issue, it is not just with dragable CMB2 group, if you drag an entire block of the wordpress page, you have the same issue, the content deseappear, but it is saved in DB.

Hope this help and sorry for my post, I'm new with github and coding

[greenlevel]

Just checking the progress of the feature.

Is this in the planning to be added anytime soon as this would be nice to have.

Thanks!

[tw2113]

No news that I've heard of. We tend to do pretty well with leaving development updates on the issues themselves.

[greenlevel]

Thanks for the feedback. Was hoping this feature would be already or soon be implemented. But I understand.

[rodiuk]

https://wordpress.org/support/topic/editing-repeateble-field-delete-text-value/#post-16602143

(https://youtu.be/1eGm3Po_k74) i commented old CMB2 plugin and download from GIThub

bug still stayed

Please check if the WYSIWYG field works correctly in the repeater. Because I tested according to the instructions, and the problem is only with the WYSIWYG field. You can see the whole process in the video from the previous post.

[tw2113]

@rodiuk are you saying that the issue still exists in the lipemat:feature/drag-sorting-for-groups branch that's open for this PR? Or that it's just still open in CMB2 trunk?

[rodiuk]

@rodiuk are you saying that the issue still exists in the lipemat:feature/drag-sorting-for-groups branch that's open for this PR? Or that it's just still open in CMB2 trunk?

I don't know what thread should be. I described my problem here https://wordpress.org/support/topic/editing-repeateble-field-delete-text-value/#post-16602143

but received no reply.

You can create a new branch if that's the right way.

Due to the incorrect work of the plugin, I have a lot of inconvenience and need to find a solution for my client. I beg you to check my video and let me know whether to wait for the update.

[tw2113]

I don't have or know of a solution for the issue at the moment. You're commenting on someone else's PR, which is perfectly fine to do, but I am wondering if you tried this person's PR out and if the PR is not yet fixing the issue.

You didn't comment on an open GitHub issue about the bug at hand.