js book-depht title

web/themes/custom/rorschach/rorschach.theme

@@ -28,23 +28,23 @@ function rorschach_preprocess_node(&$variables){
   
 }
 
-function rorschach_preprocess_field(&$variables) {
-  $node = \Drupal::routeMatch()->getParameter('node');
-
-  $field_name = &$variables['field_name'];
-  if($node) {
-    // if ($field_name == 'field_type_de_protagoniste'){
-    // $type_protagoniste = $node->get('field_type_de_protagoniste')->getString();
-    // $variables['attributes']['class'][] = 'type-de-protagoniste-' . $type_protagoniste;
-    // } 
-    if ($field_name == 'block-pagetitle-2') {
-      $depth_title = $node->get('block-pagetitle-2')->getString();
-      $variables['classes_array'][] = 'menu-depth-' . $depth_title;
-    }  
-  }
+// function rorschach_preprocess_field(&$variables) {
+//   $node = \Drupal::routeMatch()->getParameter('node');
+
+//   // $field_name = &$variables['field_name'];
+//   // if($node) {
+//   //   // if ($field_name == 'field_type_de_protagoniste'){
+//   //   // $type_protagoniste = $node->get('field_type_de_protagoniste')->getString();
+//   //   // $variables['attributes']['class'][] = 'type-de-protagoniste-' . $type_protagoniste;
+//   //   // } 
+//   //   if ($field_name == 'block-pagetitle-2') {
+//   //     $depth_title = $node->id('block-pagetitle-2')->getString();
+//   //     $variables['attributes']['class'][] = 'menu-depth-' . $depth_title;
+//   //   }  
+//   // }
 
 
-}
+// }
 
 
 //////////////////////////////////////////////////

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

@@ -1,12 +1,10 @@
 console.log('salut');
 
-// fusion cellules dans tableau
+/// fusion cellules dans tableau
 
-///
-// doit chercher un p dans td dans tbody dans table dans .paragraph--type--text qui a la class .rowspan et setAttribut a son parent td
+/// va chercher les p avec class .rowspan pour leur attribuer l'attribut rowspan
 
 var cellRowspans = document.querySelectorAll('p.rowspan');
-// cellRowspan.setAttribute('rowspan', '4');
 
 for (let cellRowspan of cellRowspans){
     let cellRowSpanParent = cellRowspan.parentElement;
@@ -14,178 +12,94 @@ for (let cellRowspan of cellRowspans){
     cellRowSpanParent.setAttribute('rowspan', '4');
 }
 
-// // ok va chercher tous les éléments p.cell-display-none (child)
-var displayNones = document.querySelectorAll('p.cell-display-none');
-
-for (let displayNone of displayNones){
-  let displayNoneParent = displayNone.parentElement;
-  displayNoneParent.classList.add('display-none');
-}
-console.log(displayNone);
-
-
-
-// // // ok va chercher un element td (parent)
-// var tdDisplayNone = document.querySelector('p.cell-display-none').parentElement;   
-// console.log(tdDisplayNone);
-// // /// et lui appliquer une class.
-// tdDisplayNone.classList.add('display-none');
-
-
-
-
-///// comment aller chercher TOUS les éléments td ?  //////
-
-//// en repassant par element parent ? puis
-// let tbody = document.querySelectorAll('tbody');
-// console.log(tbody);
-
-// let pDisplayNone = document.getElementsByClassNameAll('.cell-display-none');
-// console.log(pDisplayNone);
-
-// let td = pDisplayNone.parentElement;
-// console.log(td);
-// td.classList.add('display-none');
-
-// tbody.forEach(pDisplayNone => {
-//   let td = pDisplayNone.childNodes;
-// console.log(td);
-// td.classList.add('display-none');
-// });
-
-
-
-
-
-// // let tdparent = [pDisplayNone.parentNode.closest()];
-// // while(pDisplayNone.parentNode){
-// //     tdparent.push(td);
-// //     pDisplayNone = pDisplayNone.parentNode;
-// // }
-
-
-/// pour chaque élément de array pDisplayNone ( NodeList ), 
-// pDisplayNone.forEach((element) =>document.querySelectorAll('td'));
-
-/// aller chercher le parent td 
-/// et lui appliquer une class.
-
-// faut faire un array de td avant de faire un for each
-// let td = new Array(pDisplayNone);
-// console.log(td);
-
-
-
-
-
-
-
-
-
-
-
-
-// const parent = document.getElementById("parent");
-// let childNodes = parent.childNodes;
-// console.log(childNodes.length); // let's assume "2"
-// parent.appendChild(document.createElement("div"));
-// console.log(childNodes.length); // outputs "3"
-
-
-
-// function displayNone(){
-
-  // for (let i = 0; i < cellsDisplayNone.lenght; i++ ){
-  //   const cellDisplayNone = cellsDisplayNone.parentElement[i]
-  //   // let cellDisplayNone = this.parentElement.getElementsByClassName("cell-display-none");
-  //   // console.log(cellDisplayNone);
-
-
-  // }
-
-  
-// };
-// cellDisplayNone.classList.add('display-none');
-// cellDisplayNone.style.display ="none";
 
+var displayNones = document.querySelectorAll('p.cell-display-none');  // on va chercher tous les éléments p.cell-display-none
 
+for (let displayNone of displayNones){ /// on déclare 1 élément dans l'array 
+  let displayNoneParent = displayNone.parentElement;  /// on va chercher le parent de l'élément dans l'array
+  displayNoneParent.classList.add('display-none');   /// on ajout la class au parent
+  console.log(displayNoneParent);
+}
 
 
-// for (let i = 0; i < cellDisplayNone.lenght; i++ ){
 
-//   cellDisplayNone.style.display ="none";
-// }
 
 
-//////////////
 
-// var cellsRowspan = document.getElementsByClassName("rowspan");
-// var cellsDisplayNone = document.getElementsByClassName("cell-display-none");
+/// attribution d'une class en fonction de book-depth-5
 
-// function rowspan(){
-//   // for (let i = 0; i < cellsRowspan.length; i++){
-//   //   cellsRowspan[i].
-//   // }
-//   let cellRowspan = this.parentNode.querySelector(".rowspan");
-//   cellRowspan.setAttribute('rowspan', '4');
+// var depths = document.getElementsByClassName('book-depth-5');
+// console.log(depths);
+// for (let depth of depths){
+//   let depthSiblingTitle = depth.previousSibling('.block-page-title-block');
+//   depthSiblingTitle.classList.add('book-depth-5');
+//   console.log(depthSiblingTitle);
 // }
 
+// const article = document.querySelector('article[class*="book-depth"]');
+// console.log(article);
+// const div = document.querySelector('#block-pagetitle-2');
+// console.log(div);
+// div.classList.add(article.classList);
 
 
 
+// const article = document.querySelector('article.book-depth-*');
+// console.log(article);
+// const div = document.querySelector('#block-pagetitle-2');
+// div.classList.add(article.classList);
 
 
+///////////////////
 
+// document.addEventListener('DOMContentLoaded', function () {
+//   // Get the depth of the page within the book (You need to replace this logic with your own)
+//   var depth = 5; // For example, you can set the depth dynamically based on your criteria
 
+//   // Select the article element
+//   var article = document.querySelector('article');
 
-// function tableOne(){
-//   var table1cell1 = document.querySelector('#tablefield-paragraph-34-field_tablefield-0.tablefield tbody tr td.row_1.col_1');
-//   var table1cell2 = document.querySelector('#tablefield-paragraph-34-field_tablefield-0.tablefield tbody tr td.row_2.col_1');
-//   var table1cell3 = document.querySelector('#tablefield-paragraph-34-field_tablefield-0.tablefield tbody tr td.row_3.col_1');
-//   var table1cell4 = document.querySelector('#tablefield-paragraph-34-field_tablefield-0.tablefield tbody tr td.row_4.col_1');
+//   // Remove the existing depth class (if any)
+//   article.classList.remove('book-depth-4', 'book-depth-5', 'book-depth-6', 'book-depth-7', 'book-depth-8', 'book-depth-9');
 
-//   table1cell1.setAttribute('rowspan', '4');
-//   table1cell2.style.display ="none";
-//   table1cell3.style.display ="none";
-//   table1cell4.style.display ="none";
-// }
+//   // Add the new depth class
+//   article.classList.add('book-depth-' + depth);
 
+//   // Select the block-pagetitle-2 element
+//   var blockPagetitle2 = document.getElementById('block-pagetitle-2');
 
-// // function tableTwo(){
-// //   var table2cell1 = document.querySelector('#tablefield-paragraph-29-field_tablefield-0.tablefield tbody tr td.row_1.col_1');
-// //   var table2cell2 = document.querySelector('#tablefield-paragraph-29-field_tablefield-0.tablefield tbody tr td.row_2.col_1');
-// //   var table2cell3 = document.querySelector('#tablefield-paragraph-29-field_tablefield-0.tablefield tbody tr td.row_3.col_1');
-// //   var table2cell4 = document.querySelector('#tablefield-paragraph-29-field_tablefield-0.tablefield tbody tr td.row_4.col_1');
-  
-// //   table2cell1.setAttribute('rowspan', '4');
-// //   table2cell2.style.display ="none";
-// //   table2cell3.style.display ="none";
-// //   table2cell4.style.display ="none";
-  
-// // }
-
-// tableOne();
-// tableTwo();
-
-// var table2cell1 = document.querySelector('#tablefield-paragraph-29-field_tablefield-0.tablefield tbody tr td.row_1.col_1');
-// var table2cell2 = document.querySelector('#tablefield-paragraph-29-field_tablefield-0.tablefield tbody tr td.row_2.col_1');
-// var table2cell3 = document.querySelector('#tablefield-paragraph-29-field_tablefield-0.tablefield tbody tr td.row_3.col_1');
-// var table2cell4 = document.querySelector('#tablefield-paragraph-29-field_tablefield-0.tablefield tbody tr td.row_4.col_1');
-
-// table2cell1.setAttribute('rowspan', '4');
-// table2cell2.style.display ="none";
-// table2cell3.style.display ="none";
-// table2cell4.style.display ="none";
-
-
-// const table = document.getElementByClass("paragraph--type--text");
-// console.log(hello);
-// for (const child of table.children) {
-//   console.log(child.tagName);
-// }
+//   // Remove the existing depth class (if any)
+//   blockPagetitle2.classList.remove('book-depth-4', 'book-depth-5', 'book-depth-6', 'book-depth-7', 'book-depth-8', 'book-depth-9');
 
-// const paragraph = document.getElementsByClassName("paragraph--type--text");
-// for (const table of paragraph.children){
-//   table.addClass("rowspan");
-// }
+//   // Add the new depth class to block-pagetitle-2
+//   blockPagetitle2.classList.add('book-depth-' + depth);
+// });
 
+///////////////////
+
+document.addEventListener('DOMContentLoaded', function () {
+  // Select the article element
+  var article = document.querySelector('article');
+  console.log(article);
+  // Get the current depth class from the article
+  var depthClass = getDepthClass(article);
+  console.log(depthClass);
+
+  // Apply the depth class to block-pagetitle-2
+  var blockPagetitle2 = document.getElementById('block-pagetitle-2');
+  blockPagetitle2.classList.add(depthClass);
+
+  // Optional: Remove the depth class from article if needed
+  article.classList.remove(depthClass);
+
+  // Function to extract the depth class from the article
+  function getDepthClass(element) {
+      var classes = element.classList;
+      for (var i = 0; i < classes.length; i++) {
+          if (classes[i].startsWith('book-depth-')) {
+              return classes[i];
+          }
+      }
+      return '';
+  }
+});

web/themes/custom/rorschach/scripts/partial.js

@@ -1,27 +0,0 @@
-console.log('salut');
-
-// fusion cellules dans tableau
-
-///
-// doit chercher un p dans td dans tbody dans table dans .paragraph--type--text qui a la class .rowspan et setAttribut a son parent td
-
-var cellRowspans = document.querySelectorAll('p.rowspan');
-// cellRowspan.setAttribute('rowspan', '4');
-
-for (let cellRowspan of cellRowspans){
-    let cellRowSpanParent = cellRowspan.parentElement;
-    console.log(cellRowSpanParent);
-    cellRowSpanParent.setAttribute('rowspan', '4');
-}
-
-// // ok va chercher tous les éléments p.cell-display-none (child)
-const pDisplayNone = document.querySelectorAll('p.cell-display-none');
-console.log(pDisplayNone);
-
-
-
-// // ok va chercher un element td (parent)
-var tdDisplayNone = document.querySelector('p.cell-display-none').parentElement;   
-console.log(tdDisplayNone);
-// /// et lui appliquer une class.
-tdDisplayNone.classList.add('display-none');

web/themes/custom/rorschach/scripts/test

@@ -1,172 +0,0 @@
-console.log('salut');
-
-// fusion cellules dans tableau
-
-///
-// doit chercher un p dans td dans tbody dans table dans .paragraph--type--text qui a la class .rowspan et setAttribut a son parent td
-
-var cellRowspan = document.querySelector('p.rowspan').parentElement;
-console.log(cellRowspan);
-cellRowspan.setAttribute('rowspan', '4');
-
-// // ok va chercher tous les éléments p.cell-display-none (child)
-// const pDisplayNone = document.querySelectorAll('p.cell-display-none');
-// console.log(pDisplayNone);
-
-
-
-
-
-// // ok va chercher un element td (parent)
-// var tdDisplayNone = document.querySelector('p.cell-display-none').parentElement;   
-// console.log(tdDisplayNone);
-// /// et lui appliquer une class.
-// tdDisplayNone.classList.add('display-none');
-
-///// comment aller chercher TOUS les éléments td ?  //////
-
-
-// const pDisplayNone = document.querySelector('p.cell-display-none');
-// console.log(pDisplayNone.closest('.field__item'));
-
-// let td = pDisplayNone.parentNode;
-
-// const tdparent = pDisplayNone.closest('td');
-// // while(pDisplayNone.parentNode){
-// //     tdparent.push(td);
-// //     pDisplayNone = pDisplayNone.parentNode;
-// // }
-// console.log(tdparent);
-
-
-
-/// pour chaque élément de array pDisplayNone ( NodeList ), 
-// pDisplayNone.forEach((element) =>document.querySelectorAll('td'));
-
-/// aller chercher le parent td 
-/// et lui appliquer une class.
-
-// faut faire un array de td avant de faire un for each
-// let td = new Array(pDisplayNone);
-// console.log(td);
-
-
-
-
-// const child = document.getElementById('child');
-
-// const parentWithClass = child.closest('.parent');
-
-// console.log(parentWithClass); // 👉️ div.parent
-
-
-
-
-
-
-
-
-// const parent = document.getElementById("parent");
-// let childNodes = parent.childNodes;
-// console.log(childNodes.length); // let's assume "2"
-// parent.appendChild(document.createElement("div"));
-// console.log(childNodes.length); // outputs "3"
-
-
-
-// function displayNone(){
-
-  // for (let i = 0; i < cellsDisplayNone.lenght; i++ ){
-  //   const cellDisplayNone = cellsDisplayNone.parentElement[i]
-  //   // let cellDisplayNone = this.parentElement.getElementsByClassName("cell-display-none");
-  //   // console.log(cellDisplayNone);
-
-
-  // }
-
-  
-// };
-// cellDisplayNone.classList.add('display-none');
-// cellDisplayNone.style.display ="none";
-
-
-
-
-// for (let i = 0; i < cellDisplayNone.lenght; i++ ){
-
-//   cellDisplayNone.style.display ="none";
-// }
-
-
-//////////////
-
-// var cellsRowspan = document.getElementsByClassName("rowspan");
-// var cellsDisplayNone = document.getElementsByClassName("cell-display-none");
-
-// function rowspan(){
-//   // for (let i = 0; i < cellsRowspan.length; i++){
-//   //   cellsRowspan[i].
-//   // }
-//   let cellRowspan = this.parentNode.querySelector(".rowspan");
-//   cellRowspan.setAttribute('rowspan', '4');
-// }
-
-
-
-
-
-
-
-
-
-// function tableOne(){
-//   var table1cell1 = document.querySelector('#tablefield-paragraph-34-field_tablefield-0.tablefield tbody tr td.row_1.col_1');
-//   var table1cell2 = document.querySelector('#tablefield-paragraph-34-field_tablefield-0.tablefield tbody tr td.row_2.col_1');
-//   var table1cell3 = document.querySelector('#tablefield-paragraph-34-field_tablefield-0.tablefield tbody tr td.row_3.col_1');
-//   var table1cell4 = document.querySelector('#tablefield-paragraph-34-field_tablefield-0.tablefield tbody tr td.row_4.col_1');
-
-//   table1cell1.setAttribute('rowspan', '4');
-//   table1cell2.style.display ="none";
-//   table1cell3.style.display ="none";
-//   table1cell4.style.display ="none";
-// }
-
-
-// // function tableTwo(){
-// //   var table2cell1 = document.querySelector('#tablefield-paragraph-29-field_tablefield-0.tablefield tbody tr td.row_1.col_1');
-// //   var table2cell2 = document.querySelector('#tablefield-paragraph-29-field_tablefield-0.tablefield tbody tr td.row_2.col_1');
-// //   var table2cell3 = document.querySelector('#tablefield-paragraph-29-field_tablefield-0.tablefield tbody tr td.row_3.col_1');
-// //   var table2cell4 = document.querySelector('#tablefield-paragraph-29-field_tablefield-0.tablefield tbody tr td.row_4.col_1');
-  
-// //   table2cell1.setAttribute('rowspan', '4');
-// //   table2cell2.style.display ="none";
-// //   table2cell3.style.display ="none";
-// //   table2cell4.style.display ="none";
-  
-// // }
-
-// tableOne();
-// tableTwo();
-
-// var table2cell1 = document.querySelector('#tablefield-paragraph-29-field_tablefield-0.tablefield tbody tr td.row_1.col_1');
-// var table2cell2 = document.querySelector('#tablefield-paragraph-29-field_tablefield-0.tablefield tbody tr td.row_2.col_1');
-// var table2cell3 = document.querySelector('#tablefield-paragraph-29-field_tablefield-0.tablefield tbody tr td.row_3.col_1');
-// var table2cell4 = document.querySelector('#tablefield-paragraph-29-field_tablefield-0.tablefield tbody tr td.row_4.col_1');
-
-// table2cell1.setAttribute('rowspan', '4');
-// table2cell2.style.display ="none";
-// table2cell3.style.display ="none";
-// table2cell4.style.display ="none";
-
-
-// const table = document.getElementByClass("paragraph--type--text");
-// console.log(hello);
-// for (const child of table.children) {
-//   console.log(child.tagName);
-// }
-
-// const paragraph = document.getElementsByClassName("paragraph--type--text");
-// for (const table of paragraph.children){
-//   table.addClass("rowspan");
-// }
-

web/themes/custom/rorschach/templates/block--entity-field--node--field-courriel.html.twig

@@ -1,45 +0,0 @@
-{#
-/**
- * @file
- * Theme override to display a block.
- *
- * Available variables:
- * - plugin_id: The ID of the block implementation.
- * - label: The configured label of the block if visible.
- * - configuration: A list of the block's configuration values.
- *   - label: The configured label for the block.
- *   - label_display: The display settings for the label.
- *   - provider: The module or other provider that provided this block plugin.
- *   - Block plugin specific settings will also be stored here.
- * - content: The content of this block.
- * - attributes: array of HTML attributes populated by modules, intended to
- *   be added to the main container tag of this template.
- *   - id: A valid HTML ID and guaranteed unique.
- * - title_attributes: Same as attributes, except applied to the main title
- *   tag that appears in the template.
- * - title_prefix: Additional output populated by modules, intended to be
- *   displayed in front of the main title tag that appears in the template.
- * - title_suffix: Additional output populated by modules, intended to be
- *   displayed after the main title tag that appears in the template.
- *
- * @see template_preprocess_block()
- */
-#}
-{%
-  set classes = [
-    'block',
-    'block-' ~ configuration.provider|clean_class,
-    'block-' ~ plugin_id|clean_class,
-  ]
-%}
-<div class='title-contact'>Contact</div>
-<div{{ attributes.addClass(classes) }}>
-  {{ title_prefix }}
-  {% if label %}
-    <span><h2{{ title_attributes }}>{{ label }}</h2></span>
-  {% endif %}
-  {{ title_suffix }}
-  {% block content %}
-    {{ content }}
-  {% endblock %}
-</div>