1<#assign catLocalService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetCategoryLocalService")>
2<#assign vocLocalService = serviceLocator.findService("com.liferay.asset.kernel.service.AssetVocabularyLocalService")>
3<#assign vocName = customFacetDisplayContext.getParameterName()>
4<#assign customHeading = portletPreferences['customHeading'][0]>
5<#assign aggregationField = portletPreferences['aggregationField'][0]>
6<#assign customCSSClassName = "" />
7<#assign classItemDisabled = "" />
8<#assign removePrefix = false />
9<#assign disabledToggle = false />
10<#if portletPreferences['portletSetupCss']??>
11<#assign portletSetupCss = portletPreferences['portletSetupCss'][0] />
12<#assign portletSetupCss_map = jsonFactoryUtil.createJSONObject(portletSetupCss) />
13<#assign customCSSClassName = ' '+portletSetupCss_map.advancedData.customCSSClassName+' ' />
14</#if>
15<#if customCSSClassName?index_of(" disabled-empty ") != -1 || customCSSClassName?index_of(" disable-empty ") != -1>
16 <#assign classItemDisabled = "disabled" />
17<#else>
18</#if>
19<#if customCSSClassName?index_of(" remove-prefix ") != -1>
20 <#assign removePrefix = true />
21</#if>
22<#if customCSSClassName?index_of(" disabled-toggle ") != -1 || customCSSClassName?index_of(" disable-toggle ") != -1>
23 <#assign disabledToggle = true />
24</#if>
25
26<#attempt>
27<#if customHeading!="">
28 <#if vocLocalService.fetchAssetVocabulary(customHeading?number)??>
29 <#assign vocId = vocLocalService.getVocabulary(customHeading?number)>
30 <div class="alert alert-info text-center">
31 Name to use for the 'Custom Parameter Name' field: <br/><b>${vocId.name}<#if vocId.groupId != themeDisplay.getSiteGroupId()>@${vocId.groupId}</#if></b>
32 </div>
33 <#else>
34 <div class="alert alert-warning text-center">
35 Error: Vocabulary id [<b>${customHeading}</b>] doesn't exist. Please empty the 'Custom header' field.
36 </div>
37 </#if>
38
39</#if>
40<#recover>
41<div class="alert alert-danger text-center">
42 Error: [<b>${customHeading}</b>] isn't a number. Please do not use the 'Custom Header' field.
43</div>
44</#attempt>
45
46<#assign groupTarget = themeDisplay.getSiteGroupId()>
47
48<#-- Extraire le groupID après '@' en gardant uniquement ce qui suit '@' et est un nombre -->
49<#assign groupFinder = vocName?replace(".*@(\\d+)$", "$1", 'r')>
50<#-- Vérifier que groupFinder est bien un nombre -->
51<#if groupFinder?matches("\\d+")>
52 <#assign
53 vocName = vocName?replace("(.*)@(\\d+).*", "$1", 'r')
54 groupTarget = groupFinder?number
55 />
56</#if>
57
58<#if vocLocalService.fetchGroupVocabulary(groupTarget, vocName)??>
59<#assign voc = vocLocalService.fetchGroupVocabulary(groupTarget, vocName)>
60
61<#assign catList = voc.getCategories() />
62<#assign catListTitles = []>
63<#list catList as cat>
64 <#assign catListTitles = catListTitles + [{"item": cat, "title": cat.getTitle(locale)}]>
65</#list>
66
67<#if customCSSClassName?index_of(" DESC ") == -1>
68 <#assign catList = catListTitles?sort_by("title") />
69<#else>
70 <#assign catList = catListTitles?sort_by("title")?reverse />
71</#if>
72
73<#assign listOfSelectedCategories = [] />
74<#if request?? && request.getParameterNames()??>
75 <#assign parameters = request.getParameterNames()>
76 <#list parameters as parameter>
77 <#if vocLocalService.fetchGroupVocabulary(groupTarget, parameter?replace('@'+groupTarget,''))??>
78 <#list request.getParameterValues(parameter) as pvalue>
79 <#assign listOfSelectedCategories = listOfSelectedCategories + [pvalue?number]>
80 </#list>
81 </#if>
82 </#list>
83</#if>
84
85<div class="trainingFilters <#if !disabledToggle>toggle-style</#if>">
86 <div class="vocabulary">
87 <div class="voc-title ${themeDisplay.getPortletDisplay().getNamespace()}<#if !disabledToggle>-toggle toggle open</#if>">
88 ${voc.getTitle(locale)}
89 <#if voc.getDescription(locale) != ""><span class="tooltip-content">${voc.getDescription(locale)}</span></#if>
90 </div>
91
92 <div class="categories">
93
94 <#if customCSSClassName?index_of(" SEARCH ") gt -1>
95 <div class="voc-search">
96 <input type="text" placeholder="Search..." class="search-${themeDisplay.getPortletDisplay().getNamespace()}" />
97 </div>
98 </#if>
99
100 <#list catList as cat>
101 <#assign num = 0 >
102 <#list entries as entry>
103
104 <#if entry.getFieldName()?number == cat.item.getCategoryId()>
105 <#assign num = entry.getFrequency() >
106 <#break>
107</#if>
108</#list>
109<div class="item <#if num == 0 >${classItemDisabled} </#if><#if listOfSelectedCategories?seq_index_of(cat.item.getCategoryId()) gt -1>selected</#if>" data-id="${cat.item.getCategoryId()}" data-parent="${cat.item.parentCategoryId}" data-occurence="${num}">
110 <#if classItemDisabled != "disabled" || num != 0>
111 <label for="${themeDisplay.getPortletDisplay().getNamespace()}term_${cat?index}">
112 </#if>
113 <i class="num">${num}</i>
114 <i class="icon-check"></i>
115 <input type="checkbox"
116 <#if listOfSelectedCategories?seq_index_of(cat.item.getCategoryId()) gt -1>checked</#if>
117class="facet-term"
118onChange="Liferay.Search.FacetUtil.changeSelection(event);"
119data-term-id="${cat.item.getCategoryId()}"
120id="${themeDisplay.getPortletDisplay().getNamespace()}term_${cat?index}"
121name="${cat.item.getCategoryId()}"
122>
123<#if removePrefix == true>
124<#assign title = cat.item.getTitle(locale)?replace('^([0-9]+[a-z]?[.)])', '', 'r')>
125<#else>
126<#assign title = cat.item.getTitle(locale)>
127</#if>
128<span>${title}</span>
129<#if cat.item.getDescription(locale) != ""><span class="tooltip-content">${cat.item.getDescription(locale)}</span></#if>
130<#if classItemDisabled != "disabled" || num != 0>
131</label>
132</#if>
133</div>
134</#list>
135</div>
136</div>
137<#if !customFacetDisplayContext.isNothingSelected()>
138<@liferay_aui.button
139cssClass="btn-link btn-reset facet-clear-btn"
140onClick="Liferay.Search.FacetUtil.clearSelections(event);"
141value="clear"
142/>
143</#if>
144</div>
145
146<#else>
147<div class="alert alert-warning text-center">
148 Error: Vocabulary name [<b>${vocName}</b>] doesn't exist
149</div>
150</#if>
151<style>
152 .trainingFilters {
153 transition: opacity 500ms ease;
154 opacity: 1;
155 }
156 .trainingFilters.loading:before {
157 content: '';
158 position: absolute;
159 top: 0;
160 bottom: 0;
161 left: 0;
162 right: 0;
163 background-color: rgba(255,255,255,0.8);
164 }
165 .trainingFilters.loading:after {
166 content: '';
167 position: absolute;
168 top: 100px;
169 left: 50%;
170 transform: translateX(-50%);
171 height: 64px;
172 width: 64px;
173 background:
174 url('https://static.coe.int/pics/loading.gif') no-repeat;
175 }
176 .trainingFilters:after {
177 content: "";
178 clear: both;
179 display: block;
180 }
181
182 .trainingFilters .vocabulary {
183 border-bottom: 1px solid #eaeaea;
184 }
185
186
187 .trainingFilters:not(.toggle-style) .vocabulary {
188 background-color: #f8f8f8;
189 margin-bottom: 10px;
190 }
191
192
193
194 .trainingFilters .icon-check:before {
195 content: "\f096";
196 background-color: #fff;
197 line-height: 0.7;
198 border-radius: 4px;
199 margin-bottom: 1px;
200 }
201
202 .trainingFilters .disabled > .icon-check:before {
203 content: "\f0c8";
204 font-size: 14px;
205 }
206
207 .trainingFilters .folder.selected > label > .icon-check:before,
208 .trainingFilters .item.selected > label > .icon-check:before {
209 content: "\f14a";
210 color: #1b7eac;
211 }
212
213 .trainingFilters .vocabulary .voc-title {
214 font-size: 15px;
215 padding: 10px 5px;
216 color: #777;
217 font-weight: 600;
218 text-transform: uppercase;
219 }
220
221 .trainingFilters:not(.toggle-style) .vocabulary .voc-title {
222 background-color: #dedede;
223 }
224
225 .trainingFilters .vocabulary .voc-title.toggle {
226 cursor: pointer;
227 transition: all 300ms ease;
228 padding-right: 30px;
229 position: relative;
230 }
231
232 .trainingFilters .vocabulary .voc-title.toggle.open {
233 background-color: #f8f8f8;
234 }
235
236 .trainingFilters .vocabulary .voc-title.toggle:after {
237 content: "\f0fe";
238 font-family: 'fontawesome-alloy', 'fontawesome';
239 float: right;
240 margin-right: 8px;
241 color: #1b7eac;
242 position: absolute;
243 right: 5px;
244 top: 50%;
245 transform: translateY(-50%);
246 }
247
248 .trainingFilters .vocabulary .voc-title.toggle.open:after {
249 content: "\f146";
250 }
251
252 .trainingFilters .vocabulary .voc-title.toggle:hover {
253 color: #1b7eac;
254 }
255
256 .trainingFilters .vocabulary .voc-title.toggle .counter-selected {
257 font-weight: 800;
258 font-size: 12px;
259 color: #1b7eac;
260 background-color: #e8e8e8;
261 border-radius: 10px;
262 width: 18px;
263 height: 18px;
264 display: inline-block;
265 text-align: center;
266 line-height: 16px;
267 margin-left: 5px;
268 padding: 1px;
269 }
270
271 .trainingFilters .folder,
272 .trainingFilters .item {
273 padding: 5px;
274 color: #4d4d4d;
275 cursor: pointer;
276 }
277
278 .trainingFilters .item > label {
279 display: block;
280 margin: 0;
281 }
282
283 .trainingFilters .item .facet-term {
284 display: none;
285 }
286
287 .trainingFilters.toggle-style .folder,
288 .trainingFilters.toggle-style .item {
289 background-color: #f8f8f8;
290 }
291
292 .trainingFilters .folder.selected,
293 .trainingFilters .item.selected {
294 color: #161616;
295 }
296
297 .trainingFilters .folder:hover,
298 .trainingFilters .item:hover {
299 background-color: #e3e3e3;
300 }
301
302 .trainingFilters .folder {
303 margin: 0 0;
304 background-color: #efefef;
305 font-weight: 600;
306 }
307
308
309 .trainingFilters .folder + div > .item {
310 padding-left: 25px;
311 }
312
313 .trainingFilters .folder + div .folder {
314 padding-left: 25px;
315 }
316
317 .trainingFilters .folder + div .folder + div > .item {
318 padding-left: 50px;
319 }
320
321 .trainingFilters i.num {
322 color: #797979;
323 float: right;
324 font-size: 14px;
325 line-height: 1.5em;
326 border-radius: 5px;
327 padding: 0 5px;
328 font-style: normal;
329 font-weight: 600;
330 margin: 2px 0;
331 }
332
333 .trainingFilters .item.selected > label > i.num {
334 color: #1b7eac;
335 }
336
337 .trainingFilters .tooltip-trigger i {
338 font-size: 15px!important;
339 margin-left: 5px;
340 }
341
342 .trainingFilters .item.disabled,
343 .trainingFilters .folder.disabled {
344 color: #bbbebf;
345 cursor: default;
346 }
347
348 .trainingFilters .item.disabled:hover,
349 .trainingFilters .folder.disabled:hover {
350 background-color: #f8f8f8;
351 }
352
353 .trainingFilters .btn-reset {
354 color: #1b7eac;
355 border: 1px solid #1b7eac;
356 background-color: transparent;
357 float: right;
358 padding: 5px 8px;
359 margin-top: 20px;
360 cursor: pointer;
361 text-decoration: none;
362 transition: all 300ms ease;
363 }
364
365 .trainingFilters .btn-reset:hover {
366 color: #fff;
367 background-color: #1b7eac;
368 }
369
370 .trainingFilters .tooltip-content {
371 font-weight: initial;
372 text-transform: initial;
373 }
374
375 .nbResultCatFilters {
376 text-align: center;
377 }
378
379 /*tags*/
380 .list-selected-cat:empty{
381 display: none;
382 }
383
384 .list-selected-cat {
385 }
386
387 .list-selected-cat .voc-container {
388 background: #f8f8f8;
389 padding: 3px 10px;
390 }
391 .list-selected-cat .voc-container:first-child {
392 padding-top: 10px;
393 }
394 .list-selected-cat .voc-container:last-child {
395 padding-bottom: 10px;
396 margin-bottom: 20px;
397 }
398
399 .list-selected-cat .voc-container .voc-name {
400 font-weight: 600;
401 margin-right: 10px;
402 display: inline-block
403 }
404 .list-selected-cat .voc-container .voc-name:after {
405 content: ":";
406 }
407
408 .list-selected-cat .cat-selected {
409 border-radius: 20px;
410 background-color: #007BC8;
411 /*background-color: #1b7eac;*/
412 color: #fff;
413 padding: 0 25px 0 10px;
414 margin: 2px 10px 2px 0;
415 display: inline-block;
416 white-space: nowrap;
417 overflow: hidden;
418 text-overflow: ellipsis;
419 max-width: 300px;
420 vertical-align: middle;
421 position: relative;
422 }
423
424 .list-selected-cat .cat-selected:hover {
425 transition: 1s max-width 1s ease;
426 max-width: 100%;
427 }
428
429 .list-selected-cat .cat-selected .icon {
430 position: absolute;
431 cursor: pointer;
432 left: 0;
433 right: 0;
434 top: 0;
435 bottom: 0;
436 }
437
438 .list-selected-cat .cat-selected .icon:hover {
439 color: #ff4041;
440 }
441
442 .list-selected-cat .cat-selected .icon:before {
443 position: absolute;
444 right: 8px;
445 top: 50%;
446 transform: translateY(-50%);
447 }
448
449 .voc-search{
450 background: #f8f8f8;
451 padding: 0 10px;
452 }
453
454 .voc-search input {
455 background-image:url(https://static.coe.int/pics/icons/2018/grey/search.svg);
456 background-repeat: no-repeat;
457 padding-left: 26px;
458 background-size: 20px;
459 background-position: 3px center;
460 width: 100%;
461 border: 1px solid #ccc;
462 }
463 /*options*/
464 .hidden-empty .trainingFilters .categories .item[data-occurence="0"]:not(.folder) {
465 display: none;
466 }
467</style>
468
469<script type="text/javascript">
470$(function(){
471 <#if !disabledToggle>
472 $('.${themeDisplay.getPortletDisplay().getNamespace()}-toggle').on('click', function() {
473 if ($(event.target).closest('.tooltip-content').length || $(event.target).closest('.tooltip-trigger').length ) {
474 return;
475 }
476 $(this).next().slideToggle();
477 $(this).toggleClass(['closed','open']);
478 });
479 </#if>
480
481 $('.categories .item').each(function(){
482 if($(this).data("parent") != 0) {
483 let currentChild = $(this).next('.row-fluid');
484 if($('.categories .item[data-id='+$(this).data("parent")+'] + .row-fluid').length) {
485 $('.categories .item[data-id='+$(this).data("parent")+'] + .row-fluid').append($(this)).append($(currentChild))
486 } else {
487 $('.categories .item[data-id='+$(this).data("parent")+']').addClass("folder").after($(this)).after($(currentChild))
488 $(this).wrap('<div class="row-fluid ">')
489 }
490 }
491 });
492
493 $(".search-${themeDisplay.getPortletDisplay().getNamespace()}").on("keyup", function() {
494 let contextualSearchValue = $(this).val();
495 $(this).closest('.vocabulary').find('.categories .item').each(function(i,el){
496 let $item = $(el);
497 if($item.text().toLowerCase().indexOf(contextualSearchValue) === -1 ){
498 $item.hide();
499 } else {
500 $item.show();
501 }
502 });
503 });
504});
505
506<#if customCSSClassName?index_of(" thm-color ") != -1>
507if (typeof custom_facet === 'undefined') {
508 var custom_facet = true;
509 $( document ).ready(function() {
510 var color = $('#coe-desktop-menu').css('background-color') || $('#coe .menu-direction > a').css('border-bottom-color');
511 if(color != "" && typeof(color) != "undefined") {
512 var base = /#1b7eac/g
513 $('.trainingFilters').parent().find('style').text($('.trainingFilters').parent().find('style').text().replace(base,color));
514 }
515 });
516}
517</#if>
518</script>
