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 (4 modified, 1 added, 0 removed)
Details
- Page properties
-
- Content
-
... ... @@ -4,12 +4,9 @@ 4 4 XWiki 5.x or more. 5 5 6 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}} 7 +Inhalt 8 +Inhalt 9 +Inhalt 13 13 {{/showhide}} 14 14 15 15 {{info}}
- XWiki.JavaScriptExtension[0]
-
- Code
-
... ... @@ -1,31 +1,26 @@ 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'); 2 + function onClick () { 3 + var button = $(this), 4 + content = button.closest('.showhide-header').next('.showhidecontent'), 5 + effect = button.attr('data-show-effect'), 6 + data = button.data(); 8 8 9 - // Sicherheitsprüfung für Effekt 10 - if ($.inArray(effect, ['toggle', 'fadeToggle', 'slideToggle']) === -1) { 8 + if ($.inArray(effect, ['toggle', 'fadeToggle', 'slideToggle']) == -1) 11 11 effect = 'toggle'; 12 - } 13 13 14 - // Sichtbarkeitsstatus 15 - var isVisible = content.is(':visible'); 16 - var newState = !isVisible; 11 + data.showHideState = !(('showHideState' in data) ? data.showHideState : content.is(':visible')); 17 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); 13 + var message = button.attr(data.showHideState ? 'data-hide-message' : 'data-show-message'); 14 + var icon = data.showHideState ? '▼ ' : '► '; 15 + button.html(icon + message); 22 22 23 - // Inhalt ein-/ausblenden 24 - content.stop()[effect](duration); 17 + content.stop()[effect](parseInt(button.attr('data-show-duration'))); 18 + 19 + return false; 25 25 } 26 26 27 - $(document).ready(function 28 - $('.showhide-header ').on('click', onClickHeader);22 + $(document).ready(function() { 23 + $('.showhide-header).on('click', onClick); 29 29 }); 30 30 }); 31 31
- XWiki.WikiMacroClass[0]
-
- Macro code
-
... ... @@ -29,7 +29,7 @@ 29 29 data-hide-message="$hidemessage"> 30 30 <div class="showhide-header-flex"> 31 31 <div class="showhide-title">$title</div> 32 - <div class="showhide-icon">►</div> 32 + <div class="showhide-icon">► $showmessage</div> 33 33 </div> 34 34 </div> 35 35 {{/html}}
- 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.StyleSheetExtension[0]
-
- Caching policy
-
... ... @@ -1,0 +1,1 @@ 1 +long - Code
-
... ... @@ -1,0 +1,43 @@ 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 +} - Content Type
-
... ... @@ -1,0 +1,1 @@ 1 +CSS - Name
-
... ... @@ -1,0 +1,1 @@ 1 +ShowHideMacro Style - Parse content
-
... ... @@ -1,0 +1,1 @@ 1 +No - Use this extension
-
... ... @@ -1,0 +1,1 @@ 1 +currentPage