print

web/themes/custom/rorschach/css-compiled/print.css

@@ -0,0 +1,28 @@
+/*rorschach*/
+/*print*/
+.field__label {
+  display: none; }
+
+table {
+  border-collapse: collapse; }
+  table thead th {
+    border: 1px solid #333;
+    text-align: center;
+    font-weight: bold;
+    padding: 1rem;
+    background-color: grey; }
+  table tbody td {
+    border: 1px solid #333;
+    text-align: center;
+    padding: 1rem;
+    background-color: white; }
+  table .field__label {
+    display: none; }
+
+body {
+  margin: 3rem; }
+
+@media print {
+  @page {
+    margin: 5mm !important;
+    size: landscape !important; } }

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

@@ -1,4 +1,4 @@
-/*eql*/
+/*rorschach*/
 /*components*/
 .quote {
   font-weight: 700;
@@ -17,7 +17,11 @@ table {
   table tbody td {
     border: 1px solid #333;
     text-align: center;
-    padding: 1rem; }
+    padding: 1rem;
+    background-color: white; }
+
+.display-none {
+  display: none; }
 
 #paragraph-id--226 tbody td {
   text-align: start;
@@ -835,6 +839,9 @@ a {
 .field--name-field-subheading {
   font-size: 1rem; }
 
+.display-none {
+  display: none; }
+
 .node-book-edit-form {
   width: 80%;
   border-top-style: solid;

web/themes/custom/rorschach/package.json

@@ -17,7 +17,7 @@
     "node-sass": "^9.0.0",
     "sass": "^1.63.4"
   },
-  "browserslist": "last 4 versions",
+  "browerslist": "last 4 versions",
   "dependencies": {
     "nodejs": "^0.0.0"
   },

web/themes/custom/rorschach/rorschach.libraries.yml

@@ -2,6 +2,7 @@ global-css:
   css:
     theme:
        css-compiled/styles.css: {}
+       css-compiled/print.css: {}
       #  css-prefixed/styles.css: {}
 global-js:
   js:

web/themes/custom/rorschach/rorschach.theme

@@ -39,8 +39,7 @@ function rorschach_preprocess_field(&$variables) {
     // } 
     if ($field_name == 'block-pagetitle-2') {
       $depth_title = $node->get('block-pagetitle-2')->getString();
-      $variables['classes_array'][] = "menu-depth-" . $depth_title;
+      $variables['classes_array'][] = 'menu-depth-' . $depth_title;
-
     }  
   }
 

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

@@ -5,36 +5,54 @@ console.log('salut');
 ///
 // 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;
+var cellRowspan = document.querySelector('p.rowspan').parentElement;
-// cellRowspan.setAttribute('rowspan', '4');
+cellRowspan.setAttribute('rowspan', '4');
+
+
 
 // // ok va chercher tous les éléments p.cell-display-none (child)
-// const pDisplayNone = document.querySelectorAll('p.cell-display-none');
+const pDisplayNone = document.querySelectorAll('p.cell-display-none');
-// console.log(pDisplayNone);
+console.log(pDisplayNone);
-
-
 
 
 
 // // ok va chercher un element td (parent)
-// var tdDisplayNone = document.querySelector('p.cell-display-none').parentElement;   
+var tdDisplayNone = document.querySelector('p.cell-display-none').parentElement;   
-// console.log(tdDisplayNone);
+console.log(tdDisplayNone);
 // /// et lui appliquer une class.
-// tdDisplayNone.classList.add('display-none');
+tdDisplayNone.classList.add('display-none');
+
+
+
 
 ///// comment aller chercher TOUS les éléments td ?  //////
-let p = document.querySelectorAll('p.cell-display-none');
+
+//// 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 pDisplayNone = document.querySelector('p.cell-display-none');
+
-console.log(pDisplayNone);
+
-let tdparent = [];
+// // let tdparent = [pDisplayNone.parentNode.closest()];
-while(pDisplayNone.parentNode.closest('td')){
+// // while(pDisplayNone.parentNode){
-    tdparent.push(pDisplayNone.parentNode.closest('td'));
+// //     tdparent.push(td);
-    pDisplayNone = pDisplayNone.parentNode.closest('td');
+// //     pDisplayNone = pDisplayNone.parentNode;
-}
+// // }
-console.log(tdparent);
 
 
 /// pour chaque élément de array pDisplayNone ( NodeList ), 

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

@@ -0,0 +1,23 @@
+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;
+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');

web/themes/custom/rorschach/scripts/test

@@ -0,0 +1,172 @@
+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/scss/components/_tablefields.scss

@@ -20,12 +20,19 @@ table{
         border: 1px solid #333; 
         text-align: center; 
         padding: 1rem;
-        background-color: red;
+        background-color: white;
     }
 }
 
+.display-none{
+    display: none;
+}
 
 
+// :host(p.cell-display-none){
+//     display: none;
+// }
+
 #paragraph-id--226{
     tbody {
         td{

web/themes/custom/rorschach/scss/print.scss

@@ -0,0 +1,8 @@
+/*rorschach*/
+
+/*print*/
+
+
+@import "print/_print_global";
+@import "print/_tables";
+@import "print/_layout";

web/themes/custom/rorschach/scss/print/_layout.scss

@@ -0,0 +1,13 @@
+
+
+body{
+    margin: 3rem;
+}
+@media print {
+    @page {
+        margin: 5mm !important;
+        size: landscape !important;
+
+    }
+} 
+  

web/themes/custom/rorschach/scss/print/_print_global.scss

@@ -0,0 +1,6 @@
+
+
+.field__label{
+    display: none;
+}
+

web/themes/custom/rorschach/scss/print/_tables.scss

@@ -0,0 +1,22 @@
+
+
+table{
+    border-collapse: collapse;
+    thead th{
+        border: 1px solid #333; 
+        text-align: center; 
+        font-weight: bold;
+        padding: 1rem;
+        background-color: grey;
+    }
+
+    tbody td {
+        border: 1px solid #333; 
+        text-align: center; 
+        padding: 1rem;
+        background-color: white;
+    }
+    .field__label{
+        display:none;
+    }
+}

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

@@ -1,4 +1,4 @@
-/*eql*/
+/*rorschach*/
 
 /*components*/
 @import "components/_quotes";
@@ -38,3 +38,6 @@
 
 
 
+
+
+

web/themes/custom/rorschach/templates/block.html.twig

@@ -30,6 +30,8 @@
     'block',
     'block-' ~ configuration.provider|clean_class,
     'block-' ~ plugin_id|clean_class,
+
+
   ]
 %}
 <div{{ attributes.addClass(classes) }}>

web/themes/custom/rorschach/templates/book-export-html.html.twig

@@ -0,0 +1,48 @@
+{#
+/**
+ * @file
+ * Default theme implementation for printed version of book outline.
+ *
+ * Available variables:
+ * - title: Top level node title.
+ * - head: Header tags.
+ * - language: Language object.
+ * - language_rtl: A flag indicating whether the current display language is a
+ *   right to left language.
+ * - base_url: URL to the home page.
+ * - contents: Nodes within the current outline rendered through
+ *   book-node-export-html.html.twig.
+ *
+ * @see template_preprocess_book_export_html()
+ *
+ * @ingroup themeable
+ */
+#}
+<!DOCTYPE html>
+<html{{ html_attributes }}>
+  <head>
+    <title>{{ title }}</title>
+    {{ page.head }}
+    <base href="{{ base_url }}" />
+    <link type="text/css" rel="stylesheet" href="/themes/custom/rorschach/css-compiled/print.css" />
+
+  </head>
+  <body>
+    {#
+      The given node is embedded to its absolute depth in a top level section.
+      For example, a child node with depth 2 in the hierarchy is contained in
+      (otherwise empty) div elements corresponding to depth 0 and depth 1. This
+      is intended to support WYSIWYG output - e.g., level 3 sections always look
+      like level 3 sections, no matter their depth relative to the node selected
+      to be exported as printer-friendly HTML.
+    #}
+
+  {% if depth > 1 %}{% for i in 1..depth-1 %}
+    <div>
+  {% endfor %}{% endif %}
+  {{ contents }}
+      {% if depth > 1 %}{% for i in 1..depth-1 %}
+    </div>
+  {% endfor %}{% endif %}
+  </body>
+</html>

web/themes/custom/rorschach/templates/book-node-export-html.html.twig

@@ -17,7 +17,7 @@
 #}
 <article>
   <h1>{{ title }}</h1>
-  {{ depth }}
+  {# {{ depth }} #}
   {{ content }}
   {{ children }}
 </article>

web/themes/custom/rorschach/templates/field.html.twig

@@ -54,13 +54,6 @@
   ]
 %}
 
-{%
-  set ouid_classes = [
-    'first_part_home',
-  ]
-%}
-
-
 
 
   {% if label_hidden %}

web/themes/custom/rorschach/templates/layout/block--page-title-block.html.twig

@@ -0,0 +1,52 @@
+{#
+/**
+ * @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{{ attributes.addClass(classes) }}>
+  {{ title_prefix }}
+  {% if label %}
+      {# <video autoplay muted loop id="myVideo">
+  <source src="rain.mp4" type="video/mp4">
+</video> #}
+    <span><h2{{ title_attributes }}>{{ label }}</h2></span>
+  {% endif %}
+  {{ title_suffix }}
+
+
+  {% block content %}
+
+    {{ content }}
+  {% endblock %}
+</div>

web/themes/custom/rorschach/templates/layout/page-title.html.twig

@@ -0,0 +1,21 @@
+{#
+/**
+ * @file
+ * Default theme implementation for page titles.
+ *
+ * Available variables:
+ * - title_attributes: HTML attributes for the page title element.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title: The page title, for use in the actual content.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * @ingroup themeable
+ */
+#}
+{{ title_prefix }}
+{% if title %}
+  <h1{{ title_attributes }}>{{ title }}</h1>
+{% endif %}
+{{ title_suffix }}