Changes for page Show Hide Macro

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

Summary

Details

Page properties
Content
... ... @@ -1,10 +1,18 @@
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}}Using ##id="..."## is still supported and provide the same HTML result but it is no more needed to achieve a working animation.{{/info}}
6 +{{showhide}}
7 +Inhalt
8 +Inhalt
9 +Inhalt
10 +{{/showhide}}
7 7  
12 +{{info}}
13 +Using ##id="..."## is still supported and provide the same HTML result but it is no more needed to achieve a working animation.
14 +{{/info}}
15 +
8 8  == Without effect ==
9 9  
10 10  {{showhide showmessage="Show" hidemessage="Hide" style="background-color: #ccc"}}
... ... @@ -25,7 +25,7 @@
25 25  
26 26  == With a fade in effect ==
27 27  
28 -{{showhide showmessage="Show" hidemessage="Hide" effect="fade" effectduration="2" style="background-color: #ccc"}}
36 +{{showhide showmessage="Show" hidemessage="Hide" effect="fade" effectduration="2" style="background-color: #ccc"}}
29 29  Here is some hidden content that can become visible
30 30  Here is some hidden content that can become visible
31 31  Here is some hidden content that can become visible
... ... @@ -41,11 +41,13 @@
41 41  {{/showhide}}
42 42  {{/code}}
43 43  
44 -{{info}}Using ##effect="appear"## is still supported and provide the same behavior{{/info}}
52 +{{info}}
53 +Using ##effect="appear"## is still supported and provide the same behavior
54 +{{/info}}
45 45  
46 46  == With a sliding down effect ==
47 47  
48 -{{showhide showmessage="Show" hidemessage="Hide" effect="slide" effectduration="0.5" style="background-color: #ccc"}}
58 +{{showhide showmessage="Show" hidemessage="Hide" effect="slide" effectduration="0.5" style="background-color: #ccc"}}
49 49  Here is some hidden content that can become visible
50 50  Here is some hidden content that can become visible
51 51  Here is some hidden content that can become visible
... ... @@ -61,6 +61,6 @@
61 61  {{/showhide}}
62 62  {{/code}}
63 63  
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 -
74 +{{info}}
75 +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.
76 +{{/info}}
XWiki.JavaScriptExtension[0]
Code
... ... @@ -1,24 +1,22 @@
1 1  require(['jquery'], function($) {
2 2   function onClick () {
3 3   var button = $(this),
4 - content = button.parent().next(),
5 - effect = button.attr('data-show-effect'),
6 - data = button.data();
4 + content = button.parent().next(),
5 + effect = button.attr('data-show-effect'),
6 + data = button.data();
7 7  
8 8   if ($.inArray(effect, ['toggle', 'fadeToggle', 'slideToggle']) == -1)
9 9   effect = 'toggle';
10 10  
11 - // Determine current visibility and toggle state
11 + // Toggle-Zustand berechnen
12 12   data.showHideState = !(('showHideState' in data) ? data.showHideState : content.is(':visible'));
13 13  
14 - // Determine message and icon
14 + // Pfeil und Text setzen
15 15   var message = button.attr(data.showHideState ? 'data-hide-message' : 'data-show-message');
16 16   var icon = data.showHideState ? '▼ ' : '► ';
17 -
18 - // Update button text with icon
19 19   button.html(icon + message);
20 20  
21 - // Perform the animation
19 + // Inhalt ein-/ausblenden
22 22   content.stop()[effect](parseInt(button.attr('data-show-duration')));
23 23  
24 24   return false;
XWiki.StyleSheetExtension[0]
Caching policy
... ... @@ -1,1 +1,0 @@
1 -long
Code
... ... @@ -1,22 +1,0 @@
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,1 +1,0 @@
1 -ShowHide Style
XWiki.WikiMacroClass[0]
Macro code
... ... @@ -11,17 +11,6 @@
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
25 25  #if($effect == "appear" || $effect == "fade")
26 26   #set($effect = "fadeToggle")
27 27  #elseif ($effect == "blind" || $effect == "slide")
... ... @@ -28,37 +28,19 @@
28 28   #set($effect = "slideToggle")
29 29  #end
30 30  #set($effectduration = $mathtool.mul(1000,$mparams.effectduration))
31 -
32 -## HTML-Struktur
33 33  (% #if($divstyle && $divstyle!="") style="${divstyle}" #end %)
34 34  (((
35 -
36 -(% class="showhide-header" %)
37 -(((
22 +(% class="showhidebutton" %)
23 +(((
38 38  {{html clean=false}}
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>
50 - </div>
51 -</div>
25 +<a href="javascript:void(0)" #if($id && $id!="")id="showhidebuttontext${id}" #end data-show-duration="$effectduration" data-show-effect="$effect" data-show-message="$showmessage" data-hide-message="$hidemessage">► $showmessage</a>
52 52  {{/html}}
53 53  )))
54 -
55 55  (% class="showhidecontent" #if($id && $id!="")id="showhidecontent${id}" #end#if($xcontext.action != 'edit') style="display: none;"#end %)
56 -(((
57 -(((
29 +(((
30 +(((
58 58  {{wikimacrocontent /}}
59 -)))
60 60  )))
61 -
62 62  )))
34 +)))
63 63  {{/velocity}}
64 -
© Aagon GmbH 2025
Besuchen Sie unsere Aagon-Community