1<#assign
2 serviceContext = staticUtil["com.liferay.portal.kernel.service.ServiceContextThreadLocal"].getServiceContext()
3 dateUtil = staticUtil["com.liferay.portal.kernel.util.DateUtil"]
4 themeDisplay = serviceContext.getThemeDisplay()
5 group_id = themeDisplay.getScopeGroupId()
6 portal_url = themeDisplay.getPortalURL()
7 current_url = themeDisplay.getURLHome()
8 path_context = themeDisplay.getPathContext()
9 JournalArticleLocalService = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService") 10 DLFileEntryLocalService = serviceLocator.findService("com.liferay.document.library.kernel.service.DLFileEntryLocalService") 11 JournalContentSearchLocalService = serviceLocator.findService("com.liferay.journal.service.JournalContentSearchLocalService") 12 LayoutLocalService = serviceLocator.findService("com.liferay.portal.kernel.service.LayoutLocalService") 13 pageurl = ""
14>
15<div class="col-md-12 landingpage-listing-display group-header">
16 <h1 class="landingpage-listing-title">${Heading.getData()}</h1> 17 <div class="landingpage-listing-desc">${SubHeading.getData()}</div> 18 <ul class="landingpage-listing-list row" id="landingpage-listing-list">
19 <#list Research.getSiblings() as tileList>
20 <#if tileList.selectPageType.getData() == "existingPage">
21 <#assign
22 cur_webContent_map = tileList.BrowseForExistingWebContent.linkToWebContent.getData()?eval
23 cur_webContent_classPK = cur_webContent_map.classPK
24 article = JournalArticleLocalService.getLatestArticle(cur_webContent_classPK?number)
25 article_id = article.articleId
26 article_content = JournalArticleLocalService.getLatestArticle(group_id, article_id)
27 current_time = .now?datetime
28 document = saxReaderUtil.read(article.getContent())
29 rootElement = document.getRootElement()
30 content_status = article_content.getStatus()
31 >
32 <#if article_content.getExpirationDate()??>
33 <#assign expiration_date = article_content.getExpirationDate()?datetime>
34 </#if>
35
36 <#if (dateUtil.compareTo(expiration_date,current_time) >= 0)>
37 <#assign layout_Ids = JournalContentSearchLocalService.getLayoutIds(group_id,false,article_id)>
38 <#assign size = layout_Ids?size>
39 <#list layout_Ids as layoutid>
40 <#assign
41 layout = LayoutLocalService.getLayout(group_id,false,layoutid)
42 friendlyurl = layout.getFriendlyURL()
43 pageurl = portalUtil.getLayoutFullURL(layout, themeDisplay)
44 >
45
46 </#list>
47 <#list rootElement.elements()as dynamicElement>
48
49 <#if "ArticleTitle" == dynamicElement.attributeValue("name")> 50 <#assign Title = dynamicElement.valueOf("//dynamic-element[@name='ArticleTitle']/dynamic-content/text()")> 51 <#assign SubTitle = dynamicElement.valueOf("//dynamic-element[@name='SubTitle']/dynamic-content/text()")> 52 <#assign LinkLabel = dynamicElement.valueOf("//dynamic-element[@name='label']/dynamic-content/text()")> 53 <#assign titleColor = dynamicElement.valueOf("//dynamic-element[@name='Color']/dynamic-content/text()")> 54 <#assign subtitleColor = dynamicElement.valueOf("//dynamic-element[@name='Color']/dynamic-content/text()")> 55 <#assign imageJson = dynamicElement.valueOf("//dynamic-element[@name='BannerImage']/dynamic-content/text()")> 56 <#assign ThumbnailImageJson = dynamicElement.valueOf("//dynamic-element[@name='ThumbnailImage']/dynamic-content/@alt")> 57 <#if imageJson?has_content> <#-- for article detail -->
58 <#assign
59 datas_res = imageJson ?eval
60 entrys_id = datas_res.fileEntryId
61 fileEntrys = DLFileEntryLocalService.getDLFileEntry(entrys_id?number)
62 plain_sid = fileEntrys.getUuid()
63 plus_thub = portal_url + path_context +"/documents/" + group_id+"/"+plain_sid
64
65 >
66 </#if>
67 <#elseif "productTitle" == dynamicElement.attributeValue("name")> 68 <#assign Title = dynamicElement.valueOf("//dynamic-element[@name='productTitle']/dynamic-content/text()")> 69 <#assign SubTitle = dynamicElement.valueOf("//dynamic-element[@name='ProductSubTitle']/dynamic-content/text()")> 70 <#assign LinkLabel = dynamicElement.valueOf("//dynamic-element[@name='LinkLabel']/dynamic-content/text()")> 71 <#assign titleColor = dynamicElement.valueOf("//dynamic-element[@name='Color']/dynamic-content/text()")> 72 <#assign subtitleColor = dynamicElement.valueOf("//dynamic-element[@name='Color']/dynamic-content/text()")> 73 <#assign imageJson = dynamicElement.valueOf("//dynamic-element[@name='ProductHeroImage']/dynamic-content/text()")> 74 <#assign ThumbnailImageJson = dynamicElement.valueOf("//dynamic-element[@name='ProductThumbnailImage']/dynamic-content/@alt")> 75 <#if imageJson?has_content>
76 <#assign
77 datas_res = imageJson ?eval
78 entrys_id = datas_res.fileEntryId
79 fileEntrys = DLFileEntryLocalService.getDLFileEntry(entrys_id?number)
80 plain_sid = fileEntrys.getUuid()
81 plus_thub = portal_url + path_context +"/documents/" + group_id+"/"+plain_sid
82
83 >
84 </#if>
85 <#else>
86
87 </#if>
88 </#list>
89 </#if>
90 <#assign mobile_img = plus_thub
91 mobile_entrys_id = entrys_id
92 >
93
94 <#else>
95
96 <#assign Title = tileList.CuratedPageDetails.Title1.getData() >
97 <#assign SubTitle = tileList.CuratedPageDetails.SubTitle1.getData() >
98 <#if tileList.CuratedPageDetails.BanerImage.getData()?? && tileList.CuratedPageDetails.BanerImage.getData() != "">
99 <#assign
100 ThumbnailImageJson = tileList.CuratedPageDetails.BanerImage.getAttribute("alt") 101 entrys_id = tileList.CuratedPageDetails.BanerImage.getAttribute("fileEntryId") 102 plus_thub =tileList.CuratedPageDetails.BanerImage.getData()
103 mobile_img =tileList.CuratedPageDetails.MobileImage.getData()
104 mobile_entrys_id = tileList.CuratedPageDetails.MobileImage.getAttribute("fileEntryId") 105 >
106 </#if>
107 <#assign LinkLabel = tileList.CuratedPageDetails.ButtonName.getData()>
108 <#assign titleColor = tileList.CuratedPageDetails.Title1.TitleColor.getData()>
109 <#assign subtitleColor = tileList.CuratedPageDetails.SubTitle1.SubTitleColor.getData()>
110 <#assign pageurl = tileList.CuratedPageDetails.DestinationPageURL.getData()>
111 </#if>
112 <#if tileList?index == 0>
113 <li class="landingpage-listing-layout-box first-article col-md-8 col-sm-12 col-xs-12">
114 <div class="first-article-container">
115 <div class="left-image-container">
116 <a data-component="Landing-Listing" data-title="${Title}" href="${pageurl}" target="_self"> 117 <img loading="lazy" class="thubnail-image lozad desktop" alt="${ThumbnailImageJson}" data-fileentryid="${entrys_id}" src="${plus_thub}" /> 118 <img loading="lazy" class="thubnail-image lozad mobile" alt="${ThumbnailImageJson}" data-fileentryid="${mobile_entrys_id}" src="${mobile_img}" /> 119
120 </div>
121 <div class="right-image-container">
122 <div class="content">
123 <h3><a data-component="Landing-Listing" data-title="${Title}" href="${pageurl}" target="_self">${Title}</a></h3> 124 <p class="sub-details"><a data-component="Landing-Listing" data-title="${Title}" href="${pageurl}" target="_self">${SubTitle}</a> 125 </p>
126 <div class="footerlink"><a data-component="Landing-Listing" data-title="${Title}" href="${pageurl}" target="_self" class="red">${LinkLabel}</a></div> 127 </div>
128 </div>
129 </div>
130 <div class="layout-container">
131 <a data-component="Landing-Listing" data-title="${Title}" href="${pageurl}" target="_self"> 132 <img loading="lazy" class="banner-image lozad desktop" alt="${ThumbnailImageJson}" data-fileentryid="${entrys_id}" src="${plus_thub}" /> 133 <img loading="lazy" class="banner-image lozad mobile" alt="${ThumbnailImageJson}" data-fileentryid="${mobile_entrys_id}" src="${mobile_img}" /> 134 </a>
135 <div class="content">
136 <h3><a data-component="Landing-Listing" data-title="${Title}" href="${pageurl}" target="_self">${Title}</a></h3> 137 <p class="sub-details"><a data-component="Landing-Listing" data-title="${Title}" href="${pageurl}" target="_self">${SubTitle}</a></p> 138 <div class="footerlink"><a data-component="Landing-Listing" data-title="${Title}" href="${pageurl}" target="_self" class="red">${LinkLabel}</a></div> 139 </div>
140 </div>
141 </li>
142 <#elseif tileList?index == 1>
143 <li class="landingpage-listing-layout-box second-article col-md-4 col-sm-12 col-xs-12">
144 <div class="second-article-container">
145 <div class="shade"></div>
146 <a data-component="Landing-Listing" data-title="${Title}" href="${pageurl}" target="_self"> 147 <img loading="lazy" class="thubnail-image lozad desktop" alt="${ThumbnailImageJson}" data-fileentryid="${entrys_id}" src="${plus_thub}" /> 148 <img loading="lazy" class="thubnail-image lozad mobile" alt="${ThumbnailImageJson}" data-fileentryid="${mobile_entrys_id}" src="${mobile_img}" /> 149 <div class="content">
150 <h3 style="color:${titleColor};"><a data-component="Landing-Listing" data-title="${Title}" href="${pageurl}" target="_self" style="color:${titleColor};">${Title}</a></h3> 151 <p class="sub-details"><a data-component="Landing-Listing" data-title="${Title}" href="${pageurl}" target="_self" style="color:${subtitleColor};">${SubTitle}</a></p> 152 <div class="footerlink"><a data-component="Landing-Listing" data-title="${Title}" href="${pageurl}" target="_self" class="red">${LinkLabel}</a></div> 153 </div>
154 </div>
155 <div class="layout-container">
156 <a data-component="Landing-Listing" data-title="${Title}" href="${pageurl}" target="_self"> 157 <img loading="lazy" class="banner-image lozad mobile" alt="${ThumbnailImageJson}" data-fileentryid="${mobile_entrys_id}" src="${mobile_img}" /> 158 </a>
159 <div class="content">
160 <h3><a data-component="Landing-Listing" data-title="${Title}" href="${pageurl}" target="_self">${Title}</a></h3> 161 <p class="sub-details"><a data-component="Landing-Listing" data-title="${Title}" href="${pageurl}" target="_self">${SubTitle}</a></p> 162 <div class="footerlink"><a data-component="Landing-Listing" data-title="${Title}" href="${pageurl}" target="_self" class="red">${LinkLabel}</a></div> 163 </div>
164 </div>
165 </li>
166 <#else>
167 <li class="landingpage-listing-layout-box col-md-4 col-sm-12 col-xs-12">
168 <div class="layout-container">
169 <a data-component="Landing-Listing" data-title="${Title}" href="${pageurl}" target="_self"> 170 <img loading="lazy" class="banner-image lozad desktop" alt="${ThumbnailImageJson}" data-fileentryid="${entrys_id}" src="${plus_thub}" /> 171 <img loading="lazy" class="banner-image lozad mobile" alt="${ThumbnailImageJson}" data-fileentryid="${mobile_entrys_id}" src="${mobile_img}" /> 172 </a>
173 <div class="content">
174 <h3><a data-component="Landing-Listing" data-title="${Title}" href="${pageurl}" target="_self">${Title}</a></h3> 175 <p class="sub-details"><a data-component="Landing-Listing" data-title="${Title}" href="${pageurl}" target="_self">${SubTitle}</a></p> 176 <p class="footerlink"><a data-component="Landing-Listing" data-title="${Title}" href="${pageurl}" target="_self" class="red">${LinkLabel}</a></p> 177 </div>
178 </div>
179 </li>
180 </#if>
181 </#list>
182 </ul>
183 <div class="mobile-show-more">
184 <span class="show-more">${MobileShowMoreLabel.getData()}</span> 185 <span class="show-less hide">${MobileShowLessLabel.getData()}</span> 186 </div>
187</div>
188<style>
189.landingpage-listing-list .landingpage-listing-layout-box .first-article-container .left-image-container img , .landingpage-listing-list .landingpage-listing-layout-box .second-article-container img { 190 width: 100%;
191 height: 100%;
192 object-fit: cover;
193}
194.landingpage-listing-list .landingpage-listing-layout-box { 195 list-style: none;
196 padding: 0;
197 margin-bottom: 16px;
198 padding-left: 0px;
199 padding-right: 8px;
200 display:flex;
201}
202
203
204.landingpage-listing-list .landingpage-listing-layout-box .sub-details{ 205 padding-bottom:20px;
206 margin-bottom:0px;
207}
208
209.landingpage-listing-list .landingpage-listing-layout-box .second-article-container .footerlink{ 210 position:absolute;
211 bottom:initial;
212}
213
214.landingpage-listing-list .landingpage-listing-layout-box .first-article-container .footerlink{ 215 position:absolute;
216 bottom:initial;
217}
218
219.landingpage-listing-list .landingpage-listing-layout-box .footerlink{ 220 position:absolute;
221 bottom:0px;
222}
223
224.landingpage-listing-display { 225 padding: 0;
226 max-width: 992px;
227 margin-left: auto;
228 margin-right: auto;
229 padding-left:15px;
230 margin-top: 40px;
231}
232.landingpage-listing-display .landingpage-listing-title,.landingpage-listing-display .landingpage-listing-desc { 233 padding-left: 0px;
234 padding-right: 8px;
235}
236.landingpage-listing-display .landingpage-listing-title { 237 font-weight: 700;
238 font-size: 32px;
239 color: #2e2e2e;
240}
241.landingpage-listing-display .landingpage-listing-desc { 242 font-size: 14px;
243 color: #909090;
244}
245.landingpage-listing-list { 246 padding: 0;
247 margin: 0;
248}
249.landingpage-listing-list .landingpage-listing-layout-box { 250 list-style: none;
251 padding: 0;
252 margin-bottom: 16px;
253 padding-left: 0px;
254 padding-right: 8px;
255}
256
257.landingpage-listing-list .landingpage-listing-layout-box .lozad.mobile { 258 display:none;
259}
260.landingpage-listing-list .landingpage-listing-layout-box.sortable .first-article-container,.landingpage-listing-list .landingpage-listing-layout-box.sortable .layout-container { 261 border: 2px dashed #ececec;
262
263}
264.landingpage-listing-list .landingpage-listing-layout-box.first-article .layout-container { 265 display: none;
266}
267.landingpage-listing-list .landingpage-listing-layout-box.second-article .layout-container { 268 width:100%;
269 display: none;
270}
271.landingpage-listing-list .landingpage-listing-layout-box .first-article-container , .landingpage-listing-list .landingpage-listing-layout-box .second-article-container{ 272 display: flex;
273 height: 304px;
274 border: 1px solid #ececec;
275 width:100%;
276}
277
278
279.landingpage-listing-list .landingpage-listing-layout-box .first-article-container .left-image-container { 280 width: 50%;
281}
282.landingpage-listing-list .landingpage-listing-layout-box .first-article-container .left-image-container img { 283 width: 100%;
284 height: 100%;
285 object-fit: cover;
286}
287.landingpage-listing-list .landingpage-listing-layout-box .first-article-container .right-image-container { 288 width: 50%;
289 margin-left: 13px;
290 margin-right:12px;
291}
292
293.landingpage-listing-list .landingpage-listing-layout-box .second-article-container .right-image-container .content{ 294 bottom:40px;
295}
296
297.landingpage-listing-list .landingpage-listing-layout-box .first-article-container .right-image-container .content{ 298 top: 50%;
299 transform: translate(0, -50%);
300 position: absolute;
301}
302
303.landingpage-listing-list .landingpage-listing-layout-box .first-article-container .right-image-container .sub-details a{ 304 font-size:18px;
305 font-weight:500;
306}
307
308
309
310.landingpage-listing-list .landingpage-listing-layout-box .first-article-container .right-image-container .sub-details p{ 311 padding-right:10px;
312}
313
314.landingpage-listing-list .landingpage-listing-layout-box .first-article-container .right-image-container .sub-details { 315 padding-bottom:0px;
316}
317
318.landingpage-listing-list .landingpage-listing-layout-box .second-article-container .sub-details { 319 padding-bottom:0px;
320}
321
322.landingpage-listing-list .landingpage-listing-layout-box .second-article-container .right-image-container .footerlink{ 323 margin-top:20px;
324 bottom:initial;
325}
326
327.landingpage-listing-list .landingpage-listing-layout-box .layout-container { 328 border: 1px solid #ececec;
329 width:100%;
330 border-radius: 0px !important;
331}
332.landingpage-listing-list .landingpage-listing-layout-box .layout-container .content { 333 padding: 16px 24px;
334}
335.landingpage-listing-list .landingpage-listing-layout-box .layout-container .banner-image { 336 width: 100%;
337 height: 140px;
338 object-fit: cover;
339}
340.landingpage-listing-list .landingpage-listing-layout-box h3 { 341 font-weight: 700;
342 font-size: 20px;
343}
344
345.landingpage-listing-list .landingpage-listing-layout-box .first-article-container h3 { 346 margin-bottom: 20px;
347}
348
349.landingpage-listing-list .landingpage-listing-layout-box h3 a { 350 color: #2e2e2e;
351}
352.landingpage-listing-list .landingpage-listing-layout-box .sub-details a { 353 color: #909090;
354 font-size:14px;
355 font-weight:400;
356}
357.landingpage-listing-list .landingpage-listing-layout-box .sub-details { 358 margin-bottom:20px;
359}
360
361.landingpage-listing-list .landingpage-listing-layout-box a:focus { 362 outline: none;
363}
364.landingpage-listing-list .landingpage-listing-layout-box a:hover { 365 text-decoration: none;
366}
367
368.landingpage-listing-list .landingpage-listing-layout-box.second-article .second-article-container .shade { 369 opacity: .8;
370 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
371 filter: alpha(opacity=80);
372 -moz-opacity: .8;
373 -khtml-opacity: .8;
374 height: 60%;
375 background: linear-gradient(to top, #2e2e2e, transparent);
376 max-height: 100%;
377 position: absolute;
378 bottom: 0;
379 width: 97% !important;
380}
381.landingpage-listing-list .landingpage-listing-layout-box.second-article .second-article-container .content { 382 max-width: 100%;
383 position: absolute;
384 left: 20px;
385 bottom:40px;
386}
387
388.mobile-show-more span.show-more:before,
389.mobile-show-more span.show-less:before { 390 content: "\e00c";
391 font-family: "dbsicons" !important;
392 font-style: normal !important;
393 font-weight: normal !important;
394 font-variant: normal !important;
395 text-transform: none !important;
396 speak: none;
397 line-height: 1;
398 -webkit-font-smoothing: antialiased;
399 -moz-osx-font-smoothing: grayscale;
400 display: inline-block;
401 text-decoration: inherit;
402 position: absolute;
403 right: -25px;
404 color: #f33;
405 top: -8px;
406 transform: translateY(70%);
407}
408.mobile-show-more span { 409 position: relative;
410}
411.mobile-show-more span.show-less:before { 412 transform: rotate(180deg);
413 top: 4px;
414}
415.mobile-show-more { 416 display: none;
417 margin: 0 0 15px;
418 width: 100%;
419 text-align: center;
420 font-weight: 700;
421 color: #f33;
422 cursor: pointer;
423}
424.mobile-show-more span.active { 425 color: #f33;
426}
427.landingpage-listing-list .landingpage-listing-layout-box .second-article-container > a { 428 width: 100%;
429}
430 @media screen and (max-width: 768px) { 431 .landingpage-listing-list .landingpage-listing-layout-box.first-article .layout-container { 432 width:100%;
433 display: block;
434 }
435 .landingpage-listing-list .landingpage-listing-layout-box.first-article .first-article-container { 436 display: none;
437 }
438 .landingpage-listing-list .landingpage-listing-layout-box.second-article .layout-container { 439 width:100%;
440 display: block;
441 }
442 .landingpage-listing-list .landingpage-listing-layout-box.second-article .second-article-container { 443 display: none;
444 }
445 .landingpage-listing-list .landingpage-listing-layout-box .lozad.desktop { 446 display:none;
447 }
448
449 .landingpage-listing-list .landingpage-listing-layout-box .lozad.mobile { 450 display:block;
451 }
452 .mobile-show-more { 453 display: block;
454 }
455 .landingpage-listing-display .landingpage-listing-list li:nth-child(n+4) { 456 display:none;
457 }
458}
459</style>
460
461<script>
462
463 $("document").ready(function(){ 464
465 $(".landingpage-listing-list .landingpage-listing-layout-box h3:nth-of-type(n)").text(function(index, currentText) { 466
467 return currentText.substr(0, 50);
468 });
469
470 $(".landingpage-listing-list .landingpage-listing-layout-box .sub-details a:nth-of-type(n)").text(function(index, currentText) { 471
472 if (currentText.length > 100){ 473 return currentText.substr(0, 100) + "...";
474 }
475 });
476
477
478 $(".mobile-show-more span.show-more").click(function(){ 479 $(this).closest(".landingpage-listing-display").find(".landingpage-listing-list li:nth-child(n+4)").show(); 480 $(this).closest(".landingpage-listing-display").find(".mobile-show-more span.show-less").removeClass("hide"); 481 $(this).addClass("hide"); 482 });
483
484 $(".mobile-show-more span.show-less").click(function(){ 485 console.log("less clicked"); 486 $(this).closest(".landingpage-listing-display").find(".landingpage-listing-list li:nth-child(n+4)").hide(); 487 $(this).closest(".landingpage-listing-display").find(".mobile-show-more span.show-more").removeClass("hide"); 488 $(this).addClass("hide"); 489 });
490
491});
492</script>
