Skip to Content

Changes for page Solr Search

Last modified by teamwire004 on 2026/03/03 08:31
From version 6.1
edited by teamwire004
on 2026/03/03 08:31
Change comment: Install extension [org.xwiki.platform:xwiki-platform-search-solr-ui/17.10.3]
To version 5.1
edited by teamwire004
on 2026/01/13 09:12
Change comment: Install extension [org.xwiki.platform:xwiki-platform-search-solr-ui/17.10.2]

Summary

Details

XWiki.JavaScriptExtension[0]
Code
... ... @@ -11,19 +11,19 @@
11 11  
12 12   var collapseAllFacets = function(event) {
13 13   event.preventDefault();
14 - $(event.target).closest('.search-facets').find('.search-facet .search-facet-body').collapse('hide');
14 + $(event.target).closest('.search-facets').find('.search-facet').removeClass('expanded');
15 15   $(event.target).hide().parent().children('.search-facets-action-expandAll').show();
16 16   };
17 17  
18 18   var expandAllFacets = function(event) {
19 19   event.preventDefault();
20 - $(event.target).closest('.search-facets').find('.search-facet .search-facet-body').collapse('show');
20 + $(event.target).closest('.search-facets').find('.search-facet').addClass('expanded');
21 21   $(event.target).hide().parent().children('.search-facets-action-collapseAll').show();
22 22   };
23 23  
24 24   var updateExpandCollapseAllFacetsState = function(facetsContainer) {
25 - let facetCount = facetsContainer.find('.search-facet').length;
26 - let expandedFacetCount = facetsContainer.find('.search-facet-body.collapse.in').length;
25 + var facetCount = facetsContainer.find('.search-facet').length;
26 + var expandedFacetCount = facetsContainer.find('.search-facet.expanded').length;
27 27   if (expandedFacetCount > facetCount / 2) {
28 28   facetsContainer.find('.search-facets-action-collapseAll').show()
29 29   .parent().children('.search-facets-action-expandAll').hide();
... ... @@ -70,7 +70,8 @@
70 70   updateExpandCollapseAllFacetsState(facetsContainer);
71 71  
72 72   // Expand/Collapse toggle for each facet.
73 - facetsContainer.find('.search-facet-body').on('hidden.bs.collapse shown.bs.collapse', function(event) {
73 + facetsContainer.find('.facet-toggle').on('click', function(event) {
74 + $(event.target).parents('.search-facet').toggleClass('expanded');
74 74   updateExpandCollapseAllFacetsState(facetsContainer);
75 75   });
76 76  
... ... @@ -92,7 +92,7 @@
92 92  
93 93   var getSearchUIState = function() {
94 94   var expandedFacets = [];
95 - $('.search-facet:has(btn.facet-toggle:not(.collapsed))').each(function() {
96 + $('.search-facet.expanded').each(function() {
96 96   expandedFacets.push($(this).attr('data-name'));
97 97   });
98 98   return {
... ... @@ -103,7 +103,7 @@
103 103   var setSearchUIState = function(state) {
104 104   state = state || {};
105 105   var expandedFacets = state.expandedFacets || [];
106 - $('.search-facet:has(btn.facet-toggle.collapsed)').each(function() {
107 + $('.search-facet').not('.expanded').each(function() {
107 107   if (expandedFacets.indexOf($(this).attr('data-name')) >= 0) {
108 108   $(this).addClass('expanded');
109 109   }
XWiki.StyleSheetExtension[0]
Code
... ... @@ -229,8 +229,6 @@
229 229  
230 230  .search-facet {
231 231   padding: .2em 0;
232 - display: flex;
233 - flex-direction: column;
234 234  }
235 235  
236 236  .search-facets-header > p,
... ... @@ -273,6 +273,13 @@
273 273  }
274 274  
275 275  .search-facet-body {
274 + opacity: 0;
275 + visibility: hidden; /* This makes sure the element is removed from the accessibility tree. */
276 +
277 + position: absolute;
278 + transform: translateY(-10px); /* Start the animation slightly above */
279 + padding-top: .5em;
280 +
276 276   border-top-width: 0;
277 277   border-top-left-radius: 0;
278 278   border-top-right-radius: 0;
... ... @@ -298,13 +298,13 @@
298 298   box-shadow: unset;
299 299  }
300 300  
301 -.search-facet .search-facet-header .facet-toggle.collapsed > span, button.facet-value-toggle > span,
302 -.search-facet .search-facet-header .facet-toggle.collapsed > img, button.facet-value-toggle > img {
306 +.search-facet .search-facet-header .facet-toggle > span, button.facet-value-toggle > span,
307 +.search-facet .search-facet-header .facet-toggle > img, button.facet-value-toggle > img {
303 303   transform: rotate(90deg);
304 304  }
305 305  
306 -.search-facet .search-facet-header .facet-toggle > span, .expanded > button.facet-value-toggle > span,
307 -.search-facet .search-facet-header .facet-toggle > img, .expanded > button.facet-value-toggle > img {
311 +.search-facet.expanded .search-facet-header .facet-toggle > span, .expanded > button.facet-value-toggle > span,
312 +.search-facet.expanded .search-facet-header .facet-toggle > img, .expanded > button.facet-value-toggle > img {
308 308   transform: rotate(0deg);
309 309  }
310 310  
... ... @@ -313,10 +313,13 @@
313 313   .search-facet .search-facet-header .facet-toggle > img, button.facet-value-toggle > img {
314 314   transition: transform 0.2s ease;
315 315   }
321 +
322 + .search-facet-body {
323 + transition: opacity 0.3s ease, transform 0.3s ease;
324 + }
316 316  }
317 317  
318 -.search-facet:has(.search-facet-body.collapse.in),
319 -.search-facet:has(.search-facet-body.collapsing) {
327 +.search-facet.expanded {
320 320   & .search-facet-header {
321 321   border-bottom-width: 0;
322 322   border-bottom-left-radius: 0;
... ... @@ -323,9 +323,15 @@
323 323   border-bottom-right-radius: 0;
324 324  
325 325   & label {
326 - font-weight: var(--font-weight-semibold);
334 + font-weight: var(--font-weight-semibold);
327 327   }
328 328   }
337 + & .search-facet-body {
338 + opacity: 1;
339 + position: unset; /* This element should be positioned normally when shown. */
340 + visibility: visible;
341 + transform: translateY(0);
342 + }
329 329  }
330 330  
331 331  .search-facet-body ul, .search-facet-body ul.users {