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 (5 modified, 0 added, 1 removed)
Details
- Page properties
-
- Content
-
... ... @@ -3,6 +3,12 @@ 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}} 11 + 6 6 {{info}} 7 7 Using ##id="..."## is still supported and provide the same HTML result but it is no more needed to achieve a working animation. 8 8 {{/info}}
- 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); 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; 25 25 } 26 - 27 - $(document).ready(function () { 28 - $('.showhide-header').on('click', onClickHeader); 13 + $(document).ready(function() { 14 + $('.showhidebutton').children('a').on('click', onClick); 29 29 }); 30 30 }); 31 -
- XWiki.WikiMacroClass[0]
-
- Macro code
-
... ... @@ -17,22 +17,14 @@ 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">►</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}} 27 +))) 36 36 (% class="showhidecontent" #if($id && $id!="")id="showhidecontent${id}" #end#if($xcontext.action != 'edit') style="display: none;"#end %) 37 37 ((( 38 38 (((
- XWiki.WikiMacroParameterClass[0]
-
- Parameter default value
-
... ... @@ -1,0 +1,1 @@ 1 +Ausklappen
- XWiki.WikiMacroParameterClass[1]
-
- Parameter default value
-
... ... @@ -1,0 +1,1 @@ 1 +Einklappen
- XWiki.WikiMacroParameterClass[3]
-
- Parameter default value
-
... ... @@ -1,1 +1,1 @@ 1 - slide1 +toggle
- XWiki.WikiMacroParameterClass[7]
-
- Parameter name
-
... ... @@ -1,1 +1,0 @@ 1 -title - Parameter mandatory
-
... ... @@ -1,1 +1,0 @@ 1 -No