Changes for page Show Hide Macro
Last modified by jklein on 2025/06/02 14:04
Summary
-
Page properties (1 modified, 0 added, 0 removed)
-
Objects (2 modified, 0 added, 1 removed)
Details
- Page properties
-
- Content
-
... ... @@ -1,10 +1,18 @@ 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 -{{info}}Using ##id="..."## is still supported and provide the same HTML result but it is no more needed to achieve a working animation.{{/info}} 6 +{{showhide}} 7 +Inhalt 8 +Inhalt 9 +Inhalt 10 +{{/showhide}} 7 7 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 + 8 8 == Without effect == 9 9 10 10 {{showhide showmessage="Show" hidemessage="Hide" style="background-color: #ccc"}} ... ... @@ -25,7 +25,7 @@ 25 25 26 26 == With a fade in effect == 27 27 28 -{{showhide showmessage="Show" hidemessage="Hide" effect="fade" 36 +{{showhide showmessage="Show" hidemessage="Hide" effect="fade" effectduration="2" style="background-color: #ccc"}} 29 29 Here is some hidden content that can become visible 30 30 Here is some hidden content that can become visible 31 31 Here is some hidden content that can become visible ... ... @@ -41,11 +41,13 @@ 41 41 {{/showhide}} 42 42 {{/code}} 43 43 44 -{{info}}Using ##effect="appear"## is still supported and provide the same behavior{{/info}} 52 +{{info}} 53 +Using ##effect="appear"## is still supported and provide the same behavior 54 +{{/info}} 45 45 46 46 == With a sliding down effect == 47 47 48 -{{showhide showmessage="Show" hidemessage="Hide" effect="slide" 58 +{{showhide showmessage="Show" hidemessage="Hide" effect="slide" effectduration="0.5" style="background-color: #ccc"}} 49 49 Here is some hidden content that can become visible 50 50 Here is some hidden content that can become visible 51 51 Here is some hidden content that can become visible ... ... @@ -61,6 +61,6 @@ 61 61 {{/showhide}} 62 62 {{/code}} 63 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 - 66 - 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}}
- XWiki.JavaScriptExtension[0]
-
- Code
-
... ... @@ -4,28 +4,13 @@ 4 4 content = button.parent().next(), 5 5 effect = button.attr('data-show-effect'), 6 6 data = button.data(); 7 - 8 - if ($.inArray(effect, ['toggle', 'fadeToggle', 'slideToggle']) == -1) 9 - effect = 'toggle'; 10 - 11 - // Determine current visibility and toggle state 7 + if($.inArray(effect,['toggle','fadeToggle','slideToggle']) == -1) effect = 'toggle'; 12 12 data.showHideState = !(('showHideState' in data) ? data.showHideState : content.is(':visible')); 13 - 14 - // Determine message and icon 15 - var message = button.attr(data.showHideState ? 'data-hide-message' : 'data-show-message'); 16 - var icon = data.showHideState ? '▼ ' : '► '; 17 - 18 - // Update button text with icon 19 - button.html(icon + message); 20 - 21 - // Perform the animation 9 + button.html(button.attr(data.showHideState ? 'data-hide-message' : 'data-show-message')); 22 22 content.stop()[effect](parseInt(button.attr('data-show-duration'))); 23 - 24 24 return false; 25 25 } 26 - 27 27 $(document).ready(function() { 28 28 $('.showhidebutton').children('a').on('click', onClick); 29 29 }); 30 30 }); 31 -
- XWiki.StyleSheetExtension[0]
-
- Caching policy
-
... ... @@ -1,1 +1,0 @@ 1 -long - Code
-
... ... @@ -1,22 +1,0 @@ 1 -.showhide-header-flex { 2 - display: flex; 3 - justify-content: space-between; 4 - align-items: center; 5 - background-color: #f9f9f9; 6 - padding: 6px 10px; 7 - border: 1px solid #ddd; 8 - border-radius: 4px 4px 0 0; 9 - font-weight: bold; 10 -} 11 - 12 -.showhide-title { 13 - flex: 1; 14 - text-align: left; 15 -} 16 - 17 -.showhidebutton a { 18 - text-decoration: none; 19 - cursor: pointer; 20 - font-weight: normal; 21 -} 22 - - Name
-
... ... @@ -1,1 +1,0 @@ 1 -ShowHide Style
- XWiki.WikiMacroClass[0]
-
- Macro code
-
... ... @@ -11,17 +11,6 @@ 11 11 #set($hidemessage = $escapetool.xml($mparams.hidemessage)) 12 12 #set($divstyle = $escapetool.xml($mparams.style)) 13 13 #set($effect = $escapetool.xml($mparams.effect)) 14 -#set($title = $escapetool.xml($mparams.title)) 15 - 16 -## Standardtexte setzen 17 -#if(!$showmessage || $showmessage == "") 18 - #set($showmessage = "Anzeigen") 19 -#end 20 -#if(!$hidemessage || $hidemessage == "") 21 - #set($hidemessage = "Verbergen") 22 -#end 23 - 24 -## Effekte setzen 25 25 #if($effect == "appear" || $effect == "fade") 26 26 #set($effect = "fadeToggle") 27 27 #elseif ($effect == "blind" || $effect == "slide") ... ... @@ -28,37 +28,19 @@ 28 28 #set($effect = "slideToggle") 29 29 #end 30 30 #set($effectduration = $mathtool.mul(1000,$mparams.effectduration)) 31 - 32 -## HTML-Struktur 33 33 (% #if($divstyle && $divstyle!="") style="${divstyle}" #end %) 34 34 ((( 35 - 36 -(% class="showhide-header" %) 37 -((( 22 +(% class="showhidebutton" %) 23 +((( 38 38 {{html clean=false}} 39 -<div class="showhide-header-flex"> 40 - <div class="showhide-title">$title</div> 41 - <div class="showhidebutton"> 42 - <a href="javascript:void(0)" 43 - #if($id && $id!="")id="showhidebuttontext${id}" #end 44 - data-show-duration="$effectduration" 45 - data-show-effect="$effect" 46 - data-show-message="$showmessage" 47 - data-hide-message="$hidemessage"> 48 - ► $showmessage 49 - </a> 50 - </div> 51 -</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> 52 52 {{/html}} 53 53 ))) 54 - 55 55 (% class="showhidecontent" #if($id && $id!="")id="showhidecontent${id}" #end#if($xcontext.action != 'edit') style="display: none;"#end %) 56 -((( 57 -((( 29 +((( 30 +((( 58 58 {{wikimacrocontent /}} 59 -))) 60 60 ))) 61 - 62 62 ))) 34 +))) 63 63 {{/velocity}} 64 -