templates/materials/material.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% use "shared/related_content.html.twig" %}
  4. {% use "shared/media_partners.html.twig" %}
  5. {% use "shared/contact_manufacturer.html.twig" %}
  6. {% use "shared/contact_manufacturer_dialog.html.twig" %}
  8. {% block meta_description %}{{material.title.es}}{% endblock %}
  9. {% block meta_title %}{{material.title.es}}{% endblock %}
  11. {% block head %}
  12. <link rel="stylesheet" href="{{ asset('assetsv2/css/card.min.css') }}">
  13. <link rel="stylesheet" href="{{ asset('assetsv2/css/scroll.min.css') }}">
  14. <link rel="stylesheet" href="{{ asset('assetsv2/css/breadcrumbs.min.css') }}">
  15. <link rel="stylesheet" href="{{ asset('assetsv2/css/material-buttons.min.css') }}">
  16. <link rel="stylesheet" href="{{ asset('assetsv2/css/material-expansionpanel.min.css') }}">
  17. <link rel="stylesheet" href="{{ asset('assetsv2/css/gallery.min.css') }}">
  18. <link rel="stylesheet" href="{{ asset('assetsv2/css/material.min.css') }}">
  19. <link rel="stylesheet" href="{{ asset('assetsv2/css/lightbox.min.css') }}" media="none" onload="if(media!='all')media='all'">
  20. <noscript><link rel="stylesheet" href="{{ asset('assetsv2/css/lightbox.min.css') }}"></noscript>
  21. {{ block('related_assets') }}
  22. {{ block('mediapartners_assets') }}
  23. {% if user or material.manufacturerVisibility %}
  24.   {{ block('contactmanufacturer_assets') }}
  25. {% else %}
  26.   {{ block('contactmanufacturerdialog_assets') }}
  27. {% endif %}
  29. <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
  30. <script>
  31.   window.googletag = window.googletag || {cmd: []};
  33.   // GPT slots
  34.   var adSlot1;
  36.   googletag.cmd.push(function() {
  37.     // Banner sidebar
  38.     adSlot1 = googletag.defineSlot('/84917965/skyscraper180x600OK',[[180, 600], [120, 600]],'skyscraper180x600OK_block').addService(googletag.pubads());
  40.     // Configure SRA
  41.     googletag.pubads().enableSingleRequest();
  43.     // Start ad fetching
  44.     googletag.enableServices();
  45.   });
  46. </script>
  48. {% endblock %}
  50. {% block scripts_body %}
  51. <script src="{{ asset('assetsv2/js/lightbox.min.js') }}"></script>
  52. <script src="{{ asset('assetsv2/js/jquery.lazyload.min.js') }}"></script>
  53. <script>
  54.   $(function(){
  56.     {# $('#bildiaFloat').fadeIn('slow'); #}
  58.     $( ".material-detail .description img" ).wrap(function() {
  59.       return '<a href="'+$(this).attr('src')+'" data-lightbox="description" data-title=""></a>';
  60.     });
  61.     lightbox.option({'albumLabel': 'Imagen %1 de %2'});
  63.     $( ".material-detail .description img" ).each(function(){
  64.       $(this).attr('data-src',$(this).attr('src'));
  65.       $(this).attr('src',"{{asset('assetsv2/img/white.gif')}}");
  66.       $(this).addClass('lazyload');
  67.     });
  69.     lazyload();
  71.   });
  73.   function toggleBookmark(el){
  74.     {% if user %}
  75.     if($(el).hasClass('active')){
  76.       $.ajax({
  77.         type: "DELETE",
  78.         url: '{{api_url}}bookmark/{{material.id}}',
  79.         beforeSend: function (xhr) {
  80.           xhr.setRequestHeader("Authorization", 'Bearer {{user.token}}');
  81.         }
  82.       }).done(function (response) {
  83.         //$(el).removeClass('active').html('<i class="material-icons"> bookmark_border </i>');
  84.         $(el).removeClass('active').html('<i class="material-icons"> bookmark_border </i><span>GUARDAR</span>');
  85.       }).fail(function (err)  {
  87.       });
  88.     }else{
  89.       $.ajax({
  90.         type: "POST",
  91.         url: '{{api_url}}bookmark/',
  92.         data: '{"content":"{{material.id}}"}',
  93.         contentType: "text/plain;charset=UTF-8",
  94.         beforeSend: function (xhr) {
  95.           xhr.setRequestHeader("Authorization", 'Bearer {{user.token}}');
  96.         }
  97.       }).done(function (response) {
  98.         //$(el).addClass('active').html('<i class="material-icons"> bookmark </i>');
  99.         $(el).addClass('active').html('<i class="material-icons"> bookmark </i><span>GUARDADO</span>');
  100.       }).fail(function (err)  {
  102.       });
  103.     }
  104.     {% else %}
  105.     window.location.href = "/login/";
  106.     return;
  107.     {% endif %}
  108.   }
  109. </script>
  110. {{ block('related_scripts') }}
  111. {% if user or material.manufacturerVisibility %}
  112.   {{ block('contactmanufacturer_scripts') }}
  113. {% else %}
  114.   {{ block('contactmanufacturerdialog_scripts') }}
  115. {% endif %}
  116. {#
  117. <div id="bildiaFloat">
  118.   <p class="text-right">
  119.     <i class="material-icons" onclick="$('#bildiaFloat').fadeOut();"> close </i>
  120.   </p>
  121.   <p class="text-center custom-margin">
  122.     <img src="{{ asset('assetsv2/img/logos/logo_bildia_tectonica.jpg') }}" alt="">
  123.   </p>
  124.   <p class="text-center pc-only">
  125.     ¡Hola!
  126.   </p>
  127.   <p class="text-center custom-margin pc-only">
  128.     ¿Necesitas un presupuesto?
  129.   </p>
  130.   <p class="text-center pc-only">
  131.     <a class="boton" href="https://bildia.com/#modal-presupuesto-directo" title="Contáctanos">CONTÁCTANOS</a>
  132.   </p>
  133.   <p class="text-center mobile-only">
  134.     <a class="boton" href="https://bildia.com/#modal-presupuesto-directo" title="Contáctanos">¿NECESITAS UN PRESUPUESTO?</a>
  135.   </p>
  136. </div>
  137. #}
  138. {% endblock %}
  140. {% block body %}
  141. <div class="material-detail">
  143.   <div class="header" {% if material.headerImage %} style="background: url('{{material.headerImage.url}}') no-repeat;" {% endif %}>
  144.     <div class="mask"></div>
  145.     <div class="container h-100">
  146.       <div class="row h-100">
  147.         <div class="col-10 d-flex align-items-end">
  148.           <div class="content">
  149.             <h1 class="title">{{material.title.es}}</h1>
  150.             <h2 class="author">{{material.category.0.name}}</h2>
  151.           </div>
  152.         </div>
  153.         <div class="col-2 d-flex align-items-end justify-content-end">
  154.           {% if material.createdByTectonica %}
  155.           <div class="logo">
  156.             <img src="assetsv2/img/logos/logo-mbl.png" alt="">
  157.           </div>
  158.           {% endif %}
  159.         </div>
  160.       </div>
  161.     </div>
  162.   </div>
  164.   <div class="action-panel">
  165.     <div class="container">
  166.       <div class="row">
  167.         <div class="col-12 col-sm-8 breadcrumbs">
  168.           {% if material.breadcrumb %}
  169.             {% if material.breadcrumb.children.0 is not defined %}
  170.               <a href="{{absolute_url('/search/?section=' ~ material.breadcrumb.id ~ '&entity=4')|add_ssl}}" title="{{material.breadcrumb.name}}"><span class="c-pointer active">{{material.breadcrumb.name}}</span></a>
  171.             {% else %}
  172.               <a href="{{absolute_url('/search/?section=' ~ material.breadcrumb.id ~ '&entity=4')|add_ssl}}" title="{{material.breadcrumb.name}}"><span class="c-pointer">{{material.breadcrumb.name}} /</span></a>
  173.               {% set category = material.breadcrumb %}
  174.               {% for i in 0..10 if category.children.0 is defined %}
  175.                 {% set category_name = category.children.0.name  %}
  176.                 {% set category_id = category.children.0.id %}
  177.                 {% set category = category.children.0 %}
  178.                 {% if(category.children.0 is defined) %}
  179.                   <a href="{{absolute_url('/search/?section=' ~ category_id ~ '&entity=4')|add_ssl}}" title="{{category_name}}"><span class="c-pointer">{{category_name}} /</span></a>
  180.                 {% else %}
  181.                   <a href="{{absolute_url('/search/?section=' ~ category_id ~ '&entity=4')|add_ssl}}" title="{{category_name}}"><span class="c-pointer active">{{category_name}}</span></a>
  182.                 {% endif %}
  183.               {% endfor %}
  184.             {% endif %}
  185.           {% endif %}
  186.         </div>
  187.         <div class="col-12 col-sm-4 icons text-right">
  188.           <!---->
  189.           <!---->
  190.           {# TODO: share #}
  191.           {#<button mat-icon-button="" class="mat-icon-button"><span class="mat-button-wrapper"><mat-icon class="mat-icon material-icons" role="img" aria-hidden="true">share</mat-icon></span>
  192.             <div class="mat-button-ripple mat-ripple mat-button-ripple-round" matripple=""></div>
  193.             <div class="mat-button-focus-overlay"></div>
  194.           </button>#}
  195.           {% if not user or not material.bookmark %}
  196.             {#<!----><div class="bookmark" onclick="toggleBookmark(this);"><i class="material-icons"> bookmark_border </i></div>#}
  197.             <!----><div class="bookmark" onclick="toggleBookmark(this);">
  198.               <i class="material-icons"> bookmark_border </i><span>GUARDAR</span>
  199.             </div>
  200.             {% else %}
  201.             {#<!----><div class="bookmark active" onclick="toggleBookmark(this);"><i class="material-icons"> bookmark </i></div>#}
  202.             <!----><div class="bookmark active" onclick="toggleBookmark(this);">
  203.               <i class="material-icons"> bookmark </i><span>GUARDADO</span>
  204.             </div>
  205.           {% endif %}
  206.         </div>
  207.       </div>
  208.     </div>
  209.   </div>
  211.   <div class="content py-5">
  212.     <div class="container">
  213.       <div class="row">
  214.         <div class="col-12 col-sm-8">
  216.           {% if user or material.manufacturerVisibility %}
  218.             {% with { 'item': material.company, 'material': true } %}
  219.               {{ block('contactmanufacturer_content') }}
  220.             {% endwith %}
  222.           {% else %}
  224.             {% with { 'item': material.company, 'material': true } %}
  225.               {{ block('contactmanufacturerdialog_content') }}
  226.             {% endwith %}
  228.           {% endif %}
  230.           <div class="mt-3 description">
  231.             {{material.description.es | raw}}
  232.           </div>
  234.           {% if material.descriptionSubscribers.es %}
  236.             <div class="description mt-3">
  238.               {% if user and not user.isFreeUser %}
  240.                 {{material.descriptionSubscribers.es | raw}}
  242.               {% else %}                
  244.                 <button class="btn btn-secondary mt-3" onclick="$('#private-content').modal();">
  245.                   VER MATERIAL COMPLETO
  246.                 </button>
  248.               {% endif %}
  250.             </div>
  252.           {% endif %}
  254.           {% if material.videos|length > 0 %}
  255.           <div class="video mt-4">
  256.               {% for video in material.videos %}
  257.               <div>
  258.                 <div class="embed-responsive-16by9 my-2">
  259.                   {{video|raw}}
  260.                 </div>
  261.               </div>
  262.               {% endfor %}
  263.           </div>
  264.           {% endif %}
  265.         </div>
  266.         <div class="col-12 col-sm-4">
  267.           {# https://material.angular.io/components/expansion/api #}
  268.           <mat-accordion class="mat-accordion">
  269.             {% if material.documents|length > 0 %}
  270.             <mat-expansion-panel class="mat-expansion-panel mat-expanded">{# TODO: condicion expanded #}
  271.               <mat-expansion-panel-header class="mat-expansion-panel-header">
  272.                 <span class="mat-content">
  273.                   <mat-panel-title class="mat-panel-title mat-expansion-panel-header-title">
  274.                     Descargas
  275.                   </mat-panel-title>
  276.                 </span>
  277.                 <span class="mat-expansion-indicator" style="transform: rotate(0deg);"></span>
  278.               </mat-expansion-panel-header>
  279.               <div class="mat-expansion-panel-content mat-expanded">
  280.                 <div class="mat-expansion-panel-body">
  281.                   <div class="panel-content">
  282.                     {% for doc in material.documents %}                      
  283.                       <div class='d-flex align-items-center'>
  284.                         {% if doc.subscribersOnly == true and (not user or user.isFreeUser) or not user %}
  285.                           <i class="material-icons">lock</i>
  286.                         {% else %}
  287.                           <i class="material-icons">attachment</i>
  288.                         {% endif %}
  289.                         {% if doc.url %}
  290.                           {% if doc.subscribersOnly == true and (not user or user.isFreeUser) %}
  291.                             <a class="aligned-with-icon" href="javascript:void(0);" onclick="$('#private-content').modal();">{{doc.name}}</a>
  292.                           {% elseif not user %}
  293.                             <a class="aligned-with-icon" href="javascript:void(0);" onclick="$('#registered-content').modal();">{{doc.name}}</a>
  294.                           {% else %}
  295.                             <a class="aligned-with-icon" target="_blank" href="{{doc.url}}">{{doc.name}}</a>
  296.                           {% endif %}
  297.                         {% elseif doc.name %}
  298.                           {% if doc.subscribersOnly == true and (not user or user.isFreeUser) %}
  299.                             <a class="aligned-with-icon" href="javascript:void(0);" onclick="$('#private-content').modal();">{{doc.name}}</a>
  300.                           {% elseif not user %}
  301.                             <a class="aligned-with-icon" href="javascript:void(0);" onclick="$('#registered-content').modal();">{{doc.name}}</a>
  302.                           {% else %}
  303.                             <a class="aligned-with-icon" target="_blank" href="{{doc.name}}">{{doc.name}}</a>
  304.                           {% endif %}
  305.                         {% endif %}
  306.                       </div>
  307.                     {% endfor %}
  308.                   </div>
  309.                 </div>
  310.               </div>
  311.             </mat-expansion-panel>
  312.             {% endif %}
  313.             {% if material.dealers|length > 0 %}
  314.             <mat-expansion-panel class="mat-expansion-panel mat-expanded">{# TODO: condicion expanded #}
  315.               <mat-expansion-panel-header class="mat-expansion-panel-header">
  316.                 <span class="mat-content">
  317.                   <mat-panel-title class="mat-panel-title mat-expansion-panel-header-title">
  318.                     Distribuidores
  319.                   </mat-panel-title>
  320.                 </span>
  321.                 <span class="mat-expansion-indicator" style="transform: rotate(0deg);"></span>
  322.               </mat-expansion-panel-header>
  323.               <div class="mat-expansion-panel-content mat-expanded">
  324.                 <div class="mat-expansion-panel-body">
  325.                   <div class="panel-content">
  326.                     {% for dealer in material.dealers %}
  327.                       <div>
  328.                         <a class="aligned-with-icon" href="{{dealer.url}}">{{dealer.name}}</a>
  329.                       </div>
  330.                     {% endfor %}
  331.                   </div>
  332.                 </div>
  333.               </div>
  334.             </mat-expansion-panel>
  335.             {% endif %}
  336.             {% if material.linkRelatedArticles|length > 0 %}
  337.               <mat-expansion-panel class="mat-expansion-panel mat-expanded">{# TODO: condicion expanded #}
  338.                 <mat-expansion-panel-header class="mat-expansion-panel-header">
  339.                   <span class="mat-content">
  340.                     <mat-panel-title class="mat-panel-title mat-expansion-panel-header-title">
  341.                       Articulos relacionados
  342.                     </mat-panel-title>
  343.                   </span>
  344.                   <span class="mat-expansion-indicator" style="transform: rotate(0deg);"></span>
  345.                 </mat-expansion-panel-header>
  346.                 <div class="mat-expansion-panel-content mat-expanded">
  347.                   <div class="mat-expansion-panel-body">
  348.                     <div class="panel-content">
  349.                       <ul class='related'>
  350.                         {% for doc in material.linkRelatedArticles %}
  351.                           <li><a href="{{absolute_url(doc.url)|add_ssl}}" target="_blank" title="{{doc.name}}">{{doc.name}}</a></li>
  352.                         {% endfor %}
  353.                       </ul>
  354.                     </div>
  355.                   </div>
  356.                 </div>
  357.               </mat-expansion-panel>
  358.             {% endif %}
  359.             {% if material.linkRelatedProjects|length > 0 %}
  360.               <mat-expansion-panel class="mat-expansion-panel mat-expanded">{# TODO: condicion expanded #}
  361.                 <mat-expansion-panel-header class="mat-expansion-panel-header">
  362.                 <span class="mat-content">
  363.                   <mat-panel-title class="mat-panel-title mat-expansion-panel-header-title">
  364.                     Proyectos relacionados
  365.                   </mat-panel-title>
  366.                 </span>
  367.                   <span class="mat-expansion-indicator" style="transform: rotate(0deg);"></span>
  368.                 </mat-expansion-panel-header>
  369.                 <div class="mat-expansion-panel-content mat-expanded">
  370.                   <div class="mat-expansion-panel-body">
  371.                     <div class="panel-content">
  372.                       <ul class='related'>
  373.                         {% for doc in material.linkRelatedProjects %}
  374.                           <li><a href="{{absolute_url(doc.url)|add_ssl}}" target="_blank" title="{{doc.name}}">{{doc.name}}</a></li>
  375.                         {% endfor %}
  376.                       </ul>
  377.                     </div>
  378.                   </div>
  379.                 </div>
  380.               </mat-expansion-panel>
  381.             {% endif %}
  382.             {% if material.linkRelatedConstructionDetails|length > 0 %}
  383.               <mat-expansion-panel class="mat-expansion-panel mat-expanded">{# TODO: condicion expanded #}
  384.                 <mat-expansion-panel-header class="mat-expansion-panel-header">
  385.                   <span class="mat-content">
  386.                     <mat-panel-title class="mat-panel-title mat-expansion-panel-header-title">
  387.                       Detalles constructivos relacionados
  388.                     </mat-panel-title>
  389.                   </span>
  390.                   <span class="mat-expansion-indicator" style="transform: rotate(0deg);"></span>
  391.                 </mat-expansion-panel-header>
  392.                 <div class="mat-expansion-panel-content mat-expanded">
  393.                   <div class="mat-expansion-panel-body">
  394.                     <div class="panel-content">
  395.                       <ul class='related'>
  396.                         {% for doc in material.linkRelatedConstructionDetails %}
  397.                           <li><a href="{{absolute_url(doc.url)|add_ssl}}" target="_blank" title="{{doc.name}}">{{doc.name}}</a></li>
  398.                         {% endfor %}
  399.                       </ul>
  400.                     </div>
  401.                   </div>
  402.                 </div>
  403.               </mat-expansion-panel>
  404.             {% endif %}
  405.           </mat-accordion>
  406.           {% if not mobile %}
  407.           <div id="skyscraper180x600OK_block" align="center" style="margin-top:10px;">
  408.             <script>
  409.               googletag.cmd.push(function() {
  410.                 googletag.display('skyscraper180x600OK_block');
  411.               });
  412.             </script>
  413.           </div>
  414.           {% endif %}
  415.         </div>
  416.       </div>
  417.     </div>
  418.   </div>
  420.   {% if material.images|length > 0 %}
  421.   <div class="images pb-5">
  422.     <div class="container">
  423.       <div class="row">
  424.         {% set i = 0 %}
  425.         {% for image in material.images %}
  426.         {% set footer = image.footer %}
  427.         {% if image.copyright %}
  428.           {% set footer = image.copyright ~ '<br>' ~ image.footer %}
  429.         {% endif %}
  430.         <div class="col-12 col-sm-4 mt-3">
  431.           <a href="{{image.url}}" data-lightbox="gallery" data-title="{{footer}}">
  432.             <img src="{{asset('assetsv2/img/white.gif')}}" data-src="{{image.url}}" class='w-100 lazyload' />
  433.           </a>
  434.         </div>
  435.         {% endfor %}
  436.       </div>
  437.     </div>
  438.   </div>
  439.   {% endif %}
  441.   <div class="my-3">
  442.     <div class="container">
  443.       <div class="row">
  444.         <div class="col-12">
  445.           <p class="small text-center">Las imágenes pertenecen a las empresas salvo mención expresa.</p>
  446.           <p class="small text-center">Los productos pueden variar según la zona de distribución.</p>
  447.           <p class="small text-center">All images are property of the company offering the product unless otherwise indicated.</p>
  448.           <p class="small text-center">Products may vary depending on the area of distribution.</p>
  449.         </div>
  450.       </div>
  451.     </div>
  452.   </div>
  454.   {% with { 'item': material } %}
  455.     {{ block('related_content') }}
  456.   {% endwith %}
  458.   {% if mobile %}
  459.   <div class="my-3">
  460.     <div class="container">
  461.       <div class="row">
  462.         <div class="col-12">
  463.           <div id="skyscraper180x600OK_block" align="center">
  464.             <script>
  465.               googletag.cmd.push(function() {
  466.                 googletag.display('skyscraper180x600OK_block');
  467.               });
  468.             </script>
  469.           </div>
  470.         </div>
  471.       </div>
  472.     </div>
  473.   </div>
  474.   {% endif %}
  476.   {% with { 'home': false, 'mediaPartners': mediaPartners } %}
  477.     {{ block('mediapartners_content') }}
  478.   {% endwith %}
  479. </div>
  481. <div class="modal fade" id="private-content" tabindex="-1" role="dialog" aria-labelledby="privateLabel" aria-hidden="true">
  482.   <div class="modal-dialog" role="document">
  483.     <div class="modal-content">
  484.       <div class="modal-body">
  485.         <div class="modal-body p-5">
  486.           <h3 class='text-center'>Suscríbete para acceder a este contenido</h3>
  487.           <p class='text-center'>Para acceder a este contenido debes tener una suscripción activa: SUSCRIPTOR / ESTUDIANTE</p>
  488.           <div class="w-100 text-center mt-3">
  489.             <a href="{{absolute_url('/subscription')|add_ssl}}" class="boton">Ver Planes</a>
  490.           </div>
  491.         </div>
  492.       </div>
  493.     </div>
  494.   </div>
  495. </div>
  497. <div class="modal fade" id="registered-content" tabindex="-1" role="dialog" aria-labelledby="registeredLabel" aria-hidden="true">
  498.   <div class="modal-dialog" role="document">
  499.     <div class="modal-content">
  500.       <div class="modal-body">
  501.         <div class="modal-body p-5">
  502.           <h3 class='text-center'>Regístrate para acceder a este contenido</h3>
  503.           <p class='text-center'>Para acceder a este contenido debes tener activado cualquiera de los planes de acceso: SUSCRIPTOR / ESTUDIANTE / FREE</p>
  504.           <div class="w-100 text-center mt-3">
  505.             <a href="{{absolute_url('/subscription')|add_ssl}}" class="boton">Registro</a>
  506.           </div>
  507.         </div>
  508.       </div>
  509.     </div>
  510.   </div>
  511. </div>
  512. {% endblock %}