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<#if backgroundColorValue??> sliderNav--${backgroundColorValue}</#if> 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--<#if backgroundColorValue??>${backgroundColorValue}<#else>default</#if> 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--<#if backgroundColorValue??>${backgroundColorValue}<#else>default</#if> 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<#if backgroundColorValue??> sliderNav--${backgroundColorValue}</#if> 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--<#if backgroundColorValue??>${backgroundColorValue}<#else>default</#if> 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--<#if backgroundColorValue??>${backgroundColorValue}<#else>default</#if> 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 </#if>
186 </div>
187 </div>
188 </#macro>
189
190 <#macro getTabButton classPK index last>
191 <#assign journalArticle = journalArticleService.getLatestArticle(classPK) />
192 <#assign document = saxReaderUtil.read(journalArticle.getContentByLocale(locale.toString())) />
193 <#assign rootElement = document.getRootElement() />
194
195 <#assign titleXPathSelector = saxReaderUtil.createXPath("dynamic-element[@field-reference='tabTitle']") />
196 <#assign title = titleXPathSelector.selectSingleNode(rootElement).getStringValue() />
197
198 <#if index == 0>
199 <button class="textImageSliderTabs__tab textImageSliderTabs__tab--active swiper-slide<#if last> textImageSliderTabs__tab--margin</#if>"
200 data-text-image-slider-tabs-tab="${index}">${title}
201 </button>
202 <#else>
203 <button class="textImageSliderTabs__tab swiper-slide<#if last> textImageSliderTabs__tab--margin</#if>" data-text-image-slider-tabs-tab="${index}">${title}
204 </button>
205 </#if>
206 </#macro>
207
208 <#macro getSelectOption classPK index>
209 <#assign journalArticle = journalArticleService.getLatestArticle(classPK) />
210 <#assign document = saxReaderUtil.read(journalArticle.getContentByLocale(locale.toString())) />
211 <#assign rootElement = document.getRootElement() />
212
213 <#assign titleXPathSelector = saxReaderUtil.createXPath("dynamic-element[@field-reference='tabTitle']") />
214 <#assign title = titleXPathSelector.selectSingleNode(rootElement).getStringValue() />
215
216 <#if index == 0>
217 <option value="${index}" class="select__option" selected="selected">${title}</option>
218 <#else>
219 <option value="${index}" class="select__option">${title}</option>
220 </#if>
221 </#macro>
222
223 <#macro getSliderItem classPK index>
224 <#assign journalArticle = journalArticleService.getLatestArticle(classPK) />
225 <#assign document = saxReaderUtil.read(journalArticle.getContentByLocale(locale.toString())) />
226 <#assign rootElement = document.getRootElement() />
227
228 <#assign titleXPathSelector = saxReaderUtil.createXPath("dynamic-element[@field-reference='tabTitle']") />
229 <#assign title = titleXPathSelector.selectSingleNode(rootElement).getStringValue() />
230
231 <#assign descriptionXPathSelector = saxReaderUtil.createXPath("dynamic-element[@field-reference='tabDescription']") />
232 <#assign descriptionList = descriptionXPathSelector.selectNodes(rootElement) />
233
234 <#assign ctaXPathSelector = saxReaderUtil.createXPath("dynamic-element[@field-reference='cta']") />
235 <#assign ctaURLXPathSelector = saxReaderUtil.createXPath("dynamic-element[@field-reference='ctaURL']") />
236 <#assign ctaNode = ctaXPathSelector.selectSingleNode(rootElement) />
237 <#assign ctaUrl = ctaURLXPathSelector.selectSingleNode(ctaNode).getStringValue() />
238
239 <#assign ctaLabelXPathSelector = saxReaderUtil.createXPath("dynamic-element[@field-reference='ctaLabel']") />
240 <#assign ctaNode = ctaXPathSelector.selectSingleNode(rootElement) />
241 <#assign ctaLabel = ctaLabelXPathSelector.selectSingleNode(ctaNode).getStringValue() />
242
243 <#assign sameCTALookOnMobileAndDesktopXPathSelector = saxReaderUtil.createXPath("dynamic-element[@field-reference='sameCTALookOnMobileAndDesktop']") />
244 <#assign ctaNode = ctaXPathSelector.selectSingleNode(rootElement) />
245 <#assign sameCTALookOnMobileAndDesktop = sameCTALookOnMobileAndDesktopXPathSelector.selectSingleNode(ctaNode).getStringValue() />
246
247 <div class="textImageSliderTabs__textItem swiper-slide"
248 <#if index == 0>
249 data-text-image-slider-tabs-slide-type="current"
250 </#if>
251 >
252 <!-- begin components/heading -->
253
254 <#if (descriptionList?size > 1)>
255 <div class="textImageSliderTabs__contentInner">
256 <ul>
257 <#list descriptionList as cur_tabDescription>
258 <li>${cur_tabDescription.getStringValue()}</li>
259 </#list>
260 </ul>
261 <@getButton ctaLabel ctaUrl sameCTALookOnMobileAndDesktop, "textImageSliderTabs__button" />
262 </div>
263 <#elseif (descriptionList?size == 1)>
264 <div class="heading textImageSliderTabs__heading">
265 <#if (title)?has_content>
266 <h3 class="heading__subtitle">${title}</h3>
267 </#if>
268 <p class="heading__text">${descriptionList[0].getStringValue()}</p>
269 <@getButton ctaLabel ctaUrl sameCTALookOnMobileAndDesktop, "heading__button" />
270 </div>
271 </#if>
272
273 <!-- end components/heading -->
274 </div>
275 </#macro>
276
277 <#macro getButton ctaLabel ctaUrl sameCTALookOnMobileAndDesktop class>
278 <#if ctaLabel?trim?has_content && ctaUrl?trim?has_content>
279 <#if sameCTALookOnMobileAndDesktop?has_content && sameCTALookOnMobileAndDesktop?trim == "true">
280 <a href="${ctaUrl}"
281 class="button button--gold ${class}" data-wave-button>
282 <span class="button__text">${ctaLabel}</span>
283 </a>
284 <#else>
285 <!-- begin components/button -->
286 <a href="${ctaUrl}"
287 class="button button--gold ${class} heading__button--desktop"
288 data-wave-button> <span class="button__text">${ctaLabel}</span>
289 </a>
290
291 <!-- end components/button -->
292
293 <!-- begin components/moreButton -->
294 <a href="${ctaUrl}"
295 class="moreButton moreButton--gold ${class} heading__button--mobile">
296 <span class="moreButton__text">${ctaLabel}</span>
297 </a>
298
299 <!-- end components/moreButton -->
300 </#if>
301 </#if>
302 </#macro>
303</#if>
1
التقديم على الوظائف المعلنة من شركة "البحر الأحمر الدولية" وشركاتها التابعة.
اكتساب المهارات والثقة للتعامل مع زوار المملكة الدوليين
