base.html.twig 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. <!DOCTYPE html>
  2. <html lang="{{ (grav.language.getActive ?: grav.config.site.default_lang)|e }}">
  3. <head>
  4. {% block head %}
  5. <meta charset="utf-8" />
  6. <title>{% if header.title %}{{ header.title|e }} | {% endif %}{{ site.title|e }}</title>
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8. <meta name="viewport" content="width=device-width, initial-scale=1">
  9. {% include 'partials/metadata.html.twig' %}
  10. <link rel="icon" type="image/png" href="{{ url('theme://images/logo.png')|e }}" />
  11. <link rel="canonical" href="{{ page.canonical(true)|e }}" />
  12. <script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
  13. {% endblock head %}
  14. {% block stylesheets %}
  15. {% do assets.addCss('https://unpkg.com/purecss@1.0.0/build/pure-min.css', 100) %}
  16. {% do assets.addCss('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css', 99) %}
  17. {% do assets.addCss('theme://css/pagedjs.css', 98) %}
  18. {% do assets.addCss('theme://css/custom.css', 97) %}
  19. {% do assets.addCss('theme://fonts/fonts.css', 96) %}
  20. {% do assets.addCss('theme://css/mep_carnet.css', 95) %}
  21. {% endblock %}
  22. {% block javascripts %}
  23. {% do assets.addJs('jquery', 100) %}
  24. {% endblock %}
  25. {% block assets deferred %}
  26. {{ assets.css()|raw }}
  27. {{ assets.js()|raw }}
  28. {% endblock %}
  29. </head>
  30. <body id="top" class="{{ page.header.body_classes|e }}">
  31. {% block body %}
  32. <section id="body">
  33. <div>
  34. {% block content %}{% endblock %}
  35. </div>
  36. </section>
  37. {% endblock %}
  38. {% block bottom %}
  39. {{ assets.js('bottom')|raw }}
  40. {% endblock %}
  41. <script>
  42. // transformer les balises [...] en <div class="...">
  43. let content = document.getElementById('body');
  44. content = content.innerHTML.replaceAll(/\[([^\/\]]+)\]/g, '<div class="$1">');
  45. content = content.replaceAll(/\[\/([^\]]+)\]/g, '</div>');
  46. document.getElementById("body").innerHTML = content;
  47. // isoler les chiffres des titres
  48. let moments = document.getElementsByClassName("moment");
  49. for(let i = 0; i < moments.length; i++) {
  50. moments[i].innerHTML = "<span class='first-letter'>" + moments[i].innerHTML.substring(0, moments[i].innerHTML.indexOf('—')) + "</span>" + moments[i].innerHTML.slice(moments[i].innerHTML.indexOf(' —'));
  51. }
  52. // cleaner le balisage des éléments contenant plusieurs paragraphes
  53. let contentToParse = [];
  54. let labeurs = document.getElementsByClassName("labeur");
  55. for(let i = 0; i < labeurs.length; i++) {
  56. contentToParse.push(labeurs[i]);
  57. }
  58. let latours = document.getElementsByClassName("latour");
  59. for(let i = 0; i < latours.length; i++) {
  60. contentToParse.push(latours[i]);
  61. }
  62. let lampes = document.getElementsByClassName("lampe");
  63. for(let i = 0; i < lampes.length; i++) {
  64. contentToParse.push(lampes[i]);
  65. }
  66. for(let i = 0; i < contentToParse.length; i++) {
  67. if (contentToParse[i].childNodes.length == 1) {
  68. contentToParse[i].innerHTML = '<p>' + contentToParse[i].innerHTML + '</p>';
  69. } else {
  70. contentToParse[i].innerHTML = "<p>" + contentToParse[i].innerHTML.replace("<p>", "");
  71. }
  72. // headers latour / lampe
  73. if (contentToParse[i].classList.contains("latour")) {
  74. contentToParse[i].childNodes[0].innerHTML = "<div class='latour-header'><div><img src='{{ url('theme://assets/map.png') }}' alt='carte'></div><div>" + contentToParse[i].childNodes[0].innerHTML + "</div></div>";
  75. } else if (contentToParse[i].classList.contains("lampe")) {
  76. contentToParse[i].childNodes[0].innerHTML = "<div class='lampe-header'><div><img src='{{ url('theme://assets/lampe.png') }}' alt='lampe'></div><div>" + contentToParse[i].childNodes[0].innerHTML + "</div></div>";
  77. }
  78. // micro-typo
  79. for(j = 0; j < contentToParse[i].childNodes.length; j++) {
  80. let contentHTML = contentToParse[i].childNodes[j].innerHTML;
  81. if (contentHTML != undefined) {
  82. contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll(' :', '&nbsp;:');
  83. contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll(' ?', '&nbsp;?');
  84. contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll(' !', '&nbsp;!');
  85. contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll('« ', '«&nbsp;');
  86. contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll(' »', '&nbsp;»');
  87. contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll('“', '«&nbsp;');
  88. contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll('”', '&nbsp;»');
  89. contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll(' min', '&nbsp;min');
  90. }
  91. }
  92. }
  93. // fonction s'éxecute après le rendu de pagedJS
  94. // cf https://pagedjs.org/documentation/10-handlers-hooks-and-custom-javascript/
  95. class setMarginTexts extends Paged.Handler {
  96. constructor(chunker, polisher, caller) {
  97. super(chunker, polisher, caller);
  98. }
  99. afterPreview(pages) {
  100. // afficher correctement les éléments en marge
  101. let topLeftBoxes = document.getElementsByClassName('pagedjs_margin-left-top');
  102. for (let i = 0; i < topLeftBoxes.length; i++) {
  103. topLeftBoxes[i].childNodes[0].style.marginTop = topLeftBoxes[i].childNodes[0].offsetWidth / 2 - topLeftBoxes[i].childNodes[0].offsetHeight / 2 + "px";
  104. }
  105. let bottomLeftBoxes = document.getElementsByClassName('pagedjs_margin-left-bottom');
  106. for (let i = 0; i < bottomLeftBoxes.length; i++) {
  107. bottomLeftBoxes[i].childNodes[0].style.marginBottom = bottomLeftBoxes[i].childNodes[0].offsetWidth / 2 - bottomLeftBoxes[i].childNodes[0].offsetHeight / 2 + "px";
  108. }
  109. // cleaner pour que les paragraphes tombent sur la marge haute
  110. for(let i = 0; i < labeurs.length; i++) {
  111. if (labeurs[i] == labeurs[i].parentNode.firstElementChild
  112. && !labeurs[i].firstElementChild.hasAttribute("data-split-from")) {
  113. labeurs[i].firstElementChild.style.marginTop = "0px";
  114. }
  115. }
  116. // pareil pour les titres temps
  117. for (let i = 0; i < moments.length; i++) {
  118. if (moments[i].previousElementSibling?.tagName === "P"
  119. && moments[i].previousElementSibling == moments[i].parentNode.firstElementChild) {
  120. moments[i].parentNode.removeChild(moments[i].parentNode.firstElementChild);
  121. }
  122. }
  123. // enlever les paragraphes vides
  124. let paragraphes = document.querySelectorAll("p");
  125. for (let i = 0; i < paragraphes.length; i++) {
  126. if (paragraphes[i].innerHTML == "") {
  127. paragraphes[i].remove();
  128. }
  129. }
  130. // images collées en bas
  131. let bottomImgs = document.getElementsByClassName('bottomimg');
  132. for (let i = 0; i < bottomImgs.length; i++) {
  133. let page = bottomImgs[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
  134. bottomImgs[i].style.transform = 'translateY(' + (page.getBoundingClientRect().bottom - bottomImgs[i].firstElementChild.getBoundingClientRect().bottom) + 'px)';
  135. }
  136. // éléments justifiés pas nécessaires
  137. let justifiedSplitEl = document.querySelectorAll("[data-align-last-split-element='justify']");
  138. for (let i = 0; i < justifiedSplitEl.length; i++) {
  139. for (let j = 0; j < justifiedSplitEl[i].childNodes.length; j++) {
  140. let elStyle = justifiedSplitEl[i].childNodes[j].style;
  141. if (elStyle != undefined) {
  142. elStyle.textAlignLast = "left";
  143. }
  144. }
  145. }
  146. }
  147. }
  148. Paged.registerHandlers(setMarginTexts);
  149. </script>
  150. </body>
  151. </html>