{% extends 'Lenord/base.html.twig' %}{% block header_epingles %} {{ include('Lenord/Main/parts/epingles.html.twig') }}{% endblock %}{% block header_breadcrumb %} {% include 'Nordinfo/Main/parts/breadcrumb.html.twig' with {'variation':'le-nord'} %}{% endblock %}{% block header_breadcrumb_pdf %} {% include 'Nordinfo/Main/parts/breadcrumb.html.twig' with {'variation':'le-nord'} %}{% endblock %}{% block body %} <main tabindex="-1" role="main" id="mainContent"> {% include 'Nordinfo/Main/parts/back_btn.html.twig' with {'back_btn_class':'--leNord --barHeading --barHeadingIcon --blueMedium'} %} <div class="barHeading --leNord --icon --documents"> <h1> <span class="__icon">{{ source('svg/icons/icon-file.svg') }}</span> <span class="__text">Espace documentaire</span> </h1> </div> <div class="barSearch --documents"> <form action="{{ path('espacedoc') }}" method="GET" class="__form"> <div class="__rowInput"> <div class="container"> <label for="inputSearchDoc" hidden="">Rechercher</label> <div class="containerInputSearch"> <input value="{{ search }}" name="search" title="Je recherche" type="text" id="inputSearchDoc" data-tabindex-mobile="5" placeholder="Je recherche un document" class="form-control __input"> <button type="submit" class="__btn"> <img src="{{ asset('img/brandmaster/icon-search-le-nord.svg') }}" alt="" aria-hidden="true"> <span class="sr-only">Recherche</span> </button> </div> </div> </div> <div class="__rowFilters"> <div class="container"> <fieldset class="__inner filter_doc"> <legend>Type de document :</legend> <div> <div> {% for type in types_document %} <div class="__col"> <div class="__wrapperCheckbox"> <div> <input {% if filters is not null and type.id in filters %}checked{% endif %} class="__input-checkbox" data-filter-checkbox="" aria-label="{{ type.titre }}, mise à jour des résultats" type="checkbox" id="{{ type.id }}" data-id="{{ type.id }}"> </div> <div> <label for="{{ type.id }}">{{ type.titre }}</label> </div> </div> </div> {% endfor %} </div> </div> </fieldset> </div> </div> </form> </div> <div class="container pT"> <h3 class="headingSection mB--imp">{{ pagination.totalItemCount }} documents {% if search is not null or filters is not empty %}pour {% if search is not null %} "{{ search }}" {% if filters is not empty %} dans {% for libelle in types_libelle %} {% if loop.index > 1 %}, {% endif %}{{ libelle }} {% endfor %} {% endif %} {% else %} {% for libelle in types_libelle %} {% if loop.index > 1 %}, {% endif %}{{ libelle }} {% endfor %} {% endif %}{% endif %} </h3> <form class="containerSearchResultsDocs"> {% if pagination.totalItemCount > 0 %} <div class="__rowFilters"> <div> <label for="sort_filter">Mode de tri</label> <select id="sort_filter" class="form-control"> <option {% if app.request.query.get('sort') == 'd.titre' and app.request.query.get('direction') == 'asc' %}selected{% endif %} value='alpha'>De A à Z </option> <option {% if app.request.query.get('sort') == 'd.titre' and app.request.query.get('direction') == 'desc' %}selected{% endif %} value='reversealpha'>De Z à A </option> <option {% if app.request.query.get('sort') == 'd.date_publication' and app.request.query.get('direction') == 'desc' or app.request.query.get('sort') is null %}selected{% endif %} value='date'>Plus récent en premier </option> <option {% if app.request.query.get('sort') == 'd.date_publication' and app.request.query.get('direction') == 'asc' %}selected{% endif %} value='reversedate'>Plus ancien en premier </option> </select> </div> <div> <label for="result_filter">Nombre de résultats par page</label> <select id="result_filter" class="form-control"> <option {% if app.request.query.get('_items_per_page') == 24 %}selected{% endif %} value="24">24 résultats par page </option> <option {% if app.request.query.get('_items_per_page') == 48 %}selected{% endif %} value="48">48 résultats par page </option> <option {% if app.request.query.get('_items_per_page') == 72 %}selected{% endif %} value="72">72 résultats par page </option> </select> </div> </div> {% endif %} <div class="__rowPagination"> <div class="containerPagination"> {{ knp_pagination_render(pagination) }} </div> </div> <div class="gridResultsSearchDocs"> {% for document in pagination %} <div class="__col"> <a href="{{ path('document', {'slug':document.aliasUrl}) }}" class="__item"> <div class="__inner"> <div class="__icon"> {{ source('svg/icons/icon-file.svg') }} </div> <div class="__details"> <p class="__title">{{ document.titre }}</p> {% if document.formatFile|length > 0 %} {% if document.fichierName2 is null %} <p class="__type"> {{ document.formatFile|upper }} {% if document.poids is not null %} {% set poids_arr = document.poids|split(' ') %} {{ poids_arr[0] }} <abbr title="mégaoctet">{{ poids_arr[1] }}</abbr> {% endif %} </p> {% endif %} {% endif %} <p class="__date">{{ document.datePublication|date('d')~' '~trans_month_hash[document.datePublication|date('F')]~' '~document.datePublication|date('Y') }}</p> </div> </div> </a> </div> {% endfor %} </div> <div class="__rowPagination"> <div class="containerPagination"> {{ knp_pagination_render(pagination) }} </div> </div> </form> </div> </main>{% endblock %}{% block footer_top %} {% include 'Nordinfo/Main/parts/our-websites.html.twig' %}{% endblock %}{% block include_js %} <script> $(function () { const elemsCheckboxFilters = document.querySelectorAll('[data-filter-checkbox]'); const inputSearch = document.getElementById('inputSearchDoc'); const urlParams = new URLSearchParams(window.location.search); const lastCheckboxId = urlParams.get('last_elem'); if (lastCheckboxId) { const checkboxToFocus = document.getElementById(lastCheckboxId); if (checkboxToFocus) { checkboxToFocus.focus(); } } function setFilter() { var url = new URL(window.location.href); url.searchParams.delete('types[]'); url.searchParams.delete('sort'); url.searchParams.delete('direction'); $(".filter_doc input:checked").each(function () { url.searchParams.append('types[]', $(this).attr('data-id')); url.searchParams.set('page', '1'); }); if ($('#form_filter #inputSearch').val() !== undefined) { url.searchParams.set('search', $('#form_filter #inputSearch').val()); } if ($('#sort_filter').val() !== '') { if ($('#sort_filter').val() == 'alpha') { url.searchParams.set('sort', 'd.titre'); url.searchParams.set('direction', 'asc'); } if($('#sort_filter').val() == 'reversealpha'){ url.searchParams.set('sort', 'd.titre'); url.searchParams.set('direction', 'desc'); } if ($('#sort_filter').val() == 'date') { url.searchParams.set('sort', 'd.date_publication'); url.searchParams.set('direction', 'desc'); } if ($('#sort_filter').val() == 'reversedate') { url.searchParams.set('sort', 'd.date_publication'); url.searchParams.set('direction', 'asc'); } } if ($('#result_filter').val() !== '' && $('#result_filter').val() !== undefined) { url.searchParams.set('_items_per_page', $('#result_filter').val()); } return url; } $('#sort_filter').on('change', function () { const url = new URL(window.location.href); url.searchParams.set('last_elem', 'sort_filter'); history.pushState({}, '', url.toString()); setTimeout(() => { window.location.href = setFilter().toString(); }, 500); }); $('#result_filter').on('change', function () { const url = new URL(window.location.href); url.searchParams.set('last_elem', 'result_filter'); history.pushState({}, '', url.toString()); setTimeout(() => { window.location.href = setFilter().toString(); }, 500); }); $('#filter_search').on('click', function () { setTimeout(() => { window.location.href = setFilter().toString(); }, 500); }) $('.filter_doc').on('click', function () { setTimeout(() => { window.location.href = setFilter().toString(); }, 500); }); elemsCheckboxFilters.forEach((el) => { el.addEventListener('change', function(ev) { const idTarget = ev.target.getAttribute('data-id'); const url = new URL(window.location.href); url.searchParams.set('last_elem', idTarget); history.pushState({}, '', url.toString()); }); }); if (document.body.contains(inputSearch)) { inputSearch.addEventListener('input', () => { const url = new URL(window.location.href); url.searchParams.set('last_elem', 'inputSearchDoc'); history.pushState({}, '', url.toString()); }); } }); </script>{% endblock %}