tentative js table

config/sync/editor.editor.wysiwyg.yml

@@ -66,7 +66,7 @@ settings:
     language:
       language_list: un
     stylescombo:
-      styles: "h4.title-niv4|title niv4\r\nh5.title-niv5|title niv5\r\nh6.title-niv6|title niv6\r\nh7.intertitre-niv7|Intertitre niv7\r\np.quote|Quote\r\np.psychologist-instruction|Psychologist Instruction\r\np.note | Note\r\np.note-title | Note Title\r\nh8.note-title | h8 Note Title\r\np.caution | Caution\r\nh9.caution-title | Caution Title\r\np.rowspan | Rowspan\r\np.liste-tiret | Liste tiret"
+      styles: "h4.title-niv4|Title niv4\r\nh5.title-niv5|Title niv5\r\nh6.title-niv6|Title niv6\r\nh7.intertitre-niv7|Intertitre niv7\r\np.quote|Quote\r\np.psychologist-instruction|Psychologist Instruction\r\np.note | Note\r\np.note-title | Note Title\r\nh8.note-title | h8 Note Title\r\np.caution | Caution\r\nh9.caution-title | Caution Title\r\np.rowspan | Rowspan\r\np.liste-tiret | Liste tiret\r\np.cell-display-none | Display None\r\np.text-labor | Labor"
     drupallink:
       linkit_enabled: true
       linkit_profile: default

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

@@ -2,33 +2,142 @@ console.log('salut');
 
 // fusion cellules dans tableau
 
-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";
+///
+// 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;
+// 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 ?  //////
+let p = document.querySelectorAll('p.cell-display-none');
+
+
+
+let pDisplayNone = document.querySelector('p.cell-display-none');
+console.log(pDisplayNone);
+let tdparent = [];
+while(pDisplayNone.parentNode.closest('td')){
+    tdparent.push(pDisplayNone.parentNode.closest('td'));
+    pDisplayNone = pDisplayNone.parentNode.closest('td');
 }
+console.log(tdparent);
 
 
-// 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";
+/// 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";
+
+
+
+
+// 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";
 // }
 
-tableOne();
+
+// // 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');
@@ -42,6 +151,14 @@ tableOne();
 // 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/scss/components/_tablefields.scss

@@ -20,11 +20,12 @@ table{
         border: 1px solid #333; 
         text-align: center; 
         padding: 1rem;
-
+        background-color: red;
     }
 }
 
 
+
 #paragraph-id--226{
     tbody {
         td{

web/themes/custom/rorschach/scss/pages/_bookpage.scss

@@ -3,4 +3,6 @@
 }
 
 
-  
+.display-none{
+    display: none;
+}

web/themes/custom/rorschach/scss/styles.scss

@@ -3,7 +3,7 @@
 /*components*/
 @import "components/_quotes";
 @import "components/_tablefields";  
-@import "components/_notes.scss";  
+@import "components/_notes";  
 
 /*global*/