templates/campus/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block page_contents %}
  4. <section class="section section-page-title bg-gradient py-xl-5 py-4" data-aos='fade-down'>
  5.   <div class="container">
  6.     <div class="row">
  7.       <div class="col-12 text-center text-white">
  8.         <h1 class="page-name font-weight-bold my-2">{% trans %}Nos Campus ÉSTIAM{% endtrans %}</h1>
  9.       </div>
  10.     </div>
  11.   </div>
  12. </section>
  14. <section class="section section-campus-gallery mb-xl-5 mb-4">
  15.   <div class="container-fluid px-0 position-relative">
  16.     <div class="row">
  17.       <div class="col"><img src="{{ asset('assets/images/campus/i-1.jpg') }}?v=1" data-aos='zoom-in'></div>
  18.       <div class="col"><img src="{{ asset('assets/images/campus/i-2.jpg') }}?v=1" data-aos='zoom-in'></div>
  19.       <div class="col"><img src="{{ asset('assets/images/campus/i-3.jpg') }}?v=1" data-aos='zoom-in'></div>
  20.       <div class="col"><img src="{{ asset('assets/images/campus/i-4.jpg') }}?v=1" data-aos='zoom-in'></div>
  21.       <div class="col"><img src="{{ asset('assets/images/campus/i-5.jpg') }}?v=1" data-aos='zoom-in'></div>
  22.       <div class="col"><img src="{{ asset('assets/images/campus/i-6.jpg') }}?v=1" data-aos='zoom-in'></div>
  23.       <div class="col"><img src="{{ asset('assets/images/campus/i-7.jpg') }}?v=1" data-aos='zoom-in'></div>
  24.       <div class="col"><img src="{{ asset('assets/images/campus/i-8.jpg') }}?v=1" data-aos='zoom-in'></div>
  25.     </div>
  26.   </div>
  27. </section>
  29. <section class="section mb-xl-5 mb-4" data-aos='fade-down'>
  30.   <div class="container">
  31.     <div class="row">
  32.       <div class="col-12">
  33.         <div class="section-title mb-4"><span>/</span> Des Campus à taille humaine partout en France</div>
  34.         <div>
  35.           <p>Dans un souci de préserver la relation entre étudiants et équipe pédagogique, ÉSTIAM fait le choix de créer des petits campus, plutôt que de grands pôles impersonnels.<br/>
  36.           Cela permet aussi de s’assurer que la pédagogie et le savoir-faire ÉSTIAM sont implémentés et conservés dans chacun des campus.<br/>
  37.           Chaque établissement est habilité à recevoir des personnes en situation de handicap (sous réserve que la situation de santé de la personne soit stabilisée, de l’absence de contre-indications à l’exercice de la profession et dans la limite d’aménagements raisonnables - loi du 11 février 2005)</p>
  38.         </div>
  39.       </div>
  40.       <div class="col-12 campus-tags text-center mt-2">
  41.         {% for campus in campuses %}
  42.           <a href="{{ path('campus_detail', { slug : campus.slug }) }}">{{ campus.name }}</a>
  43.         {% endfor %}
  44.       </div>
  45.     </div>
  46.   </div>
  47. </section>
  48. {% if country != 'MA' %}
  49. <section class="section section-map" data-aos='fade-up'>
  50.     <div id="home-map"></div>
  51.     <script src="https://maps.google.com/maps/api/js?&region=France&key=AIzaSyAAq_3rBXv_JZgDNmNZMuIARuTCkkyf1VY" type="text/javascript"></script>
  52.     <script type="text/javascript">
  53.       window.addEventListener('load', function(e) {
  54.         var infowindow
  55.         var infoWindowTimeout
  56.         var mouseOverInfoWindow = false;
  57.         function addOpenInfoWindowListeners() {
  58.           var infoWindowElement = document.querySelector('.gm-style .gm-style-iw');
  59.           infoWindowElement.addEventListener('mouseout', function(event) {
  60.             console.log('mouseout info', event)
  61.             const toElement = event.relatedTarget || event.toElement
  62.             if (infoWindowElement !== event.target || toElement.nodeName === 'A') {
  63.               event.stopPropagation()
  64.               return
  65.             }
  66.             infowindow.close()
  67.             mouseOverInfoWindow = false;
  68.           });
  70.           infoWindowElement.addEventListener('mouseover', function(event) {
  71.             mouseOverInfoWindow = true;
  72.           });
  73.         }
  74.         async function runBlockMap(centers) {
  76.           //init map
  77.           var map = new google.maps.Map(document.getElementById('home-map'), {
  78.             zoom: 5.8,
  79.             center: new google.maps.LatLng(46.1314134,2.4349967),
  80.             mapTypeId: google.maps.MapTypeId.ROADMAP
  81.           });
  82.           /*
  83.           const bounds = new google.maps.LatLngBounds(
  84.             new google.maps.LatLng(41.2632185,-5.4534286),
  85.             new google.maps.LatLng(51.268318, 9.8678344)
  86.           )
  87.           */
  88.           const image = {
  89.             url: "{{ asset('assets/images/icons/icon-location-purple.png') }}",
  90.             size: new google.maps.Size(27, 38)
  91.           };
  92.           //create markers of specified cities
  93.           for (let i = 0; i < centers.length; i++) {
  94.             const latlng = new google.maps.LatLng(centers[i]['latitude'], centers[i]['longtitude'])
  95.             const marker = new google.maps.Marker({
  96.               position: latlng,
  97.               map: map,
  98.               icon: image
  99.             });
  100.             //bounds.extend(latlng);
  101.             marker.addListener('mouseover', function() {
  102.               if (infoWindowTimeout) clearTimeout(infoWindowTimeout);
  103.               try{
  104.                 infowindow.close()
  105.                 clearTimeout(infoWindowTimeout)
  106.               } catch(e) {}
  107.               infowindow = new google.maps.InfoWindow({
  108.                 content:  centers[i].infoContent
  109.               });
  110.               infowindow.open(map, marker);
  111.               google.maps.event.addListener(infowindow, 'domready', function() {
  112.                 addOpenInfoWindowListeners();
  113.               })
  114.             });
  115.             marker.addListener('mouseout', function() {
  116.               infoWindowTimeout = setTimeout(function() {
  117.                 if (!mouseOverInfoWindow) {
  118.                   infowindow.close()
  119.                   mouseOverInfoWindow = false;
  120.                 }
  121.               }, 400);
  122.             });
  123.             if(window.innerWidth<767){
  124.               infowindow = new google.maps.InfoWindow({
  125.                 content:  centers[i].infoContent
  126.               });
  127.               infowindow.close(marker.get("map"), marker);
  128.               google.maps.event.addListener(marker, 'click', (function(marker, i) {
  129.                 return function() {
  130.                   infowindow.open(map, marker);
  131.                 }
  132.               })(marker, i));
  133.             }
  134.           }
  135.         }
  137.         const centers = {{ centers | json_encode() | raw }};
  138.         runBlockMap(centers);
  139.       });
  140.     </script>
  141. </section>
  142. {% endif %}
  143. {% endblock %}