Änderungen von Dokument Show Hide Macro

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

Zusammenfassung

Details

Seiteneigenschaften
Inhalt
... ... @@ -1,18 +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}}
7 -Inhalt
8 -Inhalt
9 -Inhalt
10 -{{/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}}
11 11  
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 -
16 16  == Without effect ==
17 17  
18 18  {{showhide showmessage="Show" hidemessage="Hide" style="background-color: #ccc"}}
... ... @@ -33,7 +33,7 @@
33 33  
34 34  == With a fade in effect ==
35 35  
36 -{{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"}}
37 37  Here is some hidden content that can become visible
38 38  Here is some hidden content that can become visible
39 39  Here is some hidden content that can become visible
... ... @@ -49,13 +49,11 @@
49 49  {{/showhide}}
50 50  {{/code}}
51 51  
52 -{{info}}
53 -Using ##effect="appear"## is still supported and provide the same behavior
54 -{{/info}}
44 +{{info}}Using ##effect="appear"## is still supported and provide the same behavior{{/info}}
55 55  
56 56  == With a sliding down effect ==
57 57  
58 -{{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"}}
59 59  Here is some hidden content that can become visible
60 60  Here is some hidden content that can become visible
61 61  Here is some hidden content that can become visible
... ... @@ -71,6 +71,6 @@
71 71  {{/showhide}}
72 72  {{/code}}
73 73  
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}}
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,29 +1,16 @@
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 -
8 - if ($.inArray(effect, ['toggle', 'fadeToggle', 'slideToggle']) == -1)
9 - effect = 'toggle';
10 -
11 - // Toggle-Zustand berechnen
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';
12 12   data.showHideState = !(('showHideState' in data) ? data.showHideState : content.is(':visible'));
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
9 + button.html(button.attr(data.showHideState ? 'data-hide-message' : 'data-show-message'));
20 20   content.stop()[effect](parseInt(button.attr('data-show-duration')));
21 -
22 22   return false;
23 23   }
24 -
25 25   $(document).ready(function() {
26 26   $('.showhidebutton').children('a').on('click', onClick);
27 27   });
28 28  });
29 -
XWiki.StyleSheetExtension[0]
Pufferstrategie
... ... @@ -1,1 +1,0 @@
1 -long
Code
... ... @@ -1,19 +1,0 @@
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,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 -currentPage
XWiki.WikiMacroClass[0]
Makro-Code
... ... @@ -17,25 +17,12 @@
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  (((
23 -(% class="showhide-header" %)
24 -(((
22 +(% class="showhidebutton" %)
23 +(((
25 25  {{html clean=false}}
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>
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>
39 39  {{/html}}
40 40  )))
41 41  (% class="showhidecontent" #if($id && $id!="")id="showhidecontent${id}" #end#if($xcontext.action != 'edit') style="display: none;"#end %)
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[7]
Parameter-Beschreibung
... ... @@ -1,1 +1,0 @@
1 -Titel
Parameter verpflichtend
... ... @@ -1,1 +1,0 @@
1 -Nein
Parameter-Name
... ... @@ -1,1 +1,0 @@
1 -title
© Aagon GmbH 2025
Besuchen Sie unsere Aagon-Community