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 %}
  37.     </head>
  38.     <body class="alt-menu sidebar-noneoverflow {% block bodyClass %}{% endblock %}">
  39.     {% if app.user %}
  40.     {{ include('navbar.html.twig') }}
  42.     <!--  BEGIN MAIN CONTAINER  -->
  43.     <div class="main-container sidebar-closed sbar-open" id="container">
  45.         <div class="overlay"></div>
  46.         <div class="cs-overlay"></div>
  47.         <div class="search-overlay"></div>
  49.         {{ include('sidebar.html.twig') }}
  50.         
  51.         <!--  BEGIN CONTENT AREA  -->
  52.         <div id="content" class="main-content">
  53.             <div class="layout-px-spacing">
  55.                 <div class="page-header">
  56.                     <div class="page-title">
  57.                         <h3>{% block pageHeader %}{% endblock %}</h3>
  58.                     </div>
  59.                 </div>
  62.                 <!-- CONTENT AREA -->
  63.                 
  65.                 {% block pageContent %}{% endblock %}
  68.                 <!-- CONTENT AREA -->
  70.             </div>
  71.         </div>
  72.         <!--  END CONTENT AREA  -->
  73.     </div>
  74.     <!-- END MAIN CONTAINER -->
  76.     {{ include('footer.html.twig')}}
  77.     {% endif %}
  79.     {% block login %}{% endblock %}
  81.     <!-- BEGIN GLOBAL MANDATORY SCRIPTS -->
  82.     <script src="{{ asset('assets/js/libs/jquery-3.1.1.min.js') }}"></script>
  83.     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
  84.     <script src="{{ asset('assets/bootstrap/js/popper.min.js') }}"></script>
  85.     <script src="{{ asset('assets/bootstrap/js/bootstrap.min.js') }}"></script>
  86.     <script src="{{ asset('assets/plugins/perfect-scrollbar/perfect-scrollbar.min.js') }}"></script>
  87.     <script src="{{ asset('assets/plugins/notification/toastr/toastr.min.js') }}"></script>
  88.     <script src="{{ asset('assets/plugins/select2/select2.min.js') }}"></script>
  89.     <script src="{{ asset('assets/plugins/flatpickr/flatpickr.js') }}"></script>
  90.     <script src="{{ asset('assets/plugins/flatpickr/fr.js') }}"></script>
  91.     <script src="{{ asset('assets/js/jquery.collection.js') }}"></script>
  92.     <script src="{{ asset('assets/plugins/fancybox/fancybox.umd.js') }}"></script>
  93.     <script src="{{ asset('assets/js/jquery.tagsinput.js') }}"></script>
  95.     <script src="{{ asset('assets/js/app.js') }}"></script>
  96.     <script>
  97.     flatpickr.localize(flatpickr.l10ns.fr);
  98.     toastr.options = {
  99.         "closeButton": true,
  100.         "debug": false,
  101.         "newestOnTop": true,
  102.         "progressBar": true,
  103.         "positionClass": "toast-bottom-left",
  104.         "preventDuplicates": false,
  105.         "onclick": null,
  106.         "showDuration": "300",
  107.         "hideDuration": "1000",
  108.         "timeOut": "10000",
  109.         "extendedTimeOut": "1000",
  110.         "showEasing": "swing",
  111.         "hideEasing": "linear",
  112.         "showMethod": "fadeIn",
  113.         "hideMethod": "fadeOut"
  114.     }
  115.     jQuery(document).ready(function() {
  116.         App.init();
  117.         if ($.fn.DataTable) {
  118.             $('.table-data').DataTable({
  119.                 "select": "true",
  120.                 "aaSorting": [],
  121.                 "oLanguage": {
  122.                     select: {
  123.                         rows: {
  124.                             _: "%d lignes sélectionnées",
  125.                             1: "1 ligne sélectionnée"
  126.                         }
  127.                     },
  128.                     "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>' },
  129.                     "sInfo": "Page _PAGE_ de _PAGES_",
  130.                     "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>',
  131.                     "sSearchPlaceholder": "Recherche...",
  132.                     "sLengthMenu": "Résultats :  _MENU_",
  133.                     "sInfo":          "Affichage de _START_ à _END_ sur _TOTAL_ entrées",
  134.                     "sInfoEmpty":     "Affichage de 0 à 0 sur 0 entrées",
  135.                     "sInfoFiltered":  "(filtrées depuis un total de _MAX_ entrées)",
  136.                 },
  137.                 "stripeClasses": [],
  138.             });
  139.             const selectTable = $('.table-data-select').DataTable({
  140.                 "columnDefs": [
  141.                     // These are the column name variables that will be sent to the server
  142.                     { 
  143.                         "name": "id",'targets': 0,
  144.                         'checkboxes': {
  145.                         'selectRow': true,
  146.                         'selectAll': false
  147.                         }  
  148.                     }
  149.                 
  150.                 ],
  151.                 'select': {
  152.                     'style': 'multi'
  153.                 },
  154.                 "oLanguage": {
  155.                     select: {
  156.                         rows: {
  157.                             _: "%d lignes sélectionnées",
  158.                             1: "1 ligne sélectionnée"
  159.                         }
  160.                     },
  161.                     "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>' },
  162.                     "sInfo": "Page _PAGE_ de _PAGES_",
  163.                     "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>',
  164.                     "sSearchPlaceholder": "Recherche...",
  165.                     "sLengthMenu": "Résultats :  _MENU_",
  166.                     "sInfo":          "Affichage de _START_ à _END_ sur _TOTAL_ entrées",
  167.                     "sInfoEmpty":     "Affichage de 0 à 0 sur 0 entrées",
  168.                     "sInfoFiltered":  "(filtrées depuis un total de _MAX_ entrées)",
  169.                 },
  170.             });
  171.             
  172.             // Event listener to the filtering select to redraw on change
  173.             $('#content').on('change','.data-filter',function ()  { 
  174.                     selectTable.draw();
  175.             } );
  177.             $('.table-data-select thead input[name="select_all"]').on('click', function (e) {
  178.             var checked = $('#selectall').prop('checked');
  179.                 // get all filtered rows
  180.                 var allRowsCount = selectTable.rows().count()
  181.                 var filteredRowsCount = selectTable.rows({ search: 'applied' }).count();
  182.                 var visibleRowsCount = selectTable.rows({ page: 'current' }).count();
  183.                 //console.log(allRowsCount, filteredRowsCount, visibleRowsCount)
  184.                 var rows = (allRowsCount == filteredRowsCount) ? { page: 'current' } : { search: 'applied' };
  185.                 if (this.checked) {
  186.                     selectTable.rows(rows).select();
  187.                 } else {
  188.                     //selectTable.rows(rows).deselect();
  189.                     selectTable.rows({ selected: true }).deselect();
  190.                 }
  191.             });
  193.             selectTable.on('length.dt', function () {
  194.                 selectTable.rows({ selected: true }).deselect();
  195.                 $('.table-data-select thead input[name="select_all"]').prop('checked', false);
  196.             });
  198.             $('body').on('click', 'a#table-data-select-export', function(e){
  199.                 //alert();
  200.                 var rows_selected = selectTable.column(0).checkboxes.selected();
  201.                 //console.log(rows_selected);
  202.                 if (typeof rows_selected !== 'undefined' && rows_selected.length > 1  && rows_selected.length < 51) {
  203.                     var url = $(this).attr("href");
  204.                     // Iterate over all selected checkboxes
  205.                     $.each(rows_selected, function(index, row){
  206.                         rowId = row.replace(/[^0-9]/g,'');
  207.                         if (url.indexOf('?') === -1) {
  208.                             url = url + '?a[]=' + rowId;  
  209.                         }else {
  210.                             url = url + '&a[]=' + rowId;
  211.                         }
  212.                     });
  213.                     window.open(url, "_blank");
  214.                 } else if (rows_selected.length > 50) {
  215.                     toastr["error"]('Merci de ne pas selectionner plus que 50 documents ... ');
  216.                 } else {
  217.                     toastr["warning"]('Merci de selectionner au moins deux éléments ...');
  218.                 }
  219.                 return false;
  220.                 
  221.             }); 
  222.         }
  224.         $('.emails-tags').tagsInput({
  225.             'unique': true,
  226.             'validationPattern': new RegExp('(.+)@(.+){2,}\.(.+){2,}'),
  227.             'delimiter': [' ']
  228.         });
  229.         
  231.         flatpickr($('.flatpickr'), {
  232.             enableTime: true,
  233.             dateFormat: "Y-m-d H:i",
  234.             disableMobile: "true",
  235.             "locale": {
  236.                 "firstDayOfWeek": 7 // start week on Sunday
  237.             },
  238.             minDate: new Date(),
  239.             allowInput: true,
  240.             onOpen: function(selectedDates, dateStr, instance) {
  241.             $(instance.altInput).prop('readonly', true);
  242.             },
  243.             onClose: function(selectedDates, dateStr, instance) {
  244.                 $(instance.altInput).prop('readonly', false);
  245.                 $(instance.altInput).blur();
  246.             },
  247.             onChange: function(selectedDates, dateStr, instance) {
  248.                 validateInput(dateStr, $('.flatpickr')[0]);
  249.             }
  250.         });
  251.         // Add an additional event listener to the date input field
  252.         $('.flatpickr').on('change', function() {
  253.             validateInput(this.value, $(this)[0]);
  254.         });
  256.         flatpickr($('.flatpickr_date'), {
  257.             enableTime: false,
  258.             dateFormat: "Y-m-d",
  259.             disableMobile: "true",
  260.             "locale": {
  261.                 "firstDayOfWeek": 7 // start week on Sunday
  262.             },
  263.             defaultDate: new Date(),
  264.             allowInput: true,
  265.             onOpen: function(selectedDates, dateStr, instance) {
  266.             $(instance.altInput).prop('readonly', true);
  267.             },
  268.             onClose: function(selectedDates, dateStr, instance) {
  269.                 $(instance.altInput).prop('readonly', false);
  270.                 $(instance.altInput).blur();
  271.             },
  272.             onChange: function(selectedDates, dateStr, instance) {
  273.                 validateInput(dateStr, $('.flatpickr_date')[0]);
  274.             }
  275.         });
  276.         // Add an additional event listener to the date input field
  277.         $('.flatpickr_date').on('change', function() {
  278.             validateInput(this.value, $(this)[0]);
  279.         });
  281.         flatpickr($('.flatpickr_date_nodefault'), {
  282.             enableTime: false,
  283.             dateFormat: "Y-m-d",
  284.             disableMobile: "true",
  285.             "locale": {
  286.                 "firstDayOfWeek": 7 // start week on Sunday
  287.             },
  288.             allowInput: true,
  289.             onOpen: function(selectedDates, dateStr, instance) {
  290.             $(instance.altInput).prop('readonly', true);
  291.             },
  292.             onClose: function(selectedDates, dateStr, instance) {
  293.                 $(instance.altInput).prop('readonly', false);
  294.                 $(instance.altInput).blur();
  295.             },
  296.             onChange: function(selectedDates, dateStr, instance) {
  297.                 validateInput(dateStr, $('.flatpickr_date_nodefault')[0]);
  298.             }
  299.         });
  300.         // Add an additional event listener to the date input field
  301.         $('.flatpickr_date_nodefault').on('change', function() {
  302.             validateInput(this.value, $(this)[0]);
  303.         });
  305.         function validateInput(dateValue, input) {
  306.             var date = new Date(dateValue);
  307.             console.log(date, input);
  308.             if (!isNaN(date.getTime())) {
  309.                 // If the date is valid, clear the error message
  310.                 input.setCustomValidity(''); 
  311.             } else {
  312.                 // If the date is not valid, set a custom error message on the field
  313.                 input.setCustomValidity('Merci de choisir une date valide !');
  314.             }
  315.         }
  317.         flatpickr($('.flatpickr_time'), {
  318.             enableTime: true,
  319.             noCalendar: true,
  320.             dateFormat: "H:i",
  321.             //defaultDate: new Date(),
  322.             disableMobile: "true",
  323.         });
  325.         $('.collections').collection({
  326.             allow_down: false,
  327.             allow_up: false,
  328.             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>',
  329.             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>'
  330.             });
  331.         $('.select2_collections').collection({
  332.             after_add: function(collection, element) { initializeSelect2(element.find('.select2')) },
  333.             allow_down: false,
  334.             allow_up: false,
  335.             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>',
  336.             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>'
  337.             });
  340.         function initializeSelect2(selectElementObj) {
  341.             selectElementObj.select2({
  342.             });
  343.             return true;
  344.         }
  345.         
  346.         {% for message in app.flashes('notice') %}
  347.             toastr["warning"]("{{ message }}");
  348.         {% endfor %}
  349.         {% for message in app.flashes('success') %}
  350.             toastr["success"]("{{ message }}");
  351.         {% endfor %}
  352.         {% for message in app.flashes('error') %}
  353.             toastr["error"]("{{ message }}");
  354.         {% endfor %}
  355.         {% for message in app.flashes('critical') %}
  356.             toastr.options.closeButton = true;
  357.             toastr.options.tapToDismiss = false;
  358.             toastr.options.timeOut = 0;
  359.             toastr.options.extendedTimeOut = 0;
  360.             toastr.options.showDuration = 0;
  361.             toastr.options.hideDuration = 0;
  362.             toastr.options.escapeHtml = false;
  363.             toastr.options.preventDuplicates = true;
  364.             toastr["error"]("{{ message|raw }}");
  365.         {% endfor %}
  366.         {% for message in app.flashes('error_action') %}
  367.             //toastr.options = {onclick: function () {document.location.href='{{app.request.get("action")}}'; }}
  368.             toastr.options.onclick = function () {document.location.href='{{app.request.get("action")}}'; }
  369.             toastr["error"]("{{ message }}<br /><button type="button" class="btn clear">Éditer</button>");
  370.             });
  371.         {% endfor %}
  373.         /*
  374.         ================================================
  375.         |   navbar inbox / send photo / input file     |
  376.         ================================================
  377.         */
  379.         $.ajax({
  380.             type: "GET",
  381.             url: "{{ path('message_unread_index') }}",
  382.         })
  383.         .done(function(data){ 
  384.             if (data.length > 0) {
  385.                 var elem = "";
  386.                 for (i = 0; i < data.length; i++) {
  387.                     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>";
  388.                     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>";    
  389.                 }
  390.                 $('#message-dropdown').html(elem);
  391.                 $('li.message-dropdown span.badge').html(data.length)
  392.             }    else {
  393.                 $('#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>");
  394.             }
  395.         });
  397.         $('#send-photos').off('click').on('click', function(event) {
  398.             $( "#sendPictureModal form[name='message']" ).submit();
  399.             event.preventDefault();
  400.         });
  402.         $("input[type=file]").each(function (index, inputFile) {
  403.             if($(inputFile).data("filename"))
  404.             {
  405.                 var label = $("label[for='" + $(inputFile).attr('id') + "']")[0];
  406.                 label.innerHTML = $(inputFile).data("filename");
  407.             }
  408.         });
  409.         $(document).on('change', "input[type='file']", function(){
  410.             //get the file name
  411.             var fileName = $(this).val().replace('C:\\fakepath\\', " ");
  412.             //replace the "Choose a file" label
  413.             $(this).next('.custom-file-label').html(fileName);
  414.         });
  416.          /*
  417.         ================================================
  418.         |               submit button loader            |
  419.         ================================================
  420.         */
  422.          $("button[data-spinning-button]").click(function(e) {
  423.             var $this = $(this);
  424.             let $form  = $this.parents("form");
  425.             $this
  426.                 .addClass("button-loading")
  427.                 .attr("disabled", "");
  428.             //return true;
  429.             if ($form.length) {
  430.                 //form.valid() will be applicable If you are using jQuery validate https://jqueryvalidation.org/
  431.                 //asp.net mvc used it by default with jQuery Unobtrusive Validation
  432.                 //you need to check the form before it goes into the if statement
  433.                 if ($form[0].checkValidity()) {
  434.                     $form.submit();
  435.                 } else {
  436.                     $this
  437.                         .removeClass("button-loading")
  438.                         .removeAttr("disabled", "");
  439.                 }
  440.             }
  441.         });
  443.         $("a[data-spinning-link]").click(function(e) {
  444.             var $this = $(this);
  445.             $this
  446.                 .addClass("button-loading")
  447.                 .attr("disabled", "");
  448.             return true;
  449.         });
  451.         /*
  452.         ================================================
  453.         |                  Fancybox                  |
  454.         ================================================
  455.         */
  457.             Fancybox.defaults.l10n = {
  458.                 CLOSE: "Fermer",
  459.                 NEXT: "Suivant",
  460.                 PREV: "Précédent",
  461.                 MODAL: "Vous pouvez fermer ce contenu modal avec la touche ESC",
  462.                 ERROR: "Quelque chose s'est mal passé, veuillez réessayer plus tard",
  463.                 IMAGE_ERROR: "Image non trouvée",
  464.                 ELEMENT_NOT_FOUND: "Élément HTML introuvable",
  465.                 AJAX_NOT_FOUND: "Erreur lors du chargement d'AJAX : introuvable",
  466.                 AJAX_FORBIDDEN: "Erreur lors du chargement d'AJAX : Interdit",
  467.                 IFRAME_ERROR: "Erreur de chargement de la page",
  468.                 TOGGLE_ZOOM: "Zoomer et dézoomer",
  469.                 ROTATE_LEFT: "Faire tourner à gauche",
  470.                 ROTATE_RIGHT: "Faire tourner à droite",
  471.                 TOGGLE_FULLSCREEN: "Basculer en plein écran",
  472.             };
  474.             Fancybox.Plugins.Toolbar.defaults.items.rotateRight = {
  475.                 type: "button",
  476.                 class: "fancybox__button--rotateRight",
  477.                 label: "ROTATE_RIGHT",
  478.                 html:
  479.                     '<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>',
  480.                 click: function (event) {
  481.                     event.preventDefault();
  482.                     console.log(event.target.className);
  483.                     var orientation = event.target.classList.contains("fancybox__button--rotateRight") ? "cw" : "acw";
  484.                     var fancybox = this.fancybox;
  485.                     rotatingFunction (fancybox, orientation);
  486.                 },
  487.             };
  489.             Fancybox.Plugins.Toolbar.defaults.items.rotateLeft = {
  490.                 type: "button",
  491.                 class: "fancybox__button--rotateLeft",
  492.                 label: "ROTATE_LEFT",
  493.                 html:
  494.                     '<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>',
  495.                 click: function (event) {
  496.                     event.preventDefault();
  497.                     console.log(event.target.className);
  498.                     var orientation = event.target.classList.contains("fancybox__button--rotateRight") ? "cw" : "acw";
  499.                     var fancybox = this.fancybox;
  500.                     rotatingFunction (fancybox, orientation);
  501.                 },
  502.             };
  504.             Fancybox.bind("[data-fancybox]" , {
  505.                 Toolbar: {
  506.                     display: [
  507.                         "counter",
  508.                         "rotateRight",
  509.                         "rotateLeft",
  510.                         "zoom",
  511.                         "slideshow",
  512.                         "fullscreen",
  513.                         "close",
  514.                     ],
  515.                     fullScreen: {
  516.                         autoStart: true
  517.                     }
  518.                 },
  519.                 on: {
  520.                     load: (fancybox, slide) => {
  521.                         console.log(`#${slide.type} slide is loaded!`);
  522.                         //console.log(
  523.                         //    `This slide is selected: ${fancybox.getSlide().index === slide.index}`
  524.                         //);
  525.                         for (const $el of document.querySelectorAll(".fancybox__button--rotateLeft, .fancybox__button--rotateRight")) {
  526.                                 if (slide.type === "image") {
  527.                                     $el.removeAttribute("disabled");
  528.                                 } else {
  529.                                     $el.setAttribute("disabled", "");
  530.                                 }
  531.                         }
  532.                     },
  533.                 },
  534.             });
  536.             function rotatingFunction (fancybox, orientation) {
  537.                 $.ajax({
  538.                     type: 'POST',
  539.                     url: "{{ path('images_rotate') }}",
  540.                     data: { "file": fancybox.getSlide().src, 'orientation': orientation },
  541.                     beforeSend: function( xhr ) {
  542.                         var slide = fancybox.getSlide();
  543.                         fancybox.showLoading(slide);
  544.                     }
  545.                 }).done(function( data ) {
  546.                     //var slide = fancybox.getSlide();
  547.                     //fancybox.hideLoading(slide);
  548.                     
  549.                     //console.log(src);
  550.                     
  551.                     //Image rortated
  552.                     if (data["message"] == "ok") { 
  553.                         /*var thisImg = slide.$el.querySelector("img");
  554.                         var src = $(thisImg).attr("src");
  555.                         degrees = orientation == "cw" ? 90 : -90;
  556.                         $("img[src='"+src+"']").css({
  557.                             'transform': 'rotate(' + degrees + 'deg)',
  558.                             '-ms-transform': 'rotate(' + degrees + 'deg)',
  559.                             '-moz-transform': 'rotate(' + degrees + 'deg)',
  560.                             '-webkit-transform': 'rotate(' + degrees + 'deg)',
  561.                             '-o-transform': 'rotate(' + degrees + 'deg)'
  562.                          });*/
  563.                         
  564.                         var slide = fancybox.getSlide();
  565.                         var actualUrl = slide.src;
  566.                         var newUrl = slide.src + "?" + new Date().getTime();
  567.                         var thisImg = slide.$el.querySelector("img");
  568.                         
  569.                         //creating an xmlHTTP in order to show a loader while of the new rotated img is loaded
  570.                         var xmlHTTP = new XMLHttpRequest();
  571.                         xmlHTTP.open('GET', newUrl, true);
  572.                         //xmlHTTP.withCredentials = true;
  573.                         xmlHTTP.responseType = 'arraybuffer';
  574.                         xmlHTTP.setRequestHeader("Cache-Control", "no-cache, no-store, max-age=0");
  575.                         xmlHTTP.setRequestHeader("Expires", "Tue, 01 Jan 1980 1:00:00 GMT");
  576.                         xmlHTTP.setRequestHeader("Pragma", "no-cache"); 
  577.                         xmlHTTP.onload = function(e) {
  578.                             var blob = new Blob([this.response]);
  579.                             thisImg.src = window.URL.createObjectURL(blob);
  580.                             slide.src = newUrl;
  581.                             fancybox.hideLoading(slide);
  582.                         };
  583.                         xmlHTTP.onloadstart = function() {
  584.                             //fancybox.showLoading(slide);
  585.                             //updating the intial triggers
  586.                             var x =document.querySelectorAll("a.fancybox[href='"+actualUrl+"'], a.fancybox img[src='"+actualUrl+"']")
  587.                             var i;
  588.                             for (i = 0; i < x.length; i++) {
  589.                                 if (x[i].hasAttribute("src")) {      
  590.                                     x[i].src = newUrl;
  591.                                 } else {
  592.                                     x[i].href = newUrl;
  593.                                 }
  594.                                 
  595.                             }
  596.                         };
  597.                         //fancybox.showLoading(slide);
  598.                         xmlHTTP.send();   
  600.                         
  602.                     } else {
  603.                         toastr["error"]("Une erreur s'est produite. Veuillez réessayer ultérieurement...");
  604.                     }
  605.                 });
  606.             }
  607.         
  608.     } );
  609.     </script>
  610.     <script src="{{ asset('assets/js/custom.js') }}"></script>
  611.     <script src="{{ asset('assets/js/image-crop.js') }}"></script>
  612.     <!-- END GLOBAL MANDATORY SCRIPTS -->
  613.     <!-- BEGIN PAGE LEVEL PLUGINS/CUSTOM SCRIPTS -->
  614.     {% block javascripts %}{% endblock %}
  615.     <!-- BEGIN PAGE LEVEL PLUGINS/CUSTOM SCRIPTS -->
  616.     </body>
  617. </html>