templates/archivio/archivio-opere.html.twig line 1

Open in your IDE?
  1. {% extends "base.html.twig" %}
  3. {% block pageTitle %} Archivio Opere {% endblock %}
  5. {% block pageStyle %} {{ parent() }} {% endblock %}
  7. {% block pageScriptsHeader %}
  8.     
  9.     {{ parent() }}
  10.     
  11.     <script src="{{ asset('js/masonry.pkgd.js') }}"></script>
  12.     <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
  14. {% endblock %}
  16. {% block navigation %} {{ parent() }} {% endblock %}
  18. {% block upperMainContainer %}
  19. {% endblock %}
  21. {% block mainContainer %}
  22.     
  23.     <div class="container cortelazzo-font-regular">
  24.         
  25.         <div class="row">
  26.             <div class="col-auto">
  27.                 <span class="h1 cortelazzo-titles cortelazzo-font-bold">{{ 'Opere' | upper }}</span>
  28.             </div>
  29.             {{ form_start(form_operas_type_and_year, {'method': 'POST', 'class': 'col-auto mt-3'}) }}
  30.             <div class="input-group">
  31.                 <div class="col-auto mt-3">
  32.                     {{ form_widget(form_operas_type_and_year.operas_type, {'attr': {'class': 'custom-select frontend-custom-select rounded-0', 'style':'min-width: 140px;'}}) }}
  33.                 </div>
  34.                 <div class="col-auto mt-3">
  35.                     {{ form_widget(form_operas_type_and_year.year, {'attr': {'class': 'custom-select frontend-custom-select rounded-0', 'style':'min-width: 150px;'}}) }}
  36.                 </div>
  37.             </div>
  38.             {{ form_end(form_operas_type_and_year) }}
  39.             <div class="col-auto mt-3 pt-1 fronted-custom-color">
  40.                 <a class="fronted-inherited-color" href="{{ path('opere') }}">{{'reset Selezioni'|upper}}</a>
  41.             </div>
  42.             <div class="col-auto mt-3 pt-1 fronted-custom-color">
  43.                 <a class="fronted-inherited-color" href="{{ path('opereAdvancedSearch') }}">{{'Ricerca avanzata'|upper}}</a>
  44.             </div>
  45.             <div class="col-xl-12">
  46.                 <hr/>
  47.             </div>
  48.         </div>
  49.         
  50.         <!-- Images -->
  51.         <div class="row" id="image-container">
  52.         {% for opera in opere %}
  53.             {% if not cover_presence[opera.id] %}
  54.                 {% for m in opera.multimedias | slice(0, 1) %}
  55.                     {% if m.multimedia.tipo == "image" %}
  56.                         <div class="col-xl-3 card-item" data-idcard="{{ opera.id }}" >
  57.                             <a class="hover-underline-removal" href="{{ path("archivio-opere-scheda", {"idopera": opera.id}) }}">
  58.                                 <img class="card-img-top card-img-top-custom" src="{{ asset(uploaded_img_normal ~ m.multimedia.fileref ~ '.' ~ m.multimedia.estensione) }}" alt="{{ m.multimedia.nome }}">
  59.                                 <div class="card-body card-body-custom">
  60.                                     <h5 class="card-title">{{ opera.titolo | replace({"<": "(", ">": ")"}) }}</h5>
  61.                                 </div>
  62.                             </a>
  63.                         </div>
  64.                     {% endif %}
  65.                 {% endfor %}
  66.             {% else %}
  67.                 {% for m in opera.multimedias %}
  68.                     {% if m.multimedia.tipo == "image" and m.cover %}
  69.                         <div class="col-xl-3 card-item" data-idcard="{{ opera.id }}" >
  70.                             <a class="hover-underline-removal" href="{{ path("archivio-opere-scheda", {"idopera": opera.id}) }}">
  71.                                 <img class="card-img-top card-img-top-custom" src="{{ asset(uploaded_img_normal ~ m.multimedia.fileref ~ '.' ~ m.multimedia.estensione) }}" alt="{{ m.multimedia.nome }}">
  72.                                 <div class="card-body card-body-custom">
  73.                                     <h5 class="card-title">{{ opera.titolo | replace({"<": "(", ">": ")"}) }}</h5>
  74.                                 </div>
  75.                             </a>
  76.                         </div>
  77.                     {% endif %}
  78.                 {% endfor %}
  79.             {% endif %}
  80.         {% endfor %}
  81.         </div>
  82.         <div class="row mt-5 mb-5 text-center">
  83.             {% if opere | length != 0 %}
  84.             <div class="col-sm-12">
  85.                 <button id="load-images" type="button" class="btn btn-light btn btn-outline-dark">{{'Carica altre opere'|upper}}</button>
  86.             </div>
  87.             {% else %}
  88.                 <div class="col-xl-12">
  89.                     <div class="alert alert-light" role="alert">
  90.                         Non sono presenti opere in questa sezione.
  91.                     </div>
  92.                 </div>
  93.             {% endif %}
  94.         </div>
  95.     </div>
  96.             
  97.     <!-- Modal can't load opere -->
  98.     <div class="modal fade" id="modal-endload-opera" tabindex="-1" role="dialog" aria-labelledby="modal-endload-opera-title" aria-hidden="true">
  99.         <div class="modal-dialog modal-dialog-centered" role="document">
  100.             <div class="modal-content">
  101.                 <div class="modal-header">
  102.                     <h5 class="modal-title" id="modal-endload-opera-title">Avviso</h5>
  103.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  104.                         <span aria-hidden="true">&times;</span>
  105.                     </button>
  106.                 </div>
  107.                 <div class="modal-body">
  108.                     Non ci sono più opere da caricare
  109.                 </div>
  110.                 <div class="modal-footer">
  111.                     <button type="button" class="btn btn-danger" id="opera-endload-confirmed">Conferma</button>
  112.                 </div>
  113.             </div>
  114.         </div>
  115.     </div>
  116.     
  117.     <div class="d-none" id="choices-tipoopera-year" data-selectedyear="{{ selected_year }}" data-selectedtipoopera="{{ selected_tipoopera }}"></div>
  118.     
  119.     <script type="text/javascript">
  120.         
  121.         $(document).ready(function(){
  122.             
  123.             var container = $('#image-container');
  124.             // container.imagesLoaded()
  125.             // .done(function(){
  126.             //     container.masonry({
  127.             //         itemSelector: '.card-item',
  128.             //         horizontalOrder: true
  129.             //     });
  130.             // });
  131.             
  132.             $("#opera-endload-confirmed").click(function(){
  133.                 $("#modal-endload-opera").modal("hide");
  134.             });
  135.            
  136.             $("#load-images").click(function(){
  137.                     
  138.                 var selected_operas = $(".card-item").map(function() {
  139.                     return $(this).data("idcard");
  140.                 }).get();
  141.                 
  142.                 var year = $("#choices-tipoopera-year").data("selectedyear");
  143.                 var sigla = $("#choices-tipoopera-year").data("selectedtipoopera");
  144.                 
  145.                 $.ajax({
  146.                     url: "{{ path('opereAjax') }}",
  147.                     method: "POST",
  148.                     data: { selected_operas : selected_operas, selected_year : year, selected_sigla : sigla },
  149.                     dataType: "json",
  150.                     success: function(data, status, jqXHR){
  151.                         var data_folder = '{{ asset(uploaded_img_normal) }}';
  152.                         if(data.opere.length !== 0){
  153.                             for(index = 0; index < data.opere.length; index++)
  154.                             {
  155.                                 var fileref = data.opere[index].fileref;
  156.                                 fileref = fileref.replace(new RegExp("-", "g"), "");
  157.                                 var file_path = data_folder + fileref + '.' + data.opere[index].estensione;
  158.                                 var opera_title = data.opere[index].titolo;
  159.                                 var id_opera = data.opere[index].idopera;
  160.                                 var current_element = "<div class='col-xl-3 card-item' data-idcard='" + id_opera + "'>";
  161.                                 current_element += "<a class='hover-underline-removal' href='{{ path("opere") }}/" + id_opera + "'>";
  162.                                 current_element += "<img src='" + file_path + "' alt='' class='card-img-top card-img-top-custom' alt='" + opera_title + "'>";
  163.                                 current_element += "<div class='card-body card-body-custom'>";
  164.                                 current_element += "<h5 class='card-title'>" + opera_title + "</h5>";
  165.                                 current_element += "</a>";
  166.                                 current_element += "</div>";
  167.                                 current_element += "</div>";
  168.                                 var ce = $(current_element);
  169.                                 var container = $("#image-container");
  170.                                 container.append(ce);
  171.                                 // container.masonry('appended', ce);
  172.                                 // container.imagesLoaded()
  173.                                 // .done(function(){
  174.                                 //     container.masonry({
  175.                                 //         itemSelector: '.card-item',
  176.                                 //         horizontalOrder: true
  177.                                 //     });
  178.                                 // });
  179.                             }
  180.                         }else{
  181.                             $("#modal-endload-opera").modal("show");
  182.                         }
  183.                     }
  184.                 });
  185.             });
  186.             
  187.         });
  188.         
  189.     </script>
  190.     
  191. {% endblock %}