Changes for page Show Hide Macro
Last modified by jklein on 2025/06/02 14:04
Summary
-
Objects (2 modified, 1 added, 0 removed)
Details
- XWiki.JavaScriptExtension[0]
-
- Code
-
... ... @@ -4,13 +4,28 @@ 4 4 content = button.parent().next(), 5 5 effect = button.attr('data-show-effect'), 6 6 data = button.data(); 7 - if($.inArray(effect,['toggle','fadeToggle','slideToggle']) == -1) effect = 'toggle'; 7 + 8 + if ($.inArray(effect, ['toggle', 'fadeToggle', 'slideToggle']) == -1) 9 + effect = 'toggle'; 10 + 11 + // Determine current visibility and toggle state 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')); 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 10 10 content.stop()[effect](parseInt(button.attr('data-show-duration'))); 23 + 11 11 return false; 12 12 } 26 + 13 13 $(document).ready(function() { 14 14 $('.showhidebutton').children('a').on('click', onClick); 15 15 }); 16 16 }); 31 +
- XWiki.WikiMacroClass[0]
-
- Macro code
-
... ... @@ -11,6 +11,17 @@ 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 14 14 #if($effect == "appear" || $effect == "fade") 15 15 #set($effect = "fadeToggle") 16 16 #elseif ($effect == "blind" || $effect == "slide") ... ... @@ -17,19 +17,37 @@ 17 17 #set($effect = "slideToggle") 18 18 #end 19 19 #set($effectduration = $mathtool.mul(1000,$mparams.effectduration)) 31 + 32 +## HTML-Struktur 20 20 (% #if($divstyle && $divstyle!="") style="${divstyle}" #end %) 21 21 ((( 22 -(% class="showhidebutton" %) 23 -((( 35 + 36 +(% class="showhide-header" %) 37 +((( 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> 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> 26 26 {{/html}} 27 27 ))) 54 + 28 28 (% class="showhidecontent" #if($id && $id!="")id="showhidecontent${id}" #end#if($xcontext.action != 'edit') style="display: none;"#end %) 29 -((( 30 -((( 56 +((( 57 +((( 31 31 {{wikimacrocontent /}} 59 +))) 32 32 ))) 61 + 33 33 ))) 34 -))) 35 35 {{/velocity}} 64 +
- XWiki.StyleSheetExtension[0]
-
- Caching policy
-
... ... @@ -1,0 +1,1 @@ 1 +long - Code
-
... ... @@ -1,0 +1,22 @@ 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,0 +1,1 @@ 1 +ShowHide Style