Änderungen von Dokument Show Hide Macro

Zuletzt geändert von jklein am 2025/06/02 14:04
Von Version 1.1
bearbeitet von jklein
am 2025/01/28 16:09
Änderungskommentar: Install extension [org.xwiki.contrib.showhide:showhide-macro/2.0.2]
Auf Version 20.1
bearbeitet von jklein
am 2025/06/02 14:04
Änderungskommentar: Es gibt keinen Kommentar für diese Version

Zusammenfassung

Details

Seiteneigenschaften
Inhalt
... ... @@ -1,9 +1,11 @@
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 +{{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}}
7 7  
8 8  == Without effect ==
9 9  
... ... @@ -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"}}
30 +{{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}}
46 +{{info}}
47 +Using ##effect="appear"## is still supported and provide the same behavior
48 +{{/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"}}
52 +{{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 -
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}}
XWiki.JavaScriptExtension[0]
Code
... ... @@ -1,16 +1,31 @@
1 1  require(['jquery'], function($) {
2 - function onClick () {
3 - var button = $(this),
4 - content = button.parent().next(),
5 - effect = button.attr('data-show-effect'),
6 - data = button.data();
7 - if($.inArray(effect,['toggle','fadeToggle','slideToggle']) == -1) effect = 'toggle';
8 - data.showHideState = !(('showHideState' in data) ? data.showHideState : content.is(':visible'));
9 - button.html(button.attr(data.showHideState ? 'data-hide-message' : 'data-show-message'));
10 - content.stop()[effect](parseInt(button.attr('data-show-duration')));
11 - return false;
12 - }
13 - $(document).ready(function() {
14 - $('.showhidebutton').children('a').click(onClick);
15 - });
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');
8 +
9 + // Sicherheitsprüfung für Effekt
10 + if ($.inArray(effect, ['toggle', 'fadeToggle', 'slideToggle']) === -1) {
11 + effect = 'toggle';
12 + }
13 +
14 + // Sichtbarkeitsstatus
15 + var isVisible = content.is(':visible');
16 + var newState = !isVisible;
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);
22 +
23 + // Inhalt ein-/ausblenden
24 + content.stop()[effect](duration);
25 + }
26 +
27 + $(document).ready(function () {
28 + $('.showhide-header').on('click', onClickHeader);
29 + });
16 16  });
31 +
XWiki.WikiMacroClass[0]
Makro-Code
... ... @@ -17,18 +17,26 @@
17 17   #set($effect = "slideToggle")
18 18  #end
19 19  #set($effectduration = $mathtool.mul(1000,$mparams.effectduration))
20 +#set($title = $escapetool.xml($mparams.title))
20 20  (% #if($divstyle && $divstyle!="") style="${divstyle}" #end %)
21 21  (((
22 -(% class="showhidebutton" %)
23 -(((
24 24  {{html clean=false}}
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">$mparams.showmessage</a>
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>
33 + </div>
34 +</div>
26 26  {{/html}}
27 -)))
28 -(% class="showhidecontent" #if($id && $id!="")id="showhidecontent${id}" #end style="display: none;" %)
36 +(% class="showhidecontent" #if($id && $id!="")id="showhidecontent${id}" #end#if($xcontext.action != 'edit') style="display: none;"#end %)
29 29  (((
30 30  (((
31 -$xcontext.macro.content
39 +{{wikimacrocontent /}}
32 32  )))
33 33  )))
34 34  )))
Cached
... ... @@ -1,0 +1,1 @@
1 +Nein
Makrobeschreibung
... ... @@ -1,1 +1,1 @@
1 -Show Hide Macro
1 +Show/hide content with animations.
Asynchrones Rendern
... ... @@ -1,0 +1,1 @@
1 +Nein
Makroinhaltstyp
... ... @@ -1,0 +1,1 @@
1 +Wiki
XWiki.WikiMacroParameterClass[0]
Parameter-Vorgabe
... ... @@ -1,1 +1,0 @@
1 -Show !
XWiki.WikiMacroParameterClass[1]
Parameter-Vorgabe
... ... @@ -1,1 +1,0 @@
1 -Hide !
XWiki.WikiMacroParameterClass[3]
Parameter-Vorgabe
... ... @@ -1,1 +1,1 @@
1 -toggle
1 +slide
XWiki.WikiMacroParameterClass[7]
Parameter-Name
... ... @@ -1,0 +1,1 @@
1 +title
Parameter verpflichtend
... ... @@ -1,0 +1,1 @@
1 +Nein
© Aagon GmbH 2025
Besuchen Sie unsere Aagon-Community