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, 2 removed)
Details
- Page properties
-
- Content
-
... ... @@ -1,21 +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 title="PublicAPI" effect="slide" effectduration="0.5"}} 7 -{{code language="PowerShell"}} 8 -Hier steht neuer Code 9 -Code 10 -Code 11 -Code 12 -{{/code}} 13 -{{/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}} 14 14 15 -{{info}} 16 -Using ##id="..."## is still supported and provide the same HTML result but it is no more needed to achieve a working animation. 17 -{{/info}} 18 - 19 19 == Without effect == 20 20 21 21 {{showhide showmessage="Show" hidemessage="Hide" style="background-color: #ccc"}} ... ... @@ -36,7 +36,7 @@ 36 36 37 37 == With a fade in effect == 38 38 39 -{{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"}} 40 40 Here is some hidden content that can become visible 41 41 Here is some hidden content that can become visible 42 42 Here is some hidden content that can become visible ... ... @@ -52,13 +52,11 @@ 52 52 {{/showhide}} 53 53 {{/code}} 54 54 55 -{{info}} 56 -Using ##effect="appear"## is still supported and provide the same behavior 57 -{{/info}} 44 +{{info}}Using ##effect="appear"## is still supported and provide the same behavior{{/info}} 58 58 59 59 == With a sliding down effect == 60 60 61 -{{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"}} 62 62 Here is some hidden content that can become visible 63 63 Here is some hidden content that can become visible 64 64 Here is some hidden content that can become visible ... ... @@ -74,6 +74,6 @@ 74 74 {{/showhide}} 75 75 {{/code}} 76 76 77 -{{info}} 78 - 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.79 - {{/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,37 +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 - arrowEl = header.find('.showhide-arrow'), 8 - iconEl = header.find('.showhide-icon'); 9 - 10 - if ($.inArray(effect, ['toggle', 'fadeToggle', 'slideToggle']) === -1) { 11 - effect = 'toggle'; 12 - } 13 - 14 - var isVisible = content.is(':visible'); 15 - var newState = !isVisible; 16 - 17 - // Pfeil aktualisieren 18 - if (arrowEl.length) { 19 - arrowEl.text(newState ? '▼' : '►'); 20 - } 21 - 22 - // Nachricht rechts aktualisieren (optional) 23 - if (iconEl.length) { 24 - var message = newState 25 - ? header.attr('data-hide-message') 26 - : header.attr('data-show-message'); 27 - iconEl.text(message); 28 - } 29 - 30 - content.stop()[effect](duration); 31 - } 32 - 33 - $(document).ready(function () { 34 - $('.showhide-header').on('click', onClickHeader); 35 - }); 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 + }); 36 36 }); 37 -
- XWiki.StyleSheetExtension[0]
-
- Caching policy
-
... ... @@ -1,1 +1,0 @@ 1 -long - Code
-
... ... @@ -1,54 +1,0 @@ 1 -.showhide-header { 2 - border: 1px solid #ccc; 3 - background-color: #f7f7f7; 4 - border-radius: 4px 4px 0 0; 5 - padding: 8px 12px; 6 - margin-bottom: 0; 7 -} 8 - 9 -.showhide-header-flex { 10 - display: flex; 11 - justify-content: space-between; 12 - align-items: center; 13 - padding: 6px 0px; 14 - font-weight: bold; 15 -} 16 - 17 -.showhide-title { 18 - flex: 1; 19 - text-align: left; 20 -} 21 - 22 -.showhidebutton a { 23 - text-decoration: none; 24 - cursor: pointer; 25 - font-weight: normal; 26 -} 27 - 28 -.showhidecontent { 29 - border: 1px solid #ccc; 30 - border-top: none; 31 - border-radius: 0 0 4px 4px; 32 - padding: 10px; 33 - background-color: #fff; 34 -} 35 - 36 -.showhide-header:hover { 37 - background-color: #f0f0f0; 38 - cursor: default; 39 -} 40 - 41 -.showhidebutton a:hover { 42 - text-decoration: underline; 43 -} 44 - 45 -.showhide-icon { 46 - color: #0645ad; /* typisches Link-Blau */ 47 - text-decoration: underline; 48 - cursor: pointer; 49 -} 50 - 51 -.showhide-header:hover .showhide-icon { 52 - text-decoration: underline; 53 - color: #0b0080; /* dunkler beim Hover */ 54 -} - Content Type
-
... ... @@ -1,1 +1,0 @@ 1 -CSS - Name
-
... ... @@ -1,1 +1,0 @@ 1 -ShowHideMacro Style - Parse content
-
... ... @@ -1,1 +1,0 @@ 1 -No - Use this extension
-
... ... @@ -1,1 +1,0 @@ 1 -always
- XWiki.WikiMacroClass[0]
-
- Cached
-
... ... @@ -1,1 +1,0 @@ 1 -No - Asynchronous rendering
-
... ... @@ -1,1 +1,0 @@ 1 -No - Macro code
-
... ... @@ -17,29 +17,18 @@ 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"> 32 - <span class="showhide-arrow">►</span> $title 33 - </div> 34 - <div class="showhide-icon">$showmessage</div> 35 - </div> 36 - </div> 37 -</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> 38 38 {{/html}} 39 -(% class="showhidecontent" #if($id && $id!="")id="showhidecontent${id}" #end#if($xcontext.action != 'edit') style="display: none;"#end %) 27 +))) 28 +(% class="showhidecontent" #if($id && $id!="")id="showhidecontent${id}" #end style="display: none;" %) 40 40 ((( 41 41 ((( 42 - {{wikimacrocontent/}}31 +$xcontext.macro.content 43 43 ))) 44 44 ))) 45 45 ))) - Macro content type
-
... ... @@ -1,1 +1,0 @@ 1 -Wiki - Macro description
-
... ... @@ -1,1 +1,1 @@ 1 -Show /hide content with animations.1 +Show Hide Macro
- XWiki.WikiMacroParameterClass[0]
-
- Parameter default value
-
... ... @@ -1,1 +1,1 @@ 1 - Ausklappen1 +Show !
- XWiki.WikiMacroParameterClass[1]
-
- Parameter default value
-
... ... @@ -1,1 +1,1 @@ 1 - Einklappen1 +Hide !
- XWiki.WikiMacroParameterClass[3]
-
- Parameter default value
-
... ... @@ -1,1 +1,1 @@ 1 - slide1 +toggle
- XWiki.WikiMacroParameterClass[7]
-
- Parameter mandatory
-
... ... @@ -1,1 +1,0 @@ 1 -No - Parameter name
-
... ... @@ -1,1 +1,0 @@ 1 -title