<div class="o-spotlight o-spotlight--full">
<form class="c-booking-info o-booking-info">
<div class="c-booking-info__close-area">
<button class="c-booking-info__close-btn js-close-overlay" aria-label="close">
<svg class="c-icon c-icon--24">
<use xlink:href="#ic_close_black_24px"></use>
</svg> </button>
</div>
<div class="c-time-detail ">
<span class="c-time-detail__icon">
<svg class="c-icon">
<use xlink:href="#entrata-parcheggio-24px"></use>
</svg> </span>
<span>
<strong>Entrata</strong>
<time datetime=2018/04/10>
10/04/2018
</time>
</span>
<span>
<strong>Ore</strong>
<time>16:30</time>
</span>
</div>
<div class="c-time-detail ">
<span class="c-time-detail__icon">
<svg class="c-icon">
<use xlink:href="#uscita-parcheggio-24px"></use>
</svg> </span>
<span>
<strong>Uscita</strong>
<time datetime=2018/04/20>
20/04/2018
</time>
</span>
<span>
<strong>Ore</strong>
<time>20:30</time>
</span>
</div>
<div class="c-time-detail">
<span class="c-time-detail__icon-placeholder">
</span>
<div class="c-time-detail__el">
<label for="select-conventions" class="" aria-label="">
Convenzione:
<select id="select-conventions-inline" class="" aria-describedby="select-conventions-note">
<option value="" disabled selected>Scegli la convenzione</option>
<option value="option-1">Alba Tour</option>
<option value="option-2" selected>Alpitour</option>
<option value="option-3">Brixia Viaggi</option>
<option value="option-4">Club Med</option>
<option value="option-5">Domina Travel</option>
<option value="option-6">In Viaggi</option>
<option value="option-7">Marsupio Group</option>
<option value="option-8">Smeg S.p.A.</option>
<option value="option-9">Viaggi Idea</option>
</select>
<em class="c-field__note u-visuallyhidden" id="select-conventions-note">
Seleziona un'opzione dal menù a tendina
</em>
</label>
</div>
<div class="c-time-detail__el ">
</div>
</div>
<div class="c-form__note is-negative u-visuallyhidden" id="parking-form-note">Inserisci una data e un orario di uscita successivi a quelli di entrata</div>
<div class="c-booking-info__button">
<button type="button" class="c-button c-button--adding js-fr-dialogmodal-open" aria-controls="dialog-parking-form" aria-label="Modifica data e ora di ingresso e uscita dal parcheggio">
Modifica
</button>
</div>
</form>
</div>
<div class="c-dialog c-dialog--parking-form js-fr-dialogmodal " id="dialog-parking-form">
<div class="c-dialog__inner js-fr-dialogmodal-modal" aria-labelledby="dialog-parking-form-title">
<div role="document">
<p class="c-dialog__title c-dialog__text--centered" id="dialog-parking-form-title">Acquista il tuo parcheggio!</p>
<p class="c-dialog__text c-dialog__text--centered">
Indicaci le date e l’orario del tuo prossimo parcheggio, acquistalo e ottieni il 20% di sconto sul tuo ingresso Vip Lounge.
<br><br>
</p>
<div class="c-form c-form--parkings">
<div class="c-form__el c-form__el--icon">
<svg class="c-icon c-icon--32">
<use xlink:href="#entrata-parcheggio-24px"></use>
</svg>
</div>
<div class="c-form__el c-form__el--cal">
<label for="entrance-date" class="is-datepicker" aria-label="Scegli la data">
Entrata <span class="required-marker" aria-hidden="true">*</span>
<input id="entrance-date" type="date" class="" placeholder="Scegli la data" value="" aria-describedby="entrance-date-note">
<p class="c-field__note " id="entrance-date-note">
Seleziona la data di entrata al parcheggio
</p>
</label>
</div>
<div class="c-form__el c-form__el--sel">
<label for="entrance-time" class="" aria-label="">
Ore <span class="required-marker" aria-hidden="true">*</span>
<select id="entrance-time" class="" aria-describedby="entrance-time-note">
<option value="" disabled selected>00:00</option>
<option value="option-1">20:00</option>
<option value="option-2">20:15</option>
<option value="option-3">20:30</option>
<option value="option-4">20:45</option>
</select>
<em class="c-field__note " id="entrance-time-note">
Seleziona l'ora di ingresso al parcheggio
</em>
</label>
</div>
<div class="c-form__el c-form__el--icon">
<svg class="c-icon c-icon--32">
<use xlink:href="#uscita-parcheggio-24px"></use>
</svg>
</div>
<div class="c-form__el c-form__el--cal">
<label for="exit-date" class="is-datepicker" aria-label="Scegli la data">
Uscita <span class="required-marker" aria-hidden="true">*</span>
<input id="exit-date" type="date" class="" placeholder="Scegli la data" value="" aria-describedby="exit-date-note">
<p class="c-field__note " id="exit-date-note">
Seleziona la data di uscita dal parcheggio
</p>
</label>
</div>
<div class="c-form__el c-form__el--sel">
<label for="exit-time" class="" aria-label="">
Ore <span class="required-marker" aria-hidden="true">*</span>
<select id="exit-time" class="" aria-describedby="exit-time-note">
<option value="" disabled selected>00:00</option>
<option value="option-1">20:00</option>
<option value="option-2">20:15</option>
<option value="option-3">20:30</option>
<option value="option-4">20:45</option>
</select>
<em class="c-field__note " id="exit-time-note">
Seleziona l'ora di uscita dal parcheggio
</em>
</label>
</div>
<div class="c-form__el c-form__el--cal">
<label for="select-conventions" class="" aria-label="">
Convenzione:
<select id="select-conventions" class="" aria-describedby="select-conventions-note">
<option value="" disabled selected>Hai una convenzione?</option>
<option value="option-1">Alba Tour</option>
<option value="option-2">Alpitour</option>
<option value="option-3">Brixia Viaggi</option>
<option value="option-4">Club Med</option>
<option value="option-5">Domina Travel</option>
<option value="option-6">In Viaggi</option>
<option value="option-7">Marsupio Group</option>
<option value="option-8">Smeg S.p.A.</option>
<option value="option-9">Viaggi Idea</option>
</select>
<em class="c-field__note " id="select-conventions-note">
Seleziona un'opzione dal menù a tendina
</em>
</label>
</div>
<div class="c-form__el c-form__el--sel">
<label for="file-number" class="" aria-label="">
Numero pratica
<input id="file-number" type="text" class="" placeholder="es. AA46923757" value="" aria-describedby="file-number-note">
<p class="c-field__note " id="file-number-note">
Inserisci il numero di pratica della convenzione
</p>
</label>
</div>
<p class="c-dialog__text">
<strong>AVVISO IMPORTANTE</strong><br>
1) Per avvalersi della convenzione e della tariffa scontata, è indispensabile, al rientro dal viaggio, prima di pagare e di ritirare l'auto, consegnare il voucher del Tour Operator o mostrare la tessera di accreditamento alla cassa del <a href="#"><strong>Presidio Parcheggi</strong></a>.
<br><br>
2) La mancata o ritardata consegna del voucher o visione della tessera di accreditamento, ovvero dopo aver pagato la sosta alle casse automatiche o alle colonne di uscita, implica la perdita del diritto di avvalersi della tariffa scontata e l'applicazione della tariffa standard senza possibilità di rimborso.
<br><br>
<input type="checkbox" id="conventions-terms" name="accespt" class="u-visuallyhidden " role="group" aria-label="conventions-terms">
<label for="conventions-terms" class="terms-conditions">
<strong>Accetto le condizioni di utilizzo convenzione come sopra riportate</strong>
</label>
</p>
<div class="c-form__el c-form__el--cta">
<button type="submit" class="c-button c-button--submit">
Cerca parcheggio
</button>
</div>
</div>
<button type="button" class="c-dialog__close js-fr-dialogmodal-close" aria-label="Chiudi la modale">
<svg class="c-icon c-icon--32">
<use xlink:href="#ic_close_black_24px"></use>
</svg> </button>
</div>
</div>
</div>
<div class="o-spotlight o-spotlight--full">
<{{el}} class="c-booking-info {{ modifier }} o-booking-info">
<div class="c-booking-info__close-area">
<button class="c-booking-info__close-btn js-close-overlay" aria-label="close">
{{> @icon symbol="ic_close_black_24px" class="c-icon c-icon--24" }}
</button>
</div>
{{> @time-detail entrance }}
{{> @time-detail exit }}
{{> @time-detail--convenzioni convenzioni }}
<div class="c-form__note {{ form-note.class }}" id="{{ form-note.id }}">{{ form-note.text }}</div>
<div class="c-booking-info__button">
<button type="button" class="c-button c-button--adding js-fr-dialogmodal-open" aria-controls="dialog-parking-form" aria-label="Modifica data e ora di ingresso e uscita dal parcheggio">
Modifica
</button>
</div>
</{{el}}>
</div>
{{ render "@dialog--parking-form" parking-form-dialog merge=true }}
{
"el": "form",
"entrance": {
"time-detail-icon": {
"symbol": "entrata-parcheggio-24px",
"class": "c-icon"
},
"datetime-label": "Entrata",
"datetime-day": "10",
"datetime-month": "04",
"datetime-year": "2018",
"time-label": "Ore",
"time-text": "16:30",
"date-time-desktop": {
"label_id": "entrance-date-time-desktop",
"label_message": "Entrata (data e ora)",
"label_class": "flatpickr-label",
"screen-reader-text": "Scegli data e ora",
"atom-input": {
"id": "entrance-date-time-desktop",
"type": "date",
"class": "js-flatpickr flatpickr-input",
"required": true,
"hasNote": true,
"describedby": "entrance-date-time-desktop-note",
"placeholder": "Scegli data e ora"
},
"note_id": "entrance-date-time-desktop-note",
"note_message": "Seleziona data e ora di entrata al parcheggio",
"note_class": "u-visuallyhidden"
},
"date-mobile": {
"label_id": "entrance-date-mobile",
"label_message": "Entrata",
"label_class": "",
"atom-input": {
"id": "entrance-date-mobile",
"type": "date",
"class": ""
}
},
"time-mobile": {
"label_id": "entrance-time-mobile",
"label_message": "Ore",
"label_class": "",
"atom-select": {
"id": "entrance-time-mobile",
"class": "",
"required": true,
"hasNote": true,
"describedby": "select-note",
"placeholder": "Orario",
"options": [
{
"value": "00:00",
"text": "00:00"
},
{
"value": "00:15",
"text": "00:15"
},
{
"value": "00:30",
"text": "00:30"
},
{
"value": "00:45",
"text": "00:45"
},
{
"value": "01:00",
"text": "01:00"
},
{
"value": "01:15",
"text": "01:15"
},
{
"value": "01:30",
"text": "01:30"
},
{
"value": "01:45",
"text": "01:45"
},
{
"value": "02:00",
"text": "02:00"
},
{
"value": "02:15",
"text": "02:15"
},
{
"value": "02:30",
"text": "02:30"
},
{
"value": "02:45",
"text": "02:45"
},
{
"value": "03:00",
"text": "03:00"
}
]
}
}
},
"form-note": {
"class": "is-negative u-visuallyhidden",
"text": "Inserisci una data e un orario di uscita successivi a quelli di entrata",
"id": "parking-form-note"
},
"exit": {
"time-detail-icon": {
"symbol": "uscita-parcheggio-24px",
"class": "c-icon"
},
"datetime-label": "Uscita",
"datetime-day": "20",
"datetime-month": "04",
"datetime-year": "2018",
"time-label": "Ore",
"time-text": "20:30",
"date-time-desktop": {
"label_id": "exit-date-time-desktop",
"label_message": "Uscita (data e ora)",
"label_class": "flatpickr-label",
"screen-reader-text": "Scegli data e ora",
"atom-input": {
"id": "exit-date-time-desktop",
"type": "date",
"class": "js-flatpickr flatpickr-input",
"required": true,
"hasNote": true,
"describedby": "exit-date-time-desktop-note",
"placeholder": "Scegli data e ora"
},
"note_id": "exit-date-time-desktop-note",
"note_message": "Seleziona data e ora di uscita dal parcheggio",
"note_class": "u-visuallyhidden"
},
"date-mobile": {
"label_id": "exit-date-mobile",
"label_message": "Uscita",
"label_class": "",
"atom-input": {
"id": "exit-date-mobile",
"type": "date",
"class": ""
}
},
"time-mobile": {
"label_id": "exit-time-mobile",
"label_message": "Ore",
"label_class": "",
"atom-select": {
"id": "exit-time-mobile",
"class": "",
"required": true,
"hasNote": true,
"describedby": "select-note",
"placeholder": "Orario",
"options": [
{
"value": "00:00",
"text": "00:00"
},
{
"value": "00:15",
"text": "00:15"
},
{
"value": "00:30",
"text": "00:30"
},
{
"value": "00:45",
"text": "00:45"
},
{
"value": "01:00",
"text": "01:00"
},
{
"value": "01:15",
"text": "01:15"
},
{
"value": "01:30",
"text": "01:30"
},
{
"value": "01:45",
"text": "01:45"
},
{
"value": "02:00",
"text": "02:00"
},
{
"value": "02:15",
"text": "02:15"
},
{
"value": "02:30",
"text": "02:30"
},
{
"value": "02:45",
"text": "02:45"
},
{
"value": "03:00",
"text": "03:00"
}
]
}
}
},
"convenzioni": {
"select-conventions": {
"label_id": "select-conventions",
"label_message": "Convenzione:",
"label_class": "",
"atom-select": {
"id": "select-conventions-inline",
"class": "",
"required": false,
"hasNote": true,
"describedby": "select-conventions-note",
"placeholder": "Scegli la convenzione",
"options": [
{
"value": "option-1",
"text": "Alba Tour"
},
{
"value": "option-2",
"text": "Alpitour",
"selected": true
},
{
"value": "option-3",
"text": "Brixia Viaggi"
},
{
"value": "option-4",
"text": "Club Med"
},
{
"value": "option-5",
"text": "Domina Travel"
},
{
"value": "option-6",
"text": "In Viaggi"
},
{
"value": "option-7",
"text": "Marsupio Group"
},
{
"value": "option-8",
"text": "Smeg S.p.A."
},
{
"value": "option-9",
"text": "Viaggi Idea"
}
]
},
"note_id": "select-conventions-note",
"note_message": "Seleziona un'opzione dal menù a tendina",
"note_class": "u-visuallyhidden"
}
}
}
.c-booking-info {
background-color: primary(sky, 20);
display: flex;
flex-wrap: wrap;
@include min-screen( $booking-info-breakpoint ) {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
}
.c-parkings & {
margin-bottom: remify(32px);
border-radius: remify(4px);
margin-top: remify(-16px);
}
}
.c-booking-info__button {
text-align: center;
width: 100%;
margin-top: remify(16px);
@include min-screen( $booking-info-second-breakpoint ) {
width: auto;
margin-top: 0;
}
}
.js-booking-info-btn-confirm {
display: none;
}
.c-booking-info__close-btn {
display: none;
height: 24px;
border: none;
background: transparent;
position: absolute;
top: -30px;
right: 16px;
display: none;
padding: 0;
svg * {
fill: #fff;
}
.o-spotlight.is-active & {
display: block;
}
}
.c-booking-info__close-area {
max-width: remify(900px);
width: 100%;
margin: 0 auto;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.c-booking-info dl {
@include font-scale(level-2);
color: secondary(text, 100);
}
.c-booking-info dt {
font-weight: fw(bold);
}
.c-booking-info dd {
margin-top: remify(4px);
}
/*------------------------------------*\
Modifier: Fullbleed
\*------------------------------------*/
.c-booking-info--fullbleed {
padding: remify(16px) 0;
justify-content: center;
}
/*------------------------------------*
Modifier: Flights
*------------------------------------*/
.c-booking-info--flights {
display: block;
padding: remify(24px) remify(16px);
.c-booking-info__inner {
max-width: remify($base-page-width);
margin-inline: auto;
color: secondary(text, 100);
}
.round-trip {
display: flex;
gap: remify(16px);
border-inline: remify(1px) solid primary(night, 40);
padding-inline: remify(16px);
& > * {
flex: auto;
}
}
}
(function($){
'use strict';
if(!$.tangible){
$.tangible = new Object();
};
$.tangible.bookingInfo = function(el, options){
var base = this;
base.$el = $(el);
base.el = el;
base.init = function(){
base.$mainForm = $('.c-booking-info');
base.$inputs = $('.c-booking-info input, .c-booking-info select');
base.$inputsArray = $('.c-booking-info input').toArray();
base.$buttonEdit = $('.c-booking-info .js-booking-info-btn-edit');
base.$buttonConfirm = $('.c-booking-info .js-booking-info-btn-confirm');
base.$overlay = $('.o-spotlight__element');
base.$closeOverlayBtn = $('.js-close-overlay');
base.addsReadonly();
base.$buttonEdit.click(function(e){
e.preventDefault();
base.removesReadonly();
base.setFocusOnFirstInput();
base.changeButton( $(this) );
base.addsOverlay();
});
base.$closeOverlayBtn.click(function(e){
e.preventDefault();
base.removesOverlay( $(this) );
base.addsReadonly();
base.$buttonConfirm.hide();
base.$buttonEdit.show();
});
};
// Adds overlay
base.addsOverlay = function() {
base.$overlay.addClass('o-spotlight__element--overlay');
base.$overlay.parent('.o-spotlight').addClass('is-active');
base.$closeOverlayBtn.show();
}
// Removes overlay
base.removesOverlay = function(elem) {
base.$overlay.removeClass('o-spotlight__element--overlay');
base.$overlay.closest('.o-spotlight').removeClass('is-active');
elem.hide();
}
// Adds readonly
base.addsReadonly = function() {
base.$inputs.prop('readonly', true);
base.$inputs.prop('disabled', true);
base.$inputs.parent().addClass("is-readonly");
}
// Removes readonly
base.removesReadonly = function() {
base.$inputs.prop('readonly', false);
base.$inputs.prop('disabled', false);
base.$inputs.parent().removeClass("is-readonly");
}
// Set focus on first input
base.setFocusOnFirstInput = function() {
base.$inputsArray[0].focus();
}
base.changeButton = function(el) {
el.hide();
base.$buttonConfirm.show();
}
base.init();
};
$.fn.tangible_bookingInfo = function(options){
return this.each(function(){
(new $.tangible.bookingInfo(this, options));
});
};
})(jQuery);
No notes defined.