added 'action agissante', 'superposition' and 'proximité' fields

admin node edit boussole, over and hightlight on boussole or form-item mouseover

src/web/themes/custom/ouatminimal_theme/css/ouatminimal.css

@@ -239,6 +239,11 @@
   padding:0.5em;
   border: 1px solid #bbb;
   border-radius: 5px;
+  transition: all 2s ease-in-out;
+}
+#boussole-layout .form-item[data-drupal-selector="edit-field-entite"] table.field-multiple-table>tbody>tr>td:not(.field-multiple-drag)>div.entite-over{
+  border-color: #f00;
+  transition: all 0.2s ease-in-out;
 }
 
 #boussole-layout .form-item[data-drupal-selector="edit-field-entite"] table.field-multiple-table>tbody>tr>td:not(.field-multiple-drag) > div .horizontal-tabs-panes>details>.seven-details__wrapper{
@@ -365,10 +370,17 @@ div.field--name-field-menace-maintien label{
   transform: translate(-5px, -5px);
   cursor:move;
 }
+#boussole-layout .boussole-wrapper .boussole .entity.entite-over{
+  background-color: #f00;
+}
 #boussole-layout .boussole-wrapper .boussole .entity.ajax-new{
   background-color: #fff;
   border: 1px solid black;
 }
+#boussole-layout .boussole-wrapper .boussole .entity.ajax-new.entite-over{
+  border: 1px solid red;
+}
+
 #boussole-layout .boussole-wrapper .boussole .entity.hide{
   display: none;
 }

src/web/themes/custom/ouatminimal_theme/js/boussole.js

@@ -1,11 +1,12 @@
 (function ($, Drupal, once) {
   var _boussole;
+  // behaviour is attached by preporcess ouatminimal_preprocess_field_multiple_value_form__field_entite__node_concernement() on ouatminimal.theme file
   Drupal.behaviors.boussole = {
     attach: function (context, settings) {
       console.log("Drupal Boussole behavior", context);
       let $boussole_wrapper = document.querySelector('#boussole-layout');
       once('boussole-class-behaviour', '#boussole-layout', context).forEach(element => {
-        let tabs = 
+        // let tabs = 
         // div.field-group-tabs-wrapper
         // input.horizontal-tabs-active-tab
         _boussole = new Boussole($boussole_wrapper);
@@ -32,6 +33,7 @@
         let $p = $entity.querySelector('.paragraphs-subform .field--name-field-prise input');
         let $mm = $entity.querySelector('.paragraphs-subform .field--name-field-menace-maintien-degres input');
         let e = {
+          form: $form,
           wrapper:{
             $dom: $entity,
             id: id
@@ -185,7 +187,8 @@
       this.$container.append(this.$e);
       console.log(this.$e);
       this.updatePos();
-      this.initDraggable()
+      this.initOverEvents();
+      this.initDraggable();
     }
     
     updateDomElemt(){
@@ -199,6 +202,32 @@
       }
     }
 
+    initOverEvents(){
+      // on mouseover point on boussole
+      this.$e.addEventListener('mouseenter', (event) => {
+        console.log('enter boussole entité', this.values);
+        this.values.wrapper.$dom.classList.add('entite-over');
+        // scroll to form item
+        var $tr  = this.values.wrapper.$dom.closest("tr.draggable");
+        var top = $tr.offsetTop;
+        // console.log('offsetTop', top, $tr);
+        this.values.form.scrollTo({top: top, left: 0, behaviour: "smooth"});
+      });
+      this.$e.addEventListener('mouseleave', (event) => {
+        // console.log('leave boussole entité', this.values);
+        this.values.wrapper.$dom.classList.remove('entite-over');
+      });
+
+      // on mouseover formitem on drupal form
+      this.values.wrapper.$dom.addEventListener('mouseenter', (event) => {
+        this.$e.classList.add('entite-over');
+      })
+      this.values.wrapper.$dom.addEventListener('mouseleave', (event) => {
+        this.$e.classList.remove('entite-over');
+      })
+
+    }
+
     initDraggable(){
       this.$e.setAttribute('draggable', true);
       this.$e.addEventListener('dragstart', event => {
@@ -315,17 +344,4 @@
 
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
 })(jQuery, Drupal, once);