1<#assign sectionClass = 'mapSlider' />
2<#if getterUtil.getBoolean(reverseDisplay.getData())>
3 <#assign sectionClass += ' mapSlider--reverse' />
4</#if>
5<#if getterUtil.getBoolean(noMapOverflow.getData())>
6 <#assign sectionClass += ' mapSlider--noMapOverflow' />
7</#if>
8
9<!-- begin sections/mapSlider -->
10<section class="${sectionClass}" <#if dataSideNavSectionAttrValue.getData()?has_content> data-side-nav-section="${dataSideNavSectionAttrValue.getData()}" </#if>>
11 <div class="mapSlider__inner wrapper" data-map-slider>
12 <div class="mapSlider__info">
13 <div class="mapSlider__sliderWrapper">
14
15 <#if (title.getData())?has_content>
16
17 <!-- begin components/heading -->
18 <div class="heading mapSlider__title">
19 <h2 class="heading__title" data-lfr-editable-id="map-slider-title" data-lfr-editable-type="text">${title.getData()}</h2>
20 </div>
21 <!-- end components/heading -->
22
23 </#if>
24
25 <div class="mapSlider__slider swiper" data-map-slider-slider>
26 <div class="mapSlider__items swiper-wrapper">
27
28 <#if mapSliderItems?? && mapSliderItems.getSiblings()?has_content>
29 <#list mapSliderItems.getSiblings() as mapSliderItem>
30
31 <div class="mapSlider__item swiper-slide" <#if mapSliderItem?index == 0>data-map-slider-slide-type="current"</#if>>
32 <!-- begin components/heading -->
33 <div class="heading mapSlider__itemHeading">
34
35 <#if (mapSliderItem.subtitle.getData())?has_content>
36 <h3 class="heading__subtitle">${mapSliderItem.subtitle.getData()}</h3>
37 </#if>
38
39 <#if (mapSliderItem.text.getData())?has_content>
40 <p class="heading__text">${mapSliderItem.text.getData()}</p>
41 </#if>
42
43 <#if (mapSliderItem.button.label.getData())?has_content>
44 <!-- begin components/button -->
45 <a href="${mapSliderItem.button.url.getData()}" class="button button--gold heading__button heading__button--desktop" data-wave-button>
46 <span class="button__text">${mapSliderItem.button.label.getData()}</span>
47 </a>
48 <!-- end components/button -->
49 <!-- begin components/moreButton -->
50 <a href="${mapSliderItem.button.url.getData()}" class="moreButton moreButton--gold heading__button heading__button--mobile">
51 <span class="moreButton__text">${mapSliderItem.button.label.getData()}</span>
52 </a>
53 <!-- end components/moreButton -->
54 </#if>
55
56 </div>
57 <!-- end components/heading -->
58 </div>
59
60 </#list>
61 </#if>
62
63 </div>
64
65 <!-- begin components/sliderNav -->
66 <div class="sliderNav mapSlider__nav" data-map-slider-nav data-slider-nav>
67 <!-- begin components/arrowButton -->
68 <button class="arrowButton arrowButton--prev arrowButton--default sliderNav__arrow sliderNav__arrow--prev" data-slider-nav-prev>
69 <span class="arrowButton__arrow"></span>
70 </button>
71 <!-- end components/arrowButton -->
72
73 <!-- begin components/arrowButton -->
74 <button class="arrowButton arrowButton--next arrowButton--default sliderNav__arrow sliderNav__arrow--next" data-slider-nav-next>
75 <span class="arrowButton__arrow"></span>
76 </button>
77 <!-- end components/arrowButton -->
78 </div>
79 <!-- end components/sliderNav -->
80 </div>
81 </div>
82 </div>
83 <!-- begin components/geoMap -->
84 <div class="geoMap mapSlider__map" data-geo-map data-map-slider-map>
85 <#assign geoMapMarkers = [] />
86 <#if mapSliderItems?? && mapSliderItems.getSiblings()?has_content>
87 <#list mapSliderItems.getSiblings() as mapSliderItem>
88 <#if (mapSliderItem.pin.image.getData())?? && mapSliderItem.pin.image.getData()?has_content && mapSliderItem.pin.lat.getData()?has_content && mapSliderItem.pin.lon.getData()?has_content>
89 <#assign geoMapMarkerJson =
90 {
91 "lat": journalArticleTool.convertARNumsToEN(mapSliderItem.pin.lat.getData())?number,
92 "lng": journalArticleTool.convertARNumsToEN(mapSliderItem.pin.lon.getData())?number,
93 "data": {
94 "logo": mapSliderItem.pin.image.getData()
95 }
96 }
97 >
98 <#assign geoMapMarkers += [htmlUtil.escapeAttribute(jsonFactoryUtil.looseSerializeDeep(geoMapMarkerJson))] />
99 </#if>
100 </#list>
101 </#if>
102 <#if (mapImage.getData())?? && mapImage.getData()?has_content && mapTopLeftBounds.getData()?has_content && mapBottomRightBounds.getData()?has_content>
103 <#assign geoMapImage =
104 {
105 "url": mapImage.getData(),
106 "bounds": [
107 mapTopLeftBounds.getData()?split(","),
108 mapBottomRightBounds.getData()?split(",")
109 ]
110 }
111 >
112 <#assign geoMapBounds =
113 [
114 mapTopLeftBounds.getData()?split(","),
115 mapBottomRightBounds.getData()?split(",")
116 ]
117 >
118 <div class="geoMap__map" data-geo-map-map
119 data-geo-map-image="${htmlUtil.escapeAttribute(jsonFactoryUtil.looseSerializeDeep(geoMapImage))}"
120 data-geo-map-markers="[${geoMapMarkers?join(",")}]"
121 data-geo-map-bounds="${htmlUtil.escapeAttribute(jsonFactoryUtil.looseSerializeDeep(geoMapBounds))}"
122 >
123 </div>
124 <script type="text/template" data-geo-map-marker-tpl>
125 <button class="geoMap__pin">
126 <#if (pinShape.getData())?? && pinShape.getData()?has_content>
127 <img class="geoMap__pinShape" src="${pinShape.getData()}" alt="<#if pinShape.getAttribute("alt")?has_content>${pinShape.getAttribute("alt")}<#else>pin shape</#if>" />
128 </#if>
129 <div class="geoMap__pinContent">
130 <div class="geoMap__pinImage">
131 <img class="geoMap__pinImg" src="{{logo}}" alt="logo" />
132 </div>
133 </div>
134 </button>
135 </script>
136 </#if>
137 </div>
138 <!-- end components/geoMap -->
139 </div>
140</section>
141<!-- end sections/mapSlider -->
