class active views-row collection bdd

web/themes/custom/eql/css-compiled/styles.css

@@ -1486,10 +1486,10 @@ a {
                 background: #09398b; }
                 .path-ressources.basededonnees .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockcollections-block-1 div:first-of-type .view-id-collections .view-content .views-row:hover a {
                   color: white; }
-              .path-ressources.basededonnees .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockcollections-block-1 div:first-of-type .view-id-collections .view-content .views-row .blue {
-                background: #09398b; }
-                .path-ressources.basededonnees .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockcollections-block-1 div:first-of-type .view-id-collections .view-content .views-row .blue a {
-                  color: white; }
+            .path-ressources.basededonnees .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockcollections-block-1 div:first-of-type .view-id-collections .view-content .active {
+              background-color: #09398b; }
+              .path-ressources.basededonnees .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockcollections-block-1 div:first-of-type .view-id-collections .view-content .active a {
+                color: white; }
             @media (max-width: 810px) {
               .path-ressources.basededonnees .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockcollections-block-1 div:first-of-type .view-id-collections .view-content {
                 flex-direction: column; }

web/themes/custom/eql/eql.libraries.yml

@@ -6,6 +6,6 @@ global-css:
 global-js:
   js:
     scripts/main.js: {}
-  # dependencies:
-  #   - core/jquery
+  dependencies:
+    - core/jquery
     

web/themes/custom/eql/scripts/main.js

@@ -92,8 +92,10 @@ let ressource = this.parentNode.querySelector('.field--name-field-ress');
 
 ressource.classList.add('opened');
 }
+
 ///////////////////////////////
 // fleche qui tourne faq
+
 // var questions = document.getElementsByClassName("field--name-field-question");
 
 // for (let i = 0; i < questions.length; i++) {
@@ -112,24 +114,76 @@ ressource.classList.add('opened');
 // idée: lorsque la div description du parent collection est en vue, appliquer 
 // la classe .activ{background-color:$blue-dark}
 // OU if class
+
+// $(function() {
+//   $('nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
+// });
+
+// jQuery(function($) {
+//   $('nav a[href^="/' + ressources/bdd/"30".split("/")[1] + '"]').addClass('active');
+// });
+
+// jQuery(function($) {
+//   var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
+//   console.log(path);
+//   var nameCollection = document.querySelectorAll(".view-id-collections .view-content .views-row")
+//   console.log(nameCollection);
+//   $('.view-id-collections.view-content.views-row').each(function() {
+    
+//    if (this.href === path) {
+//     console.log(this);
+//     $(this).addClass('active');
+//    }
+//   });
+//  });
+
+// jQuery(function($) {
+//   var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
+//   console.log(path);
+
+//   var nameCollection = document.querySelectorAll(".view-id-collections .view-content .views-row a")
+//   console.log(nameCollection);
+
+//  function inView() {
+
+//   let lienPave = document.querySelectorAll(".view-id-collections .view-content .views-row a")
+//     if (this.href === path) {
+
+      
+//     this.classList.add('active');
+//     }
+// };
+// }); 
+     
+jQuery(function($) {
+    var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
+  console.log(path);
+  $(".view-id-collections .view-content .views-row a").each(function() {
+   if (this.href === path) {
+    $(this).parent().closest('.views-row').addClass('active');
+   }
+  });
+ });
+
+
 // const Autre = document.getElementsByClassName("");
 // const Historique = document.getElementsByClassName("");
 
-var descriptionAutre = document.getElementsByClassName("js-view-dom-id-b65e57a8672654a3b2a59e71c9f5ccfb730d7879c2c0096e324b0ce29b2a3b74").value
-console.log(descriptionAutre);
-// const descriptionHistorique = document.getElementsByClassName("js-view-dom-id-5c891f37126eb689016ea6da376ca1a15cc90c3dbcb394d063fb43dc16ec5250");
+// var descriptionAutre = document.getElementsByClassName("js-view-dom-id-b65e57a8672654a3b2a59e71c9f5ccfb730d7879c2c0096e324b0ce29b2a3b74").value
+// console.log(descriptionAutre);
+// // const descriptionHistorique = document.getElementsByClassName("js-view-dom-id-5c891f37126eb689016ea6da376ca1a15cc90c3dbcb394d063fb43dc16ec5250");
 
 
-var nameCollection = document.querySelectorAll(".path-ressources .basededonnees .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockcollections-block-1 .view-id-collections .view-content .views-row a").value
-console.log(nameCollection);
+// var nameCollection = document.querySelectorAll(".path-ressources .basededonnees .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockcollections-block-1 .view-id-collections .view-content .views-row a").value
+// console.log(nameCollection);
 
-// var descriptionCollection = document.getElementsByClassName("");
+// // var descriptionCollection = document.getElementsByClassName("");
 
-// let nameCollection = { Autre: "Autres contributions sur la qualité du logement", Historique: "Histoire des expérimentations du logement depuis les années 1950 en Europe"};
+// // let nameCollection = { Autre: "Autres contributions sur la qualité du logement", Historique: "Histoire des expérimentations du logement depuis les années 1950 en Europe"};
 
-var Autre = "Autres contributions sur la qualité du logement"
-var Historique = "Histoire des expérimentations du logement depuis les années 1950 en Europe"
-console.log(Autre, Historique);
+// var Autre = "Autres contributions sur la qualité du logement"
+// var Historique = "Histoire des expérimentations du logement depuis les années 1950 en Europe"
+// console.log(Autre, Historique);
 
 // function getValue(){
 //   for (const nameCollection = Autre ){}

web/themes/custom/eql/scss/pages/_basededonnees.scss

@@ -58,7 +58,7 @@
                                         margin-bottom: 2rem;
                                         justify-content: space-between;
                                         align-items: center;
- 
+                                        
                                         .views-row{
                                             display: flex;
                                             margin: auto;
@@ -66,6 +66,8 @@
                                             width: 46%;
                                             height: 80%;
                                             padding: 1rem;
+                                            
+                                            
                                             .views-field-name{
                                                 .field-content{
                                                     grid-column: 3 /span 6;
@@ -91,13 +93,14 @@
                                                     color: $white;  
                                                 }
                                             }
-                                            .blue{
-                                                background: $blue-dark;
-                                                a{
-                                                    color: $white;  
-                                                }
-                                            }
+                                        
             
+                                        }
+                                        .active{
+                                            background-color: $blue-dark;
+                                            a{
+                                                color: $white;  
+                                            }
                                         }
                                         @media (max-width: 810px){
                                             flex-direction: column;

web/themes/custom/eql/templates/views-view-unformatted.html.twig

@@ -25,10 +25,10 @@
     ]
   %}
 
-  {%
+  {# {%
     set collection = '#collection-id--' ~ a.content
-  %}
-  <div{{ row.attributes.addClass(row_classes, collection) }}>
+  %} #}
+  <div{{ row.attributes.addClass(row_classes) }}>
     {{- row.content -}}
   </div>
 {% endfor %}