<div class="c-time-switcher ">
<ul>
<li class="">
<a href="javascript:void(0)" class="show-section1">00:00 - 9:00</a>
</li>
<li class="">
<a href="javascript:void(0)" class="show-section2">9:00 - 12:00</a>
</li>
<li class="is-active">
<a href="javascript:void(0)" class="show-section3">12:00 - 16:00</a>
</li>
<li class="">
<a href="javascript:void(0)" class="show-section4">16:00 - 19:00</a>
</li>
<li class="">
<a href="javascript:void(0)" class="show-section5">19:00 - 24:00</a>
</li>
</ul>
</div>
<div class="c-time-switcher {{ modifier }}">
<ul>
{{#each items}}
<li class="{{ this.class }}">
<a href="javascript:void(0)" class="{{ this.link-class }}">{{ this.content }}</a>
</li>
{{/each}}
</ul>
</div>
{
"items": [
{
"content": "00:00 - 9:00",
"link-class": "show-section1"
},
{
"content": "9:00 - 12:00",
"link-class": "show-section2"
},
{
"class": "is-active",
"content": "12:00 - 16:00",
"link-class": "show-section3"
},
{
"content": "16:00 - 19:00",
"link-class": "show-section4"
},
{
"content": "19:00 - 24:00",
"link-class": "show-section5"
}
]
}
.c-time-switcher {
background-color: secondary(page, 100);
ul {
padding: remify(16px) 0;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
scroll-snap-type: mandatory;
scroll-snap-destination: 0% 50%;
scroll-snap-points-x: repeat(50%);
@include min-screen(bp(phablet)) {
justify-content: center;
}
@include min-screen(bp(tablet-p)) {
overflow-x: visible;
position: relative;
}
li {
scroll-snap-align: center;
flex: 0 0 auto;
@include shadow(small);
margin-right: remify(16px);
&:last-child {
margin-right: 0;
}
}
a {
display: block;
background-color: #fff;
padding: remify(8px) remify(16px);
border-radius: remify(4px);
text-decoration: none;
position: relative;
color: secondary(text, 100);
}
li.is-active {
a {
background-color: primary(night, 100);
color: #fff;
font-weight: fw(bold);
&:before {
content: "";
position: absolute;
@include css-triangle("up", 8px, primary(night, 100));
top: remify(-16px);
left: 50%;
transform: translateX(-50%);
}
}
}
}
}
.c-time-switcher--flights-times {
margin-top: remify(-16px);
grid-column: full;
padding-top: remify(12px);
@include min-screen(bp(tablet)) {
grid-column: main;
padding-top: 0;
}
}
(function($){
'use strict';
if(!$.tangible){
$.tangible = new Object();
};
$.tangible.timeSwitcher = function(el, options){
var base = this;
base.$el = $(el);
base.el = el;
base.init = function(){
base.$btnPax = $('.js-toggleFlightsPax');
// Get viewport width
base.$windowW = $( window ).width();
// Get x coordinate of active element
base.$xPos = $( ".c-time-switcher li.is-active" ).offset().left;
// Get width of active element
base.$activeLi = $( ".c-time-switcher li.is-active" ).width();
// Set scroll position to the center of active element
$( ".c-time-switcher ul" ).scrollLeft( base.$xPos - (base.$windowW/2) + (base.$activeLi/2) );
};
base.init();
};
$.fn.tangible_timeSwitcher = function(options){
return this.each(function(){
(new $.tangible.timeSwitcher(this, options));
});
};
})(jQuery);
No notes defined.