bachir/drupal-rorschach
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

js book-depht title

Browse Source
This commit is contained in:
ouidade
2023-11-14 10:31:58 +01:00
parent b63af4efdc
commit b238355f9f
7 changed files with 91 additions and 421 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/rorschach/rorschach.theme
+14 -14
View File
@@ -28,23 +28,23 @@ function rorschach_preprocess_node(&$variables){
} }
function rorschach_preprocess_field(&$variables) { // function rorschach_preprocess_field(&$variables) {
$node = \Drupal::routeMatch()->getParameter('node'); // $node = \Drupal::routeMatch()->getParameter('node');
$field_name = &$variables['field_name']; // // $field_name = &$variables['field_name'];
if($node) { // // if($node) {
// if ($field_name == 'field_type_de_protagoniste'){ // // // if ($field_name == 'field_type_de_protagoniste'){
// $type_protagoniste = $node->get('field_type_de_protagoniste')->getString(); // // // $type_protagoniste = $node->get('field_type_de_protagoniste')->getString();
// $variables['attributes']['class'][] = 'type-de-protagoniste-' . $type_protagoniste; // // // $variables['attributes']['class'][] = 'type-de-protagoniste-' . $type_protagoniste;
// } // // // }
if ($field_name == 'block-pagetitle-2') { // // if ($field_name == 'block-pagetitle-2') {
$depth_title = $node->get('block-pagetitle-2')->getString(); // // $depth_title = $node->id('block-pagetitle-2')->getString();
$variables['classes_array'][] = 'menu-depth-' . $depth_title; // // $variables['attributes']['class'][] = 'menu-depth-' . $depth_title;
} // // }
} // // }
} // }
////////////////////////////////////////////////// //////////////////////////////////////////////////
web/themes/custom/rorschach/scripts/main.js
+77 -163
View File
@@ -1,12 +1,10 @@
console.log('salut'); console.log('salut');
// fusion cellules dans tableau /// fusion cellules dans tableau
/// /// va chercher les p avec class .rowspan pour leur attribuer l'attribut rowspan
// 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'); var cellRowspans = document.querySelectorAll('p.rowspan');
// cellRowspan.setAttribute('rowspan', '4');
for (let cellRowspan of cellRowspans){ for (let cellRowspan of cellRowspans){
let cellRowSpanParent = cellRowspan.parentElement; let cellRowSpanParent = cellRowspan.parentElement;
@@ -14,178 +12,94 @@ for (let cellRowspan of cellRowspans){
cellRowSpanParent.setAttribute('rowspan', '4'); 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){ var displayNones = document.querySelectorAll('p.cell-display-none'); // on va chercher tous les éléments p.cell-display-none
let displayNoneParent = displayNone.parentElement;
displayNoneParent.classList.add('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'); /// attribution d'une class en fonction de book-depth-5
// console.log(pDisplayNone);
// let td = pDisplayNone.parentElement; // var depths = document.getElementsByClassName('book-depth-5');
// console.log(td); // console.log(depths);
// td.classList.add('display-none'); // 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 => { // const article = document.querySelector('article[class*="book-depth"]');
// let td = pDisplayNone.childNodes; // console.log(article);
// console.log(td); // const div = document.querySelector('#block-pagetitle-2');
// td.classList.add('display-none'); // 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()]; // Function to extract the depth class from the article
// // while(pDisplayNone.parentNode){ function getDepthClass(element) {
// // tdparent.push(td); var classes = element.classList;
// // pDisplayNone = pDisplayNone.parentNode; for (var i = 0; i < classes.length; i++) {
// // } if (classes[i].startsWith('book-depth-')) {
return classes[i];
}
/// pour chaque élément de array pDisplayNone ( NodeList ), }
// pDisplayNone.forEach((element) =>document.querySelectorAll('td')); return '';
}
/// 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");
// }
web/themes/custom/rorschach/scripts/partial.js
-27
View File
@@ -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
-172
View File
@@ -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
-45
View File
@@ -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>
web/themes/custom/rorschach/templates/book-export-html.html.twig → web/themes/custom/rorschach/templates/print-export/book-export-html.html.twig
View File
web/themes/custom/rorschach/templates/book-node-export-html.html.twig → web/themes/custom/rorschach/templates/print-export/book-node-export-html.html.twig
View File