base.html.twig 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246
  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. {% do assets.addJs('theme://js/parsing.js', { group: 'bottom' }) %}
  25. {% do assets.addJs('theme://js/paged.polyfill.js', { group: 'bottom' }) %}
  26. {% do assets.addJs('theme://js/layout.js', { group: 'bottom' }) %}
  27. {% endblock %}
  28. {% block assets deferred %}
  29. {{ assets.css()|raw }}
  30. {{ assets.js()|raw }}
  31. {% endblock %}
  32. </head>
  33. <body id="top" class="{{ page.header.body_classes|e }}">
  34. {% block body %}
  35. <section id="body">
  36. <div>
  37. {% block content %}{% endblock %}
  38. </div>
  39. </section>
  40. {% endblock %}
  41. {% block bottom %}
  42. {{ assets.js('bottom')|raw }}
  43. {% endblock %}
  44. {#
  45. <script>
  46. // transformer les balises [...] en <div class="...">
  47. let content = document.getElementById('body');
  48. content = content.innerHTML.replaceAll(/\[([^\/\]]+)\]/g, '<div class="$1">');
  49. content = content.replaceAll(/\[\/([^\]]+)\]/g, '</div>');
  50. document.getElementById("body").innerHTML = content;
  51. // isoler les chiffres des titres
  52. let moments = document.getElementsByClassName("moment");
  53. for(let i = 0; i < moments.length; i++) {
  54. 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(' —'));
  55. }
  56. // cleaner le balisage des éléments contenant plusieurs paragraphes
  57. let contentToParse = [];
  58. let labeurs = document.getElementsByClassName("labeur");
  59. for(let i = 0; i < labeurs.length; i++) {
  60. contentToParse.push(labeurs[i]);
  61. }
  62. let latours = document.getElementsByClassName("latour");
  63. for(let i = 0; i < latours.length; i++) {
  64. contentToParse.push(latours[i]);
  65. }
  66. let lampes = document.getElementsByClassName("lampe");
  67. for(let i = 0; i < lampes.length; i++) {
  68. contentToParse.push(lampes[i]);
  69. }
  70. for(let i = 0; i < contentToParse.length; i++) {
  71. if (contentToParse[i].childNodes.length == 1) {
  72. contentToParse[i].innerHTML = '<p>' + contentToParse[i].innerHTML + '</p>';
  73. } else {
  74. contentToParse[i].innerHTML = "<p>" + contentToParse[i].innerHTML.replace("<p>", "");
  75. }
  76. // headers latour / lampe
  77. if (contentToParse[i].classList.contains("latour")) {
  78. 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>";
  79. } else if (contentToParse[i].classList.contains("lampe")) {
  80. 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>";
  81. }
  82. // micro-typo
  83. for(j = 0; j < contentToParse[i].childNodes.length; j++) {
  84. let contentHTML = contentToParse[i].childNodes[j].innerHTML;
  85. if (contentHTML != undefined) {
  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('« ', '«&nbsp;');
  90. contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll(' »', '&nbsp;»');
  91. contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll('“', '«&nbsp;');
  92. contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll('”', '&nbsp;»');
  93. contentToParse[i].childNodes[j].innerHTML = contentToParse[i].childNodes[j].innerHTML.replaceAll(' min', '&nbsp;min');
  94. }
  95. }
  96. }
  97. // fonction s'éxecute après le rendu de pagedJS
  98. // cf https://pagedjs.org/documentation/10-handlers-hooks-and-custom-javascript/
  99. class setMarginTexts extends Paged.Handler {
  100. constructor(chunker, polisher, caller) {
  101. super(chunker, polisher, caller);
  102. }
  103. afterPreview(pages) {
  104. // afficher correctement les éléments en marge
  105. let topLeftBoxes = document.getElementsByClassName('pagedjs_margin-left-top');
  106. for (let i = 0; i < topLeftBoxes.length; i++) {
  107. topLeftBoxes[i].childNodes[0].style.marginTop = topLeftBoxes[i].childNodes[0].offsetWidth / 2 - topLeftBoxes[i].childNodes[0].offsetHeight / 2 + "px";
  108. }
  109. let bottomLeftBoxes = document.getElementsByClassName('pagedjs_margin-left-bottom');
  110. for (let i = 0; i < bottomLeftBoxes.length; i++) {
  111. bottomLeftBoxes[i].childNodes[0].style.marginBottom = bottomLeftBoxes[i].childNodes[0].offsetWidth / 2 - bottomLeftBoxes[i].childNodes[0].offsetHeight / 2 + "px";
  112. }
  113. // cleaner pour que les paragraphes tombent sur la marge haute
  114. for(let i = 0; i < labeurs.length; i++) {
  115. if (labeurs[i] == labeurs[i].parentNode.firstElementChild
  116. && !labeurs[i].firstElementChild.hasAttribute("data-split-from")) {
  117. labeurs[i].firstElementChild.style.marginTop = "0px";
  118. }
  119. }
  120. // pareil pour les titres temps
  121. for (let i = 0; i < moments.length; i++) {
  122. if (moments[i].previousElementSibling?.tagName === "P"
  123. && moments[i].previousElementSibling == moments[i].parentNode.firstElementChild) {
  124. moments[i].parentNode.removeChild(moments[i].parentNode.firstElementChild);
  125. }
  126. }
  127. // enlever les paragraphes vides
  128. let paragraphes = document.querySelectorAll("p");
  129. for (let i = 0; i < paragraphes.length; i++) {
  130. if (paragraphes[i].innerHTML == "") {
  131. paragraphes[i].remove();
  132. }
  133. }
  134. // images collées en bas
  135. let bottomImgs = document.querySelectorAll('.bottomimg, .tripleimgs_bottom, .tripleimgs2_bottom');
  136. for (let i = 0; i < bottomImgs.length; i++) {
  137. let page = bottomImgs[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
  138. bottomImgs[i].style.transform = 'translateY(' + (page.getBoundingClientRect().bottom - bottomImgs[i].lastElementChild.getBoundingClientRect().bottom) + 'px)';
  139. }
  140. // éléments justifiés pas nécessaires
  141. let justifiedSplitEl = document.querySelectorAll("[data-align-last-split-element='justify']");
  142. for (let i = 0; i < justifiedSplitEl.length; i++) {
  143. for (let j = 0; j < justifiedSplitEl[i].childNodes.length; j++) {
  144. let elStyle = justifiedSplitEl[i].childNodes[j].style;
  145. if (elStyle != undefined) {
  146. elStyle.textAlignLast = "left";
  147. }
  148. }
  149. }
  150. // images fullspread
  151. let fullspreadEl = document.querySelectorAll('.imgfullspreadleft, .imgfullspreadright, .imgfullspreadright_bleedtop, .imgfullspreadright_bleed');
  152. for (let i = 0; i < fullspreadEl.length; i++) {
  153. let imgSrc = fullspreadEl[i].firstElementChild.getAttribute('src');
  154. let nextPage = fullspreadEl[i].closest('.pagedjs_page').nextElementSibling.querySelectorAll('.pagedjs_page_content');
  155. let imgOverflowEl = document.createElement('div');
  156. if (fullspreadEl[i].classList.contains('imgfullspreadleft')) {
  157. imgOverflowEl.setAttribute('class', 'imgfullspreadleft-right');
  158. } else if (fullspreadEl[i].classList.contains('imgfullspreadright')) {
  159. imgOverflowEl.setAttribute('class', 'imgfullspreadright-right');
  160. } else if (fullspreadEl[i].classList.contains('imgfullspreadright_bleedtop')) {
  161. imgOverflowEl.setAttribute('class', 'imgfullspreadright_bleedtop-right');
  162. } else if (fullspreadEl[i].classList.contains('imgfullspreadright_bleed')) {
  163. imgOverflowEl.setAttribute('class', 'imgfullspreadright_bleed-right');
  164. }
  165. let imgOverflow = document.createElement('img');
  166. imgOverflow.src = imgSrc;
  167. imgOverflowEl.append(imgOverflow);
  168. nextPage[0].append(imgOverflowEl);
  169. if (fullspreadEl[i].classList.contains('imgfullspreadright')
  170. || fullspreadEl[i].classList.contains('imgfullspreadright_bleedtop')
  171. || fullspreadEl[i].classList.contains('imgfullspreadright_bleed')) {
  172. let imgMargin = imgOverflowEl.getBoundingClientRect().right - fullspreadEl[i].firstElementChild.getBoundingClientRect().right;
  173. fullspreadEl[i].firstElementChild.style.marginLeft = imgMargin + 'px';
  174. }
  175. }
  176. // fullpage img page gauche
  177. let fullPageImg = document.getElementsByClassName('fullpageimage');
  178. for (let i = 0; i < fullPageImg.length; i++) {
  179. if (fullPageImg[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
  180. .classList.contains('pagedjs_left_page')) {
  181. fullPageImg[i].style.marginLeft = '-22mm';
  182. }
  183. }
  184. // encarts bleed
  185. let encarts = document.querySelectorAll('.latour, .lampe')
  186. for (let i = 0; i < encarts.length; i++) {
  187. if (encarts[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
  188. .classList.contains('pagedjs_right_page')) {
  189. encarts[i].style.marginRight = '-22mm';
  190. encarts[i].style.paddingRight = '22mm';
  191. }
  192. if (encarts[i].hasAttribute('data-split-original')) {
  193. let plainColor = document.createElement('div');
  194. let plainHeight = encarts[i]
  195. .parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
  196. .getBoundingClientRect().bottom - encarts[i].getBoundingClientRect().bottom;
  197. plainColor.setAttribute('class', 'encart-split');
  198. if (encarts[i]
  199. .parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
  200. .classList.contains('pagedjs_right_page')) {
  201. plainColor.style.width = "149mm";
  202. } else {
  203. plainColor.style.width = "129mm";
  204. }
  205. plainColor.style.height = plainHeight + "px";
  206. encarts[i].parentNode.append(plainColor);
  207. } else if (encarts[i].hasAttribute('data-split-from')) {
  208. let plainColor = document.createElement('div');
  209. plainColor.setAttribute('class', 'encart-split');
  210. if (encarts[i]
  211. .parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
  212. .classList.contains('pagedjs_right_page')) {
  213. plainColor.style.width = "149mm";
  214. } else {
  215. plainColor.style.width = "129mm";
  216. }
  217. plainColor.style.height = "22mm";
  218. plainColor.style.top = "-22mm";
  219. encarts[i].parentNode.prepend(plainColor);
  220. }
  221. }
  222. }
  223. }
  224. Paged.registerHandlers(setMarginTexts);
  225. </script>
  226. #}
  227. </body>
  228. </html>