Changes for page Show Hide Macro

Last modified by jklein on 2025/06/02 14:04

From version 19.1
edited by jklein
on 2025/06/02 14:02
Change comment: There is no comment for this version
To version 5.4
edited by jklein
on 2025/06/02 09:32
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -3,13 +3,10 @@
3 3  with the same kind of CSS rules. However, it is now based on jQuery, and need requireJS, so it requires
4 4  XWiki 5.x or more.
5 5  
6 -{{showhide title="PublicAPI" effect="slide" effectduration="0.5"}}
7 -{{code language="PowerShell"}}
8 -Hier steht neuer Code
9 -Code
10 -Code
11 -Code
12 -{{/code}}
6 +{{showhide}}
7 +Inhalt
8 +Inhalt
9 +Inhalt
13 13  {{/showhide}}
14 14  
15 15  {{info}}
XWiki.JavaScriptExtension[0]
Code
... ... @@ -1,31 +1,29 @@
1 1  require(['jquery'], function($) {
2 - function onClickHeader() {
3 - var header = $(this),
4 - content = header.next('.showhidecontent'),
5 - effect = header.attr('data-show-effect'),
6 - duration = parseInt(header.attr('data-show-duration')) || 300,
7 - iconEl = header.find('.showhide-icon');
2 + function onClick () {
3 + var button = $(this),
4 + content = button.parent().next(),
5 + effect = button.attr('data-show-effect'),
6 + data = button.data();
8 8  
9 - // Sicherheitsprüfung für Effekt
10 - if ($.inArray(effect, ['toggle', 'fadeToggle', 'slideToggle']) === -1) {
8 + if ($.inArray(effect, ['toggle', 'fadeToggle', 'slideToggle']) == -1)
11 11   effect = 'toggle';
12 - }
13 13  
14 - // Sichtbarkeitsstatus
15 - var isVisible = content.is(':visible');
16 - var newState = !isVisible;
11 + // Toggle-Zustand berechnen
12 + data.showHideState = !(('showHideState' in data) ? data.showHideState : content.is(':visible'));
17 17  
18 - // Nachricht + Pfeil setzen
19 - var message = newState ? header.attr('data-hide-message') : header.attr('data-show-message');
20 - var icon = newState ? '▼ ' : '► ';
21 - iconEl.html(icon + message);
14 + // Pfeil und Text setzen
15 + var message = button.attr(data.showHideState ? 'data-hide-message' : 'data-show-message');
16 + var icon = data.showHideState ? '▼ ' : '► ';
17 + button.html(icon + message);
22 22  
23 23   // Inhalt ein-/ausblenden
24 - content.stop()[effect](duration);
20 + content.stop()[effect](parseInt(button.attr('data-show-duration')));
21 +
22 + return false;
25 25   }
26 26  
27 - $(document).ready(function () {
28 - $('.showhide-header').on('click', onClickHeader);
25 + $(document).ready(function() {
26 + $('.showhidebutton').children('a').on('click', onClick);
29 29   });
30 30  });
31 31  
XWiki.WikiMacroClass[0]
Macro code
... ... @@ -20,19 +20,24 @@
20 20  #set($title = $escapetool.xml($mparams.title))
21 21  (% #if($divstyle && $divstyle!="") style="${divstyle}" #end %)
22 22  (((
23 +(% class="showhide-header" %)
24 +(((
23 23  {{html clean=false}}
24 -<div class="showhide-header"
25 - #if($id && $id!="") id="showhideheader${id}" #end
26 - data-show-duration="$effectduration"
27 - data-show-effect="$effect"
28 - data-show-message="$showmessage"
29 - data-hide-message="$hidemessage">
30 - <div class="showhide-header-flex">
31 - <div class="showhide-title">$title</div>
32 - <div class="showhide-icon">►</div>
26 +<div class="showhide-header-flex">
27 + <div class="showhide-title">$title</div>
28 + <div class="showhidebutton">
29 + <a href="javascript:void(0)"
30 + #if($id && $id!="")id="showhidebuttontext${id}" #end
31 + data-show-duration="$effectduration"
32 + data-show-effect="$effect"
33 + data-show-message="$showmessage"
34 + data-hide-message="$hidemessage">
35 + ► $showmessage
36 + </a>
33 33   </div>
34 34  </div>
35 35  {{/html}}
40 +)))
36 36  (% class="showhidecontent" #if($id && $id!="")id="showhidecontent${id}" #end#if($xcontext.action != 'edit') style="display: none;"#end %)
37 37  (((
38 38  (((
XWiki.WikiMacroParameterClass[0]
Parameter default value
... ... @@ -1,0 +1,1 @@
1 +Ausklappen
XWiki.WikiMacroParameterClass[1]
Parameter default value
... ... @@ -1,0 +1,1 @@
1 +Einklappen
XWiki.WikiMacroParameterClass[3]
Parameter default value
... ... @@ -1,1 +1,1 @@
1 -slide
1 +toggle
XWiki.WikiMacroParameterClass[7]
Parameter description
... ... @@ -1,0 +1,1 @@
1 +Titel
Parameter mandatory
... ... @@ -1,1 +1,1 @@
1 -No
1 +Yes
XWiki.StyleSheetExtension[0]
Caching policy
... ... @@ -1,0 +1,1 @@
1 +long
Code
... ... @@ -1,0 +1,19 @@
1 +.showhide-header-flex {
2 + display: flex;
3 + justify-content: space-between;
4 + align-items: center;
5 + padding: 6px 10px;
6 + font-weight: bold;
7 +}
8 +
9 +.showhide-title {
10 + flex: 1;
11 + text-align: left;
12 +}
13 +
14 +.showhidebutton a {
15 + text-decoration: none;
16 + cursor: pointer;
17 + font-weight: normal;
18 +}
19 +
Content Type
... ... @@ -1,0 +1,1 @@
1 +CSS
Name
... ... @@ -1,0 +1,1 @@
1 +ShowHideMacro Style
Parse content
... ... @@ -1,0 +1,1 @@
1 +No
Use this extension
... ... @@ -1,0 +1,1 @@
1 +currentPage
© Aagon GmbH 2025
Besuchen Sie unsere Aagon-Community