Änderungen von Dokument Show Hide Macro

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

Zusammenfassung

Details

Seiteneigenschaften
Inhalt
... ... @@ -1,21 +1,10 @@
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 -{{showhide title="PublicAPI" effect="slide" effectduration="0.5"}}
7 -{{code language="PowerShell"}}
8 -Hier steht neuer Code
9 -Code
10 -Code
11 -Code
12 -{{/code}}
13 -{{/showhide}}
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}}
14 14  
15 -{{info}}
16 -Using ##id="..."## is still supported and provide the same HTML result but it is no more needed to achieve a working animation.
17 -{{/info}}
18 -
19 19  == Without effect ==
20 20  
21 21  {{showhide showmessage="Show" hidemessage="Hide" style="background-color: #ccc"}}
... ... @@ -36,7 +36,7 @@
36 36  
37 37  == With a fade in effect ==
38 38  
39 -{{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"}}
40 40  Here is some hidden content that can become visible
41 41  Here is some hidden content that can become visible
42 42  Here is some hidden content that can become visible
... ... @@ -52,13 +52,11 @@
52 52  {{/showhide}}
53 53  {{/code}}
54 54  
55 -{{info}}
56 -Using ##effect="appear"## is still supported and provide the same behavior
57 -{{/info}}
44 +{{info}}Using ##effect="appear"## is still supported and provide the same behavior{{/info}}
58 58  
59 59  == With a sliding down effect ==
60 60  
61 -{{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"}}
62 62  Here is some hidden content that can become visible
63 63  Here is some hidden content that can become visible
64 64  Here is some hidden content that can become visible
... ... @@ -74,6 +74,6 @@
74 74  {{/showhide}}
75 75  {{/code}}
76 76  
77 -{{info}}
78 -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.
79 -{{/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,16 @@
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');
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 - });
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 + });
30 30  });
31 -
XWiki.StyleSheetExtension[0]
Pufferstrategie
... ... @@ -1,1 +1,0 @@
1 -long
Code
... ... @@ -1,54 +1,0 @@
1 -.showhide-header {
2 - border: 1px solid #ccc;
3 - background-color: #f7f7f7;
4 - border-radius: 4px 4px 0 0;
5 - padding: 8px 12px;
6 - margin-bottom: 0;
7 -}
8 -
9 -.showhide-header-flex {
10 - display: flex;
11 - justify-content: space-between;
12 - align-items: center;
13 - padding: 6px 0px;
14 - font-weight: bold;
15 -}
16 -
17 -.showhide-title {
18 - flex: 1;
19 - text-align: left;
20 -}
21 -
22 -.showhidebutton a {
23 - text-decoration: none;
24 - cursor: pointer;
25 - font-weight: normal;
26 -}
27 -
28 -.showhidecontent {
29 - border: 1px solid #ccc;
30 - border-top: none;
31 - border-radius: 0 0 4px 4px;
32 - padding: 10px;
33 - background-color: #fff;
34 -}
35 -
36 -.showhide-header:hover {
37 - background-color: #f0f0f0;
38 - cursor: default;
39 -}
40 -
41 -.showhidebutton a:hover {
42 - text-decoration: underline;
43 -}
44 -
45 -.showhide-icon {
46 - color: #0645ad; /* typisches Link-Blau */
47 - text-decoration: underline;
48 - cursor: pointer;
49 -}
50 -
51 -.showhide-header:hover .showhide-icon {
52 - text-decoration: underline;
53 - color: #0b0080; /* dunkler beim Hover */
54 -}
Content Type
... ... @@ -1,1 +1,0 @@
1 -CSS
Name
... ... @@ -1,1 +1,0 @@
1 -ShowHideMacro Style
Inhalt parsen
... ... @@ -1,1 +1,0 @@
1 -Nein
Benutze diese Erweiterung
... ... @@ -1,1 +1,0 @@
1 -always
XWiki.WikiMacroClass[0]
Cached
... ... @@ -1,1 +1,0 @@
1 -Nein
Asynchrones Rendern
... ... @@ -1,1 +1,0 @@
1 -Nein
Makro-Code
... ... @@ -17,26 +17,18 @@
17 17   #set($effect = "slideToggle")
18 18  #end
19 19  #set($effectduration = $mathtool.mul(1000,$mparams.effectduration))
20 -#set($title = $escapetool.xml($mparams.title))
21 21  (% #if($divstyle && $divstyle!="") style="${divstyle}" #end %)
22 22  (((
22 +(% class="showhidebutton" %)
23 +(((
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">► $showmessage</div>
33 - </div>
34 -</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">$mparams.showmessage</a>
35 35  {{/html}}
36 -(% class="showhidecontent" #if($id && $id!="")id="showhidecontent${id}" #end#if($xcontext.action != 'edit') style="display: none;"#end %)
27 +)))
28 +(% class="showhidecontent" #if($id && $id!="")id="showhidecontent${id}" #end style="display: none;" %)
37 37  (((
38 38  (((
39 -{{wikimacrocontent /}}
31 +$xcontext.macro.content
40 40  )))
41 41  )))
42 42  )))
Makroinhaltstyp
... ... @@ -1,1 +1,0 @@
1 -Wiki
Makrobeschreibung
... ... @@ -1,1 +1,1 @@
1 -Show/hide content with animations.
1 +Show Hide Macro
XWiki.WikiMacroParameterClass[0]
Parameter-Vorgabe
... ... @@ -1,1 +1,1 @@
1 -Ausklappen
1 +Show !
XWiki.WikiMacroParameterClass[1]
Parameter-Vorgabe
... ... @@ -1,1 +1,1 @@
1 -Einklappen
1 +Hide !
XWiki.WikiMacroParameterClass[3]
Parameter-Vorgabe
... ... @@ -1,1 +1,1 @@
1 -slide
1 +toggle
XWiki.WikiMacroParameterClass[7]
Parameter verpflichtend
... ... @@ -1,1 +1,0 @@
1 -Nein
Parameter-Name
... ... @@ -1,1 +1,0 @@
1 -title
© Aagon GmbH 2026
Besuchen Sie unsere Aagon-Community