Changes for page Show Hide Macro

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

From version 5.1
edited by jklein
on 2025/06/02 09:12
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

XWiki.JavaScriptExtension[0]
Code
... ... @@ -1,16 +1,29 @@
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();
7 - if($.inArray(effect,['toggle','fadeToggle','slideToggle']) == -1) effect = 'toggle';
4 + content = button.parent().next(),
5 + effect = button.attr('data-show-effect'),
6 + data = button.data();
7 +
8 + if ($.inArray(effect, ['toggle', 'fadeToggle', 'slideToggle']) == -1)
9 + effect = 'toggle';
10 +
11 + // Toggle-Zustand berechnen
8 8   data.showHideState = !(('showHideState' in data) ? data.showHideState : content.is(':visible'));
9 - button.html(button.attr(data.showHideState ? 'data-hide-message' : 'data-show-message'));
13 +
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);
18 +
19 + // Inhalt ein-/ausblenden
10 10   content.stop()[effect](parseInt(button.attr('data-show-duration')));
21 +
11 11   return false;
12 12   }
24 +
13 13   $(document).ready(function() {
14 14   $('.showhidebutton').children('a').on('click', onClick);
15 15   });
16 16  });
29 +
XWiki.WikiMacroClass[0]
Macro code
... ... @@ -22,7 +22,7 @@
22 22  (% class="showhidebutton" %)
23 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>
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>
26 26  {{/html}}
27 27  )))
28 28  (% class="showhidecontent" #if($id && $id!="")id="showhidecontent${id}" #end#if($xcontext.action != 'edit') style="display: none;"#end %)
© Aagon GmbH 2025
Besuchen Sie unsere Aagon-Community