Introduce a Drag & Drop Mode

We are currently reviewing authoring UX for the thunder distribution that makes heavy use of paragraphs and came up with a different sorting mode that uses the concept of cut and paste which is especially good for long flat lists of paragraphs. See an early wireframe in https://www.drupal.org/node/2828106#comment-11791272

This solution described here is especially for dragging and dropping across fields and entities? I am not entirely sure that I understand the workflow here, may be because I am missing the context of how the hierarchy looks like before you started the special drag n drop mode...

I would like to point out this issue here [https://www.drupal.org/node/2264739] for allowing multi value fields without tabledrag

i will work on this.

This patch will disable core drag and drop on the paragraphs multi value fields

triggering testbot

removed the reorder tests from IEF integration because we do not want to reorder paragraphs.

added initial switcher for drag and drop mode

Updated the naming, render the switcher as form element and take it in the header in a preprocess function.
Ignore the button at validation like the add_more button.

working switcher button for form view modes

float the button to the right, do not show remove button in reorder mode, display all childs in reorder mode

This patch extends #17 to rewrite the table into a list and add the sortable library on it.

Updating the IS with the remaining tasks

Fixing dragging on iOS

1. --- /dev/null
   +++ b/css/paragraphs.sortable.css
   

   Let's change the css indentation to two spaces.

2. +++ b/css/paragraphs.sortable.css
   @@ -0,0 +1,76 @@
   +    list-style-type: none !important;
   

   !important is quite tricky, can we avoid using it? :)

3. +++ b/css/paragraphs.sortable.css
   @@ -0,0 +1,76 @@
   +}
   \ No newline at end of file
   

   Missing empty line.

4. +++ b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php
   @@ -1131,6 +1180,55 @@ class ParagraphsWidget extends WidgetBase {
   +  public static function reorderModeSubmit(array $form, FormStateInterface $form_state) {
   

   Missing doc.

5. +++ b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php
   @@ -1131,6 +1180,55 @@ class ParagraphsWidget extends WidgetBase {
   +  public static function reorderModeAjax(array $form, FormStateInterface $form_state) {
   

   Missing doc.

Screenshots would be really helpful.

Indentation of the sortable library needs to be fixed too.

Fixing CSS and JS indentation and adding handles for dragging.

Adding indentation when dragging is disabled and fixing typo.

Working nested paragraphs, fixed issue with empty field, removed add button in reorder mode.

Updating IS

I refactored the CSS and improved indents and general margins.

Fixed the duplicate field wrappers and added rtl support for reorder mode.

Added drop zone validation

Updating remaining tasks.

fixed restoring initial behaviour of paragraphs after switiching to drag an drop mode

correct patch

Fixed a weird reference issue that caused the list to be rendered wrong.
Also made sure the prefix and suffix are appended correctly.

Just tested. Wondering if:
- The submission when changing positions doesn't work right? I mean, it is not saved.
- we will need a more core-ish css for this being committed.
- Are behavior plugins not hidden in the reorder mode?

@yongt9412 we keep posting patches so we can work on it together, this is nowhere near finished yet.

Oops, I see, then can you also provide interdiff please? :)

Adding JS logic for setting correct paths and weights when reordering.

Hiding the form elements which are now updated using JS.

Adding new ghost item styling which is more compact to be able to sort easier an more granuarly. It is indicated by a black line now. Also improving general margins and font stlyes.

Currently there is an UX issue when starting to drag. If the user drags a big element, the list collapses and the user can loose context where the paragraph was initially. Maybe we should a placeholder where the paragraph was initially?

Fixing indentation in normal edit mode and improving typography of field labels in reorder mode.

CSS cleanup and attaching screenshots of the current solution. Sadly I am unable to take a screenshot while dragging...

Here is the WIP. The logic for restructuring is in the processRestructure function.

Added extra check for making it work switching the modes.
I actually think that we should move this patch to a new issue, working in a Meta is not the best thing.

BTW I just tested the patch and it works when you move a paragraph out of its parent, it creates some weird duplicates. The patch doesn't work for moving a paragraph inside another one.

For the ones who want to test this:
When changing the mode to drag and drop, it will allow changing the position of the paragraphs, by now, it support more or less moving a paragraph out of its parent and the other way round. It create some weird duplicates but works.
If you wanna test this, don't forget to use the Experimental widget in all paragraphs fields, also in the nested fields.

Promoting and starting to work on tests. Still, patch needs to be moved to another issue. I will add it here once I have the first patch with tests.

Rerolled, tested in the UI, doesn't work when moving a paragraph out of its parent or when moving a paragraph inside another one.

Added test for changing the parent. (setting the path to the node parent).
Creates duplicate, fails.

Added test cases:
1. Changing the parent
2. Changing the weight (this can't be done with the path, because the assertion would be the same for both text paragraphs.
3. Moving to a different tree (from 1 nested paragraph to another).

1. +++ b/css/paragraphs.widget.css
   --- /dev/null
   +++ b/js/Sortable/Sortable.js
   
   +++ b/js/Sortable/Sortable.js
   +++ b/js/Sortable/Sortable.js
   @@ -0,0 +1,1249 @@
   
   @@ -0,0 +1,1249 @@
   +/**!
   + * Sortable
   + * @author	RubaXa   <trash@rubaxa.org>
   + * @license MIT
   + */
   +
   +
   +(function (factory) {
   

   adding an external library to the source code is *not* an option.

   If we need something like that then we have to let it be downloaded separtely, which is painful for users. So, it would be better if we could avoid it, actually.

2. +++ b/paragraphs.module
   @@ -215,6 +215,69 @@ function paragraphs_form_language_content_settings_form_alter(&$form, \Drupal\Co
   + */
   +function paragraphs_preprocess_field_multiple_value_form(&$variables) {
   +  // early return if this is no paragraphs field that should disable drag and drop mode
   +  if ( !isset($variables['table']['#tabledrag']) ) return;
   +  if ( !isset($variables['element']['#no_drag']) || !$variables['element']['#no_drag'] ) return;
   +  if ( $variables['element']['#no_drag'] === FALSE ) return;
   +
   +  // take out the reorder_mode switcher from the form in the header
   +  if (count($variables['element']['#field_parents']) === 0) {
   

   this function needs a lot of coding style cleanup.

3. +++ b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php
   @@ -228,6 +228,17 @@ class ParagraphsWidget extends WidgetBase {
   +
   +    global $parent_paragraph_in_reorder_mode;
   +
   +    if (!isset($parent_paragraph_in_reorder_mode)) {
   +      $parent_paragraph_in_reorder_mode = FALSE;
   +    }
   +
   +    if ($parent_paragraph_in_reorder_mode) {
   +      $item_mode = 'reorder';
   

   this needs to be a class property, I guess static but we could also track this through $form_state.

1. Rerolled patch
2. Cleaned up paragraphs_form_language_content_settings_form_alter
3. Using class property instead of the global $parent_paragraph_in_reorder_mode

I added some @TODOs in the code. During the sprint we agreed that fixibg them doesn't make sense while we are not sure if we willbe able to store the data at all.

1. Addressed comment #93.
2. Some code style fixes.

Work in progress. Single movements seem to working quite fine now, but there is a bug when you don't disable the reorder mode before saving. I'll look into that. It seems to duplicate the paragraph in that case.

Where it starts to fall apart is if you make multiple

I changed one test to disable reorder,that then passes after fixing it. The others will still fail. I also fixed bunch of notices so there should be a lot less fails now.

I also added the summary to the re-order mode as you have no idea what you are moving around otherwise.

TODO:

* Fix immediate saving
* Fix multiple changes. Might actually require that we completely refactor how this works.
* Clean up rendering of the reorder mode. Using a different template should be a lot easier than messing with the table in the standard field multiple template should make things a lot cleaner
* Many more tests. Specifically for multiple changes, but also adding actual content to the paragraphs.

Extended test with some multiple changes and added an isset for the widget in massageFormValues().

I just implemented drag & drop UI as a small separate module for 8.x:

https://www.drupal.org/project/bricks

It provides a re-usable Entity Reference Widget => compatible with Paragraph entities as well.

So, probably we can re-use some code. Any thoughts?

This is brilliant, @tonystar.

Any progress on integrating with Entity Reference Revisions?

@tonystar looks very cool!
But when looking at the code I see that it's not very flexible and it probably only works with 2 levels?

Can you explain a bit how it works internally?

@caldenjacobs, currently I'm considedring the options, any thoughts regarding https://www.drupal.org/node/2859679#comment-11983114?

@jeroen.b, this is early implementation, but actually pretty stable and flexible. And no limitations for levels! Internally it extends db scheme to store depth for each ER field item. Simple. And perfomant.

@tonystar So internally all references are actually attached to the main entity (probably a node) and the formatter/widget processes the tree?

@jeroen.b exactly! This also allows to re-use the same entities in different tree structures and attach different css classes and view modes to the same entities.

Holding entities one "inside" another supported as well (w/o any code actually).

It looks like @tonystar has added Entity Reference Revisions support to Bricks, and the thread to Collaborate with Paragraphs is alive and well!

Uploading rerolled patch (doesn't work properly atm, need some fixes).

This is a restart that uses a completely different approach to display the re-order mode, does everything in the main widget and doesn't rely on global statics and rewriting everything in preprocess.

Way too many changes for an interdiff, so didn't bother with that.

Displaying seems to be working fairly well, but the saving isn't implemented yet, so don't bother testing this. The JS part with updating the fields also doesn't seem to be working anymore.

Started implementing the saving/updating but turns out the the JS was not working for many more complex moves as the path wasn't properly updated for complex/nested structures. So worked quite a bit on that, that was before and now even more a mess of jquery non-jquery code. Not sure sure yet in which direction to unify.

On purpose made the weight and path visible elements now for testing, as this allows to easily verify that the data being sent is valid.

Removed the unused underscore reference, wasn't used anyway.

Things are starting to work...

Noticed two problems while starting to test this in a real project.

1. The button didn't use the field id prefix, broke in fun ways with multiple paragraph fields.
2. It initially didn't work at all in our project, which took me a while to track down. Turns out that the jquery binding conflicts with jQuery UI sortable as it uses the same function name. I copied the binding into our own JS file with a custom name.

Some operations aren't working yet, still working on tracking that down. Also didn't update the tests yet.

Fixing a number if nasty bugs and updating /extending tests.

This now requires that the library is downloaded separately and put into /libraries. I have not yet added libraries.module integration to support different locations and I also need to figure out a way to check for existence of the library and handle that.

The main problem there is that if we hide the feature then we won't be able to test it on testbot as it doesn't have it.. but we also don't actually need it, as it is not a JS tests.

Tests are passing for me locally.

Use bower install Sortable to get the JS library, make sure it is in libraries/Sortable.

This should apply.

Yes it should, but that location doesn't exist yet ;)

No point in spending time here on that, can be updated once one of those issues lands. And as I mentioned before, we will need to rework it again and replace the standard field multiple template with something similar to how I'm already shortcutting that here so it doesn't get in our way.

Need to rebase, refactor and fix test failing.

Rebased, refactored a bit. There is a problem with 'Confirm order changes', will take a look tomorrow.

Improved a few things, still various things left to do:

* Fix save while in reorder mode. This partially works now, but only for top-level.
* libraries module integration
* check for existence of library, hide button, probably with a test override so we can still do the tests without the library as it is not a JS test anyway.
* test and likely fix multiple paragraph fields.
* Convert css to scss?
* ...

Getting close.

Tests completely rewritten to use BrowserTestBase, avoding demo and so on, made them multiple times faster. Complex changes as well as multiple fields are now tested, also directly saving, correct handling of summary and doing it all in collapsed widgets.

Fixed bug with moving before starting reorder, also added another test for deleting a paragraph.

Made some visual changes, removed single children paragraph label, added some ugly yellow background thingy, someone will have to make that nicer ;) But it does already help with knowing where you can put stuff. Also fixed the padding of summary to have it on same line as drag handle, that used to be padded through another class is no longer there. Did not change the grey color, summary is always that gray in paragraps UI, so the type is the same and macking it black is then *very* black.

This fixes the missing top-level field label and with also the overlapping disable button.

Saving the data works perfect so far on a existing site with data.

I have two issues.

1. The reorder button is itself a sortable element and has a weird position. I remember that we solved that issue in a previous patch during the srpint.
2. While dragging an element around, the element snaps at weird places. at the top or at the bottom of the current nesting level

1. Make sure you use the latest dev version. We introduce the concept of header actions in the collapse all issue, that takes care of the button display, it's now an option in the dropbutton there. That said, this patch wouldn't apply if you didn't have that, so not sure.

This is how it should look like:

2. Making the client side interaction itself better is probably outside of my very basic JS skills. You're very welcome to give it a try :) We also noticed a problem that the validation of allowed times sometimes doesn't work. That's something I want to look into.

This at least prevents the fatal error when you manage to put a paragraph into a not-allowed position.

Renamed reorder mode in the ui to "Drag & drop", added libraries module support and hiding the feature if the library is not present, including an override for tests. Also added a bit of documentation to the README.

Rebased.

Few nitpicks that don't alter the behavior.

1. +++ b/css/paragraphs.sortable.css
   @@ -0,0 +1,78 @@
   +  /*opacity: 0.4;
   +  background-color: #dddddd;*/
   

   Commented. :)

2. +++ b/js/paragraphs.sortable.js
   @@ -0,0 +1,149 @@
   +        // Now update the children
   

   dot at the end.

3. +++ b/js/paragraphs.sortable.js
   @@ -0,0 +1,149 @@
   +      // Fix for an iOS 10 bug. Binding empty event handler on the touchmove event.
   

   more than 80 chars.

4. +++ b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php
   @@ -959,6 +968,172 @@ class ParagraphsWidget extends WidgetBase {
   +   * @param $paragraph
   +   * @param $array_parents
   

   parameter type missing.

5. +++ b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php
   @@ -959,6 +968,172 @@ class ParagraphsWidget extends WidgetBase {
   +          // @tode use depth option from https://www.drupal.org/node/2852001.
   

   todo.

6. +++ b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php
   @@ -1332,6 +1507,233 @@ class ParagraphsWidget extends WidgetBase {
   +            // not/ expanded. This can only happen on nested levels. In that
   

   Let's remove the slash next to "not".

A few more nitpicks. Might overlap with the review above, because I did this before holidays and didn't post :|

1. +++ b/css/paragraphs.sortable.css
   @@ -0,0 +1,78 @@
   +  /*opacity: 0.4;
   +  background-color: #dddddd;*/
   

   Is this left intentionally?

2. +++ b/paragraphs.libraries.yml
   @@ -42,4 +42,15 @@ drupal.paragraphs.modal:
   +    /libraries/Sortable/Sortable.min.js: {}
   

   Follow-ups to add documentation and perhaps some kind of graceful handling if lib doesn't exist?

3. +++ b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php
   @@ -729,18 +731,18 @@ class ParagraphsWidget extends WidgetBase {
   +  public function getAllowedTypes(FieldDefinitionInterface $field_definition = NULL) {
   

   Needs method doc update.

4. +++ b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php
   @@ -827,6 +829,18 @@ class ParagraphsWidget extends WidgetBase {
   +      //$elements['reorder_mode']['#button_type'] = 'primary';
   

   Leftover code.

5. +++ b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php
   @@ -959,6 +968,173 @@ class ParagraphsWidget extends WidgetBase {
   +   * @param \Drupal\paragraphs\ParagraphInterface $paragraph
   

   Nitpick: order of params is wrong.

6. +++ b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php
   @@ -959,6 +968,173 @@ class ParagraphsWidget extends WidgetBase {
   +  /**
   

   This comment needs some work: missing description and perhaps explain return a bit.

Ok, lots of changes again.

Thanks for the reviews, specific replies:

#145.5 todo is now gone, we have this option now and it works well. Still shows summary of e.g. behaviors but not the children.

#146.1 Not sure, removed for now.
#146.2 Graceful disabling of the feature was already in a previous patch after you wrote you review. I also updated and improved the README in general and specifically for this.
#146.4 was already removed in previous patch but is now back as non-commented out code.

Other changes:
* Weight is now a hidden field, updated JS and tests for that.
* Renamed more sortable to dragdrop
* Improved and documented JS
* Complete is now a primary action.

Debug left-over cleaned up and rebased.

The last non-broken version that I now tested is 1.5.1. That also can be installed with bower, 1.4.0 has a broken bower.json.

Can be fixed on commit in README if that's the only change.

Renaming all the things broke all the things.

This should fix the JS. Also updated the README.

Too bad, Patch -150 would have been a nice one to commit :)

This should fix the problem where it doesn't work with hidden fields path/weight fields.

And wrong patch.

I am going to test on some existing projects with serious paragraphs stuff going on :)

Thank you for getting this done!

I created a few follow ups.

Besides that the data saved when properly rearranging paragraphs looks good.

Here are some small improvements to the UI:

• Added more contrast for the paragraph type labels
• Added the ghost item again since it clarifies what is about to happen before dropping an item and also makes it a lot easier to drop into the desired location because the drop zone is a lot bigger.
• Changed the background color of the nesting indicator to grey and moved it from the parent to the children because that makes understanding the strcutre a lot easier.

I created a separate issue for the UI improvements: #2901582: Drag and drop mode: UI improvements

Another one.