1<#assign theme_css_path = themeDisplay.getPathThemeCss() />
2
3<#assign journalArticleLocalService = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService") />
4<#assign group_id = getterUtil.getLong(themeDisplay.getScopeGroupId()) />
5
6<#assign accordion_categories = [] />
7
8<#if entries?has_content>
9 <#list entries as curEntry>
10 <#assign categories = curEntry.getCategories() />
11
12 <#list categories as curCategory>
13 <#assign categoryName = curCategory.getName()?trim />
14 <#if !accordion_categories?seq_contains(curCategory)>
15 <#assign accordion_categories += [curCategory] />
16 </#if>
17 </#list>
18 </#list>
19</#if>
20
21${portletDisplay.setShowPortletCssIcon(true)}
22
23<#assign show_custom_title = false />
24
25<#assign portlet_preferences = portletDisplay.getPortletSetup() />
26<#assign portlet_preferences_map = portlet_preferences.getMap() />
27
28<#if portlet_preferences_map?? && portlet_preferences_map["portletSetupUseCustomTitle"]??>
29 <#assign VOID = portlet_preferences.setValue("portletSetupUseCustomTitle", "false") />
30 <#assign show_custom_title = portlet_preferences_map["portletSetupUseCustomTitle"][0]?boolean />
31</#if>
32
33<#assign is_asset_accordion = true />
34
35<#list portletPreferences as key, value_sequence>
36 <#if key == "anyAssetType" && value_sequence[0] == "true">
37 <#assign is_asset_accordion = false />
38 </#if>
39</#list>
40
41<#if entries?has_content>
42 <#assign assetRenderer = entries[0].getAssetRenderer() />
43 <#assign className = assetRenderer.getClassName() />
44
45 <#if className == "com.liferay.journal.model.JournalArticle">
46 <#assign assetClassTypeId = entries[0].getClassTypeId() />
47
48 <#assign DDMStructureLocalServiceUtil = staticUtil["com.liferay.dynamic.data.mapping.service.DDMStructureLocalServiceUtil"] />
49
50 <#assign structure = DDMStructureLocalServiceUtil.getStructure(assetClassTypeId) />
51 <#assign structure_name = structure.getName(locale)?trim?upper_case />
52
53 <#if structure_name != "ACCORDION">
54 <#assign is_asset_accordion = false />
55 <#else>
56 <#assign available_templates = structure.getTemplates() />
57
58 <#list available_templates as template>
59 <#assign template_name = template.getName(locale)?trim />
60
61 <#if template_name == "Accordion - standard">
62 <#assign ddmTemplateKey = template.getTemplateKey() />
63 </#if>
64
65 </#list>
66 </#if>
67 <#else>
68 <#assign is_asset_accordion = false />
69 </#if>
70</#if>
71
72<#if is_asset_accordion>
73 <link rel="stylesheet" href="${theme_css_path}/components-standalone/badges-and-filters.css" />
74 <link rel="stylesheet" href="${theme_css_path}/components-standalone/accordion.css" />
75
76 <section class="container" id="accordion-list-${randomNamespace}">
77 <#if show_custom_title>
78 <h2 class="g-headline-2 text-center">${portletDisplay.getTitle()}</h2>
79 </#if>
80
81 <#if accordion_categories?has_content>
82 <div class="d-flex flex-wrap justify-content-center g-gap-2 mb-4" id="accordion-list-categories-${randomNamespace}">
83 <label class="g-filter g-filter--selected" data-category="vse">
84 <input type="checkbox" checked />
85 <span>Vse</span>
86 </label>
87 <#list accordion_categories as curCategory>
88 <#assign category_normalized = curCategory.getName()?replace("ž", "z")?replace("č", "c")?replace("ć", "c")?replace("đ", "d")?replace("š", "s")?replace("Ž", "z")?replace("Č", "c")?replace("Ć", "c")?replace("Đ", "d")?replace("Š", "s")?replace(" ", "-")?lower_case />
89 <label class="g-filter" data-category="${category_normalized}">
90 <input type="checkbox" />
91 <span>${curCategory.getName()}</span>
92 </label>
93 </#list>
94 </div>
95 </#if>
96
97 <div class="g-accordion-wrapper">
98 <#if entries?has_content>
99 <#list entries as curEntry>
100 <#assign assetRenderer = curEntry.getAssetRenderer() />
101 <#assign asset_object = assetRenderer.getAssetObject() />
102 <#assign accordion_article_id = asset_object.articleId />
103
104 <#assign accordion_article = journalArticleLocalService.getArticle(group_id, accordion_article_id) />
105
106 <#assign accordion_article_content = journalArticleLocalService.getArticleDisplay(group_id, accordion_article_id, ddmTemplateKey, "", locale, themeDisplay).getContent() />
107
108 ${accordion_article_content}
109 </#list>
110 </#if>
111 </div>
112 </section>
113
114
115
116 <script>
117 Liferay.on("allPortletsReady", function () {
118 const accordions = document.querySelectorAll("#accordion-list-${randomNamespace} div[data-category]");
119 const categorySelectors = document.querySelectorAll("#accordion-list-categories-${randomNamespace} label");
120 const vseButton = document.querySelector('#accordion-list-categories-${randomNamespace} label[data-category="vse"]');
121 const activeCategories = new Set(["vse"]);
122
123 const allCategories = new Set([
124 <#if accordion_categories?has_content>
125 <#list accordion_categories as curCategory>
126 <#assign category_normalized = curCategory.getName()?replace("ž", "z")?replace("č", "c")?replace("ć", "c")?replace("đ", "d")?replace("š", "s")?replace("Ž", "z")?replace("Č", "c")?replace("Ć", "c")?replace("Đ", "d")?replace("Š", "s")?replace(" ", "-")?lower_case />
127 "${category_normalized}",
128 </#list>
129 </#if>
130 ]);
131
132 allCategories.forEach(category => {
133 let counter = 0;
134
135 accordions.forEach(accordion => {
136 if(accordion.dataset.category.includes(category)) {
137 counter++;
138 }
139 });
140
141 const categorySelector = document.querySelector(`#accordion-list-categories-${randomNamespace} <#noparse>label[data-category="${category}"]</#noparse> span`);
142
143 <#-- fixing liferay duplicate categories bug -->
144 const categorySelectors = document.querySelectorAll(`#accordion-list-categories-${randomNamespace} <#noparse>label[data-category="${category}"]</#noparse> span`);
145
146 categorySelectors.forEach((cat, index) => {
147 if(index !== 0){
148 cat.parentNode.remove();
149 }
150 })
151
152
153 <#noparse>
154 categorySelector.innerHTML += ` (${counter})`;
155 </#noparse>
156 })
157
158 <#noparse>
159 function findAccordionsWithCategory(category) {
160 return document.querySelectorAll(`#accordion-list-${randomNamespace} div[data-category="${category}"]`).parentElement;
161 }
162 </#noparse>
163
164 function resetAccordions() {
165 accordions.forEach(accordion => {
166 accordion.classList.remove("d-none");
167 })
168 }
169
170 function showActiveCategoriesAccordions() {
171 accordions.forEach(accordion => {
172 const accordionCategories = accordion.dataset.category.split(",");
173 const found = accordionCategories.some(accordionCategory => activeCategories.has(accordionCategory));
174
175 if(found) {
176 accordion.classList.remove("d-none");
177 } else {
178 accordion.classList.add("d-none");
179 }
180 })
181 }
182
183 function uncheckAllFilter() {
184 activeCategories.delete("vse");
185 uncheckCategorySelector(vseButton);
186 }
187
188 function checkAllFilter() {
189 activeCategories.clear();
190 activeCategories.add("vse");
191 checkCategorySelector(vseButton);
192 resetAccordions();
193 }
194
195 function removeSelectedClassesFromCategorySelectors(categorySelectors) {
196 categorySelectors.forEach(categorySelector => {
197 removeActiveClassFromCategorySelector(categorySelector);
198 });
199 }
200
201 function addActiveClassToCategorySelector(button) {
202 button.classList.add("g-filter--selected");
203 }
204 function removeActiveClassFromCategorySelector(button) {
205 button.classList.remove("g-filter--selected");
206 }
207
208 function checkCategorySelector(button) {
209 addActiveClassToCategorySelector(button)
210 button.querySelector("input").checked = true;
211 }
212
213 function uncheckCategorySelector(button) {
214 removeActiveClassFromCategorySelector(button);
215 button.querySelector("input").checked = false;
216 }
217
218 function resetActiveCategories() {
219 removeSelectedClassesFromCategorySelectors(categorySelectors);
220 checkAllFilter();
221 }
222
223 function toggleActiveCategory(category, button) {
224 if(activeCategories.has(category)) {
225 activeCategories.delete(category);
226 uncheckCategorySelector(button);
227 } else {
228 activeCategories.add(category);
229 checkCategorySelector(button);
230 uncheckAllFilter();
231 }
232
233 if(activeCategories.size === 0) {
234 checkAllFilter();
235 }
236 }
237
238 categorySelectors.forEach(button => {
239 button.addEventListener("click", function(e) {
240 e.preventDefault();
241
242 if(button.dataset.category !== "vse") {
243 const buttonCategory = button.dataset.category;
244
245 toggleActiveCategory(buttonCategory, button);
246
247 if(!activeCategories.has("vse")) {
248 showActiveCategoriesAccordions();
249 }
250 } else {
251 resetActiveCategories();
252 }
253 })
254 })
255 });
256
257 </script>
258<#else>
259 <div class="container">
260 <div class="alert alert-danger">You're using "Accordions list with filter" template. Please choose Accordions as asset type!</div>
261 </div>
262</#if>
