templates/home/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block css %}
  3.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" integrity="sha512-mSYUmp1HYZDFaVKK//63EcZq4iFWFjxSL+Z3T/aCt4IO9Cejm03q3NKKYN6pFQzY0SBOr8h+eCIAZHPXcpZaNw==" crossorigin="anonymous" />
  4.     <style type="text/css">
  5.         .total-bl{
  6.             color: #000;
  7.             font-weight: 600;
  8.             text-align: center;
  9.         }
  10.         .pswp__caption__center {text-align: center;}
  11.         .pswp{
  12.             z-index: 9999;
  13.         }
  15.         .galerie-item{
  16.             display: flex;
  17.             align-items: flex-start;
  18.             flex-wrap: wrap;
  19.         }
  20.         .galerie-item >*{
  21.             width: 116px;
  22.             margin-right: 8px;
  23.         }
  24.         .thumbnail-galerie i {
  25.             position: absolute;
  26.             right: 7px;
  27.             top: 11px;
  28.             font-size: 15px;
  29.             color: #1ab394;
  30.         }
  31.         .rounded-galerie {
  32.             position: absolute;
  33.             margin-top: -25px;
  34.             margin-left: auto;
  35.             border: 4px solid white;
  36.             height: 46px;
  37.             width: 46px;
  38.             margin-right: auto;
  39.             left: 0;
  40.             right: 0;
  41.             z-index: 1;
  42.         }
  43.         .heure-galerie{
  44.             text-align: center;
  45.             margin-top: 14px;
  46.             font-size: 11px;
  47.         }
  48.         .thumbnail-galerie{
  49.             height: 110px;
  50.         }
  51.         .thumbnail-detail{padding: 12px 20px}
  52.       
  53.           .progress-bar{
  54.               width: 789.01px;
  55.             position: relative;
  56.             height: 21px;
  57.               background: #1ab394;
  58.           }
  59.           .progress-bar .progress-val {
  60.               position: absolute;
  61.             right: 9px;
  62.             font-size: 14px;
  63.             font-weight: bold;
  64.             color: #000;
  65.           }
  66.           .td-name{
  67.               display: block;
  68.             padding-left: 8px;
  69.             padding-right: 20px;
  70.             overflow: hidden;
  71.             text-overflow: ellipsis;
  72.             white-space: nowrap;
  73.           }
  74.           .btn-trash{
  75.               position: absolute;
  76.               display: none;
  77.               text-align: center;
  78.               bottom: -15px;
  79.               left: 0;
  80.               right: 0;
  81.               margin: auto;
  82.           }
  83.           .galerie-item .parent:hover .btn-trash{display: inline-block;}
  84.           .video-wrapper video{
  85.             max-width: 971px!important;
  86.             max-height: 600px!important;
  87.             display: block;
  88.             margin: auto;
  89.             margin-top: 25px;
  90.         }
  91.       
  92.         .row-sum-month {
  93.             display: flex;
  94.             align-items: center;
  95.             justify-content: space-between;
  96.         }
  97.        .row-sum-month > * {
  98.             flex: 1;
  99.             text-align: center;
  100.             font-weight: bold;
  101.             font-size: 15px;
  102.             margin-top: 2px;
  103.         }
  104.       
  107.         .btnShowMore{
  108.             cursor: pointer;
  109.             margin: auto;
  110.             max-width: 110px;
  111.         }
  112.         #section_more_galerie .icon-plus {
  113.           padding-top: 80px;
  114.           position: relative;
  115.           text-align: center;
  116.         }
  117.         #section_more_galerie .icon-plus span {
  118.           position: absolute;
  119.           top: 0;
  120.           left: 50%;
  121.           width: 24px;
  122.           height: 24px;
  123.           margin-left: -12px;
  124.           border-left: 1px solid #000;
  125.           border-bottom: 1px solid #000;
  126.           -webkit-transform: rotate(-45deg);
  127.           transform: rotate(-45deg);
  128.           -webkit-animation: sdb07 2s infinite;
  129.           animation: sdb07 2s infinite;
  130.           opacity: 0;
  131.           box-sizing: border-box;
  132.         }
  133.         #section_more_galerie .icon-plus span:nth-of-type(1) {
  134.           -webkit-animation-delay: 0s;
  135.           animation-delay: 0s;
  136.         }
  137.         #section_more_galerie .icon-plus span:nth-of-type(2) {
  138.           top: 16px;
  139.           -webkit-animation-delay: .15s;
  140.           animation-delay: .15s;
  141.         }
  142.         #section_more_galerie .icon-plus span:nth-of-type(3) {
  143.           top: 32px;
  144.           -webkit-animation-delay: .3s;
  145.           animation-delay: .3s;
  146.         }
  147.         @-webkit-keyframes sdb07 {
  148.           0% {
  149.             opacity: 0;
  150.           }
  151.           50% {
  152.             opacity: 1;
  153.           }
  154.           100% {
  155.             opacity: 0;
  156.           }
  157.         }
  158.         @keyframes sdb07 {
  159.           0% {
  160.             opacity: 0;
  161.           }
  162.           50% {
  163.             opacity: 1;
  164.           }
  165.           100% {
  166.             opacity: 0;
  167.           }
  168.         }
  170.         .caro-nav{
  171.             display: flex;
  172.             align-items: center;
  173.             justify-content: space-between;
  174.             position: absolute;
  175.             top: 45%;
  176.             left: 0;
  177.             right: 0;
  178.             transform: translateY(-50%);
  179.             z-index: 999;
  180.             font-size: 41px;
  181.             background: red;
  182.             height: 0;
  183.         }
  184.         .caro-nav > *{
  185.             color: #1ab394;
  186.             cursor: pointer;
  187.             width: 46px;
  188.             height: 46px;
  189.             display: inline-flex;
  190.             align-items: center;
  191.             justify-content: center;
  192.             border-radius: 50%;
  193.         }
  194.         .galerie-item.active{
  195.             display: flex;
  196.         }
  197.         .galerie-item{display: none;}
  199.         .item-dossier{
  200.             border: 1px solid;
  201.             border-radius: 10px;
  202.             margin-left: 7px;
  203.             padding: 6px 17px;
  204.             color: #676a6c;
  205.         }
  206.     </style>
  207. {% endblock %}
  208. {% block breadcrumb %}
  210.     <div class="row wrapper border-bottom white-bg page-heading">
  211.         <div class="col-lg-10">
  212.             <h1>Accueil</h1>
  213.         </div>
  214.     </div>
  216. {% endblock %}
  218. {% block content %}
  219.     <div class="row">
  220.         <div class="col-lg-12">
  221.             {% include 'flashes.html.twig' %}
  223.             <div class="ibox ">
  224.                 <div class="ibox-title">
  225.                     <h5>Dernières images {{ app.environment }}</h5> 
  226.                 </div>
  227.                 <div class="ibox-content">
  228.                     <div class="carousel-container" style="position: relative;">
  229.                         <div class="row galerie-container">
  230.                             
  231.                         </div>
  232.                         <div class="caro-nav">
  233.                             <span class="nav-left">
  234.                                 <i class="fas fa-chevron-left"></i>
  235.                             </span>
  236.                             <span class="nav-right">
  237.                                 <i class="fas fa-chevron-right"></i>
  238.                             </span>
  239.                         </div>
  240.                     </div>
  242.                     <div class="btnShowMore" style="display: none;">
  243.                         <div id="section_more_galerie" style="height: 51px;">
  244.                           <div class="icon-plus"><span></span><span></div>
  245.                         </div>
  246.                         <div class="text-center" style="font-size: 17px">Voir plus</div>
  247.                     </div>
  248.                 </div>
  249.             </div>
  251.             <div class="ibox">
  252.                 <div class="ibox-content">
  253.                     <h2 style="margin-bottom: 22px">Liste document en attente</h2>
  254.                     <div class="row">
  255.                         {% for item in countDocumentAttente %} 
  256.                             <a class="col-lg-3 item-dossier" href="{{ path('email_document_preview_list', {'dossier':item.entity.dossier}) }}">
  257.                                 <h3 style="text-transform:capitalize;">{{item.dossier}} : <span>{{item.entity.nb}}</span></h3>
  258.                             </a>
  259.                         {% endfor %}
  260.                     </div>
  261.                 </div>
  262.             </div>
  264.             <div class="ibox">
  265.                 <div class="ibox-content">
  266.                     {{ include('home/filter.html.twig') }}
  267.                 </div>
  268.             </div>
  269.             
  270.             <div class="ibox ">
  271.                 <div class="ibox-title">
  272.                     <h5>Achats-Ventes</h5> 
  273.                 </div>
  274.                 <div class="ibox-content">
  275.                     <h2 class="achat-vente-recap" style="font-size: 25px;font-weight: bold;margin-bottom: 17px;text-align: center;"></h2>
  276.                     <div>
  277.                         <canvas id="myChartAchat" height="350"></canvas>
  278.                     </div>
  279.                     <div class="row-sum-month">
  280.                         {% for i in tauxMargin %}
  281.                             <span class="month">{{i}}%</span>
  282.                         {% endfor %}
  283.                     </div>
  284.                 </div>
  285.             </div>
  288.             <div class="ibox ">
  289.                 <div class="ibox-title">
  290.                     <h5>Marge</h5> 
  291.                 </div>
  292.                 <div class="ibox-content">
  294.                     <h2 class="marge-year text-center" style="font-size: 25px;font-weight: bold;margin-bottom: 17px;"></h2>
  295.                     <h5 class="text-center marge-resultat" style="font-size: 17px"></h5>
  296.                     <div style="min-height: 1000px;">
  297.                         <canvas id="chartMarge" height="500"></canvas>
  298.                     </div>
  299.                 </div>
  300.             </div>
  302.             <div class="ibox ">
  303.                 <div class="ibox-title">
  304.                     <h5>Gallery {{currentMonth}}</h5> 
  305.                 </div>
  306.                 <div class="ibox-content">
  307.                     <div class="table-responsive">
  308.                     <table class="table">
  309.                         <thead>
  310.                             <tr>
  311.                                 <th width="175px"></th>
  312.                                 <th></th>
  313.                                 <th width="150px" style="text-align: right;">Photos</th>
  314.                                 <th width="150px" style="text-align: right;">Classement</th>
  315.                             </tr>
  316.                         </thead>
  317.                         <tbody>
  318.                             {% for gal in galleryUser %}
  319.                             <tr>
  320.                                 <td>
  321.                                     <div class="td-name">
  322.                                         <span>
  323.                                             {% if gal.uid in utilisateurs|keys and utilisateurs[gal.uid] %} 
  324.                                                 <img data-file="data:image/jpeg;base64,{{ utilisateurs[gal.uid]}}" src="data:image/jpeg;base64,{{ utilisateurs[gal.uid]}}" 
  325.                                                 class="entreprise-img rounded-img">
  326.                                             {% endif %}
  327.                                         </span>
  328.                                         <span>
  329.                                             {{gal.firstname}} {{gal.lastname}}
  330.                                         </span>
  331.                                     </div>
  332.                                 </td>
  333.                                 <td>
  334.                                     <div class="progress-container" data-nbr-photo="{{gal.nbr_gallery}}">
  335.                                         <div class="progress-bar">
  336.                                             <span class="progress-val">{{gal.nbr_gallery}}</span>
  337.                                         </div>
  338.                                     </div>
  339.                                 </td>
  340.                                 <td style="text-align: right;">{{gal.nbr_gallery}}</td>
  341.                                 <td style="text-align: right;">{{loop.index}}</td>
  342.                             </tr>
  343.                             {% endfor %}
  344.                         </tbody>
  345.                     </table>
  346.                     </div>
  347.                 </div>
  348.             </div>
  350.         </div>
  351.     </div>
  352.     
  354. {% endblock %}
  356. {% block javascript_script %}
  357.     <script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
  358.     <script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
  359.     <script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
  360.     <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
  361.     <script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.js"></script>
  362.     <script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe-ui-default.min.js"></script>
  363.     <script type="text/javascript">
  365.         $maxPhotoVal = {{ maxPhotoVal|json_encode()|raw }};
  366.         $('.progress-container').each(function( index ) {
  367.             $barWidth = parseFloat($(this).width()) ;
  368.             $nbrPhoto = parseFloat($(this).data('nbr-photo'));
  369.             $progress = $(this).find('.progress-bar');
  371.             if($maxPhotoVal > 0)
  372.                 $progressWidth = ($nbrPhoto*$barWidth)/$maxPhotoVal;
  373.             else
  374.                 $progressWidth = 0;
  375.             $(this).find('.progress-bar').css('width', $progressWidth);
  376.         })
  380.         var valChart = {{ valChart|json_encode()|raw }};
  381.         var valChartNonLie = {{ valChartNonLie|json_encode()|raw }};
  382.         var valChartFact = {{ valChartFact|json_encode()|raw }};
  383.         var valChartFactClient = {{ valChartFactClient|json_encode()|raw }};
  384.         var valChartAmortMensAssurance = {{ valChartAmortMensAssurance|json_encode()|raw }};
  385.         var valChartCoutGb = {{ valChartCoutGb|json_encode()|raw }};
  386.         var ctxA = document.getElementById('myChartAchat').getContext('2d');
  388.         let datasets = [
  389.                 {
  390.                     label: "BL HT: {{ montant['sum_ht'] ? montant['sum_ht']|number_format(2, ',', '') : "0" }}€",
  391.                     data: valChart,
  392.                     backgroundColor: 'rgb(50 163 243)',
  393.                     hoverBackgroundColor: 'rgb(50 163 243)',
  394.                     hoverBorderColor: 'rgb(50 163 243)',
  395.                     borderColor: 'rgb(50 163 243)',
  396.                     fontColor: "blue",
  397.                     borderWidth: 1
  398.                 },
  399.                 {
  400.                     label: "BL NON LIE: {{ montantBlNonRelie['sum_ht'] ? montantBlNonRelie['sum_ht']|number_format(2, ',', '') : "0" }}€",
  401.                     data: valChartNonLie,
  402.                     backgroundColor: 'rgb(173 255 47)',
  403.                     hoverBackgroundColor: 'rgb(173 255 47)',
  404.                     hoverBorderColor: 'rgb(173 255 47)',
  405.                     borderColor: 'rgb(173 255 47)',
  406.                     fontColor: "greenyellow",
  407.                     borderWidth: 1
  408.                 },
  409.                 {
  410.                     label: "Facturation HT: {{ montantFact['sum_ht'] ? montantFact['sum_ht']|number_format(2, ',', '') : "0" }}€",
  411.                     data: valChartFact,
  412.                     backgroundColor: 'rgb(24 166 137)',
  413.                     hoverBackgroundColor: 'rgb(24 166 137)',
  414.                     hoverBorderColor: 'rgb(24 166 137)',
  415.                     borderColor: 'rgb(24 166 137)',
  416.                     borderWidth: 1
  417.                 },
  418.                 {
  419.                     label: "Cout Global: {{ sumCoutGb ? sumCoutGb|number_format(2, ',', '') : "0" }}€",
  420.                     data: valChartCoutGb,
  421.                     backgroundColor: 'orange',
  422.                     borderColor: 'orange',
  423.                     borderWidth: 1
  424.                 },
  425.                 {
  426.                     label: "Facture client HT: {{ montantFactClient['sum_ht'] ? montantFactClient['sum_ht']|number_format(2, ',', '') : "0" }}€",
  427.                     data: valChartFactClient,
  428.                     backgroundColor: 'pink',
  429.                     borderColor: 'pink',
  430.                     borderWidth: 1
  431.                 }
  432.             ];
  434.         {% if isgestionFinancements == 1 %}
  435.             datasets.push({
  436.                     label: "Mensualité avec assurance: {{ sumMontantAmortMensAssurance['mensualite_avec_assurance'] ? sumMontantAmortMensAssurance['mensualite_avec_assurance']|number_format(2, ',', '') : "0" }}€",
  437.                     data: valChartAmortMensAssurance,
  438.                     backgroundColor: 'rgb(255, 90, 196)',
  439.                     hoverBackgroundColor: 'rgb(255, 90, 196)',
  440.                     hoverBorderColor: 'rgb(255, 90, 196)',
  441.                     borderColor: 'rgb(255, 90, 196)',
  442.                     borderWidth: 1
  443.                 });
  444.         {% endif %}
  445.         var data = {
  446.             labels:  ["jan", "Fév", 'Mars', 'Avr', 'Mais', 'Juin', 'Juil', 'Aout', 'sep', 'Oct', 'Nov', 'Déc'],
  447.             datasets: datasets
  448.         };
  449.         $('.achat-vente-recap').text("{{full_month|capitalize}} - Taux de Marge {{tauxMarginCumulle|number_format(2, ',', '')}}%");
  452.         var myChart = new Chart(ctxA, {
  453.             type: 'bar',
  454.             data: data,
  455.             options: {
  456.                 barValueSpacing: 40,
  457.                 responsive: true,
  458.                 maintainAspectRatio: false,
  459.                 "hover": {
  460.                   "animationDuration": 0
  461.                 },
  462.                 "animation": {
  463.                   "duration": 1,
  464.                   "onComplete": function() {
  465.                     var chartInstance = this.chart,
  466.                       ctx = chartInstance.ctx;
  468.                     ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
  469.                     ctx.textAlign = 'center';
  470.                     ctx.textBaseline = 'bottom';
  472.                     this.data.datasets.forEach(function(dataset, i) {
  473.                       var meta = chartInstance.controller.getDatasetMeta(i);
  474.                       meta.data.forEach(function(bar, index) {
  475.                         var data = dataset.data[index];
  476.                         ctx.fillText(data, bar._model.x, bar._model.y - 5);
  477.                       });
  478.                     });
  479.                   }
  480.                 },
  481.                 tooltips: {
  482.                     "enabled": true,
  483.                     callbacks: {
  484.                         label: function(tooltipItem, data) {
  485.                             var label = data.datasets[tooltipItem.datasetIndex].label || '';
  486.                             if (label) {
  487.                                 label += ': ';
  488.                             }
  489.                             label += Math.round(tooltipItem.yLabel * 100) / 100;
  490.                             return Math.round(tooltipItem.yLabel * 100) / 100;
  491.                         }
  492.                     }
  493.                 },
  494.                 scales: {
  495.                     y: {
  496.                         beginAtZero: true
  497.                     },
  498.                   yAxes: [{
  499.                     display: false,
  500.                     gridLines: {
  501.                       display: false
  502.                     },
  503.                     ticks: {
  504.                       display: false,
  505.                       beginAtZero: true,
  506.                       min:0
  507.                     }
  508.                   }],
  509.                   xAxes: [{
  510.                     gridLines: {
  511.                       display: false
  512.                     },
  513.                     ticks: {
  514.                       beginAtZero: true
  515.                     }
  516.                   }]
  517.                 },
  518.                 title: {
  519.                     display: false,
  520.                     fontSize: '25',
  521.                     text: '{{full_month|capitalize}}'
  522.                 }
  523.             }
  524.         });
  526.         /* CHART MARGE */
  527.         var chartMarge = {{ chartMarge|json_encode()|raw }};
  528.         var chartColor = {{ chartColor|json_encode()|raw }};
  529.         var ctxM = document.getElementById('chartMarge').getContext('2d');
  530.         $('.marge-resultat').text("Marge: {{ sumMarge ? sumMarge|number_format(2, ',', '') : "0" }}€  /  M-1: {{ sumMarge_1 ? sumMarge_1|number_format(2, ',', '') : "0" }}€");
  531.         $('.marge-year').text("{{full_month|capitalize}}");
  533.         var data2 = {
  534.                 labels:  ["jan", "Fév", 'Mars', 'Avr', 'Mais', 'Juin', 'Juil', 'Aout', 'sep', 'Oct', 'Nov', 'Déc'],
  535.                 datasets: [
  536.                     {
  537.                         label: "Marge: {{ sumMarge ? sumMarge|number_format(2, ',', '') : "0" }}€  /  M-1: {{ sumMarge_1 ? sumMarge_1|number_format(2, ',', '') : "0" }}€",
  538.                         data: chartMarge,
  539.                         backgroundColor: chartColor,
  540.                         borderColor: chartColor,
  541.                         borderWidth: 1
  542.                     }
  543.                 ]
  545.             };
  546.         var myChartMarge = new Chart(ctxM, {
  547.             type: 'bar',
  548.             data: data2,
  549.             options: {
  550.                 legend: {
  551.                     display: false,
  552.                     labels: {
  553.                         fontColor: 'rgb(255, 99, 132)'
  554.                     }
  555.                 },
  556.                 barValueSpacing: 40,
  557.                 responsive: true,
  558.                 maintainAspectRatio: false,
  559.                 "hover": {
  560.                   "animationDuration": 0
  561.                 },
  562.                 "animation": {
  563.                   "duration": 1,
  564.                   "onComplete": function() {
  565.                     var chartInstance = this.chart,
  566.                       ctx = chartInstance.ctx;
  568.                     ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
  569.                     ctx.textAlign = 'center';
  570.                     ctx.textBaseline = 'bottom';
  572.                     this.data.datasets.forEach(function(dataset, i) {
  573.                       var meta = chartInstance.controller.getDatasetMeta(i);
  574.                       meta.data.forEach(function(bar, index) {
  575.                         var data2 = dataset.data[index];
  576.                         ctx.fillText(data2, bar._model.x, bar._model.y - 5);
  577.                       });
  578.                     });
  579.                   }
  580.                 },
  582.                 tooltips: {
  583.                     "enabled": true,
  584.                     callbacks: {
  585.                         label: function(tooltipItem, data) {
  586.                             var label = data.datasets[tooltipItem.datasetIndex].label || '';
  587.                             if (label) {
  588.                                 label += ': ';
  589.                             }
  590.                             label += Math.round(tooltipItem.yLabel * 100) / 100;
  591.                             return "";
  592.                         }
  593.                     }
  594.                 },
  595.                 scales: {
  596.                     y: {
  597.                         beginAtZero: true
  598.                     },
  599.                   yAxes: [{
  600.                     display: false,
  601.                     gridLines: {
  602.                       display: false
  603.                     },
  604.                     ticks: {
  605.                       display: false,
  606.                       beginAtZero: true,
  607.                     }
  608.                   }],
  609.                   xAxes: [{
  610.                     gridLines: {
  611.                       display: false
  612.                     },
  613.                     ticks: {
  614.                       beginAtZero: true
  615.                     }
  616.                   }]
  617.                 },
  618.                 title: {
  619.                     display: false,
  620.                     fontSize: '25',
  621.                     text: '{{full_month|capitalize}}'
  622.                 }
  623.             }
  624.         });
  627.         function loadGalerie(page){
  628.             $.ajax({
  629.                 url: "{{path('load_galerie_xhr')}}",
  630.                 type: "GET",
  631.                 async: true,
  632.                 dataType: "json",
  633.                 data: {
  634.                     page:page
  635.                 },
  636.                 success: function(response, status) {
  637.                     if(response.status == 200){
  638.                         $('.galerie-item').removeClass('active');
  640.                         $('.galerie-container').append(response.preview);
  641.                     }
  642.                     else if(response.status == 500){
  643.                         toastr.error(response.message);
  644.                     }
  645.                     else if(response.status == 300){
  646.                         $('.caro-nav .nav-right').css('display', 'none');
  647.                     }
  648.                 },
  649.                 error: function(xhr, textStatus, errorThrown) {
  650.                     toastr.error("Ooops..., Quelque chose s'est mal passée");
  651.                 }
  652.             });
  653.         }
  655.         $page = 0;
  656.         loadGalerie($page);
  657.         $page++;
  659.         $('.caro-nav .nav-left').click(function(){
  660.             var listItem = $( ".galerie-item.active" );
  661.             var idx = $( ".galerie-item" ).index( listItem );
  662.             $prevElt = $('.galerie-item')[idx-1];
  664.             if($prevElt){
  665.                 $('.galerie-item').removeClass('active');
  666.                 $('.galerie-item').eq(idx-1).addClass('active');
  668.                 $stape = $('.galerie-item.active').attr('data-page');
  669.                 reloadInitGalerie($stape);
  670.             }
  672.         });
  673.         $('.caro-nav .nav-right').click(function(){
  674.             loadGalerie($page);
  675.             $page++;
  676.         });
  678.         function reloadInitGalerie(page){
  679.             var container = [];
  681.               // Loop over gallery items and push it to the array
  682.               $('.galerie-item-'+page).find('.parent').each(function() {
  683.                 var $link = $(this).find('.thumbnail-galerie');
  684.                 
  685.                 if ($link.data('type') == 'video') {
  686.                     var item = {
  687.                       html: $link.data('video')
  688.                     };
  689.                     console.log('enter');
  690.                 } else {
  691.                     let img = new Image();
  692.                     img.onload = function() {
  693.                     };
  694.                     img.src = $link.data('url');
  696.                     var item = {
  697.                         src: $link.data('url'),
  698.                         w: $link.data('width'),
  699.                         h: $link.data('height'),
  700.                         title: $link.data('caption')
  701.                     };
  702.                 }
  703.                 container.push(item);
  704.               });
  706.               // Define click event on gallery item
  707.               $('.thumbnail-galerie').click(function(event) {
  709.                 // Prevent location change
  710.                 event.preventDefault();
  711.                 {% verbatim %}
  712.                 // Define object and gallery options
  713.                 var $pswp = $('.pswp')[0],
  714.                   options = {
  715.                     index: $(this).parent('.parent').index(),
  716.                     bgOpacity: 0.85,
  717.                     showHideOpacity: true,
  718.                     shareButtons: [
  719.                         {id:'facebook', label:'Partager sur Facebook', url:'https://www.facebook.com/sharer/sharer.php?u={{url}}'},
  720.                         {id:'twitter', label:'Tweeter', url:'https://twitter.com/intent/tweet?text={{text}}&url={{url}}'},
  721.                         {id:'pinterest', label:'Epingler', url:'http://www.pinterest.com/pin/create/button/?url={{url}}&media={{image_url}}&description={{text}}'},
  722.                         {id:'download', label:'Télécharger l\'image', url:'{{raw_image_url}}', download:true}
  723.                     ]
  724.                   };
  725.                 {% endverbatim %}
  726.                 // Initialize PhotoSwipe
  727.                 var gallery = new PhotoSwipe($pswp, PhotoSwipeUI_Default, container, options);
  728.                 gallery.init();
  730.                 gallery.listen('beforeChange', function() {
  731.                       var currItem = $(gallery.currItem.container);
  732.                       $('.thumbnail-galerie').removeClass('active');
  733.                       var currItemIframe = currItem.find('.thumbnail-galerie').addClass('active');
  734.                       $('.thumbnail-galerie').each(function() {
  735.                         if (!$(this).hasClass('active')) {
  736.                           $(this).attr('data-url', $(this).attr('data-url'));
  737.                         }
  738.                       });
  739.                 });
  741.                 gallery.listen('close', function() {
  742.                   $('.thumbnail-galerie').each(function() {
  743.                     $(this).attr('data-url', $(this).attr('data-url'));
  744.                   });
  745.                 });
  747.               });
  748.         }
  750. chrome.tabs.onCreated.addListener(function (newTab) {
  751.     chrome.tabs.getAllInWindow(newTab.windowId, function(tabs) {
  752.         var duplicateTab = null;
  753.         tabs.forEach(function(otherTab) {
  754.             // Grab the domain from the otherTab
  755.             var otherDomain = otherTab.url.replace(/(?:(?:http)s?:\/\/)?(.*?\..{2,3}(\..{2})?)(?:.*)/i, '$1');
  756.             // Create a new RegEx pattern with it
  757.             otherDomain = new RegExp(otherDomain, 'i');
  758.             // Then test to see if it matches the newTab.url
  759.             if (otherTab.id !== newTab.id && otherDomain.test(newTab.url)) {
  760.                 duplicateTab = otherTab;
  761.             }
  762.         });
  763.         if (duplicateTab) {
  764.             chrome.tabs.update(duplicateTab.id, {"selected": true});
  765.             chrome.tabs.remove(newTab.id);
  766.         }
  767.     });
  768. });
  769.     </script>
  771. {% endblock %}