Changes for page Show Hide Macro

Last modified by jklein on 2025/06/02 14:04
From version 20.1
edited by jklein
on 2025/06/02 14:04
Change comment: There is no comment for this version
To version 3.2
edited by jklein
on 2025/06/02 09:10
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -1,11 +1,9 @@
1 1  Wiki macros implementation for simple show/hide of a content with some animations.
2 -This version 2.0 is HTML compatible with the old version, so that existing project could continue styling
2 +This version 2.0 is HTML compatible with the old version, so that existing project could continue styling
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 -{{info}}
7 -Using ##id="..."## is still supported and provide the same HTML result but it is no more needed to achieve a working animation.
8 -{{/info}}
6 +{{info}}Using ##id="..."## is still supported and provide the same HTML result but it is no more needed to achieve a working animation.{{/info}}
9 9  
10 10  == Without effect ==
11 11  
... ... @@ -27,7 +27,7 @@
27 27  
28 28  == With a fade in effect ==
29 29  
30 -{{showhide showmessage="Show" hidemessage="Hide" effect="fade" effectduration="2" style="background-color: #ccc"}}
28 +{{showhide showmessage="Show" hidemessage="Hide" effect="fade" effectduration="2" style="background-color: #ccc"}}
31 31  Here is some hidden content that can become visible
32 32  Here is some hidden content that can become visible
33 33  Here is some hidden content that can become visible
... ... @@ -43,13 +43,11 @@
43 43  {{/showhide}}
44 44  {{/code}}
45 45  
46 -{{info}}
47 -Using ##effect="appear"## is still supported and provide the same behavior
48 -{{/info}}
44 +{{info}}Using ##effect="appear"## is still supported and provide the same behavior{{/info}}
49 49  
50 50  == With a sliding down effect ==
51 51  
52 -{{showhide showmessage="Show" hidemessage="Hide" effect="slide" effectduration="0.5" style="background-color: #ccc"}}
48 +{{showhide showmessage="Show" hidemessage="Hide" effect="slide" effectduration="0.5" style="background-color: #ccc"}}
53 53  Here is some hidden content that can become visible
54 54  Here is some hidden content that can become visible
55 55  Here is some hidden content that can become visible
... ... @@ -65,6 +65,6 @@
65 65  {{/showhide}}
66 66  {{/code}}
67 67  
68 -{{info}}
69 -This effect is equivalent to ##effect="blind"## in the 1.0 macro, so both ##slide## and ##blind## effect are now using the exact same animation.
70 -{{/info}}
64 +{{info}}This effect is equivalent to ##effect="blind"## in the 1.0 macro, so both ##slide## and ##blind## effect are now using the exact same animation.{{/info}}
65 +
66 +
XWiki.JavaScriptExtension[0]
Code
... ... @@ -1,31 +1,31 @@
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 + // Determine current visibility and toggle state
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 + // Determine message and icon
15 + var message = button.attr(data.showHideState ? 'data-hide-message' : 'data-show-message');
16 + var icon = data.showHideState ? '▼ ' : '► ';
22 22  
23 - // Inhalt ein-/ausblenden
24 - content.stop()[effect](duration);
18 + // Update button text with icon
19 + button.html(icon + message);
20 +
21 + // Perform the animation
22 + content.stop()[effect](parseInt(button.attr('data-show-duration')));
23 +
24 + return false;
25 25   }
26 26  
27 - $(document).ready(function () {
28 - $('.showhide-header').on('click', onClickHeader);
27 + $(document).ready(function() {
28 + $('.showhidebutton').children('a').on('click', onClick);
29 29   });
30 30  });
31 31  
XWiki.WikiMacroClass[0]
Macro code
... ... @@ -11,6 +11,17 @@
11 11  #set($hidemessage = $escapetool.xml($mparams.hidemessage))
12 12  #set($divstyle = $escapetool.xml($mparams.style))
13 13  #set($effect = $escapetool.xml($mparams.effect))
14 +#set($title = $escapetool.xml($mparams.title))
15 +
16 +## Standardtexte setzen
17 +#if(!$showmessage || $showmessage == "")
18 + #set($showmessage = "Anzeigen")
19 +#end
20 +#if(!$hidemessage || $hidemessage == "")
21 + #set($hidemessage = "Verbergen")
22 +#end
23 +
24 +## Effekte setzen
14 14  #if($effect == "appear" || $effect == "fade")
15 15   #set($effect = "fadeToggle")
16 16  #elseif ($effect == "blind" || $effect == "slide")
... ... @@ -17,27 +17,37 @@
17 17   #set($effect = "slideToggle")
18 18  #end
19 19  #set($effectduration = $mathtool.mul(1000,$mparams.effectduration))
20 -#set($title = $escapetool.xml($mparams.title))
31 +
32 +## HTML-Struktur
21 21  (% #if($divstyle && $divstyle!="") style="${divstyle}" #end %)
22 22  (((
35 +
36 +(% class="showhide-header" %)
37 +(((
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>
39 +<div class="showhide-header-flex">
40 + <div class="showhide-title">$title</div>
41 + <div class="showhidebutton">
42 + <a href="javascript:void(0)"
43 + #if($id && $id!="")id="showhidebuttontext${id}" #end
44 + data-show-duration="$effectduration"
45 + data-show-effect="$effect"
46 + data-show-message="$showmessage"
47 + data-hide-message="$hidemessage">
48 + ► $showmessage
49 + </a>
33 33   </div>
34 34  </div>
35 35  {{/html}}
53 +)))
54 +
36 36  (% class="showhidecontent" #if($id && $id!="")id="showhidecontent${id}" #end#if($xcontext.action != 'edit') style="display: none;"#end %)
37 -(((
38 -(((
56 +(((
57 +(((
39 39  {{wikimacrocontent /}}
59 +)))
40 40  )))
61 +
41 41  )))
42 -)))
43 43  {{/velocity}}
64 +
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 name
... ... @@ -1,1 +1,0 @@
1 -title
Parameter mandatory
... ... @@ -1,1 +1,0 @@
1 -No
XWiki.StyleSheetExtension[0]
Caching policy
... ... @@ -1,0 +1,1 @@
1 +long
Code
... ... @@ -1,0 +1,22 @@
1 +.showhide-header-flex {
2 + display: flex;
3 + justify-content: space-between;
4 + align-items: center;
5 + background-color: #f9f9f9;
6 + padding: 6px 10px;
7 + border: 1px solid #ddd;
8 + border-radius: 4px 4px 0 0;
9 + font-weight: bold;
10 +}
11 +
12 +.showhide-title {
13 + flex: 1;
14 + text-align: left;
15 +}
16 +
17 +.showhidebutton a {
18 + text-decoration: none;
19 + cursor: pointer;
20 + font-weight: normal;
21 +}
22 +
Name
... ... @@ -1,0 +1,1 @@
1 +ShowHide Style
© Aagon GmbH 2025
Besuchen Sie unsere Aagon-Community