Changes for page Show Hide Macro

Last modified by Helge Dahl on 2018/01/22 10:41
From empty
To version 1.1
edited by Helge Dahl
on 2018/01/22 10:41
Change comment: Install extension [org.xwiki.contrib.showhide:showhide-macro/2.0]

Summary

Details

Page properties
Title
... ... @@ -1,0 +1,1 @@
1 +Show Hide Macro
Parent
... ... @@ -1,0 +1,1 @@
1 +Macros.WebHome
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.XWikiGuest
1 +xwiki:XWiki.hde
Syntax
... ... @@ -1,1 +1,1 @@
1 -XWiki 2.1
1 +XWiki 2.0
Content
... ... @@ -1,0 +1,65 @@
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
3 +with the same kind of CSS rules. However, it is now based on jQuery, and need requireJS, so it requires
4 +XWiki 5.x or more.
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}}
7 +
8 +== Without effect ==
9 +
10 +{{showhide showmessage="Show" hidemessage="Hide" style="background-color: #ccc"}}
11 +Here is some hidden content that can become visible
12 +Here is some hidden content that can become visible
13 +Here is some hidden content that can become visible
14 +Here is some hidden content that can become visible
15 +{{/showhide}}
16 +
17 +{{code}}
18 +{{showhide showmessage="Show" hidemessage="Hide" style="background-color: #ccc"}}
19 +Here is some hidden content that can become visible
20 +Here is some hidden content that can become visible
21 +Here is some hidden content that can become visible
22 +Here is some hidden content that can become visible
23 +{{/showhide}}
24 +{{/code}}
25 +
26 +== With a fade in effect ==
27 +
28 +{{showhide showmessage="Show" hidemessage="Hide" effect="fade" effectduration="2" style="background-color: #ccc"}}
29 +Here is some hidden content that can become visible
30 +Here is some hidden content that can become visible
31 +Here is some hidden content that can become visible
32 +Here is some hidden content that can become visible
33 +{{/showhide}}
34 +
35 +{{code}}
36 +{{showhide showmessage="Show" hidemessage="Hide" effect="fade" effectduration="2" style="background-color: #ccc"}}
37 +Here is some hidden content that can become visible
38 +Here is some hidden content that can become visible
39 +Here is some hidden content that can become visible
40 +Here is some hidden content that can become visible
41 +{{/showhide}}
42 +{{/code}}
43 +
44 +{{info}}Using ##effect="appear"## is still supported and provide the same behavior{{/info}}
45 +
46 +== With a sliding down effect ==
47 +
48 +{{showhide showmessage="Show" hidemessage="Hide" effect="slide" effectduration="0.5" style="background-color: #ccc"}}
49 +Here is some hidden content that can become visible
50 +Here is some hidden content that can become visible
51 +Here is some hidden content that can become visible
52 +Here is some hidden content that can become visible
53 +{{/showhide}}
54 +
55 +{{code}}
56 +{{showhide showmessage="Show" hidemessage="Hide" effect="slide" effectduration="0.5" style="background-color: #ccc"}}
57 +Here is some hidden content that can become visible
58 +Here is some hidden content that can become visible
59 +Here is some hidden content that can become visible
60 +Here is some hidden content that can become visible
61 +{{/showhide}}
62 +{{/code}}
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 +
XWiki.JavaScriptExtension[0]
Caching policy
... ... @@ -1,0 +1,1 @@
1 +long
Code
... ... @@ -1,0 +1,16 @@
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 + });
16 +});
Parse content
... ... @@ -1,0 +1,1 @@
1 +No
Use this extension
... ... @@ -1,0 +1,1 @@
1 +onDemand
XWiki.WikiMacroClass[0]
Macro code
... ... @@ -1,0 +1,32 @@
1 +{{velocity}}
2 +$xwiki.jsx.use("Macros.ShowHideMacro")
3 +#set($mparams = $xcontext.macro.params)
4 +#if($mparams.id)
5 + #set($id = $util.convertToAlphaNumeric($mparams.id))
6 +#end
7 +#set($showmessage = $escapetool.xml($mparams.showmessage))
8 +#set($hidemessage = $escapetool.xml($mparams.hidemessage))
9 +#set($divstyle = $escapetool.xml($mparams.style))
10 +#set($effect = $escapetool.xml($mparams.effect))
11 +#if($effect == "appear" || $effect == "fade")
12 + #set($effect = "fadeToggle")
13 +#elseif ($effect == "blind" || $effect == "slide")
14 + #set($effect = "slideToggle")
15 +#end
16 +#set($effectduration = $mathtool.mul(1000,$mparams.effectduration))
17 +(% #if($divstyle && $divstyle!="") style="${divstyle}" #end %)
18 +(((
19 +(% class="showhidebutton" %)
20 +(((
21 +{{html clean=false}}
22 +<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>
23 +{{/html}}
24 +)))
25 +(% class="showhidecontent" #if($id && $id!="")id="showhidecontent${id}" #end style="display: none;" %)
26 +(((
27 +(((
28 +$context.macro.content
29 +)))
30 +)))
31 +)))
32 +{{/velocity}}
Macro content type
... ... @@ -1,0 +1,1 @@
1 +Optional
Default category
... ... @@ -1,0 +1,1 @@
1 +content
Macro description
... ... @@ -1,0 +1,1 @@
1 +Show Hide Macro
Macro id
... ... @@ -1,0 +1,1 @@
1 +showhide
Macro name
... ... @@ -1,0 +1,1 @@
1 +showhide
Supports inline mode
... ... @@ -1,0 +1,1 @@
1 +Yes
Macro visibility
... ... @@ -1,0 +1,1 @@
1 +Current Wiki
XWiki.WikiMacroParameterClass[0]
Parameter default value
... ... @@ -1,0 +1,1 @@
1 +Show !
Parameter description
... ... @@ -1,0 +1,1 @@
1 +Show Message
Parameter mandatory
... ... @@ -1,0 +1,1 @@
1 +No
Parameter name
... ... @@ -1,0 +1,1 @@
1 +showmessage
XWiki.WikiMacroParameterClass[1]
Parameter default value
... ... @@ -1,0 +1,1 @@
1 +Hide !
Parameter description
... ... @@ -1,0 +1,1 @@
1 +Hide Message
Parameter name
... ... @@ -1,0 +1,1 @@
1 +hidemessage
XWiki.WikiMacroParameterClass[2]
Parameter description
... ... @@ -1,0 +1,1 @@
1 +id
Parameter mandatory
... ... @@ -1,0 +1,1 @@
1 +No
Parameter name
... ... @@ -1,0 +1,1 @@
1 +id
XWiki.WikiMacroParameterClass[3]
Parameter default value
... ... @@ -1,0 +1,1 @@
1 +toggle
Parameter description
... ... @@ -1,0 +1,1 @@
1 +Scriptaculous Effect
Parameter mandatory
... ... @@ -1,0 +1,1 @@
1 +No
Parameter name
... ... @@ -1,0 +1,1 @@
1 +effect
XWiki.WikiMacroParameterClass[5]
Parameter default value
... ... @@ -1,0 +1,1 @@
1 +0
Parameter description
... ... @@ -1,0 +1,1 @@
1 +Effect duration
Parameter mandatory
... ... @@ -1,0 +1,1 @@
1 +No
Parameter name
... ... @@ -1,0 +1,1 @@
1 +effectduration
XWiki.WikiMacroParameterClass[6]
Parameter description
... ... @@ -1,0 +1,1 @@
1 +DIV style
Parameter mandatory
... ... @@ -1,0 +1,1 @@
1 +No
Parameter name
... ... @@ -1,0 +1,1 @@
1 +style

Tips

You can click on the arrows next to the breadcrumb elements to quickly navigate to sibling and children pages.

Need help?

If you need help with XWiki you can contact: