portal_footer.html
1 <footer>
2 <div class="container">
3 <div class="row">
4 <div class="col-md-6 col-lg-4">
5 <form class="form-inline mx-5 mx-md-0 mb-3 mb-md-0" action="jsp/site/Portal.jsp" method="get">
6 <input name="page" type="hidden" value="search" >
7 <div class="input-group">
8 <input id="query" class="form-control input-lg" name="query" type="text" placeholder="Rechercher" />
9 <button type="submit" class="btn btn-light btn-lg" title="#i18n{portal.site.page_menu_tools.labelSearch}">
10 <i class="ti ti-search"></i> <span class="visually-hidden">#i18n{portal.site.page_menu_tools.labelSearch}</span>
11 </button>
12 </div>
13 </form>
14 </div>
15 <div class="col-md-4 ps-5">
16 <h3 class="ms-5">#i18n{portal.site.portal_footer.labelTitle}</h3>
17 <ul class="list-unstyled ms-5">
18 <li><a href="#home" class="page-scroll text-capitalize">#i18n{portal.site.page_home.label}</a></li>
19 <li><a href="jsp/site/Portal.jsp?page=map" data-bs-info="#i18n{portal.site.site_map.pageTitle}" data-bs-toggle="modal" data-bs-target="#lutece-modal" >#i18n{portal.site.site_map.pageTitle}</a></li>
20 <li><a href="jsp/site/PopupCredits.jsp" data-bs-info="#i18n{portal.site.portal_footer.labelCredits}" data-bs-toggle="modal" data-bs-target="#lutece-modal" title="[#i18n{portal.site.portal_footer.newWindow}] #i18n{portal.site.portal_footer.labelCredits}" target="info_credit">#i18n{portal.site.portal_footer.labelCredits}</a></li>
21 <li><a href="jsp/site/PopupLegalInfo.jsp" data-bs-info="#i18n{portal.site.portal_footer.labelInfo}" data-bs-toggle="modal" data-bs-target="#lutece-modal" title="[#i18n{portal.site.portal_footer.newWindow}] #i18n{portal.site.portal_footer.labelInfo}" target="info_legal">#i18n{portal.site.portal_footer.labelInfo}</a></li>
22 </ul>
23 </div>
24 <div class="col-md-6 col-lg-4 text-sm-center text-md-end">
25 <strong>Follow us : </strong>
26 <a href="https://www.linkedin.com/groups/Lutece-3925974" target="_blank" title="Follow us on Linkedin [Open in new window]"><img src="images/local/skin/linkedin.jpg" alt="Nous suivre sur Linkedin" class="social-pics"/></a>
27 <a href="https://twitter.com/lutecenews" target="_blank" title="Follow us on Twitter [Open in new window]"><img src="images/local/skin/Twitter_logo_white.png" alt="Nous suivre sur Twitter" class="social-pics"/></a>
28 <a href="https://www.openhub.net/p/lutece" target="_blank" title="Follow us on openHub [Open in new window]"><img src="images/local/skin/OH_logo.png" alt="Nous suivre sur openHub" class="social-pics"/></a>
29 <a href="https://github.com/lutece-platform" target="_blank" title="Follow us on GitHub [Open in new window]"><img src="images/local/skin/GitHub-white-Mark-v02.png" alt="Nous suivre sur GitHub" class="social-pics"/></a>
30 </div>
31 </div>
32 <div class="row mt-3">
33 <div class="col-sm-12 col-md-3 col-lg-3 mt-3">
34 <p class="text-sm-center text-md-start">
35 <a class="text-decoration-none" href="http://lutece.paris.fr/" title="Lutece [Open in new window]" target="_blank">
36 <span class="me-2">Powered by</span>
37 <img src="images/logo-lutece-footer.png" alt="Powered by Lutece" class="logo-footer">
38 </a>
39 </p>
40 </div>
41 <div class="col-sm-12 col-md-6 col-lg-6 mt-3">
42 <p class="mb-3 text-center">2023 - Coded by the <a href="https://github.com/orgs/lutece-platform/people" title="Lutece Github [Open in new window]">Lutece Dev Team</a> on <a href="https://github.com/lutece-platform/lutece-core" title="Lutece Github [Open in new window]"> Lutece core 7 </a></p>
43 </div>
44 <div class="col-sm-12 col-md-3 col-lg-3 mt-3">
45 <p class="text-md-end text-sm-center">
46 <a href="http://paris.fr/" title="City of Paris" target="_blank">
47 <img src="images/logo-paris-footer.svg" class="logo-footer" alt="City of Paris" title="City of Paris [Open in new window]" >
48 </a>
49 </p>
50 </div>
51 </div>
52 </div>
53 </footer>
54 <div class="modal" tabindex="-1" id="lutece-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="lutece-mdoal-label" aria-hidden="true">
55 <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered" role="document">
56 <div class="modal-content">
57 <div class="modal-header">
58 <h5 class="modal-title" id="lutece-mdoal-label"></h5>
59 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="#i18n{portal.util.labelClose}"></button>
60 </div>
61 <div class="modal-body">
62 </div>
63 <div class="modal-footer">
64 <button type="button" class="btn me-auto" data-bs-dismiss="modal">#i18n{portal.util.labelClose}</button>
65 </div>
66 </div>
67 </div>
68 </div>
69 <#noparse>
70 <script>
71 function loadModalContent( url, body, sel ) {
72 const xhr = new XMLHttpRequest();
73 xhr.open('GET', url, true);
74 xhr.onreadystatechange = () => {
75 if (xhr.readyState == 4 && xhr.status == 200) {
76 const response = xhr.responseText;
77 // Convert the response to a temporary div to manipulate as DOM
78 const qDiv = document.createElement('div');
79 qDiv.innerHTML = response;
80 // Use querySelector or getElementsByClassName to select elements
81 body.innerHTML = qDiv.querySelector( sel ).innerHTML;
82 }
83 }
84 xhr.send();
85 };
86
87 // Load content in modal on activation
88 document.addEventListener("DOMContentLoaded", function() {
89 const luteceModal = document.getElementById('lutece-modal')
90
91 luteceModal.addEventListener('show.bs.modal', event => {
92 // Button that triggered the modal
93 const button = event.relatedTarget
94 // Extract info from data-bs-* attributes
95 const title = button.getAttribute('data-bs-info')
96 const modalTitle = luteceModal.querySelector('.modal-title')
97 // Update the modal's content.
98 const url = button.getAttribute('href')
99 const modalBody = luteceModal.querySelector('.modal-body')
100 const content = loadModalContent( url, modalBody, '.main-content' );
101 modalTitle.textContent = `${title}`
102 modalBody.innerHTML = content;
103 })
104 });
105 </script>
106 </#noparse>