1<@liferay_ui["panel-container"]
2 extended=true
3 id="${namespace + 'facetAssetCategoriesPanelContainer'}"
4 markupView="lexicon"
5 persistState=true
6>
7 <@liferay_ui.panel
8 collapsible=true
9 cssClass="search-facet"
10 id="${namespace + 'facetAssetCategoriesPanel'}"
11 markupView="lexicon"
12 persistState=true
13 title="${customFacetDisplayContext.getDisplayCaption()}"
14 >
15 <#if entries?has_content>
16 <input class="country-input" id="${namespace}countryFilter" type="text" onClick="${namespace}showOptions()" onkeyup="${namespace}search()" placeholder="${languageUtil.get(locale, 'search-a-country')}"/>
17 <ul id="${namespace}countryList" style="display:none" class="list-unstyled">
18 <#assign count = 0 />
19 <#list entries as entry>
20 <#assign count = entry?index />
21 <li class="treeview-item facet-value ${(count > 2 && !entry.isSelected())?then('d-none', '')}">
22 <@clay.button
23 cssClass="${(entry.getFrequency() != 0)?then('facet-term', '')} ${(entry.isSelected())?then('facet-term-selected', 'facet-term-unselected')} "
24 data\-term\-id="${entry.getFilterValue()}"
25 displayType="link"
26 disabled="${(entry.getFrequency() != 0)?then('false', 'true')}"
27 onClick="if (!isResponsive()) Liferay.Search.FacetUtil.changeSelection(event); else { $(this).toggleClass('facet-term-selected').toggleClass('facet-term-unselected')}"
28 >
29 <#assign countryTitle = htmlUtil.escape(cyclicaCommerceUtil.getCountryByLetterCode(companyId, entry.getBucketText()).getTitle(locale)) />
30 <#if entry.isSelected()>
31 <strong>
32 ${countryTitle}
33 </strong>
34 <#else>
35 ${countryTitle}
36 </#if>
37 <#if entry.isFrequencyVisible()>
38 <small class="term-count">
39 (${entry.getFrequency()})
40 </small>
41 </#if>
42 </@clay.button>
43 </li>
44 </#list>
45 </ul>
46 <#if (entries?size > 3) >
47 <a id="${namespace}view_more" class="view-more" href="javascript:${namespace}viewMore()"> ${languageUtil.get(locale, 'view-more')}</a>
48 </#if>
49 </#if>
50 </@>
51</@>
52
53
54<@liferay_aui.script>
55
56 function ${namespace}showOptions(){
57 var countryList = document.getElementById("${namespace}countryList");
58 countryList.style.display = "";
59 }
60
61 function ${namespace}search() {
62 var text = document.getElementById("${namespace}countryFilter").value.toUpperCase();
63 var countryList = document.getElementById("${namespace}countryList");
64 var lis = countryList.getElementsByClassName("treeview-item");
65 for (var i = 0; i < lis.length; i++) {
66 var txtValue = lis[i].textContent || lis[i].innerText;
67 if (normalizeText(txtValue).includes(normalizeText(text))){
68 console.log(lis[i].classList.contains('d-none') == true);
69 if(lis[i].classList.contains('d-none') == true){
70 lis[i].style.cssText = "display: block !important";
71 } else{
72 lis[i].style.display = "";
73 }
74 } else{
75 lis[i].style.display = "none";
76 }
77 if (text == ""){
78 lis[i].style.display = "";
79 }
80 }
81 }
82
83 function normalizeText(s) {
84 var accent_map = {'á':'a', 'é':'e', 'è':'e', 'í':'i','ó':'o','ú':'u','Á':'a', 'É':'e', 'è':'e', 'Í':'i','Ó':'o','Ú':'u'};
85 if (!s) { return ''; }
86 var ret = '';
87 for (var i = 0; i < s.length; i++) {
88 ret += accent_map[s.charAt(i)] || s.charAt(i);
89 }
90 return ret.toUpperCase();
91 }
92
93 function ${namespace}viewMore() {
94 var countryList = document.getElementById("${namespace}countryList");
95 var lis = countryList.getElementsByClassName("treeview-item");
96 for (var i = 0; i < lis.length; i++) {
97 lis[i].classList.remove('d-none');
98 }
99 document.getElementById("${namespace}view_more").classList.add("d-none");
100 }
101</@>
