Änderungen von Dokument Show Hide Macro

Zuletzt geändert von jklein am 2025/06/02 14:04

Von Version 5.1
bearbeitet von jklein
am 2025/06/02 09:12
Änderungskommentar: Es gibt keinen Kommentar für diese Version
Auf Version 7.2
bearbeitet von jklein
am 2025/06/02 09:39
Änderungskommentar: Es gibt keinen Kommentar für diese Version

Zusammenfassung

Details

Seiteneigenschaften
Inhalt
... ... @@ -3,7 +3,7 @@
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}}
6 +{{showhide title="PublicAPI"}}
7 7  Inhalt
8 8  Inhalt
9 9  Inhalt
XWiki.JavaScriptExtension[0]
Code
... ... @@ -1,16 +1,26 @@
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.closest('.showhide-header').next('.showhidecontent'),
5 + effect = button.attr('data-show-effect'),
6 + data = button.data();
7 +
8 + if ($.inArray(effect, ['toggle', 'fadeToggle', 'slideToggle']) == -1)
9 + effect = 'toggle';
10 +
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'));
12 +
13 + var message = button.attr(data.showHideState ? 'data-hide-message' : 'data-show-message');
14 + var icon = data.showHideState ? '▼ ' : '► ';
15 + button.html(icon + message);
16 +
10 10   content.stop()[effect](parseInt(button.attr('data-show-duration')));
18 +
11 11   return false;
12 12   }
21 +
13 13   $(document).ready(function() {
14 14   $('.showhidebutton').children('a').on('click', onClick);
15 15   });
16 16  });
26 +
XWiki.WikiMacroClass[0]
Makro-Code
... ... @@ -17,12 +17,25 @@
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 -(((
23 +(% class="showhide-header" %)
24 +(((
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>
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>
37 + </div>
38 +</div>
26 26  {{/html}}
27 27  )))
28 28  (% class="showhidecontent" #if($id && $id!="")id="showhidecontent${id}" #end#if($xcontext.action != 'edit') style="display: none;"#end %)
XWiki.StyleSheetExtension[0]
Pufferstrategie
... ... @@ -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
Inhalt parsen
... ... @@ -1,0 +1,1 @@
1 +Nein
Benutze diese Erweiterung
... ... @@ -1,0 +1,1 @@
1 +currentPage
XWiki.WikiMacroParameterClass[7]
Parameter verpflichtend
... ... @@ -1,0 +1,1 @@
1 +Nein
Parameter-Name
... ... @@ -1,0 +1,1 @@
1 +title
© Aagon GmbH 2025
Besuchen Sie unsere Aagon-Community