Aeroporto di Bologna - Design System

Pagina risultati voli: Scripts 

<script>
    $.tangible.shortcutNavigation();
    // $.tangible.navToolbar();
    $.tangible.formFlights();
    $.tangible.multiSelect();
    // Tab tendine filtri
    document.addEventListener('DOMContentLoaded', () => {
        var priceTabs = new Tabby('[data-tabs-price]');
        var airportTabs = new Tabby('[data-tabs-airport]');
        var timeTabs = new Tabby('[data-tabs-time]');
        var mobilePriceTabs = new Tabby('[data-mobile-tabs-price]');
        var mobileAirportTabs = new Tabby('[data-mobile-tabs-airport]');
        var mobileTimeTabs = new Tabby('[data-mobile-tabs-time]');
    })
    // initialization flatpickr https://flatpickr.js.org/getting-started/
    // if browser language is italian, set flatpickr language to italian https://flatpickr.js.org/localization/
    var userLang = navigator.language || navigator.userLanguage;
    if (userLang == 'it-IT') {
        flatpickr.localize(flatpickr.l10ns.it);
    }
    // gestione abiliata/disabilita plugin mobile/desktop
    function flatPickrController() {
        var round_trip = flatpickr("#round-trip-desktop.js-flatpickr"),
            round_only = flatpickr("#round-desktop.js-flatpickr"),
            trip_only = flatpickr("#round-desktop.js-flatpickr"),
            mobileBreakPoint = 1024;
        // se la viewport è maggiore di 1024 (display input desktop), inizializzo i flatpickr
        if ($(window).width() > mobileBreakPoint) {
            // flights form - andata/ritorno (desktop)
            var round_trip = flatpickr("#round-trip-desktop.js-flatpickr", {
                dateFormat: "d F Y",
                mode: "range",
                minDate: "today",
                allowInput: true
            });
            // flights form - andata (desktop)
            var round_only = flatpickr("#round-desktop.js-flatpickr", {
                dateFormat: "d F Y",
                minDate: "today",
                allowInput: true
            });
            // flights form - ritorno (desktop)
            var trip_only = flatpickr("#trip-desktop.js-flatpickr", {
                dateFormat: "d F Y",
                minDate: "today",
                allowInput: true
            });
        } else {
            // disabilita il plugin flatpickr, utilizza input normali
            // round_trip.destroy();
            round_only.destroy();
            trip_only.destroy();
        }
    }
    // al caricamento e al resize, chiama la funzione che abilita o disabilita il plugin
    $(window).on('load resize', flatPickrController);
    // LOGICA FORM VOLI - set min date
    var $round = $("#round-mobile"),
        $trip = $("#trip-mobile"),
        $today = new Date().toISOString().split("T")[0];
    $.merge($round, $trip).attr('min', $today);
    // LOGICA FORM VOLI - validazione
    $("#trip-mobile, #round-mobile").change(function(e) {
        var $roundDate = new Date($round.val()),
            $tripDate = new Date($trip.val()),
            $roundParse = Date.parse($roundDate),
            $noteField = $("#flights-form-note"),
            $tripParse = Date.parse($tripDate);
        if ($roundParse > $tripParse) {
            $noteField.addClass('is-negative');
            $noteField.removeClass('u-visuallyhidden');
        } else {
            $noteField.removeClass('is-negative');
            $noteField.addClass('u-visuallyhidden');
        }
    });
    // LOGICA FORM VOLI - mostra/nascondi
    // funzione select voli a/r
    $("#select-round-trip-selection").change(function() {
        console.log("select");
        var value = $(this).find("option:selected").attr("value");
        var roundDesktopInput = $(".js-round-desktop input"),
            roundDesktopLabel = $(".js-round-desktop label"),
            tripDesktopInput = $(".js-trip-desktop input"),
            tripDesktopLabel = $(".js-trip-desktop label"),
            roundDesktopWrapper = $(".js-round-desktop"),
            tripDesktopWrapper = $(".js-trip-desktop")
        switch (value) {
            case "option-2":
                // nascondo il campo ritorno 
                tripDesktopInput.removeAttr("required");
                tripDesktopWrapper.hide();
                break;
            default:
                // mostro il campo ritorno 
                tripDesktopInput.attr("required", "required");
                tripDesktopWrapper.show();
        }
    });
    // FIX CHROME ATTRIBUTI REQUIRED
    // rimuove e aggiunge gli attributi required per gli input e le select dei form e-commerce
    function checkInputVisibility() {
        // breakpoint desktop-mobile
        var breakPoint = 1024,
            mobileInput = $('.c-form__el--mobile input, .c-form__el--mobile select'),
            desktopInput = $('.c-form__el--desktop input, .c-form__el--desktop select'),
            desktopInputFlightsTrip = $(".js-round-desktop input");
        if ($(window).width() > breakPoint) {
            desktopInput.attr('required', 'required');
            mobileInput.removeAttr('required');
            desktopInputFlightsTrip.removeAttr("required");
        } else if ($(window).width() < breakPoint) {
            desktopInput.removeAttr('required');
            mobileInput.attr('required', 'required');
        }
    }
    // al caricamento e al resize della pagina
    $(window).on('load resize', checkInputVisibility);
    /* ------------------------ /*
        TIME SLIDERS
      /* ------------------------ */
    function initializeSliderTime(sliderID, leftValueID = '', rightValueID = '') {
        // Funzioni ausiliarie definite all'interno di initializeSliderTime
        function convertToHour(value) {
            return Math.floor(value / 60);
        }

        function convertToMinute(value, hour) {
            return value - hour * 60;
        }

        function formatHoursAndMinutes(hours, minutes) {
            if (hours.toString().length == 1) hours = '0' + hours;
            if (minutes.toString().length == 1) minutes = '0' + minutes;
            return hours + ':' + minutes;
        }
        var leftValue = document.getElementById(leftValueID),
            rightValue = document.getElementById(rightValueID);
        var initialStartMinute = 0,
            initialEndMinute = 1440,
            step = 30;
        var slider = document.getElementById(sliderID);
        if (slider) {
            noUiSlider.create(slider, {
                start: [300, 1220],
                connect: true,
                step: step,
                range: {
                    'min': initialStartMinute,
                    'max': initialEndMinute
                }
            });
            slider.noUiSlider.on('update', function(values, handle) {
                if (handle === 0 && leftValue) {
                    leftValue.innerHTML = formatHoursAndMinutes(convertToHour(values[0]), convertToMinute(values[0], convertToHour(values[0])));
                } else if (rightValue) {
                    rightValue.innerHTML = formatHoursAndMinutes(convertToHour(values[1]), convertToMinute(values[1], convertToHour(values[1])));
                }
            });
        }
    };
    initializeSliderTime(
        'slider-time-departure-round',
        'slider-time-departure-round-left-val',
        'slider-time-departure-round-right-val'
    );
    initializeSliderTime(
        'slider-time-arrival-round',
        'slider-time-arrival-round-left-val',
        'slider-time-arrival-round-right-val'
    );
    initializeSliderTime(
        'slider-time-departure-trip',
        'slider-time-departure-trip-left-val',
        'slider-time-departure-trip-right-val'
    );
    initializeSliderTime(
        'slider-time-arrival-trip',
        'slider-time-arrival-trip-left-val',
        'slider-time-arrival-trip-right-val'
    );
    initializeSliderTime(
        'slider-mobile-time-departure-round',
        'slider-mobile-time-departure-round-left-val',
        'slider-mobile-time-departure-round-right-val'
    );
    initializeSliderTime(
        'slider-mobile-time-arrival-round',
        'slider-mobile-time-arrival-round-left-val',
        'slider-mobile-time-arrival-round-right-val'
    );
    initializeSliderTime(
        'slider-mobile-time-departure-trip',
        'slider-mobile-time-departure-trip-left-val',
        'slider-mobile-time-departure-trip-right-val'
    );
    initializeSliderTime(
        'slider-mobile-time-arrival-trip',
        'slider-mobile-time-arrival-trip-left-val',
        'slider-mobile-time-arrival-trip-right-val'
    );
    /* ------------------------ /*
      END TIME SLIDERS
    /* ------------------------ */
    /* ------------------------ /*
      PRICE SLIDERS
    /* ------------------------ */
    function initializePriceSlider(sliderID) {
        var slider = document.getElementById(sliderID);
        if (slider) {
            noUiSlider.create(slider, {
                start: [100, 600],
                connect: true,
                tooltips: true,
                range: {
                    'min': 0,
                    'max': 1000
                },
                format: wNumb({
                    thousand: '.',
                    suffix: ' €'
                })
            });
        }
    }
    initializePriceSlider('slider-price-round');
    initializePriceSlider('slider-price-trip');
    initializePriceSlider('slider-mobile-price-round');
    initializePriceSlider('slider-mobile-price-trip');
    /* ------------------------ /*
      END TIME SLIDERS
    /* ------------------------ */
    // Flight Fares Carousel
    $('.c-carousel--flight-fares .owl-carousel').owlCarousel({
        loop: false,
        responsiveClass: true,
        margin: 16,
        stageOuterClass: "owl-stage-outer c-carousel__outer",
        nav: true,
        navText: ['<img src="/images/svgs/carousel-btn-prev.svg">', '<img src="/images/svgs/carousel-btn-next.svg">'],
        navContainerClass: "c-carousel__nav",
        navClass: ['prev-btn', 'next-btn'],
        dotsClass: "c-carousel__dots",
        dotClass: "owl-dot c-carousel__dot",
        mouseDrag: false,
        responsive: {
            0: {
                items: 1
            },
            600: {
                items: 2
            },
            1024: {
                items: 3
            }
        }
    });
</script>
 
<script>
  $.tangible.shortcutNavigation();
  // $.tangible.navToolbar();
  $.tangible.formFlights();
  $.tangible.multiSelect();

  // Tab tendine filtri
  document.addEventListener('DOMContentLoaded', () => {
    var priceTabs = new Tabby('[data-tabs-price]');
    var airportTabs = new Tabby('[data-tabs-airport]');
    var timeTabs = new Tabby('[data-tabs-time]');

    var mobilePriceTabs = new Tabby('[data-mobile-tabs-price]');
    var mobileAirportTabs = new Tabby('[data-mobile-tabs-airport]');
    var mobileTimeTabs = new Tabby('[data-mobile-tabs-time]');
  })

  // initialization flatpickr https://flatpickr.js.org/getting-started/
  // if browser language is italian, set flatpickr language to italian https://flatpickr.js.org/localization/
  var userLang = navigator.language || navigator.userLanguage;

  if (userLang == 'it-IT') {
    flatpickr.localize(flatpickr.l10ns.it);
  }

  // gestione abiliata/disabilita plugin mobile/desktop
  function flatPickrController() {
    var round_trip = flatpickr("#round-trip-desktop.js-flatpickr"),
      round_only = flatpickr("#round-desktop.js-flatpickr"),
      trip_only = flatpickr("#round-desktop.js-flatpickr"),
      mobileBreakPoint = 1024;

    // se la viewport è maggiore di 1024 (display input desktop), inizializzo i flatpickr
    if ($(window).width() > mobileBreakPoint) {

      // flights form - andata/ritorno (desktop)
      var round_trip = flatpickr("#round-trip-desktop.js-flatpickr", {
        dateFormat: "d F Y",
        mode: "range",
        minDate: "today",
        allowInput: true
      });

      // flights form - andata (desktop)
      var round_only = flatpickr("#round-desktop.js-flatpickr", {
        dateFormat: "d F Y",
        minDate: "today",
        allowInput: true
      });

      // flights form - ritorno (desktop)
      var trip_only = flatpickr("#trip-desktop.js-flatpickr", {
        dateFormat: "d F Y",
        minDate: "today",
        allowInput: true
      });

    } else {
      // disabilita il plugin flatpickr, utilizza input normali
      // round_trip.destroy();
      round_only.destroy();
      trip_only.destroy();
    }
  }

  // al caricamento e al resize, chiama la funzione che abilita o disabilita il plugin
  $(window).on('load resize', flatPickrController);


  // LOGICA FORM VOLI - set min date
  var $round = $("#round-mobile"),
    $trip = $("#trip-mobile"),
    $today = new Date().toISOString().split("T")[0];

  $.merge($round, $trip).attr('min', $today);

  // LOGICA FORM VOLI - validazione
  $("#trip-mobile, #round-mobile").change(function (e) {
    var $roundDate = new Date($round.val()),
      $tripDate = new Date($trip.val()),
      $roundParse = Date.parse($roundDate),
      $noteField = $("#flights-form-note"),
      $tripParse = Date.parse($tripDate);

    if ($roundParse > $tripParse) {
      $noteField.addClass('is-negative');
      $noteField.removeClass('u-visuallyhidden');
    } else {
      $noteField.removeClass('is-negative');
      $noteField.addClass('u-visuallyhidden');
    }
  });


  // LOGICA FORM VOLI - mostra/nascondi
  // funzione select voli a/r
  $("#select-round-trip-selection").change(function () {
    console.log("select");
    var value = $(this).find("option:selected").attr("value");
    var roundDesktopInput = $(".js-round-desktop input"),
      roundDesktopLabel = $(".js-round-desktop label"),
      tripDesktopInput = $(".js-trip-desktop input"),
      tripDesktopLabel = $(".js-trip-desktop label"),
      roundDesktopWrapper = $(".js-round-desktop"),
      tripDesktopWrapper = $(".js-trip-desktop")

    switch (value) {
      case "option-2":
        // nascondo il campo ritorno 
        tripDesktopInput.removeAttr("required");
        tripDesktopWrapper.hide();
        break;
      default:
        // mostro il campo ritorno 
        tripDesktopInput.attr("required", "required");
        tripDesktopWrapper.show();
    }
  });

  // FIX CHROME ATTRIBUTI REQUIRED
  // rimuove e aggiunge gli attributi required per gli input e le select dei form e-commerce
  function checkInputVisibility() {

    // breakpoint desktop-mobile
    var breakPoint = 1024,
      mobileInput = $('.c-form__el--mobile input, .c-form__el--mobile select'),
      desktopInput = $('.c-form__el--desktop input, .c-form__el--desktop select'),
      desktopInputFlightsTrip = $(".js-round-desktop input");

    if ($(window).width() > breakPoint) {
      desktopInput.attr('required', 'required');
      mobileInput.removeAttr('required');
      desktopInputFlightsTrip.removeAttr("required");
    } else if ($(window).width() < breakPoint) {
      desktopInput.removeAttr('required');
      mobileInput.attr('required', 'required');
    }
  }

  // al caricamento e al resize della pagina
  $(window).on('load resize', checkInputVisibility);

  /* ------------------------ /*
      TIME SLIDERS
    /* ------------------------ */
  function initializeSliderTime(sliderID, leftValueID = '', rightValueID = '') {
    // Funzioni ausiliarie definite all'interno di initializeSliderTime
    function convertToHour(value) {
      return Math.floor(value / 60);
    }

    function convertToMinute(value, hour) {
      return value - hour * 60;
    }

    function formatHoursAndMinutes(hours, minutes) {
      if (hours.toString().length == 1) hours = '0' + hours;
      if (minutes.toString().length == 1) minutes = '0' + minutes;
      return hours + ':' + minutes;
    }

    var leftValue = document.getElementById(leftValueID),
      rightValue = document.getElementById(rightValueID);

    var initialStartMinute = 0,
      initialEndMinute = 1440,
      step = 30;

    var slider = document.getElementById(sliderID);

    if (slider) {
      noUiSlider.create(slider, {
        start: [300, 1220],
        connect: true,
        step: step,
        range: {
          'min': initialStartMinute,
          'max': initialEndMinute
        }
      });

      slider.noUiSlider.on('update', function (values, handle) {
        if (handle === 0 && leftValue) {
          leftValue.innerHTML = formatHoursAndMinutes(convertToHour(values[0]), convertToMinute(values[0], convertToHour(values[0])));
        } else if (rightValue) {
          rightValue.innerHTML = formatHoursAndMinutes(convertToHour(values[1]), convertToMinute(values[1], convertToHour(values[1])));
        }
      });

    }
  };

  initializeSliderTime(
    'slider-time-departure-round',
    'slider-time-departure-round-left-val',
    'slider-time-departure-round-right-val'
  );
  initializeSliderTime(
    'slider-time-arrival-round',
    'slider-time-arrival-round-left-val',
    'slider-time-arrival-round-right-val'
  );
  initializeSliderTime(
    'slider-time-departure-trip',
    'slider-time-departure-trip-left-val',
    'slider-time-departure-trip-right-val'
  );
  initializeSliderTime(
    'slider-time-arrival-trip',
    'slider-time-arrival-trip-left-val',
    'slider-time-arrival-trip-right-val'
  );
  
  initializeSliderTime(
    'slider-mobile-time-departure-round',
    'slider-mobile-time-departure-round-left-val',
    'slider-mobile-time-departure-round-right-val'
  );
  initializeSliderTime(
    'slider-mobile-time-arrival-round',
    'slider-mobile-time-arrival-round-left-val',
    'slider-mobile-time-arrival-round-right-val'
  );
  initializeSliderTime(
    'slider-mobile-time-departure-trip',
    'slider-mobile-time-departure-trip-left-val',
    'slider-mobile-time-departure-trip-right-val'
  );
  initializeSliderTime(
    'slider-mobile-time-arrival-trip',
    'slider-mobile-time-arrival-trip-left-val',
    'slider-mobile-time-arrival-trip-right-val'
  );

  /* ------------------------ /*
    END TIME SLIDERS
  /* ------------------------ */

  /* ------------------------ /*
    PRICE SLIDERS
  /* ------------------------ */
  function initializePriceSlider(sliderID) {
    var slider = document.getElementById(sliderID);
    if (slider) {
      noUiSlider.create(slider, {
        start: [100, 600],
        connect: true,
        tooltips: true,
        range: {
          'min': 0,
          'max': 1000
        },
        format: wNumb({
          thousand: '.',
          suffix: ' €'
        })
      });
    }
  }

  initializePriceSlider('slider-price-round');
  initializePriceSlider('slider-price-trip');
  initializePriceSlider('slider-mobile-price-round');
  initializePriceSlider('slider-mobile-price-trip');
  /* ------------------------ /*
    END TIME SLIDERS
  /* ------------------------ */

  // Flight Fares Carousel
  $('.c-carousel--flight-fares .owl-carousel').owlCarousel({
    loop: false,
    responsiveClass: true,
    margin: 16,
    stageOuterClass: "owl-stage-outer c-carousel__outer",
    nav: true,
    navText: ['<img src="/images/svgs/carousel-btn-prev.svg">', '<img src="/images/svgs/carousel-btn-next.svg">'],
    navContainerClass: "c-carousel__nav",
    navClass: ['prev-btn', 'next-btn'],
    dotsClass: "c-carousel__dots",
    dotClass: "owl-dot c-carousel__dot",
    mouseDrag: false,
    responsive: {
      0: {
        items: 1
      },
      600: {
        items: 2
      },
      1024: {
        items: 3
      }
    }
  });

</script>
 
{
  "bodyClass": "u-bg-color-soft-100",
  "tablist": {
    "hasLoading": true
  },
  "template-main-class": "c-main--shiftedtop flights-form",
  "header": {
    "toolbarProgress": {
      "showUser": true,
      "moleculeProgress": {
        "current-step": 2,
        "steps": [
          {
            "text": "Scegli il volo",
            "status": "data-step-current"
          },
          {
            "text": "Dati dei passeggeri",
            "status": "data-step-incomplete"
          },
          {
            "text": "Dati di pagamento",
            "status": "data-step-incomplete"
          },
          {
            "text": "Preventivo",
            "status": "data-step-incomplete"
          },
          {
            "text": "Ricevi conferma",
            "status": "data-step-incomplete"
          }
        ]
      }
    }
  },
  "flights-form": {
    "modifier": "c-form--flights-edit o-spotlight__element",
    "form-footer": true,
    "show-switch": true,
    "from": {
      "atom-input": {
        "value": "Bologna, Guglielmo Marconi [BLQ] (ITALIA)"
      }
    },
    "to": {
      "atom-input": {
        "value": "Dubai, Al Maktoum Intl [DWC] (EMIRATI ARABI)"
      }
    },
    "button": {
      "type": "button",
      "text": "Modifica",
      "modifier": "c-button--adding js-fr-dialogmodal-open",
      "opens-dialog": "dialog-flights-form"
    }
  },
  "modify-search-btn": {
    "modifier": "c-button--as-link js-fr-dialogmodal-open",
    "type": "button",
    "text": "Modifica la ricerca",
    "opens-dialog": "dialog-flights-form",
    "svg": {
      "class": "c-icon c-icon--18",
      "symbol": "ic_mode_edit_black_24px"
    }
  },
  "filter-search-btn": {
    "modifier": "c-button--as-link js-fr-dialogmodal-open",
    "type": "button",
    "text": "Filtra la ricerca",
    "opens-dialog": "dialog-flight-filters",
    "svg": {
      "class": "c-icon c-icon--18",
      "symbol": "ic-tune-24px"
    }
  },
  "dialog-flights-form": {
    "id": "dialog-flights-form",
    "title": "Modifica il tuo volo"
  },
  "highlight-alert": {
    "modifier": "c-highlight--emergency c-highlight--grid",
    "text": "<p><strong>Non trovi il volo che stai cercando? Contatta il nostro Servizio Clienti al numero <a href=\"tel:0516479697\">051 6479697</a></strong></p><p>(dal lunedì al sabato dalle 09:00 alle 13:00 e dalle 14:00 alle 17:00)</p>"
  },
  "select-sorting-results": {
    "label_id": "select-sorting-results",
    "label_message": "Ordina per",
    "label_class": "",
    "atom-select": {
      "id": "select-sorting-results",
      "class": "is-inline",
      "required": false,
      "hasNote": false,
      "placeholder": "Seleziona dal menu",
      "options": [
        {
          "value": "option-1",
          "text": "Volo più economico"
        },
        {
          "value": "option-2",
          "text": "Volo più veloce"
        }
      ]
    }
  }
}
  • Content: 
    .l-page-flights-results__search-recap {
  grid-column: full;
  background-color: primary(sky, 20);
  display: none;

  @include min-screen(bp(desktop)) {
    display: grid;
  }
}

.l-page-flights-results__filters-flight {
  grid-column: main;
  display: none;

  @include min-screen(bp(desktop)) {
    display: block;
  }
}

.l-page-flights-results__sorting {
  grid-column: main;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block: remify(40px) remify(24px);

  @include max-screen(bp(phablet)) {
    margin-block: remify(16px) 0;
  }

  h1 {
    @include max-screen(bp(phablet)) {
      @include visually-hidden;
    }
  }

  label {
    margin-bottom: 0;
  }

}

.l-page-flights-results__modify-search {
  grid-column: main;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: remify(16px);
  margin-block: remify(16px);

  .c-button {
    margin-top: 0;
    color: primary(night, 120);
    font-weight: fw(semibold);
  }

  @include min-screen(bp(desktop)) {
    display: none;
  }
}
  • URL: /components/raw/page-flights-results/_page-flights-results.scss
  • Filesystem Path: src/views/05-pages/06-flights/02-page-flights-results/_page-flights-results.scss
  • Size: 1.1 KB

No notes defined.