<div class="supt-map-infos -no-icon">
<div class="supt-map-infos__wrapper">
<a href="https://" target="_blank" class="supt-map-infos__inner">
<span class="supt-map-infos__icon">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M14 12V2.31766C14 2.04152 13.7761 1.81766 13.5 1.81766H3.81766" stroke-linecap="round" vector-effect="non-scaling-stroke" />
<path d="M2 14L13 3" stroke-linecap="round" vector-effect="non-scaling-stroke" />
</svg>
</span>
<span class="supt-map-infos__content">
<span class="supt-map-infos__title">Genève</span>
<span class="supt-map-infos__link"></span>
</span>
</a>
</div>
</div>
No notes defined.
<div class="supt-map-infos {{ modifiers|modifiersAttr }}">
<div class="supt-map-infos__wrapper">
<a href="https://{{ href }}" target="_blank" class="supt-map-infos__inner">
<span class="supt-map-infos__icon">
{% include '02-icons/external-link-icon.twig' %}
</span>
<span class="supt-map-infos__content">
<span class="supt-map-infos__title">{{ title }}</span>
<span class="supt-map-infos__link">{{ href }}</span>
</span>
</a>
</div>
</div>
{
"modifiers": [
"no-icon"
],
"title": "Genève"
}
import { animate } from "animejs";
export class MapInfos {
isVisible: boolean;
$wrapper: HTMLElement;
$inner: HTMLElement;
$title: HTMLElement;
$link: HTMLElement;
constructor(private $element: HTMLElement) {
this.$element = $element;
this.isVisible = false;
this.$wrapper = $element.querySelector('.supt-map-infos__wrapper') as HTMLElement;
this.$inner = $element.querySelector('.supt-map-infos__inner') as HTMLElement;
this.$title = $element.querySelector('.supt-map-infos__title') as HTMLElement;
this.$link = $element.querySelector('.supt-map-infos__link') as HTMLElement;
}
setContent(title: string, link: string) {
this.$title.textContent = title;
this.$link.setAttribute('href', `https://${link}`);
this.$link.textContent = link;
}
setPosition(x: number, y: number) {
this.$element.style.transform = `translate(${x}px, ${y - this.$element.offsetHeight}px)`;
}
show() {
this.isVisible = true;
animate(this.$element, {
opacity: 1,
duration: 200,
onBegin: () => {
this.$element.style.visibility = 'visible';
this.$wrapper.style.pointerEvents = 'auto';
},
});
animate(this.$inner, {
y: {
from: 20,
to: 0,
},
duration: 200,
});
}
hide() {
this.isVisible = false;
animate(this.$inner, {
y: 20,
duration: 100,
});
animate(this.$element, {
opacity: 0,
duration: 100,
onComplete: () => {
this.$wrapper.style.pointerEvents = 'none';
this.$element.style.visibility = 'hidden';
},
});
}
}
.supt-map-infos {
pointer-events: none;
will-change: transform;
&__wrapper {
@media (min-width: $breakpoint-md) {
padding-bottom: 35px;
}
}
&__inner {
position: relative;
padding: 10px $spacing-8 8px 10px;
display: flex;
gap: $spacing-4;
border-radius: 9999px;
background: $color-grey-background;
filter: drop-shadow(8px 8px 16px rgba(38, 38, 38, 0.16))
drop-shadow(-8px -8px 16px rgba(38, 38, 38, 0.16));
/* pointer-events: auto; */
&:hover,
&:focus-visible {
.supt-map-infos__icon {
box-shadow: none;
&::after {
opacity: 1;
}
}
.supt-map-infos__link {
color: $color-main;
}
}
&::after {
content: '';
position: absolute;
top: calc(100% - 3px);
left: calc(50% - 8px);
width: 16px;
height: 12px;
background-image: url("data:image/svg+xml,%3Csvg width='16' height='12' viewBox='0 0 16 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 4.00521e-07L8 12L-4.00521e-07 4.00521e-07H16Z' fill='%23F5F5F5'/%3E%3C/svg%3E%0A");
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
display: none;
@media (min-width: $breakpoint-md) {
display: block;
}
}
}
&__icon {
flex-shrink: 0;
width: 40px;
height: 40px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
background: $color-grey-background;
box-shadow:
inset -1px -1px 0px 0px $color-white,
inset -2px -2px 2px 0px $color-grey-2,
-1px -1px 0px 0px $color-white,
-2px -2px 2px 0px $color-grey-2;
border: 1px solid transparent;
transition: box-shadow $transition-fast;
@media (min-width: $breakpoint-md) {
width: 42px;
height: 42px;
}
@media (min-width: $breakpoint-lg) {
width: 44px;
height: 44px;
}
&::after {
content: '';
position: absolute;
inset: -3px 0 0 -3px;
border-radius: 9999px;
border: 1.5px solid $color-main;
opacity: 0;
transition: opacity $transition-fast;
}
svg {
width: 10px !important;
height: 10px !important;
color: $color-main;
margin: 0 2px 2px 0;
}
}
&__content {
display: flex;
flex-direction: column;
}
&__title {
@extend %t-body-s;
font-weight: 500;
}
&__link {
@extend %t-body-s;
color: $color-grey-5;
display: block;
transition: color $transition-fast;
}
&.-no-icon {
.supt-map-infos__icon {
display: none;
}
.supt-map-infos__inner {
@mixin clamp min-height, 44px, 62px, $breakpoint-xs, $breakpoint-xl;
padding: $spacing-3 $spacing-5;
@media (min-width: $breakpoint-md) {
padding: 10px $spacing-8 8px;
}
&::after {
display: block !important;
}
}
.supt-map-infos__content {
flex-direction: row;
align-items: center;
}
}
}