1<#if serviceLocator??>
2 <#assign journalArticleService=serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService") />
3
4 <#if sliderBackground?? && (sliderBackground.getData())?? && sliderBackground.getOptionsMap()[sliderBackground.getData()]??>
5 <#assign sliderBackgroundValue = sliderBackground.getOptionsMap()[sliderBackground.getData()] />
6 </#if>
7
8 <#if sliderBackgroundValue?? && "darkblue" == sliderBackgroundValue>
9 <#assign headingColor = "white" />
10 </#if>
11
12 <#assign headingSize = "medium" />
13 <#if getterUtil.getBoolean(largeTitle.getData())>
14 <#assign headingSize = "large" />
15 </#if>
16
17 <!-- begin sections/textImageSliderTabs -->
18 <section class="textImageSliderTabs<#if sliderBackgroundValue??> textImageSliderTabs--${sliderBackgroundValue}</#if>">
19 <div class="textImageSliderTabs__inner wrapper" data-text-image-slider-tabs>
20 <div class="textImageSliderTabs__head">
21 <!-- begin components/heading -->
22 <div class="heading heading--${headingSize} textImageSliderTabs__title<#if headingColor??> heading--${headingColor}</#if>">
23 <#if (sliderTitle.getData())??>
24 <h3 class="heading__subtitle">${sliderTitle.getData()}</h3>
25 </#if>
26 </div>
27
28 <!-- end components/heading -->
29
30 <div class="textImageSliderTabs__tabSlider swiper" data-map-tabs-slider>
31 <div class="textImageSliderTabs__tabs swiper-wrapper" data-text-image-slider-tabs-tabs data-map-tabs-slider-slider>
32 <#if textImageSliderTabItem.getSiblings()?has_content>
33 <#list textImageSliderTabItem.getSiblings() as cur_textImageSliderTabItem>
34 <#assign sliderTabData = jsonFactoryUtil.createJSONObject(cur_textImageSliderTabItem.getData()) />
35
36 <#if sliderTabData?? && sliderTabData.classPK??>
37 <@getTabButton sliderTabData.classPK?number cur_textImageSliderTabItem?index cur_textImageSliderTabItem?is_last/>
38 </#if>
39 </#list>
40 </#if>
41 </div>
42 </div>
43
44 <div class="textImageSliderTabs__selectWrapper">
45
46 <!-- begin components/select -->
47 <div class="select select--noLabel textImageSliderTabs__select" data-input-label="select--filled"
48 data-custom-select data-custom-select-theme="noLabel">
49 <select id="tabs-select" name="tabs-select" class="select__select" data-input-label-input
50 data-custom-select-input name="tabs-select" required data-text-image-slider-tabs-select>
51 <option value="" class="select__option" disabled="disabled" data-empty="1"></option>
52 <#if textImageSliderTabItem.getSiblings()?has_content>
53 <#list textImageSliderTabItem.getSiblings() as cur_textImageSliderTabItem>
54 <#assign sliderTabData = jsonFactoryUtil.createJSONObject(cur_textImageSliderTabItem.getData()) />
55
56 <#if sliderTabData?? && sliderTabData.classPK??>
57 <@getSelectOption sliderTabData.classPK?number cur_textImageSliderTabItem?index/>
58 </#if>
59 </#list>
60 </#if>
61 </select>
62 <span class="input__error"></span>
63 </div>
64
65 <!-- end components/select -->
66 </div>
67 </div>
68
69 <div class="textImageSliderTabs__content">
70 <div class="textImageSliderTabs__info">
71 <div class="textImageSliderTabs__textSlider swiper" data-text-image-slider-tabs-slider>
72 <div class="textImageSliderTabs__textItems swiper-wrapper">
73 <#if textImageSliderTabItem.getSiblings()?has_content>
74 <#list textImageSliderTabItem.getSiblings() as cur_textImageSliderTabItem>
75 <#assign sliderTabData = jsonFactoryUtil.createJSONObject(cur_textImageSliderTabItem.getData()) />
76
77 <#if sliderTabData?? && sliderTabData.classPK??>
78 <@getSliderItem sliderTabData.classPK?number cur_textImageSliderTabItem?index/>
79 </#if>
80 </#list>
81 </#if>
82 </div>
83 </div>
84
85 <!-- begin components/sliderNav -->
86 <div class="sliderNav sliderNav--gold textImageSliderTabs__nav textImageSliderTabs__nav--desktop"
87 data-text-image-slider-tabs-nav data-slider-nav>
88
89 <!-- begin components/arrowButton -->
90 <button
91 class="arrowButton arrowButton--prev arrowButton--gold sliderNav__arrow sliderNav__arrow--prev"
92 data-slider-nav-prev>
93 <span class="arrowButton__arrow"></span>
94 </button>
95
96 <!-- end components/arrowButton -->
97
98 <!-- begin components/arrowButton -->
99 <button
100 class="arrowButton arrowButton--next arrowButton--gold sliderNav__arrow sliderNav__arrow--next"
101 data-slider-nav-next>
102 <span class="arrowButton__arrow"></span>
103 </button>
104
105 <!-- end components/arrowButton -->
106 </div>
107
108 <!-- end components/sliderNav -->
109 </div>
110
111 <div class="textImageSliderTabs__sliderWrapper">
112 <div class="textImageSliderTabs__slider swiper" data-text-image-slider-tabs-image-slider>
113 <div class="textImageSliderTabs__items swiper-wrapper">
114 <#if textImageSliderTabItem.getSiblings()?has_content>
115 <#list textImageSliderTabItem.getSiblings() as cur_textImageSliderTabItem>
116 <#assign sliderTabData = jsonFactoryUtil.createJSONObject(cur_textImageSliderTabItem.getData()) />
117
118 <#if sliderTabData?? && sliderTabData.classPK??>
119 <@getImage sliderTabData.classPK?number cur_textImageSliderTabItem?index/>
120 </#if>
121 </#list>
122 </#if>
123 </div>
124 </div>
125 </div>
126
127 <!-- begin components/sliderNav -->
128 <div class="sliderNav sliderNav--gold textImageSliderTabs__nav textImageSliderTabs__nav--mobile"
129 data-text-image-slider-tabs-nav-mobile data-slider-nav>
130
131 <!-- begin components/arrowButton -->
132 <button
133 class="arrowButton arrowButton--prev arrowButton--gold sliderNav__arrow sliderNav__arrow--prev"
134 data-slider-nav-prev>
135 <span class="arrowButton__arrow"></span>
136 </button>
137
138 <!-- end components/arrowButton -->
139
140 <!-- begin components/arrowButton -->
141 <button
142 class="arrowButton arrowButton--next arrowButton--gold sliderNav__arrow sliderNav__arrow--next"
143 data-slider-nav-next>
144 <span class="arrowButton__arrow"></span>
145 </button>
146
147 <!-- end components/arrowButton -->
148 </div>
149
150 <!-- end components/sliderNav -->
151 </div></div>
152 </section>
153
154 <#macro getImage classPK index>
155 <#assign journalArticle = journalArticleService.getLatestArticle(classPK) />
156 <#assign document = saxReaderUtil.read(journalArticle.getContentByLocale(locale.toString())) />
157 <#assign rootElement = document.getRootElement()>
158 <#assign imageXPathSelector = saxReaderUtil.createXPath("dynamic-element[@field-reference='image']")>
159
160 <#local image = "">
161
162 <#if imageXPathSelector?? && imageXPathSelector.selectSingleNode(rootElement)??>
163 <#local image = imageXPathSelector.selectSingleNode(rootElement).getStringValue()?trim>
164 </#if>
165
166 <#if image?has_content>
167 <#attempt >
168 <#local imgJson = jsonFactoryUtil.createJSONObject(image)>
169 <#recover >
170 <#local imgJson = ''>
171 </#attempt>
172 </#if>
173 <div class="textImageSliderTabs__item swiper-slide"
174 <#if index==0>
175 data-text-image-slider-tabs-slide-type="current"
176 </#if>
177 >
178 <div class="textImageSliderTabs__itemImage">
179 <#if (imgJson.url)?has_content>
180 <img
181 class="textImageSliderTabs__itemImg"
182 data-fileentryid="${imgJson.fileEntryId}"
183 src="${imgJson.url}"
184 alt="${imgJson.alt}"
185 loading="lazy" />
186 </#if>
187 </div>
188 </div>
189 </#macro>
190
191 <#macro getTabButton classPK index last>
192 <#assign journalArticle = journalArticleService.getLatestArticle(classPK) />
193 <#assign document = saxReaderUtil.read(journalArticle.getContentByLocale(locale.toString())) />
194 <#assign rootElement = document.getRootElement() />
195
196 <#assign titleXPathSelector = saxReaderUtil.createXPath("dynamic-element[@field-reference='tabTitle']") />
197 <#assign title = titleXPathSelector.selectSingleNode(rootElement).getStringValue() />
198
199 <#if index == 0>
200 <button class="textImageSliderTabs__tab textImageSliderTabs__tab--active swiper-slide<#if last> textImageSliderTabs__tab--margin</#if>"
201 data-text-image-slider-tabs-tab="${index}">${title}
202 </button>
203 <#else>
204 <button class="textImageSliderTabs__tab swiper-slide<#if last> textImageSliderTabs__tab--margin</#if>" data-text-image-slider-tabs-tab="${index}">${title}
205 </button>
206 </#if>
207 </#macro>
208
209 <#macro getSelectOption classPK index>
210 <#assign journalArticle = journalArticleService.getLatestArticle(classPK) />
211 <#assign document = saxReaderUtil.read(journalArticle.getContentByLocale(locale.toString())) />
212 <#assign rootElement = document.getRootElement() />
213
214 <#assign titleXPathSelector = saxReaderUtil.createXPath("dynamic-element[@field-reference='tabTitle']") />
215 <#assign title = titleXPathSelector.selectSingleNode(rootElement).getStringValue() />
216
217 <#if index == 0>
218 <option value="${index}" class="select__option" selected="selected">${title}</option>
219 <#else>
220 <option value="${index}" class="select__option">${title}</option>
221 </#if>
222 </#macro>
223
224 <#macro getSliderItem classPK index>
225 <#assign journalArticle = journalArticleService.getLatestArticle(classPK) />
226 <#assign document = saxReaderUtil.read(journalArticle.getContentByLocale(locale.toString())) />
227 <#assign rootElement = document.getRootElement() />
228
229 <#assign titleXPathSelector = saxReaderUtil.createXPath("dynamic-element[@field-reference='tabTitle']") />
230 <#assign title = titleXPathSelector.selectSingleNode(rootElement).getStringValue() />
231
232 <#assign descriptionXPathSelector = saxReaderUtil.createXPath("dynamic-element[@field-reference='tabDescription']") />
233 <#assign descriptionList = descriptionXPathSelector.selectNodes(rootElement) />
234
235 <#assign ctaXPathSelector = saxReaderUtil.createXPath("dynamic-element[@field-reference='cta']") />
236 <#assign ctaURLXPathSelector = saxReaderUtil.createXPath("dynamic-element[@field-reference='ctaURL']") />
237 <#assign ctaNode = ctaXPathSelector.selectSingleNode(rootElement) />
238 <#assign ctaUrl = ctaURLXPathSelector.selectSingleNode(ctaNode).getStringValue() />
239
240 <#assign ctaLabelXPathSelector = saxReaderUtil.createXPath("dynamic-element[@field-reference='ctaLabel']") />
241 <#assign ctaNode = ctaXPathSelector.selectSingleNode(rootElement) />
242 <#assign ctaLabel = ctaLabelXPathSelector.selectSingleNode(ctaNode).getStringValue() />
243
244 <#assign sameCTALookOnMobileAndDesktopXPathSelector = saxReaderUtil.createXPath("dynamic-element[@field-reference='sameCTALookOnMobileAndDesktop']") />
245 <#assign ctaNode = ctaXPathSelector.selectSingleNode(rootElement) />
246 <#assign sameCTALookOnMobileAndDesktop = sameCTALookOnMobileAndDesktopXPathSelector.selectSingleNode(ctaNode).getStringValue() />
247
248 <div class="textImageSliderTabs__textItem swiper-slide"
249 <#if index == 0>
250 data-text-image-slider-tabs-slide-type="current"
251 </#if>
252 >
253 <!-- begin components/heading -->
254
255 <#if (descriptionList?size > 1)>
256 <div class="textImageSliderTabs__contentInner">
257 <ul>
258 <#list descriptionList as cur_tabDescription>
259 <li>${cur_tabDescription.getStringValue()}</li>
260 </#list>
261 </ul>
262 <@getButton ctaLabel ctaUrl sameCTALookOnMobileAndDesktop, "textImageSliderTabs__button" />
263 </div>
264 <#elseif (descriptionList?size == 1)>
265 <div class="heading textImageSliderTabs__heading">
266 <#if (title)?has_content>
267 <h3 class="heading__subtitle">${title}</h3>
268 </#if>
269 <p class="heading__text">${descriptionList[0].getStringValue()}</p>
270 <@getButton ctaLabel ctaUrl sameCTALookOnMobileAndDesktop, "heading__button" />
271 </div>
272 </#if>
273
274 <!-- end components/heading -->
275 </div>
276 </#macro>
277
278 <#macro getButton ctaLabel ctaUrl sameCTALookOnMobileAndDesktop class>
279 <#if ctaLabel?trim?has_content && ctaUrl?trim?has_content>
280 <#if ctaLabel??><#assign dataGAProps = "{"button_name":"${ctaLabel}","></#if>
281 <#if ctaURL??><#assign dataGAProps += ""page_destination":"${ctaURL}", "></#if>
282 <#assign dataGAProps += ""language":"${themeDisplay.getLocale().getDisplayLanguage()}"}">
283 <#if sameCTALookOnMobileAndDesktop?has_content && sameCTALookOnMobileAndDesktop?trim == "true">
284 <a href="${ctaUrl}"
285 class="button button--gold ${class}" data-wave-button data-ga="button_click" data-ga-props="${dataGAProps}">
286 <span class="button__text">${ctaLabel}</span>
287 </a>
288 <#else>
289 <!-- begin components/button -->
290 <a href="${ctaUrl}"
291 class="button button--gold ${class} heading__button--desktop"
292 data-wave-button data-ga="button_click" data-ga-props="${dataGAProps}">
293 <span class="button__text">${ctaLabel}</span>
294 </a>
295
296 <!-- end components/button -->
297
298 <!-- begin components/moreButton -->
299 <a href="${ctaUrl}"
300 class="moreButton moreButton--gold ${class} heading__button--mobile" data-ga="button_click" data-ga-props="${dataGAProps}">
301 <span class="moreButton__text">${ctaLabel}</span>
302 </a>
303
304 <!-- end components/moreButton -->
305 </#if>
306 </#if>
307 </#macro>
308</#if>
1
التقديم على الوظائف المعلنة من شركة "البحر الأحمر الدولية" وشركاتها التابعة.
اكتساب المهارات والثقة للتعامل مع زوار المملكة الدوليين
