Skip to Content
0 Votes

Changes for page Expandable

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

Summary

Details

XWiki.JavaScriptExtension[0]
Code
... ... @@ -1,11 +1,11 @@
1 1  {
2 - // Animation parameters for expanding and collapsing the expandable element
2 + // Animation parameters for opening and closing 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 expandableExpandedClass = 'xw-expandable_expanded';
8 + const expandableOpenClass = 'xw-expandable_open';
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 expanding or collapsing of the expandable element has been triggered.
15 + // Event handler when the opening or closing 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(expandableExpandedClass)
42 - ? collapseExpandable(expandableElem)
43 - : expandExpandable(expandableElem)
41 + (expandableElem.classList.contains(expandableOpenClass)
42 + ? closeExpandable(expandableElem)
43 + : openExpandable(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 expandExpandable(expandableElem) {
56 - expandableElem.classList.add(expandableExpandedClass);
55 + async function openExpandable(expandableElem) {
56 + expandableElem.classList.add(expandableOpenClass);
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 - collapseOtherExpandablesOfAccordionIfRequired(expandableElem);
70 + closeOtherExpandablesOfAccordionIfRequired(expandableElem);
71 71   await Promise.any([animateContent, animateCaret]);
72 72   }
73 73  
74 - async function collapseExpandable(expandableElem) {
75 - if (!expandableElem.classList.contains(expandableExpandedClass)) {
74 + async function closeExpandable(expandableElem) {
75 + if (!expandableElem.classList.contains(expandableOpenClass)) {
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(expandableExpandedClass);
93 + expandableElem.classList.remove(expandableOpenClass);
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 collapseOtherExpandablesOfAccordionIfRequired(expandableElem) {
139 + function closeOtherExpandablesOfAccordionIfRequired(expandableElem) {
140 140   const expandablesOfAccordion = getAccordionExpandables(expandableElem);
141 141  
142 - const collapsingOfOtherExpandablesRequired = expandablesOfAccordion.some((elem) =>
142 + const closingOfOtherExpandablesRequired = expandablesOfAccordion.some((elem) =>
143 143   elem.hasAttribute('data-force-exclusive-accordion'),
144 144   );
145 145  
146 - if (!collapsingOfOtherExpandablesRequired) {
146 + if (!closingOfOtherExpandablesRequired) {
147 147   return;
148 148   }
149 149  
150 - expandablesOfAccordion.filter((it) => it !== expandableElem).forEach(collapseExpandable);
150 + expandablesOfAccordion.filter((it) => it !== expandableElem).forEach(closeExpandable);
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_expanded {
70 + &.xw-expandable_open {
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_expanded) {
80 + &:not(.xw-expandable_open) {
81 81   & > .xw-expandable_header > .xw-expandable_caret {
82 82   transform: rotate(0deg);
83 83   }
XWiki.WikiMacroClass[0]
Macro code
... ... @@ -1,5 +1,4 @@
1 1  {{velocity}}
2 -
3 3  #set($isEditing = $xcontext.action == 'get' || $xcontext.action == 'edit' || $request.outputSyntax == 'annotatedhtml' || $request.outputSyntax == 'annotatedxhtml')
4 4  #if($isEditing)
5 5   {{container cssClass="xw-expandable xw-expandable_editing"}}
... ... @@ -12,8 +12,8 @@
12 12   #if($wikimacro.parameters.cssClass)
13 13   #set($expandableClassNames=$expandableClassNames + ' ' + $wikimacro.parameters.cssClass)
14 14   #end
15 - #if($wikimacro.parameters.expandByDefault || $xcontext.action == 'export')
16 - #set($expandableClassNames=$expandableClassNames + ' xw-expandable xw-expandable_expanded')
14 + #if($wikimacro.parameters.expandByDefault)
15 + #set($expandableClassNames=$expandableClassNames + ' xw-expandable xw-expandable_open')
17 17   #end
18 18   #set($expandableAttributes='')
19 19   #if($wikimacro.parameters.forceExclusiveAccordion)
... ... @@ -26,6 +26,7 @@
26 26   class="xw-expandable_header"
27 27   onclick="document.dispatchEvent(new CustomEvent('internal:expandable-toggle', { detail: event }))"
28 28   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,9 +33,7 @@
33 33   </a>
34 34   <div class="xw-expandable_content">
35 35   <div>
36 -
37 37   {{wikimacrocontent/}}
38 -
39 39   </div>
40 40   </div>
41 41   </div>