src/DcSiteBundle/Resources/views/Opel/Car/configuration.html.twig line 1

Open in your IDE?
  1. {% extends '@DcSite/Opel/base.html.twig' %}
  3. {% block seo %}
  4.     <title>
  5.         {{ 'car.configuration_page.seo.title'|trans({
  6.             '%car%' : model.fullName,
  7.             '%year%' : model.year,
  8.             '%dealer%' : dealer.name,
  9.         }, 'dc_base') }}
  10.     </title>
  11.     <meta name="description" content="{{ 'car.configuration_page.seo.description'|trans({
  12.             '%car%' : model.fullName,
  13.             '%year%' : model.year,
  14.             '%dealer%' : dealer.name,
  15.         }, 'dc_base') }}" />
  16.     {% if model.noindexFollow %}
  17.         <meta name="robots" content="noindex, follow" />
  18.     {% endif %}
  19. {% endblock seo %}
  21. {% block css %}
  22. {% endblock %}
  24. {% block content %}
  26.     <main class="new__car-car">
  27.         {% include '@DcSite/Opel/breadcrumbs.html.twig' with {
  28.             catName: 'pages.model_lineup.breadcrumb_title'|trans({}, 'dc_opel'),
  29.             catUrl: path('opel_model_lineup'),
  30.             catName2: model.fullName,
  31.             catUrl2: path('opel_card_car', {car: model.url}),
  32.             pageName: 'car.equipments_prices'|trans({}, 'dc_base') ~ ' ' ~ model.fullName
  33.         } %}
  36.         <article class="section_padd">
  37.             {% include '@DcSite/Modules/vehicle/vehicle-characteristic.html.twig' %}
  38.         </article>
  41.     </main>
  42. {% endblock %}
  45. {% block pageJS %}
  46.     <script>
  47.         app.onCustomEvent('appInit', function () {
  48.             app.loadCss('{{ asset('/bundles/dcsite/css/modules/car/car-card_v3.css') }}');
  49.             app.loadCss('{{ asset('/bundles/dcsite/css/opel/car/car-card.css') }}');
  51.             app.loadJs('{{ asset('/bundles/dcsite/js/modules/vehicle/vehicle-characteristic.js') }}',function () {
  52.                 initVehicleCharacteristic({
  53.                     vehicleCharacteristic: '{{ vehicleCharacteristic|json_encode_replace|raw }}',
  54.                 });
  55.             });
  59.             // -- CAR TABLES --------//
  60.             
  61.             // sync scroll
  62.             document.addEventListener('scroll', function (event) {
  63.                 if (event.target.classList && event.target.classList.contains('js-scroll-sync')) {
  64.                     debounce(scrollSyncHandler.bind(event.target), 20);
  65.                 }
  66.             }, true);
  68.             function scrollSyncHandler() {
  69.                 var scrollLeft = $(this).scrollLeft();
  70.                 var idSync = $(this).data('scroll-sync');
  72.                 $('.js-scroll-sync[data-scroll-sync=' + idSync + ']').scrollLeft(scrollLeft);
  73.             }
  77.             // drag scroll
  78.             var isTouchDevice =
  79.                 (('ontouchstart' in window) ||
  80.                 (navigator.MaxTouchPoints > 0) ||
  81.                 (navigator.msMaxTouchPoints > 0));
  83.             var isDown = false;
  85.             var startX;
  86.             var scrollLeft;
  88.             if (!isTouchDevice) {
  89.                 $('body').on('mousedown', '.js-touch-scroll', function(e) {
  90.                     var scrolledEl = e.target.closest('.js-touch-scroll');
  92.                     isDown = true;
  93.                     scrolledEl.classList.add("active");
  94.                     startX = e.pageX - scrolledEl.offsetLeft;
  95.                     scrollLeft = scrolledEl.scrollLeft;
  97.                     scrolledEl.style.cursor = 'grabbing';
  98.                     scrolledEl.style.userSelect = 'none';
  99.                 });
  101.                 $('body').on('mouseleave', '.js-touch-scroll', function(e) {
  102.                     var scrolledEl = e.target.closest('.js-touch-scroll');
  104.                     isDown = false;
  105.                     scrolledEl.classList.remove("active");
  106.                 });
  108.                 $('body').on('mouseup', '.js-touch-scroll', function(e) {
  109.                     var scrolledEl = e.target.closest('.js-touch-scroll');
  111.                     isDown = false;
  112.                     scrolledEl.classList.remove("active");
  114.                     scrolledEl.style.cursor = 'move';
  115.                     scrolledEl.style.removeProperty('user-select');
  116.                 });
  118.                 $('body').on('mousemove', '.js-touch-scroll', function(e) {
  119.                     if (!isDown) return;
  121.                     e.preventDefault();
  122.                     var scrolledEl = e.target.closest('.js-touch-scroll');
  124.                     const x = e.pageX - scrolledEl.offsetLeft;
  125.                     const walk = x - startX;
  126.                     scrolledEl.scrollLeft = scrollLeft - walk;
  127.                 }); 
  128.             }
  131.             // table accordions
  132.             $('body').on('click', '.car-table__body-title', function() {
  133.                 $(this).toggleClass('--opened');
  134.                 $(this).next('.car-table__body').slideToggle();
  136.                 var $headerTable = $(this).closest('.car-table').find('.car-table__header');
  137.                 scrollSyncHandler.bind($headerTable)();
  138.             });
  141.             // sticky table titles
  142.             function setTopOfStickyBars() {
  143.                 var headerHeight = $('.header').height();
  144.                 var carNavHeight = $('.car-page-nav').height();
  146.                 $('.car-page-nav').css('top', headerHeight);
  147.                 $('.car-table__header').css('top', headerHeight + carNavHeight);
  148.             }
  150.             window.addEventListener('resize', setTopOfStickyBars, false);
  151.             window.addEventListener('load', setTopOfStickyBars);
  153.         });
  155.         function debounce(method, delay) {
  156.             clearTimeout(method._tId);
  157.             method._tId= setTimeout(function(){
  158.                 method();
  159.             }, delay);
  160.         }
  161.     </script>
  164. {% endblock pageJS %}