Änderungen von Dokument Show Hide Macro
Zuletzt geändert von jklein am 2025/06/02 14:04
Zusammenfassung
-
Seiteneigenschaften (1 geändert, 0 hinzugefügt, 0 gelöscht)
-
Objekte (3 geändert, 0 hinzugefügt, 1 gelöscht)
Details
- Seiteneigenschaften
-
- Inhalt
-
... ... @@ -1,18 +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 -Inhalt 8 -Inhalt 9 -Inhalt 10 -{{/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}} 11 11 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 - 16 16 == Without effect == 17 17 18 18 {{showhide showmessage="Show" hidemessage="Hide" style="background-color: #ccc"}} ... ... @@ -33,7 +33,7 @@ 33 33 34 34 == With a fade in effect == 35 35 36 -{{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"}} 37 37 Here is some hidden content that can become visible 38 38 Here is some hidden content that can become visible 39 39 Here is some hidden content that can become visible ... ... @@ -49,13 +49,11 @@ 49 49 {{/showhide}} 50 50 {{/code}} 51 51 52 -{{info}} 53 -Using ##effect="appear"## is still supported and provide the same behavior 54 -{{/info}} 44 +{{info}}Using ##effect="appear"## is still supported and provide the same behavior{{/info}} 55 55 56 56 == With a sliding down effect == 57 57 58 -{{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"}} 59 59 Here is some hidden content that can become visible 60 60 Here is some hidden content that can become visible 61 61 Here is some hidden content that can become visible ... ... @@ -71,6 +71,6 @@ 71 71 {{/showhide}} 72 72 {{/code}} 73 73 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}}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,19 +1,24 @@ 1 1 require(['jquery'], function($) { 2 2 function onClick () { 3 3 var button = $(this), 4 - closest('.showhide-header').next('.showhidecontent'),5 - 6 - 4 + content = button.parent().next(), 5 + effect = button.attr('data-show-effect'), 6 + data = button.data(); 7 7 8 8 if ($.inArray(effect, ['toggle', 'fadeToggle', 'slideToggle']) == -1) 9 9 effect = 'toggle'; 10 10 11 + // Determine current visibility and toggle state 11 11 data.showHideState = !(('showHideState' in data) ? data.showHideState : content.is(':visible')); 12 12 14 + // Determine message and icon 13 13 var message = button.attr(data.showHideState ? 'data-hide-message' : 'data-show-message'); 14 14 var icon = data.showHideState ? '▼ ' : '► '; 17 + 18 + // Update button text with icon 15 15 button.html(icon + message); 16 16 21 + // Perform the animation 17 17 content.stop()[effect](parseInt(button.attr('data-show-duration'))); 18 18 19 19 return false;
- XWiki.StyleSheetExtension[0]
-
- Code
-
... ... @@ -2,7 +2,10 @@ 2 2 display: flex; 3 3 justify-content: space-between; 4 4 align-items: center; 5 - padding: 6px 0px; 5 + background-color: #f9f9f9; 6 + padding: 6px 10px; 7 + border: 1px solid #ddd; 8 + border-radius: 4px 4px 0 0; 6 6 font-weight: bold; 7 7 } 8 8 - Content Type
-
... ... @@ -1,1 +1,0 @@ 1 -CSS - Name
-
... ... @@ -1,1 +1,1 @@ 1 -ShowHide MacroStyle1 +ShowHide Style - Inhalt parsen
-
... ... @@ -1,1 +1,0 @@ 1 -Nein - Benutze diese Erweiterung
-
... ... @@ -1,1 +1,0 @@ 1 -currentPage
- XWiki.WikiMacroClass[0]
-
- Makro-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,9 +17,11 @@ 17 17 #set($effect = "slideToggle") 18 18 #end 19 19 #set($effectduration = $mathtool.mul(1000,$mparams.effectduration)) 20 -#set($title = $escapetool.xml($mparams.title)) 31 + 32 +## HTML-Struktur 21 21 (% #if($divstyle && $divstyle!="") style="${divstyle}" #end %) 22 22 ((( 35 + 23 23 (% class="showhide-header" %) 24 24 ((( 25 25 {{html clean=false}} ... ... @@ -38,11 +38,14 @@ 38 38 </div> 39 39 {{/html}} 40 40 ))) 54 + 41 41 (% class="showhidecontent" #if($id && $id!="")id="showhidecontent${id}" #end#if($xcontext.action != 'edit') style="display: none;"#end %) 42 -((( 43 -((( 56 +((( 57 +((( 44 44 {{wikimacrocontent /}} 59 +))) 45 45 ))) 61 + 46 46 ))) 47 -))) 48 48 {{/velocity}} 64 +
- XWiki.WikiMacroParameterClass[7]
-
- Parameter verpflichtend
-
... ... @@ -1,1 +1,0 @@ 1 -Nein - Parameter-Name
-
... ... @@ -1,1 +1,0 @@ 1 -title