From b238355f9f243de78c6c18e935779e9199610004 Mon Sep 17 00:00:00 2001 From: ouidade Date: Tue, 14 Nov 2023 10:31:58 +0100 Subject: [PATCH] js book-depht title --- web/themes/custom/rorschach/rorschach.theme | 28 +- web/themes/custom/rorschach/scripts/main.js | 240 ++++++------------ .../custom/rorschach/scripts/partial.js | 27 -- web/themes/custom/rorschach/scripts/test | 172 ------------- ...tity-field--node--field-courriel.html.twig | 45 ---- .../book-export-html.html.twig | 0 .../book-node-export-html.html.twig | 0 7 files changed, 91 insertions(+), 421 deletions(-) delete mode 100644 web/themes/custom/rorschach/scripts/partial.js delete mode 100644 web/themes/custom/rorschach/scripts/test delete mode 100644 web/themes/custom/rorschach/templates/block--entity-field--node--field-courriel.html.twig rename web/themes/custom/rorschach/templates/{ => print-export}/book-export-html.html.twig (100%) rename web/themes/custom/rorschach/templates/{ => print-export}/book-node-export-html.html.twig (100%) diff --git a/web/themes/custom/rorschach/rorschach.theme b/web/themes/custom/rorschach/rorschach.theme index c30df68..2a8a56c 100644 --- a/web/themes/custom/rorschach/rorschach.theme +++ b/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'); +// 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; - } - } +// // $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; +// // } +// // } -} +// } ////////////////////////////////////////////////// diff --git a/web/themes/custom/rorschach/scripts/main.js b/web/themes/custom/rorschach/scripts/main.js index b5b5bfa..1fc20e4 100644 --- a/web/themes/custom/rorschach/scripts/main.js +++ b/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'); +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); } -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); +/// attribution d'une class en fonction de book-depth-5 -// let td = pDisplayNone.parentElement; -// console.log(td); -// td.classList.add('display-none'); +// 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); +// } -// tbody.forEach(pDisplayNone => { -// let td = pDisplayNone.childNodes; -// console.log(td); -// td.classList.add('display-none'); +// 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'); + +// // 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'); + +// // Add the new depth class +// article.classList.add('book-depth-' + depth); + +// // Select the block-pagetitle-2 element +// var blockPagetitle2 = document.getElementById('block-pagetitle-2'); + +// // 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'); + +// // 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); -// // 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"; - - - - -// 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"); -// } - + // 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 ''; + } +}); \ No newline at end of file diff --git a/web/themes/custom/rorschach/scripts/partial.js b/web/themes/custom/rorschach/scripts/partial.js deleted file mode 100644 index 992f8f1..0000000 --- a/web/themes/custom/rorschach/scripts/partial.js +++ /dev/null @@ -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'); diff --git a/web/themes/custom/rorschach/scripts/test b/web/themes/custom/rorschach/scripts/test deleted file mode 100644 index 8c75119..0000000 --- a/web/themes/custom/rorschach/scripts/test +++ /dev/null @@ -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"); -// } - diff --git a/web/themes/custom/rorschach/templates/block--entity-field--node--field-courriel.html.twig b/web/themes/custom/rorschach/templates/block--entity-field--node--field-courriel.html.twig deleted file mode 100644 index c5126d8..0000000 --- a/web/themes/custom/rorschach/templates/block--entity-field--node--field-courriel.html.twig +++ /dev/null @@ -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, - ] -%} -
Contact
- - {{ title_prefix }} - {% if label %} - {{ label }} - {% endif %} - {{ title_suffix }} - {% block content %} - {{ content }} - {% endblock %} - diff --git a/web/themes/custom/rorschach/templates/book-export-html.html.twig b/web/themes/custom/rorschach/templates/print-export/book-export-html.html.twig similarity index 100% rename from web/themes/custom/rorschach/templates/book-export-html.html.twig rename to web/themes/custom/rorschach/templates/print-export/book-export-html.html.twig diff --git a/web/themes/custom/rorschach/templates/book-node-export-html.html.twig b/web/themes/custom/rorschach/templates/print-export/book-node-export-html.html.twig similarity index 100% rename from web/themes/custom/rorschach/templates/book-node-export-html.html.twig rename to web/themes/custom/rorschach/templates/print-export/book-node-export-html.html.twig