templates/base.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
  7.         <title>{% block title %}Welcome!{% endblock %}</title>
  8.         <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/favicon/apple-touch-icon.png">
  9.         <link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon/favicon-32x32.png">
  10.         <link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon/favicon-16x16.png">
  11.         <link rel="manifest" href="/assets/images/favicon/site.webmanifest">
  13.         <!-- BEGIN GLOBAL MANDATORY STYLES -->
  14.         <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet">
  15.         <link href="{{ asset('assets/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
  16.         <link href="{{ asset('assets/css/plugins.css') }}" rel="stylesheet" type="text/css" />
  17.         <link href="{{ asset('assets/plugins/notification/toastr/toastr.min.css') }}" rel="stylesheet" type="text/css" />
  18.         <link rel="stylesheet" type="text/css" href="{{ asset('assets/plugins/select2/select2.min.css') }}">
  19.         <link rel="stylesheet" type="text/css" href="{{ asset('assets/plugins/flatpickr/flatpickr.css') }}">
  20.         <link rel="stylesheet" type="text/css" href="{{ asset('assets/plugins/flatpickr/custom-flatpickr.css') }}">
  21.         <link rel="stylesheet" type="text/css" href="{{ asset('assets/plugins/fancybox/fancybox.css') }}"/>
  22.         <!-- END GLOBAL MANDATORY STYLES -->
  23.         <!-- BEGIN PAGE LEVEL PLUGINS/CUSTOM STYLES -->
  24.         <link rel="stylesheet" href="{{ asset('assets/css/custom.css') }}">
  25.         {% block stylesheets %}{% endblock %}
  26.         <link rel="stylesheet" media="print" href="{{ asset('assets/css/print.css') }}" />
  27.         <!-- END PAGE LEVEL PLUGINS/CUSTOM STYLES -->
  28.         {% if app.user %}
  29.         <style>
  30.         :root {
  31.             --primary: {{ app.user.company.color }}!important;
  32.             --primary_15l: {{ app.user.company.color }}33!important;/* 0.15 opacity */
  33.             --secondary: {{ app.user.company.color2 }}!important;
  34.         }
  35.         </style>
  36.         {% endif %}
  38.         {% if global_vars.metaPixelId %}
  39.         <!-- Meta Pixel Code -->
  40.         <script>
  41.         !function(f,b,e,v,n,t,s)
  42.         {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  43.         n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  44.         if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  45.         n.queue=[];t=b.createElement(e);t.async=!0;
  46.         t.src=v;s=b.getElementsByTagName(e)[0];
  47.         s.parentNode.insertBefore(t,s)}(window, document,'script',
  48.         'https://connect.facebook.net/en_US/fbevents.js');
  49.         fbq('init', '{{ global_vars.metaPixelId }}');
  50.         fbq('track', 'PageView');
  51.         </script>
  52.         <noscript><img height="1" width="1" style="display:none"
  53.             src="https://www.facebook.com/tr?id={{ global_vars.metaPixelId }}&ev=PageView&noscript=1"/></noscript>
  54.         <!-- End Meta Pixel Code -->
  55.         {% endif %}
  56.     </head>
  57.     <body class="alt-menu sidebar-noneoverflow {% block bodyClass %}{% endblock %}">
  58.     {% if app.user %}
  59.     {{ include('navbar.html.twig') }}
  61.     <!--  BEGIN MAIN CONTAINER  -->
  62.     <div class="main-container sidebar-closed sbar-open" id="container">
  64.         <div class="overlay"></div>
  65.         <div class="cs-overlay"></div>
  66.         <div class="search-overlay"></div>
  68.         {{ include('sidebar.html.twig') }}
  69.         
  70.         <!--  BEGIN CONTENT AREA  -->
  71.         <div id="content" class="main-content">
  72.             <div class="layout-px-spacing">
  74.                 <div class="page-header">
  75.                     <div class="page-title">
  76.                         <h3>{% block pageHeader %}{% endblock %}</h3>
  77.                     </div>
  78.                 </div>
  81.                 <!-- CONTENT AREA -->
  82.                 
  84.                 {% block pageContent %}{% endblock %}
  87.                 <!-- CONTENT AREA -->
  89.             </div>
  90.         </div>
  91.         <!--  END CONTENT AREA  -->
  92.     </div>
  93.     <!-- END MAIN CONTAINER -->
  95.     {{ include('footer.html.twig')}}
  96.     {% endif %}
  98.     {% block login %}{% endblock %}
  100.     <!-- BEGIN GLOBAL MANDATORY SCRIPTS -->
  101.     <script src="{{ asset('assets/js/libs/jquery-3.1.1.min.js') }}"></script>
  102.     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
  103.     <script src="{{ asset('assets/bootstrap/js/popper.min.js') }}"></script>
  104.     <script src="{{ asset('assets/bootstrap/js/bootstrap.min.js') }}"></script>
  105.     <script src="{{ asset('assets/plugins/perfect-scrollbar/perfect-scrollbar.min.js') }}"></script>
  106.     <script src="{{ asset('assets/plugins/notification/toastr/toastr.min.js') }}"></script>
  107.     <script src="{{ asset('assets/plugins/select2/select2.min.js') }}"></script>
  108.     <script src="{{ asset('assets/plugins/flatpickr/flatpickr.js') }}"></script>
  109.     <script src="{{ asset('assets/plugins/flatpickr/fr.js') }}"></script>
  110.     <script src="{{ asset('assets/js/jquery.collection.js') }}"></script>
  111.     <script src="{{ asset('assets/plugins/fancybox/fancybox.umd.js') }}"></script>
  112.     <script src="{{ asset('assets/js/jquery.tagsinput.js') }}"></script>
  114.     <script src="{{ asset('assets/js/app.js') }}"></script>
  115.     <script>
  116.     flatpickr.localize(flatpickr.l10ns.fr);
  117.     toastr.options = {
  118.         "closeButton": true,
  119.         "debug": false,
  120.         "newestOnTop": true,
  121.         "progressBar": true,
  122.         "positionClass": "toast-bottom-left",
  123.         "preventDuplicates": false,
  124.         "onclick": null,
  125.         "showDuration": "300",
  126.         "hideDuration": "1000",
  127.         "timeOut": "10000",
  128.         "extendedTimeOut": "1000",
  129.         "showEasing": "swing",
  130.         "hideEasing": "linear",
  131.         "showMethod": "fadeIn",
  132.         "hideMethod": "fadeOut"
  133.     }
  134.     jQuery(document).ready(function() {
  135.         App.init();
  136.         if ($.fn.DataTable) {
  137.             $('.table-data').DataTable({
  138.                 "select": "true",
  139.                 "aaSorting": [],
  140.                 "oLanguage": {
  141.                     select: {
  142.                         rows: {
  143.                             _: "%d lignes sélectionnées",
  144.                             1: "1 ligne sélectionnée"
  145.                         }
  146.                     },
  147.                     "oPaginate": { "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>', "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>' },
  148.                     "sInfo": "Page _PAGE_ de _PAGES_",
  149.                     "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
  150.                     "sSearchPlaceholder": "Recherche...",
  151.                     "sLengthMenu": "Résultats :  _MENU_",
  152.                     "sInfo":          "Affichage de _START_ à _END_ sur _TOTAL_ entrées",
  153.                     "sInfoEmpty":     "Affichage de 0 à 0 sur 0 entrées",
  154.                     "sInfoFiltered":  "(filtrées depuis un total de _MAX_ entrées)",
  155.                 },
  156.                 "stripeClasses": [],
  157.             });
  158.             const selectTable = $('.table-data-select').DataTable({
  159.                 "columnDefs": [
  160.                     // These are the column name variables that will be sent to the server
  161.                     { 
  162.                         "name": "id",'targets': 0,
  163.                         'checkboxes': {
  164.                         'selectRow': true,
  165.                         'selectAll': false
  166.                         }  
  167.                     }
  168.                 
  169.                 ],
  170.                 'select': {
  171.                     'style': 'multi'
  172.                 },
  173.                 "oLanguage": {
  174.                     select: {
  175.                         rows: {
  176.                             _: "%d lignes sélectionnées",
  177.                             1: "1 ligne sélectionnée"
  178.                         }
  179.                     },
  180.                     "oPaginate": { "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>', "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>' },
  181.                     "sInfo": "Page _PAGE_ de _PAGES_",
  182.                     "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
  183.                     "sSearchPlaceholder": "Recherche...",
  184.                     "sLengthMenu": "Résultats :  _MENU_",
  185.                     "sInfo":          "Affichage de _START_ à _END_ sur _TOTAL_ entrées",
  186.                     "sInfoEmpty":     "Affichage de 0 à 0 sur 0 entrées",
  187.                     "sInfoFiltered":  "(filtrées depuis un total de _MAX_ entrées)",
  188.                 },
  189.             });
  190.             
  191.             // Event listener to the filtering select to redraw on change
  192.             $('#content').on('change','.data-filter',function ()  { 
  193.                     selectTable.draw();
  194.             } );
  196.             $('.table-data-select thead input[name="select_all"]').on('click', function (e) {
  197.             var checked = $('#selectall').prop('checked');
  198.                 // get all filtered rows
  199.                 var allRowsCount = selectTable.rows().count()
  200.                 var filteredRowsCount = selectTable.rows({ search: 'applied' }).count();
  201.                 var visibleRowsCount = selectTable.rows({ page: 'current' }).count();
  202.                 //console.log(allRowsCount, filteredRowsCount, visibleRowsCount)
  203.                 var rows = (allRowsCount == filteredRowsCount) ? { page: 'current' } : { search: 'applied' };
  204.                 if (this.checked) {
  205.                     selectTable.rows(rows).select();
  206.                 } else {
  207.                     //selectTable.rows(rows).deselect();
  208.                     selectTable.rows({ selected: true }).deselect();
  209.                 }
  210.             });
  212.             selectTable.on('length.dt', function () {
  213.                 selectTable.rows({ selected: true }).deselect();
  214.                 $('.table-data-select thead input[name="select_all"]').prop('checked', false);
  215.             });
  217.             $('body').on('click', 'a#table-data-select-export', function(e){
  218.                 //alert();
  219.                 var rows_selected = selectTable.column(0).checkboxes.selected();
  220.                 //console.log(rows_selected);
  221.                 if (typeof rows_selected !== 'undefined' && rows_selected.length > 1  && rows_selected.length < 51) {
  222.                     var url = $(this).attr("href");
  223.                     // Iterate over all selected checkboxes
  224.                     $.each(rows_selected, function(index, row){
  225.                         rowId = row.replace(/[^0-9]/g,'');
  226.                         if (url.indexOf('?') === -1) {
  227.                             url = url + '?a[]=' + rowId;  
  228.                         }else {
  229.                             url = url + '&a[]=' + rowId;
  230.                         }
  231.                     });
  232.                     window.open(url, "_blank");
  233.                 } else if (rows_selected.length > 50) {
  234.                     toastr["error"]('Merci de ne pas selectionner plus que 50 documents ... ');
  235.                 } else {
  236.                     toastr["warning"]('Merci de selectionner au moins deux éléments ...');
  237.                 }
  238.                 return false;
  239.                 
  240.             }); 
  241.         }
  243.         $('.emails-tags').tagsInput({
  244.             'unique': true,
  245.             'validationPattern': new RegExp('(.+)@(.+){2,}\.(.+){2,}'),
  246.             'delimiter': [' ']
  247.         });
  248.         
  250.         flatpickr($('.flatpickr'), {
  251.             enableTime: true,
  252.             dateFormat: "Y-m-d H:i",
  253.             disableMobile: "true",
  254.             "locale": {
  255.                 "firstDayOfWeek": 7 // start week on Sunday
  256.             },
  257.             minDate: new Date(),
  258.             allowInput: true,
  259.             onOpen: function(selectedDates, dateStr, instance) {
  260.             $(instance.altInput).prop('readonly', true);
  261.             },
  262.             onClose: function(selectedDates, dateStr, instance) {
  263.                 $(instance.altInput).prop('readonly', false);
  264.                 $(instance.altInput).blur();
  265.             },
  266.             onChange: function(selectedDates, dateStr, instance) {
  267.                 validateInput(dateStr, $('.flatpickr')[0]);
  268.             }
  269.         });
  270.         // Add an additional event listener to the date input field
  271.         $('.flatpickr').on('change', function() {
  272.             validateInput(this.value, $(this)[0]);
  273.         });
  275.         flatpickr($('.flatpickr_date'), {
  276.             enableTime: false,
  277.             dateFormat: "Y-m-d",
  278.             disableMobile: "true",
  279.             "locale": {
  280.                 "firstDayOfWeek": 7 // start week on Sunday
  281.             },
  282.             defaultDate: new Date(),
  283.             allowInput: true,
  284.             onOpen: function(selectedDates, dateStr, instance) {
  285.             $(instance.altInput).prop('readonly', true);
  286.             },
  287.             onClose: function(selectedDates, dateStr, instance) {
  288.                 $(instance.altInput).prop('readonly', false);
  289.                 $(instance.altInput).blur();
  290.             },
  291.             onChange: function(selectedDates, dateStr, instance) {
  292.                 validateInput(dateStr, $('.flatpickr_date')[0]);
  293.             }
  294.         });
  295.         // Add an additional event listener to the date input field
  296.         $('.flatpickr_date').on('change', function() {
  297.             validateInput(this.value, $(this)[0]);
  298.         });
  300.         flatpickr($('.flatpickr_date_nodefault'), {
  301.             enableTime: false,
  302.             dateFormat: "Y-m-d",
  303.             disableMobile: "true",
  304.             "locale": {
  305.                 "firstDayOfWeek": 7 // start week on Sunday
  306.             },
  307.             allowInput: true,
  308.             onOpen: function(selectedDates, dateStr, instance) {
  309.             $(instance.altInput).prop('readonly', true);
  310.             },
  311.             onClose: function(selectedDates, dateStr, instance) {
  312.                 $(instance.altInput).prop('readonly', false);
  313.                 $(instance.altInput).blur();
  314.             },
  315.             onChange: function(selectedDates, dateStr, instance) {
  316.                 validateInput(dateStr, $('.flatpickr_date_nodefault')[0]);
  317.             }
  318.         });
  319.         // Add an additional event listener to the date input field
  320.         $('.flatpickr_date_nodefault').on('change', function() {
  321.             validateInput(this.value, $(this)[0]);
  322.         });
  324.         function validateInput(dateValue, input) {
  325.             var date = new Date(dateValue);
  326.             console.log(date, input);
  327.             if (!isNaN(date.getTime())) {
  328.                 // If the date is valid, clear the error message
  329.                 input.setCustomValidity(''); 
  330.             } else {
  331.                 // If the date is not valid, set a custom error message on the field
  332.                 input.setCustomValidity('Merci de choisir une date valide !');
  333.             }
  334.         }
  336.         flatpickr($('.flatpickr_time'), {
  337.             enableTime: true,
  338.             noCalendar: true,
  339.             dateFormat: "H:i",
  340.             //defaultDate: new Date(),
  341.             disableMobile: "true",
  342.         });
  344.         $('.collections').collection({
  345.             allow_down: false,
  346.             allow_up: false,
  347.             add: '<a href="#" class="btn btn-primary mb-2 mr-2 rounded-circle"><svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg></a>',
  348.             remove: '<a href="#" class="btn btn-primary mb-2 mr-2 rounded-circle"><svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><circle cx="12" cy="12" r="10"></circle><line x1="8" y1="12" x2="16" y2="12"></line></svg></a>'
  349.             });
  350.         $('.select2_collections').collection({
  351.             after_add: function(collection, element) { initializeSelect2(element.find('.select2')) },
  352.             allow_down: false,
  353.             allow_up: false,
  354.             add: '<a href="#" class="btn btn-primary mb-2 mr-2 rounded-circle"><svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg></a>',
  355.             remove: '<a href="#" class="btn btn-primary mb-2 mr-2 rounded-circle"><svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><circle cx="12" cy="12" r="10"></circle><line x1="8" y1="12" x2="16" y2="12"></line></svg></a>'
  356.             });
  359.         function initializeSelect2(selectElementObj) {
  360.             selectElementObj.select2({
  361.             });
  362.             return true;
  363.         }
  364.         
  365.         {% for message in app.flashes('notice') %}
  366.             toastr["warning"]("{{ message }}");
  367.         {% endfor %}
  368.         {% for message in app.flashes('success') %}
  369.             toastr["success"]("{{ message }}");
  370.         {% endfor %}
  371.         {% for message in app.flashes('error') %}
  372.             toastr["error"]("{{ message }}");
  373.         {% endfor %}
  374.         {% for message in app.flashes('critical') %}
  375.             toastr.options.closeButton = true;
  376.             toastr.options.tapToDismiss = false;
  377.             toastr.options.timeOut = 0;
  378.             toastr.options.extendedTimeOut = 0;
  379.             toastr.options.showDuration = 0;
  380.             toastr.options.hideDuration = 0;
  381.             toastr.options.escapeHtml = false;
  382.             toastr.options.preventDuplicates = true;
  383.             toastr["error"]("{{ message|raw }}");
  384.         {% endfor %}
  385.         {% for message in app.flashes('error_action') %}
  386.             //toastr.options = {onclick: function () {document.location.href='{{app.request.get("action")}}'; }}
  387.             toastr.options.onclick = function () {document.location.href='{{app.request.get("action")}}'; }
  388.             toastr["error"]("{{ message }}<br /><button type="button" class="btn clear">Éditer</button>");
  389.             });
  390.         {% endfor %}
  392.         /*
  393.         ================================================
  394.         |   navbar inbox / send photo / input file     |
  395.         ================================================
  396.         */
  398.         $.ajax({
  399.             type: "GET",
  400.             url: "{{ path('message_unread_index') }}",
  401.         })
  402.         .done(function(data){ 
  403.             if (data.length > 0) {
  404.                 var elem = "";
  405.                 for (i = 0; i < data.length; i++) {
  406.                     elem += "<a href='{{ path('message_index') }}' class='dropdown-item'><div><div class='media notification-new'><div class='usr-profile-img mr-3'><div class='user-profile'><div>"+data[i]["initials"]+"</div>";
  407.                     elem += "</div></div><div class='media-body'><p class='meta-user-name mr-3'>"+data[i]["sender"]+"</p><p class='message-text'>"+data[i]["subject"]+"</p><p class='meta-time align-self-center mb-0'>"+data[i]["time"]+"</p></div></div></div></a>";    
  408.                 }
  409.                 $('#message-dropdown').html(elem);
  410.                 $('li.message-dropdown span.badge').html(data.length)
  411.             }    else {
  412.                 $('#message-dropdown').html("<p class='m-3 text-center'>Aucun nouveau message!<br><a class='btn btn-primary mt-3' href='/message'>Boîte de Réception</a></p>");
  413.             }
  414.         });
  416.         $('#send-photos').off('click').on('click', function(event) {
  417.             $( "#sendPictureModal form[name='message']" ).submit();
  418.             event.preventDefault();
  419.         });
  421.         $("input[type=file]").each(function (index, inputFile) {
  422.             if($(inputFile).data("filename"))
  423.             {
  424.                 var label = $("label[for='" + $(inputFile).attr('id') + "']")[0];
  425.                 label.innerHTML = $(inputFile).data("filename");
  426.             }
  427.         });
  428.         $(document).on('change', "input[type='file']", function(){
  429.             //get the file name
  430.             var fileName = $(this).val().replace('C:\\fakepath\\', " ");
  431.             //replace the "Choose a file" label
  432.             $(this).next('.custom-file-label').html(fileName);
  433.         });
  435.          /*
  436.         ================================================
  437.         |               submit button loader            |
  438.         ================================================
  439.         */
  441.          $("button[data-spinning-button]").click(function(e) {
  442.             var $this = $(this);
  443.             let $form  = $this.parents("form");
  444.             $this
  445.                 .addClass("button-loading")
  446.                 .attr("disabled", "");
  447.             //return true;
  448.             if ($form.length) {
  449.                 //form.valid() will be applicable If you are using jQuery validate https://jqueryvalidation.org/
  450.                 //asp.net mvc used it by default with jQuery Unobtrusive Validation
  451.                 //you need to check the form before it goes into the if statement
  452.                 if ($form[0].checkValidity()) {
  453.                     $form.submit();
  454.                 } else {
  455.                     $this
  456.                         .removeClass("button-loading")
  457.                         .removeAttr("disabled", "");
  458.                 }
  459.             }
  460.         });
  462.         $("a[data-spinning-link]").click(function(e) {
  463.             var $this = $(this);
  464.             $this
  465.                 .addClass("button-loading")
  466.                 .attr("disabled", "");
  467.             return true;
  468.         });
  470.         /*
  471.         ================================================
  472.         |                  Fancybox                  |
  473.         ================================================
  474.         */
  476.             Fancybox.defaults.l10n = {
  477.                 CLOSE: "Fermer",
  478.                 NEXT: "Suivant",
  479.                 PREV: "Précédent",
  480.                 MODAL: "Vous pouvez fermer ce contenu modal avec la touche ESC",
  481.                 ERROR: "Quelque chose s'est mal passé, veuillez réessayer plus tard",
  482.                 IMAGE_ERROR: "Image non trouvée",
  483.                 ELEMENT_NOT_FOUND: "Élément HTML introuvable",
  484.                 AJAX_NOT_FOUND: "Erreur lors du chargement d'AJAX : introuvable",
  485.                 AJAX_FORBIDDEN: "Erreur lors du chargement d'AJAX : Interdit",
  486.                 IFRAME_ERROR: "Erreur de chargement de la page",
  487.                 TOGGLE_ZOOM: "Zoomer et dézoomer",
  488.                 ROTATE_LEFT: "Faire tourner à gauche",
  489.                 ROTATE_RIGHT: "Faire tourner à droite",
  490.                 TOGGLE_FULLSCREEN: "Basculer en plein écran",
  491.             };
  493.             Fancybox.Plugins.Toolbar.defaults.items.rotateRight = {
  494.                 type: "button",
  495.                 class: "fancybox__button--rotateRight",
  496.                 label: "ROTATE_RIGHT",
  497.                 html:
  498.                     '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>',
  499.                 click: function (event) {
  500.                     event.preventDefault();
  501.                     console.log(event.target.className);
  502.                     var orientation = event.target.classList.contains("fancybox__button--rotateRight") ? "cw" : "acw";
  503.                     var fancybox = this.fancybox;
  504.                     rotatingFunction (fancybox, orientation);
  505.                 },
  506.             };
  508.             Fancybox.Plugins.Toolbar.defaults.items.rotateLeft = {
  509.                 type: "button",
  510.                 class: "fancybox__button--rotateLeft",
  511.                 label: "ROTATE_LEFT",
  512.                 html:
  513.                     '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><polyline points="1 4 1 10 7 10"></polyline><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path></svg>',
  514.                 click: function (event) {
  515.                     event.preventDefault();
  516.                     console.log(event.target.className);
  517.                     var orientation = event.target.classList.contains("fancybox__button--rotateRight") ? "cw" : "acw";
  518.                     var fancybox = this.fancybox;
  519.                     rotatingFunction (fancybox, orientation);
  520.                 },
  521.             };
  523.             Fancybox.bind("[data-fancybox]" , {
  524.                 Toolbar: {
  525.                     display: [
  526.                         "counter",
  527.                         "rotateRight",
  528.                         "rotateLeft",
  529.                         "zoom",
  530.                         "slideshow",
  531.                         "fullscreen",
  532.                         "close",
  533.                     ],
  534.                     fullScreen: {
  535.                         autoStart: true
  536.                     }
  537.                 },
  538.                 on: {
  539.                     load: (fancybox, slide) => {
  540.                         console.log(`#${slide.type} slide is loaded!`);
  541.                         //console.log(
  542.                         //    `This slide is selected: ${fancybox.getSlide().index === slide.index}`
  543.                         //);
  544.                         for (const $el of document.querySelectorAll(".fancybox__button--rotateLeft, .fancybox__button--rotateRight")) {
  545.                                 if (slide.type === "image") {
  546.                                     $el.removeAttribute("disabled");
  547.                                 } else {
  548.                                     $el.setAttribute("disabled", "");
  549.                                 }
  550.                         }
  551.                     },
  552.                 },
  553.             });
  555.             function rotatingFunction (fancybox, orientation) {
  556.                 $.ajax({
  557.                     type: 'POST',
  558.                     url: "{{ path('images_rotate') }}",
  559.                     data: { "file": fancybox.getSlide().src, 'orientation': orientation },
  560.                     beforeSend: function( xhr ) {
  561.                         var slide = fancybox.getSlide();
  562.                         fancybox.showLoading(slide);
  563.                     }
  564.                 }).done(function( data ) {
  565.                     //var slide = fancybox.getSlide();
  566.                     //fancybox.hideLoading(slide);
  567.                     
  568.                     //console.log(src);
  569.                     
  570.                     //Image rortated
  571.                     if (data["message"] == "ok") { 
  572.                         /*var thisImg = slide.$el.querySelector("img");
  573.                         var src = $(thisImg).attr("src");
  574.                         degrees = orientation == "cw" ? 90 : -90;
  575.                         $("img[src='"+src+"']").css({
  576.                             'transform': 'rotate(' + degrees + 'deg)',
  577.                             '-ms-transform': 'rotate(' + degrees + 'deg)',
  578.                             '-moz-transform': 'rotate(' + degrees + 'deg)',
  579.                             '-webkit-transform': 'rotate(' + degrees + 'deg)',
  580.                             '-o-transform': 'rotate(' + degrees + 'deg)'
  581.                          });*/
  582.                         
  583.                         var slide = fancybox.getSlide();
  584.                         var actualUrl = slide.src;
  585.                         var newUrl = slide.src + "?" + new Date().getTime();
  586.                         var thisImg = slide.$el.querySelector("img");
  587.                         
  588.                         //creating an xmlHTTP in order to show a loader while of the new rotated img is loaded
  589.                         var xmlHTTP = new XMLHttpRequest();
  590.                         xmlHTTP.open('GET', newUrl, true);
  591.                         //xmlHTTP.withCredentials = true;
  592.                         xmlHTTP.responseType = 'arraybuffer';
  593.                         xmlHTTP.setRequestHeader("Cache-Control", "no-cache, no-store, max-age=0");
  594.                         xmlHTTP.setRequestHeader("Expires", "Tue, 01 Jan 1980 1:00:00 GMT");
  595.                         xmlHTTP.setRequestHeader("Pragma", "no-cache"); 
  596.                         xmlHTTP.onload = function(e) {
  597.                             var blob = new Blob([this.response]);
  598.                             thisImg.src = window.URL.createObjectURL(blob);
  599.                             slide.src = newUrl;
  600.                             fancybox.hideLoading(slide);
  601.                         };
  602.                         xmlHTTP.onloadstart = function() {
  603.                             //fancybox.showLoading(slide);
  604.                             //updating the intial triggers
  605.                             var x =document.querySelectorAll("a.fancybox[href='"+actualUrl+"'], a.fancybox img[src='"+actualUrl+"']")
  606.                             var i;
  607.                             for (i = 0; i < x.length; i++) {
  608.                                 if (x[i].hasAttribute("src")) {      
  609.                                     x[i].src = newUrl;
  610.                                 } else {
  611.                                     x[i].href = newUrl;
  612.                                 }
  613.                                 
  614.                             }
  615.                         };
  616.                         //fancybox.showLoading(slide);
  617.                         xmlHTTP.send();   
  619.                         
  621.                     } else {
  622.                         toastr["error"]("Une erreur s'est produite. Veuillez réessayer ultérieurement...");
  623.                     }
  624.                 });
  625.             }
  626.         
  627.     } );
  628.     </script>
  629.     <script src="{{ asset('assets/js/custom.js') }}"></script>
  630.     <script src="{{ asset('assets/js/image-crop.js') }}"></script>
  631.     <!-- END GLOBAL MANDATORY SCRIPTS -->
  632.     <!-- BEGIN PAGE LEVEL PLUGINS/CUSTOM SCRIPTS -->
  633.     {% block javascripts %}{% endblock %}
  634.     <!-- BEGIN PAGE LEVEL PLUGINS/CUSTOM SCRIPTS -->
  635.     </body>
  636. </html>