templates/front/theme1/page_cms.html.twig line 1

Open in your IDE?
  1. {% extends "front/"~ app.request.server.get('APP_THEME') ~"/base.html.twig" %}
  3. {% block preload %}
  4.     {% if post.image is defined  and post.image is not empty %}
  5.         {% if post.image %}
  6.             <link rel="preload" as="image" href="{{asset_image(post.image)}}" />
  7.         {% endif %}
  8.     {% endif %}
  10.      {% if galleries is defined and galleries is not empty %}
  11.            {% for item in galleries %}
  12.                 {% if item.path is defined %}
  13.                     <link rel="preload" as="image" href="{{asset_image_gallery(item.path)}}" />
  14.                 {% endif %}
  15.            {% endfor %}
  16.     {% endif %}
  18. {% endblock %}
  20. {% block stylesheets %}
  21.     {{parent()}}
  22.     {% if modele_galerie[0].type == 4 %}
  23.         <link rel="stylesheet" type="text/css" href="{{asset('templates/front/theme1/assets/plugins/flexslider/flexslider.css')}}" media="screen" >
  24.     {% endif %}
  25. {% endblock %}
  27. {% block body %}
  29.     {% if post.imageBandeau %}
  30.         {% set imagebandeau = post.imageBandeau %}
  31.     {% elseif parametre.imageBandeau %}
  32.         {% set imagebandeau = 'uploads/images/' ~ parametre.imageBandeau %}
  33.     {% else %}
  34.         {% set imagebandeau = '' %}
  35.     {% endif %}
  36.     
  37.     {% if imagebandeau != '' %}
  38.         <section class="image-bandeau text-center">
  39.             <img class="lazyload" alt="{{post.title}}" title="{{post.title}}" data-srcset="{{imagebandeau}}" src="{{asset(imagebandeau)}}" />
  40.             <div class="cnt-bandeau text-center">
  41.                 <div class="container-fluid wrapper">
  42.                     <ol class="breadcrumb d-flex justify-content-center" itemscope itemtype="http://schema.org/BreadcrumbList">
  43.                                 <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="{{path('index_page_home')}}" itemprop="item"><span itemprop="name">Accueil</span></a><meta itemprop="position" content="1" /></li>
  44.                                 {% set niveau = 2 %}
  45.                                 {% if categorieTree %}
  46.                                         {% for item in categorieTree %}
  47.                                             <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="{{path('page',{slug:item.slug})}}" title="{{item.titre}}" itemprop="item"><span itemprop="name">{{item.titre}}</span></a><meta itemprop="position" content="2" /></li> 
  48.                                             {% set niveau = 3 %}
  49.                                             {% if item.child is defined %}
  50.                                                 {% for item in item.child %}
  51.                                                     <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="{{path('page',{slug:item.slug})}}" title="{{item.titre}}" itemprop="item"><span itemprop="name">{{item.titre}}</span></a><meta itemprop="position" content="3" /></li> 
  52.                                                     {% set niveau = 4 %}
  53.                                                 {% endfor %}
  54.                                             {% endif %}
  55.                                         {% endfor %}
  56.                                 {% endif %}
  57.                                 <li class="breadcrumb-item active" aria-current="page" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><span itemprop="name">{{post.title}}</span><meta itemprop="position" content="{{niveau}}" /></li>
  58.                             </ol>
  59.                             {% if categorieTree %}
  60.                                 {# {% for item in categorieTree %} #}
  61.                                     <a class="article-retour text-center" href="{{path('page',{slug:categorieTree[0].slug})}}" title="Retour">Retour</a>
  62.                                 {# {% endfor %} #}
  63.                             {% endif %}
  64.                             <h1 class="page-title">{{post.title}}</h1>
  65.                 </div>
  66.             </div>
  67.         </section>
  68.     {% endif %}
  69.     <div class="page_cms pt-5">
  70.         {% if imagebandeau == '' %}
  71.         <div class="breadcrumb-style-default">
  72.             <div class="container-fluid wrapper">
  73.                 <div class="row">
  74.                     <div class="col-lg-12">
  75.                         <div class="inner text-center">
  76.                             <ol class="breadcrumb d-flex justify-content-center" itemscope itemtype="http://schema.org/BreadcrumbList">
  77.                                 <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="{{path('index_page_home')}}" itemprop="item"><span itemprop="name">Accueil</span></a><meta itemprop="position" content="1" /></li>
  78.                                 {% set niveau = 2 %}
  79.                                 {% if categorieTree %}
  80.                                         {% for item in categorieTree %}
  81.                                             <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="{{path('page',{slug:item.slug})}}" title="{{item.titre}}" itemprop="item"><span itemprop="name">{{item.titre}}</span></a><meta itemprop="position" content="2" /></li> 
  82.                                             {% set niveau = 3 %}
  83.                                             {% if item.child is defined %}
  84.                                                 {% for item in item.child %}
  85.                                                     <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="{{path('page',{slug:item.slug})}}" title="{{item.titre}}" itemprop="item"><span itemprop="name">{{item.titre}}</span></a><meta itemprop="position" content="3" /></li> 
  86.                                                     {% set niveau = 4 %}
  87.                                                 {% endfor %}
  88.                                             {% endif %}
  89.                                         {% endfor %}
  90.                                 {% endif %}
  91.                                 <li class="breadcrumb-item active" aria-current="page" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><span itemprop="name">{{post.title}}</span><meta itemprop="position" content="{{niveau}}" /></li>
  92.                             </ol>
  94.                             {% if categorieTree %}
  95.                                 {# {% for item in categorieTree %} #}
  96.                                     <a class="article-retour text-center" href="{{path('page',{slug:categorieTree[0].slug})}}" title="Retour">Retour</a>
  97.                                 {# {% endfor %} #}
  98.                             {% endif %}
  100.                             <h1 class="page-title">{{post.title}}</h1>
  101.                         </div>
  102.                     </div>
  103.                 </div>
  104.             </div>
  105.         </div>
  106.         {% endif %}
  108.         <div class="container-fluid wrapper mt-3">
  109.             <div class="row gx-5 py-2">
  110.                 {% if post.summary is not empty and post.summary != "" %}
  111.                     <div class="col-sm-12 text-center">
  112.                         <h2 class="sub-title wow">{{post.summary}}</h2>
  113.                     </div>
  114.                 {% endif %}
  115.                 
  116.                 {% if post.image and post.image is not empty and categorieTree is empty %}
  117.                     <div class="col-sm-12 text-center my-4">
  118.                         <img class="lazyload img-fluid principal-img" data-srcset="{{asset_image(post.image)}}" src="{{asset_image(post.image)}}" alt="{{post.title}}" />
  119.                     </div>
  120.                 {% endif %}
  122.                 {% if post.content is not empty and post.content != "" %}
  123.                     <div class="col-lg-12 content_post">
  124.                         {{post.content|raw}}
  126.                         {% if post.typelien == null %}
  127.                             {% if categorieTree is defined and categorieTree[0] is defined  %}
  128.                                 <div class="text-center py-2">
  129.                                     <a href="{{path('page',{slug:categorieTree[0].slug})}}" class="btn btn-primary py-3 px-5 mt-3 btn-plus">Retour à la liste {{categorieTree[0].titre}}</a>
  130.                                 </div>
  131.                             {% endif %}
  132.                         {% elseif post.typelien != 1 %}
  133.                                 {% if post.typelien == '4' %}
  134.                                     <div class="text-center py-2">
  135.                                         <a href="javascript:void(0)" onclick="window.location.href = 'tel:{{post.telephone}}';" class="btn btn-primary py-3 px-5 mt-3 btn-plus">{{post.titrelien}}</a>
  136.                                     </div>
  137.                                 {% elseif post.typelien == '2' %}
  138.                                     <div class="text-center py-2">
  139.                                         <a href="{{post.lieninterne}}" class="btn btn-primary py-3 px-5 mt-3 btn-plus">{{post.titrelien}}</a>
  140.                                     </div>
  141.                                 {% elseif post.typelien == '3' %}
  142.                                     <div class="text-center py-2">
  143.                                         <a href="{{post.lienexterne}}" target="_blank" class="btn btn-primary py-3 px-5 mt-3 btn-plus">{{post.titrelien}}</a>
  144.                                     </div>
  145.                                 {% endif %}
  146.                         {% endif %}
  148.                         {% if docs and docs is not empty %}
  149.                             <div class="col-md-12 bloc-docs d-flex justify-content-center">
  150.                                 {% for doc in docs %}
  151.                                     <a class="btn-back-pulse m-2" href="{{doc.location ~ doc.path ~ '/' ~ doc.fileName}}" title="{{doc.fileName|slice(0, -4)}}" target="_blank"><i class="fa fa-file-pdf-o mr-2"></i>{{doc.fileName|slice(0, -4)}}</a>   
  152.                                 {% endfor %}
  153.                             </div>
  154.                         {% endif %}
  156.                         {% if champsPersonnalises %}
  157.                             {% for key1, champ in champsPersonnalises %}
  158.                                 {% if champ %}
  159.                                     <div class="my-4">
  160.                                     {% for key2, lbl in lblchampsPersonnalises %}
  161.                                         {% if key2 == key1 %}
  162.                                             {{lbl}} :
  163.                                         {% endif %}
  164.                                     {% endfor %}
  166.                                     <a href="{{champ}}" title="{{champ}}" target="_blank">{{champ}}</a></div>
  168.                                 {% endif %}
  169.                             {% endfor %}
  170.                         {% endif %}
  171.                     </div>
  172.                 {% endif %}
  173.             </div>
  175.             {% if next_article is defined and next_article is not empty or prev_article is defined and prev_article is not empty %}
  176.                <div class="row gx-5 py-4">
  177.                     <div class="col-lg-12 d-flex justify-content-between">
  178.                         <div class="">
  179.                             {% if prev_article is defined and prev_article is not empty %}
  180.                               <a href="{{path('page',{'slug':prev_article.slug})}}" title="{{prev_article.title}}"><span class="signe1"><i class="fa fa-arrow-left"></i></span> {{prev_article.title}}</a>
  181.                             {% endif %}
  182.                         </div>
  183.                         <div class="">
  184.                             {% if next_article is defined and next_article is not empty %}
  185.                               <a href="{{path('page',{'slug':next_article.slug})}}"  title="{{next_article.title}}">{{next_article.title}}  <span class="signe1"><i class="fa fa-arrow-right"></i></span></a>
  186.                             {% endif %}
  187.                         </div>
  188.                     </div>
  189.                 </div>
  190.             {% endif %}
  191.         </div>
  193.         {# {% if galleries and galleries is not empty %}
  194.             {{ include ('front/'~ app.request.server.get('APP_THEME') ~'/bloc/galleries.html.twig',{galleries: galleries,post:post}, with_context = false)}}
  195.         {% endif %} #}
  197.         {% if galleries and galleries is not empty and template_model_gallerie is defined and template_model_gallerie is not empty %}
  198.             {{ include(template_from_string(template_model_gallerie)) }}
  199.         {% endif %}
  201.         {% if post.urlvideo is not empty %}
  202.             <div class="container-fluid wrapper mt-3">
  203.                 <div class="col-md-12 mt-1">
  204.                     <div class="video">
  205.                         {% set id_video_externe = post.urlvideo|split('?v=')[1] %}
  206.                         <a class="video-thumbnail m-0" href="{{post.urlvideo}}" data-fancybox="video">
  207.                             <img src="https://img.youtube.com/vi/{{id_video_externe}}/maxresdefault.jpg" class="img-fluid" alt=""/>
  208.                         </a>
  209.                     </div>
  210.                 </div>
  211.             </div>
  212.         {% endif %}
  214.         {% if blocs is defined  %}
  215.             {% for bloc in blocs.Bloc %}
  216.                 {% if is_mobile() and  bloc.mobile == true   %}
  217.                     {{ include ('front/'~ app.request.server.get('APP_THEME') ~'/bloc/bloc.html.twig',{
  218.                         bloc: bloc,
  219.                     }, with_context = false)}}
  220.                 {% endif %}
  221.                 
  222.                 {% if is_full_view() and is_mobile() == false and bloc.desktop == true %}
  223.                     {{ include ('front/'~ app.request.server.get('APP_THEME') ~'/bloc/bloc.html.twig',{
  224.                         bloc: bloc,
  225.                     }, with_context = false)}}
  226.                 {% endif %}
  227.             {% endfor %}
  228.         {% endif %} 
  229.     </div> 
  231. {% endblock %}
  233. {% block javascripts %}
  234.     {{parent()}}
  235.     <script src="{{ asset('assets-admin/plugins/form-builder-io/formio.full.min.js') }}"></script>
  236.     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
  237.     <script>
  238.     
  239.         var current_fs, next_fs, previous_fs;
  240.         var left, opacity, scale; 
  241.         var animating; 
  243.         $(".next").click(function(){
  245.             current_fs = $(this).parent();
  246.             next_fs = $(this).parent().next();
  247.             
  248.             if (!validateForm(current_fs)) {
  249.                 return false;
  250.             }
  252.             if(animating) return false;
  253.             animating = true;
  254.         
  255.             $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
  256.             next_fs.show(); 
  257.             //hide the current fieldset with style
  258.             current_fs.animate({opacity: 0}, {
  259.                         step: function(now, mx) {
  260.                             //as the opacity of current_fs reduces to 0 - stored in "now"
  261.                             //1. scale current_fs down to 80%
  262.                             scale = 1 - (1 - now) * 0.2;
  263.                             //2. bring next_fs from the right(50%)
  264.                             left = (now * 50)+"%";
  265.                             //3. increase opacity of next_fs to 1 as it moves in
  266.                             opacity = 1 - now;
  267.                             current_fs.css({
  268.                         'transform': 'scale('+scale+')',
  269.                         'position': 'absolute'
  270.                     });
  271.                     next_fs.css({'left': left, 'opacity': opacity});
  272.                 }, 
  273.                 duration: 1000, 
  274.                 complete: function(){
  275.                     current_fs.hide();
  276.                     animating = false;
  277.                 }, 
  278.                 //this comes from the custom easing plugin
  279.                 easing: 'easeInOutBack'
  280.             });
  281.         });
  283.         $(".previous").click(function(){
  284.             current_fs = $(this).parent();
  285.             previous_fs = $(this).parent().prev();
  287.             // if (!validateForm(current_fs)) {
  288.             //     return false;
  289.             // }
  291.             if(animating) return false;
  292.             animating = true;
  293.             
  294.             //de-activate current step on progressbar
  295.             $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
  296.             
  297.             //show the previous fieldset
  298.             previous_fs.show(); 
  299.             //hide the current fieldset with style
  300.             previous_fs.css({'transform': 'scale(1)', 'opacity': '1','position':'relative'});
  301.             current_fs.hide();
  302.             animating = false;
  303.             // current_fs.animate({opacity: 0}, {
  304.             //     step: function(now, mx) {
  305.             //         //as the opacity of current_fs reduces to 0 - stored in "now"
  306.             //         //1. scale previous_fs from 80% to 100%
  307.             //         scale = 0.8 + (1 - now) * 0.2;
  308.             //         //2. take current_fs to the right(50%) - from 0%
  309.             //         left = ((1-now) * 50)+"%";
  310.             //         //3. increase opacity of previous_fs to 1 as it moves in
  311.             //         opacity = 1 - now;
  312.             //         current_fs.css({'left': left});
  313.             //         previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity,'position':'relative'});
  314.             //     }, 
  315.             //     duration: 800, 
  316.             //     complete: function(){
  317.             //         current_fs.hide();
  318.             //         animating = false;
  319.             //     }, 
  320.             //     //this comes from the custom easing plugin
  321.             //     easing: 'easeInOutBack'
  322.             // });
  323.         });
  325.         // $(".form-wizrd .submit.action-button").click(function(e){
  326.         //      current_fs = $(this).parent();
  327.         //      if (!validateForm(current_fs)) {
  328.         //         return false;
  329.         //      }
  330.         // });
  332.         function validateForm(current_fs) {
  333.             let formTabs, formInputs, i, valid = true;
  334.             formInputs = current_fs[0].querySelectorAll('[data-form-input]');
  335.      
  336.             for (i = 0; i < formInputs.length; i++) {
  337.                 if (formInputs[i].hasAttribute("required") && $(formInputs[i]).attr('type') != 'checkbox') {
  338.                     formInputs[i].addEventListener('keyup', (event) => {
  339.                         event.target.classList.remove("has-error");
  340.                         $(event.target.parentElement).find('.invalid-feedback').css('display','none');
  341.                        // event.target.nextElementSibling.style.display = "none";
  342.                     });
  343.                 }
  345.                 if (formInputs[i].hasAttribute("required") && $(formInputs[i]).attr('type') == 'checkbox') {
  346.                     formInputs[i].addEventListener('change', (event) => {
  347.                         if($(event.target).is(':checked')){
  348.                             $(event.target).attr('checked', true);
  349.                         }else{
  350.                             $(event.target).attr('checked', false);
  351.                         }
  352.                         event.target.classList.remove("has-error");
  353.                         $(event.target.parentElement).find('.invalid-feedback').css('display','none');
  354.                         //event.target.nextElementSibling.style.display = "none";
  355.                     });
  356.                 }
  358.                 if (formInputs[i].hasAttribute("required") && formInputs[i].nodeName == 'SELECT') {
  359.                     formInputs[i].addEventListener('change', (event) => {
  360.                         console.log('select change');
  361.                         event.target.classList.remove("has-error");
  362.                         $(event.target.parentElement).find('.invalid-feedback').css('display','none');
  363.                         //event.target.nextElementSibling.style.display = "none";
  364.                     });
  365.                 }
  367.                 if (formInputs[i].hasAttribute("required") && $(formInputs[i]).attr('type') == 'email') {
  368.                     formInputs[i].addEventListener('keyup', (event) => {
  369.                         console.log(isEmail(event.target.value));
  370.                         if (isEmail(event.target.value) == true) {
  371.                            event.target.classList.remove("has-error");
  372.                            $(event.target.parentElement).find('.invalid-feedback').css('display','none');
  373.                         }else{
  374.                             if (!event.target.classList.contains('has-error')) {
  375.                                 event.target.className += " has-error";
  376.                             }
  378.                             $(event.target.parentElement).find('.invalid-feedback').html('Veuillez choisir un email valide.');
  379.                             $(event.target.parentElement).find('.invalid-feedback').css('display','block');
  380.                         }
  381.                        // event.target.nextElementSibling.style.display = "none";
  382.                     });
  383.                 }
  385.                 if(formInputs[i].hasAttribute("required")){
  387.                     if ($(formInputs[i]).attr('type') == 'checkbox' && $(formInputs[i]).is(':checked') == false) {
  388.                         if (!formInputs[i].classList.contains('has-error')) {
  389.                             formInputs[i].className += " has-error";
  390.                         }
  392.                         $(formInputs[i].parentElement).find('.invalid-feedback').css('display','block');
  393.                         valid = false;
  394.                     }else if(formInputs[i].value == "" && ($(formInputs[i]).attr('type') == 'text' || formInputs[i].nodeName == 'SELECT' || formInputs[i].nodeName == 'TEXTAREA')){
  395.                         if (!formInputs[i].classList.contains('has-error')) {
  396.                             formInputs[i].className += " has-error";
  397.                         }
  399.                         $(formInputs[i].parentElement).find('.invalid-feedback').css('display','block');
  400.                          valid = false;
  401.                     }else if(!isEmail(formInputs[i].value) && $(formInputs[i]).attr('type') == 'email'){
  402.                         if (!formInputs[i].classList.contains('has-error')) {
  403.                             formInputs[i].className += " has-error";
  404.                         }
  406.                         $(formInputs[i].parentElement).find('.invalid-feedback').css('display','block');
  407.                          valid = false;
  408.                     }
  410.                     //formInputs[i].nextElementSibling.style.display = "block";                   
  411.                 }
  412.             }
  414.             return valid;
  415.         }
  417.         function isEmail(email) {
  418.             var EmailRegex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  419.             return EmailRegex.test(email);
  420.         }
  421.     </script>
  423.     <script>
  424.        if(document.getElementById("builder")){
  425.         var data_fields = document.getElementById("builder").getAttribute('data-config');
  426.         if(data_fields != ''){
  427.            data_fields = JSON.parse(data_fields);
  428.            console.log(JSON.parse(data_fields));
  429.            Formio.createForm(document.getElementById('builder'), 
  430.               JSON.parse(data_fields),
  432.            ).then(function(form) {
  433.                 // Prevent the submission from going to the form.io server.
  434.                 form.nosubmit = true;
  436.                 // Triggered when they click the submit button.
  437.                 form.on('submit', function(submission) {
  438.                     var data = submission.data;
  439.                     grecaptcha.execute('{{ParametreSite().clekey}}', {action: 'create_comment'}).then(token => {
  440.                         $('#builder').find('[name=g-recaptcha-response]').val(token);
  441.                         data['g-recaptcha-response'] = token;
  442.                         data['IdForm'] = $('#builder').parent().find('input[name="IdForm"]').val();
  443.                         $('#builder').parent().find('button[type="submit"]').attr('disabled','true');
  444.                         $.ajax({
  445.                             type:"POST",
  446.                             cache:false,
  447.                             url:"{{path('save_form')}}",
  448.                             data:data,   
  449.                             success: function (data) {
  450.                                window.location = data
  451.                             }
  452.                         });
  453.                     });
  454.                 });
  455.             });
  456.         }
  457.        }
  458.     </script>
  460.     {% if modele_galerie[0].type == 4 %}
  461.         {{parent()}}
  462.         <script src="{{asset('templates/front/theme1/assets/plugins/flexslider/jquery.flexslider.js')}}" ></script>
  463.         <script>    
  464.             /*-------------------------------------------------*/
  465.             /* =  Sx flexslider 
  466.             /*-------------------------------------------------*/
  467.             if ($(".sx_flexslider").length) {
  468.             $('.flex-carousel').flexslider({
  469.             animation: "slide",
  470.             controlNav: false,
  471.             animationLoop: true,
  472.             slideshow: false,
  473.             itemWidth: 150,
  474.             asNavFor: '.flex-slider'
  475.             });
  476.             $('.flex-slider').flexslider({
  477.             animation: "slide",
  478.             controlNav: false,
  479.             animationLoop: true,
  480.             slideshow: false,
  481.             sync: ".flex-carousel"
  482.             });
  483.             }
  484.         </script>
  485.     {% endif %}
  486.     
  487. {% endblock %}