templates/actualite/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}CEP-I Actualités{% endblock %}
  5. {% block stylesheets %}
  6.   <link rel="shortcut icon" type="image/x-icon" href="/assets/images/favicon.ico">
  7.   <link rel="stylesheet" type="text/css" href="/assets/vendor/magnific-popup.css">
  8.   <link rel="stylesheet" type="text/css" href="/assets/vendor/slick-master/slick/slick.css">
  9.   <link rel="stylesheet" type="text/css" href="/assets/vendor/selectric/public/selectric.css">
  10.   <link rel="stylesheet" type="text/css" href="/assets/css/bundle.css">
  11.   <script src="/assets/vendor/jquery-3.1.1.min.js"></script>
  12. {% endblock %}
  14. {% block breadcrumps %}
  15.   <div class="breadcrumps">
  16.     <div class="shell">
  17.       <ul>
  18.         <li>
  19.           <a href="{{ path('accueil') }}">Accueil</a>
  20.         </li>
  22.         <li>
  23.           <a href="{{ path('actualites') }}">Actualités</a>
  24.         </li>
  25.       </ul>
  26.     </div><!-- /.shell -->
  27.   </div><!-- /.breadcrumps -->
  28. {% endblock %}
  30. {% block body %}
  33.   <div class="filters">
  34.     <div class="shell">
  35.       <h2 class="filters__title">Actualités</h2>
  37.       <a href="#" class="btn btn-filter visible-mobile">
  38.         <i class="ico-filter"></i> Filtrer Les Actualités
  39.       </a>
  41.       <div class="filters__inner filters__inner--alt">
  42.         <form id="filtres">
  43.           <h4>Filtrer les actualités</h4>
  45.           <ul class="list-checkboxes list-checkboxes--alt">
  47.             {% set filtres = util_service.getArticlesFiltresLabel() %}
  48.             {% for val, label in filtres %}
  50.               <li>
  51.                 <div class="checkbox checkbox--alt">
  52.                   <input name="filtre[]" value="{{ val}}" type="checkbox" id="ch{{ val }}"">
  54.                   <label for="ch{{ val }}">{{ label }}</label>
  55.                 </div><!-- /.checkbox -->
  56.               </li>
  58.             {% endfor %}
  60.           </ul><!-- /.list-checkboxes -->
  62.           <div class="filters__actions">
  63.             <button class="btn btn--size3">
  64.               <i class="ico-arrow-white"></i> Valider
  65.             </button>
  66.           </div><!-- /.filters__actions -->
  67.         </form>
  68.       </div><!-- /.filters__inner -->
  69.     </div><!-- /.shell -->
  70.   </div><!-- /.filters -->
  72.   <section class="section section--features-alt">
  73.     <div class="shell">
  75.       <div class="features features--primary" id="actualites">
  77.       </div><!-- /.features -->
  78.       <div style="display: none;" class="chargement" id="chargement">Chargement...</div>
  79.     </div><!-- /.shell -->
  80.   </section><!-- /.section -->
  82.   {% include '__includes__/newsletterForm.html.twig' %}
  84.   <script>
  85.     let styleDynamicImage = function() {
  86.       let imageFigures = document.getElementsByClassName('figure-image');
  88.       for (let figure of imageFigures) {
  89.         let img = figure.getElementsByTagName('img')[0];
  91.         if (img.naturalHeight > img.naturalWidth) {
  92.           figure.style.maxWidth = 'none';
  93.           img.style.maxHeight = '320px';
  94.         }
  95.       }
  96.     };
  98.     window.onload = styleDynamicImage;
  100.     let page = 0;
  101.     let filtres = '';
  102.     let encours = false;
  104.     function chargerActualites() {
  106.         if (encours) return;
  107.         if (page === -1) return;
  109.         encours = true;
  111.         $('#chargement').show();
  113.         let dicoCats = {
  114.           {% for clef, val in util_service.getArticlesLabel() %}
  115.             {{ clef }} : "{{ val }}",
  116.           {% endfor %}
  117.         };
  119.         $.get( "{{ path('ajax_actualites') }}/" + page + '/' + filtres, function( data ) {
  121.             encours = false;
  122.             $('#chargement').hide();
  124.             if (!data) {
  125.                 page = -1;
  126.                 return;
  127.             }
  129.             data = JSON.parse(data);
  131.             if (!data || !data.length) {
  132.                 page = -1;
  133.                 return;
  134.             }
  136.             let actualites = $('#actualites');
  138.             for (let i in data) {
  140.                 let actualite = data[i];
  142.                 let cats = actualite.category.split(',').map(x => dicoCats[x] ? dicoCats[x] : '').join(' ');
  143.                 let style = actualite.image ? 'background-image: url(\'/assets/uploads/actualite/' + actualite.id + '/' + actualite.image + '\')' : 'background-color:#A0C32E';
  145.                 let ele = $('<div class="feature feature--alt">\n' +
  146.                     '          <a href="/actualite/view/'+actualite.link+'">\n' +
  147.                     '            <div class="feature__image" style="'+style+'"></div><!-- /.feature__image -->\n' +
  148.                     '\n' +
  149.                     '            <div class="feature__body">\n' +
  150.                     '              <h5>' + cats + '</h5>\n' +
  151.                     '\n' +
  152.                     '              <p>' + actualite.title + '</p>\n' +
  153.                     '            </div><!-- /.feature__body -->\n' +
  154.                     '          </a>\n' +
  155.                     '        </div><!-- /.feature -->');
  157.                 actualites.append(ele);
  158.             }
  160.             page++;
  161.         });
  162.     }
  164.     $(function() {
  166.         chargerActualites();
  168.         $( "#filtres" ).submit(function( event ) {
  169.             event.preventDefault();
  171.             let f = $(this).serializeArray();
  173.             filtres = [];
  175.             for (let i in f) {
  176.                 filtres.push(f[i].value);
  177.             }
  179.             filtres = filtres.join(',');
  180.             page = 0;
  182.             $('#actualites').empty();
  184.             chargerActualites();
  185.         });
  187.         $(window).scroll(function() {
  188.             if($(window).scrollTop() + $(window).height() >= $(document).height() - 400) {
  189.                 chargerActualites();
  190.             }
  191.         });
  193.     });
  195.   </script>
  197. {% endblock %}
  199. {% block javascripts %}
  200.   <script src="/assets/vendor/magnific-popup.js"></script>
  201.   <script src="/assets/vendor/slick-master/slick/slick.min.js"></script>
  202.   <script src="/assets/vendor/selectric/public/jquery.selectric.min.js"></script>
  203.   <script src="/assets/vendor/jquery-scrollLock.min.js"></script>
  204.   <script src="/assets/vendor/validator.js"></script>
  205.   <script src="/assets/js/bundle.js"></script>
  206. {% endblock %}