Skip to Content
0 Votes

Changes for page Expandable

Last modified by Ryan C on 2025/06/04 14:22
From version 3.1
edited by Ryan C
on 2025/04/30 07:54
Change comment: Migrated property [featureMandatory] from class [XWiki.WikiMacroParameterClass]
To version 4.1
edited by Ryan C
on 2025/06/04 14:22
Change comment: Install extension [rao:webhome/1.1.0]

Summary

Details

XWiki.JavaScriptExtension[0]
Code
... ... @@ -1,11 +1,11 @@
1 1  {
2 - // Animation parameters for opening and closing the expandable element
2 + // Animation parameters for expanding and collapsing the expandable element
3 3   const animationDurationMillis = 300;
4 4   const animationEasing = 'ease-in-out';
5 5  
6 6   // CSS class names
7 7   const expandableBaseClass = 'xw-expandable';
8 - const expandableOpenClass = 'xw-expandable_open';
8 + const expandableExpandedClass = 'xw-expandable_expanded';
9 9   const expandableHeaderClass = 'xw-expandable_header';
10 10   const expandableCaretClass = 'xw-expandable_caret';
11 11   const expandableContentClass = 'xw-expandable_content';
... ... @@ -12,7 +12,7 @@
12 12  
13 13   let ignoreEvents = false; // Indicates to ignore click and keypress events while animating
14 14  
15 - // Event handler when the opening or closing of the expandable element has been triggered.
15 + // Event handler when the expanding or collapsing of the expandable element has been triggered.
16 16   // Argument `toggleEvent` is a `CustomEvent` that contains the causing click or keypress event
17 17   // as "detail" property.
18 18   // It will be dispatched on `document` as event type "internal:expandable-toggle" whenever a
... ... @@ -38,9 +38,9 @@
38 38   ignoreEvents = true;
39 39   const expandableElem = ev.currentTarget.parentNode;
40 40  
41 - (expandableElem.classList.contains(expandableOpenClass)
42 - ? closeExpandable(expandableElem)
43 - : openExpandable(expandableElem)
41 + (expandableElem.classList.contains(expandableExpandedClass)
42 + ? collapseExpandable(expandableElem)
43 + : expandExpandable(expandableElem)
44 44   ).then(() => (ignoreEvents = false));
45 45   }
46 46  
... ... @@ -52,8 +52,8 @@
52 52   return expandableElem.querySelector(`& > .${expandableContentClass}`);
53 53   }
54 54  
55 - async function openExpandable(expandableElem) {
56 - expandableElem.classList.add(expandableOpenClass);
55 + async function expandExpandable(expandableElem) {
56 + expandableElem.classList.add(expandableExpandedClass);
57 57   const contentElem = getExpandableContent(expandableElem);
58 58   const caretElem = getExpandableCaret(expandableElem);
59 59  
... ... @@ -67,12 +67,12 @@
67 67   { transform: 'rotate(90deg)' },
68 68   ]);
69 69  
70 - closeOtherExpandablesOfAccordionIfRequired(expandableElem);
70 + collapseOtherExpandablesOfAccordionIfRequired(expandableElem);
71 71   await Promise.any([animateContent, animateCaret]);
72 72   }
73 73  
74 - async function closeExpandable(expandableElem) {
75 - if (!expandableElem.classList.contains(expandableOpenClass)) {
74 + async function collapseExpandable(expandableElem) {
75 + if (!expandableElem.classList.contains(expandableExpandedClass)) {
76 76   return;
77 77   }
78 78  
... ... @@ -90,7 +90,7 @@
90 90   ]);
91 91  
92 92   await Promise.any([animateContent, animateCaret]);
93 - expandableElem.classList.remove(expandableOpenClass);
93 + expandableElem.classList.remove(expandableExpandedClass);
94 94   }
95 95  
96 96   async function animate(elem, keyframes) {
... ... @@ -136,18 +136,18 @@
136 136   return accordionExpandables;
137 137   }
138 138  
139 - function closeOtherExpandablesOfAccordionIfRequired(expandableElem) {
139 + function collapseOtherExpandablesOfAccordionIfRequired(expandableElem) {
140 140   const expandablesOfAccordion = getAccordionExpandables(expandableElem);
141 141  
142 - const closingOfOtherExpandablesRequired = expandablesOfAccordion.some((elem) =>
142 + const collapsingOfOtherExpandablesRequired = expandablesOfAccordion.some((elem) =>
143 143   elem.hasAttribute('data-force-exclusive-accordion'),
144 144   );
145 145  
146 - if (!closingOfOtherExpandablesRequired) {
146 + if (!collapsingOfOtherExpandablesRequired) {
147 147   return;
148 148   }
149 149  
150 - expandablesOfAccordion.filter((it) => it !== expandableElem).forEach(closeExpandable);
150 + expandablesOfAccordion.filter((it) => it !== expandableElem).forEach(collapseExpandable);
151 151   }
152 152  
153 153   // Whenever a `click` or `keypress`event is dispatched on the header of an expandable element
XWiki.StyleSheetExtension[0]
Code
... ... @@ -67,7 +67,7 @@
67 67   }
68 68   }
69 69  
70 - &.xw-expandable_open {
70 + &.xw-expandable_expanded {
71 71   & > .xw-expandable_header > .xw-expandable_caret {
72 72   transform: rotate(90deg);
73 73   }
... ... @@ -77,7 +77,7 @@
77 77   }
78 78   }
79 79  
80 - &:not(.xw-expandable_open) {
80 + &:not(.xw-expandable_expanded) {
81 81   & > .xw-expandable_header > .xw-expandable_caret {
82 82   transform: rotate(0deg);
83 83   }
XWiki.WikiMacroClass[0]
Macro code
... ... @@ -1,4 +1,5 @@
1 1  {{velocity}}
2 +
2 2  #set($isEditing = $xcontext.action == 'get' || $xcontext.action == 'edit' || $request.outputSyntax == 'annotatedhtml' || $request.outputSyntax == 'annotatedxhtml')
3 3  #if($isEditing)
4 4   {{container cssClass="xw-expandable xw-expandable_editing"}}
... ... @@ -11,8 +11,8 @@
11 11   #if($wikimacro.parameters.cssClass)
12 12   #set($expandableClassNames=$expandableClassNames + ' ' + $wikimacro.parameters.cssClass)
13 13   #end
14 - #if($wikimacro.parameters.expandByDefault)
15 - #set($expandableClassNames=$expandableClassNames + ' xw-expandable xw-expandable_open')
15 + #if($wikimacro.parameters.expandByDefault || $xcontext.action == 'export')
16 + #set($expandableClassNames=$expandableClassNames + ' xw-expandable xw-expandable_expanded')
16 16   #end
17 17   #set($expandableAttributes='')
18 18   #if($wikimacro.parameters.forceExclusiveAccordion)
... ... @@ -25,7 +25,6 @@
25 25   class="xw-expandable_header"
26 26   onclick="document.dispatchEvent(new CustomEvent('internal:expandable-toggle', { detail: event }))"
27 27   onkeypress="document.dispatchEvent(new CustomEvent('internal:expandable-toggle', { detail: event }))">
28 -
29 29   <div class="xw-expandable_caret"></div>
30 30   <div class="xw-expandable_summary">
31 31   {{wikimacroparameter name="summary"/}}
... ... @@ -33,7 +33,9 @@
33 33   </a>
34 34   <div class="xw-expandable_content">
35 35   <div>
36 +
36 36   {{wikimacrocontent/}}
38 +
37 37   </div>
38 38   </div>
39 39   </div>