Perspective tabs misbehave when multiple paragraphs fields

Fixed problem with JS. Uploading screenshot.

1. +++ b/js/paragraphs.admin.js
   @@ -9,58 +9,70 @@
   +      var $parWidgets = $('.field--widget-paragraphs', context);
   

   Indentation is not good in this part until the line 75.

2. +++ b/js/paragraphs.admin.js
   @@ -9,58 +9,70 @@
   +      var $parWidgets = $('.field--widget-paragraphs', context);
   ...
   +              /** Activate content tab visually if there is no previously
   

   We are in behavior here so we should use once() in order to avoid reattaching behaviors, something like

   var $parWidgets = $('.field--widget-paragraphs', context).once('paragraphs-bodytabs');

3. +++ b/js/paragraphs.admin.js
   @@ -9,58 +9,70 @@
   +          /** Set content fields to visible when tabs are created. After an
   ...
   +              /** Activate content tab visually if there is no previously
   +               * activated tab. */
   

   Not 100% sure but shouldn't we use // comments here and not doc block comments?

   https://www.drupal.org/docs/develop/standards/javascript/javascript-codi...

   > C style comments (/* */) and standard C++ comments (//) are both allowed.

   So you should use /* or // but not /**

4. +++ b/js/paragraphs.admin.js
   @@ -9,58 +9,70 @@
   +              $parTabs.find('#content').removeClass('is-active');
   +              $parTabs.find('#behavior').addClass('is-active');
   

   #content and #behavior elements are used on couple of places. We should create vars for them also.

5. +++ b/js/paragraphs.admin.js
   @@ -9,58 +9,70 @@
   +              $parTabsWrapper.find('.paragraphs-tabs').show();
   ...
   +              $parTabsWrapper.find('.paragraphs-tabs').hide();
   

   Can we use $parTabs var here?

6. +++ b/js/paragraphs.admin.js
   @@ -9,58 +9,70 @@
   +              $mainRegion.removeClass('behavior-active');
   +              $mainRegion.removeClass('content-active');
   +              $mainRegion.removeClass('is-active');
   

   You can shorten this by writing

   $mainRegion.removeClass('behavior-active content-active is-active');

7. +++ b/js/paragraphs.admin.js
   @@ -9,58 +9,70 @@
   +              $(context).find(el.attr('href')).addClass('is-active');
   

   This does not looks good because it is searching the context, can we be more specific?

> @Ivica 6. -- Why is it not good to limit activity to the event context? Usually we need to do exactly that to properly support ajax actions and avoid double bindings.

I was just asking can we be more specific and instead of context use $parWidgets or some other var that is that holds that elements so execution is a little bit faster .

Addressed #3.

JS looks better, couple of more things:

1. +++ b/js/paragraphs.admin.js
   @@ -8,70 +8,72 @@
   +        /* Set content fields to visible when tabs are created. After an
   +           action being performed, stay on the same perspective. */
   

   I know drupal doc page says both // and /* are fine, but i've just checked all Drupal JS files in core/misc and all of them use // comment style. Can we please change then all code comments to // syntax.

2. +++ b/js/paragraphs.admin.js
   @@ -8,70 +8,72 @@
   +          $parWidget.removeClass('content-active');
   +          $parWidget.addClass('behavior-active');
   

   Small thing you could do this in one line

   $parWidget.removeClass('content-active').addClass('behavior-active');

3. +++ b/js/paragraphs.admin.js
   @@ -8,70 +8,72 @@
   +          var el = jQuery(this);
   

   This is a jquery object so you should use $el instead of el.

   One more thing, this is jQuery object of this so usually you use $this naming for this. Yeah too many 'this' in previous sentence ;)
   Also don't use jQuery(this) but do $(this). So

   var $this = $(this);

Addressed comment #7.

JS code looks good, didn't tested this so will not put into RTBC.

Re-basing.

Tested a bit more with the same steps like you. Here it is screenshot:

We have two fields, one with Grid paragraph type which has behavior form and another one with Text paragraph type which has not behaviors form. Perspective tabs are presented only for first field.

Previous rebase was wrong.

Fixed problem with nested paragraph.

There was a problem whit changing perspectives if we have more than one field e.g. 2 field and on both fields we are on the same tabs.
Fixed that.

Fixed problem from #22.
After discussion with @Berdir, we don't need test in this issue.

That's not what @Berdir said :)

He said we don't need to test this node vs user stuff because that check was bogus anyway and there is no such code anymore.

We can check the correct adding of the nested class and we if we change which parts are visible vs not, then we can possibly also extend the JS test with that.

Added tests.

It's not quite clear to me how this would fail, please provide a test-only patch.

Test only patch.

Needs work for discussed test improvements.

Improved test but didn't test. Let's see what test bot will say.

Worked on the test together with @toncic.