الهيئة العامة للإحصاء تطلق الإصدار الثاني من بوابتها الإلكترونية

1<section class="section pt-5"> 

2	<div class="read-also container"> 

3		<#if entries?has_content> 

4 

5			<h1 class="fs-3 fw-bolder pb-3"> 

6				<@liferay.language key="read-also" /> 

7			</h1> 

8 

9			<#assign 

10				journalArticleLocalService = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService") 

11				StructureLocalService = serviceLocator.findService("com.liferay.dynamic.data.mapping.service.DDMStructureLocalService") 

12				currentUrlParts = themeDisplay.getURLCurrent()?split("/") 

13				currentUrlTitle = currentUrlParts[currentUrlParts?size - 1] 

14				filteredEntries = [] 

15			/> 

16 

17			<#list entries as entry> 

18				<#assign 

19					article = journalArticleLocalService.getLatestArticle(entry.classPK?number) 

20					structure = StructureLocalService.getStructure(article.getDDMStructure().getPrimaryKey()) 

21					structureName = structure.getName() 

22				/> 

23 

24				<#if currentUrlTitle != article.urlTitle> 

25					<#assign filteredEntries = filteredEntries + [entry] /> 

26				</#if> 

27			</#list> 

28 

29			<#if filteredEntries?has_content> 

30 

31				<#assign 

32					cardsPerSlide = 3 

33					totalItems = filteredEntries?size 

34					totalSlides = (totalItems / cardsPerSlide)?ceiling 

35					portletId = themeDisplay.getPortletDisplay().getId()?replace("_", "")?replace("INSTANCE", "") 

36					carouselId = "readAlsoCarousel_" + portletId 

37				/> 

38 

39				<div 

40					id="${carouselId}" 

41					class="carousel slide" 

42					data-bs-ride="false" 

43					data-bs-interval="false" 

44					data-bs-touch="true" 

45				> 

46 

47					<div class="carousel-inner"> 

48 

49						<#list 0..(totalSlides - 1) as slideIndex> 

50							<#assign 

51								startIndex = slideIndex * cardsPerSlide 

52								endIndex = startIndex + cardsPerSlide - 1 

53							/> 

54 

55							<#if endIndex gt totalItems - 1> 

56								<#assign endIndex = totalItems - 1 /> 

57							</#if> 

58 

59							<div class="carousel-item <#if slideIndex == 0>active</#if>"> 

60								<div class="row g-4"> 

61 

62									<#list startIndex..endIndex as itemIndex> 

63										<#assign 

64											entry = filteredEntries[itemIndex] 

65											article = journalArticleLocalService.getLatestArticle(entry.classPK?number) 

66										/> 

67 

68										<div class="col-12 col-md-6 col-xl-4"> 

69											${articleService.getContentByClassPK(entry.classPK?number, "50306")} 

70										</div> 

71									</#list> 

72 

73								</div> 

74							</div> 

75						</#list> 

76 

77					</div> 

78 

79					<div class="carousel-indicators position-static d-flex justify-content-center align-items-center gap-2 mt-4 mb-0 mx-0"> 

80						<#list 0..(totalSlides - 1) as slideIndex> 

81							<#assign 

82								startItem = (slideIndex * cardsPerSlide) + 1 

83								endItem = startItem + cardsPerSlide - 1 

84							/> 

85 

86							<#if endItem gt totalItems> 

87								<#assign endItem = totalItems /> 

88							</#if> 

89 

90							<button 

91	type="button" 

92	data-bs-target="#${carouselId}" 

93	data-bs-slide-to="${slideIndex}" 

94	class="rounded-circle m-0 flex-shrink-0 <#if slideIndex == 0>active</#if>" 

95	style="width: 16px; height: 16px; padding: 0; opacity: 1; border: 2px solid <#if slideIndex == 0>#1b8354<#else>#d2d6db</#if>; background-color: <#if slideIndex == 0>#1b8354<#else>#ffffff</#if>;" 

96	<#if slideIndex == 0> 

97		aria-current="true" 

98	</#if> 

99	aria-label="عرض الأخبار من ${startItem} إلى ${endItem}"> 

100</button> 

101						</#list> 

102					</div> 

103 

104				</div> 

105 

106			</#if> 

107 

108		</#if> 

109	</div> 

110</section> 

111<script> 

112(function () { 

113	function updateDotsStyle(carouselId) { 

114		var carousel = document.getElementById(carouselId); 

115 

116		if (!carousel) { 

117			return; 

118		} 

119 

120		var dots = carousel.querySelectorAll('.carousel-indicators button'); 

121 

122		dots.forEach(function (dot) { 

123			dot.style.width = '16px'; 

124			dot.style.height = '16px'; 

125			dot.style.padding = '0'; 

126			dot.style.borderRadius = '50%'; 

127			dot.style.opacity = '1'; 

128 

129			if (dot.classList.contains('active')) { 

130				dot.style.backgroundColor = '#1b8354'; 

131				dot.style.border = '2px solid #1b8354'; 

132			} else { 

133				dot.style.backgroundColor = '#ffffff'; 

134				dot.style.border = '2px solid #d2d6db'; 

135			} 

136		}); 

137	} 

138 

139	var carouselId = '${carouselId}'; 

140 

141	updateDotsStyle(carouselId); 

142 

143	var carousel = document.getElementById(carouselId); 

144 

145	if (carousel) { 

146		carousel.addEventListener('slid.bs.carousel', function () { 

147			updateDotsStyle(carouselId); 

148		}); 

149 

150		carousel.addEventListener('slide.bs.carousel', function () { 

151			setTimeout(function () { 

152				updateDotsStyle(carouselId); 

153			}, 50); 

154		}); 

155	} 

156})(); 

157</script>