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, 0 added, 1 removed)
Details
- Page properties
-
- Content
-
... ... @@ -3,12 +3,6 @@ 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}} 11 - 12 12 {{info}} 13 13 Using ##id="..."## is still supported and provide the same HTML result but it is no more needed to achieve a working animation. 14 14 {{/info}}
- XWiki.JavaScriptExtension[0]
-
- Code
-
... ... @@ -1,26 +1,31 @@ 1 1 require(['jquery'], function($) { 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(); 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'); 7 7 8 - if ($.inArray(effect, ['toggle', 'fadeToggle', 'slideToggle']) == -1) 9 + // Sicherheitsprüfung für Effekt 10 + if ($.inArray(effect, ['toggle', 'fadeToggle', 'slideToggle']) === -1) { 9 9 effect = 'toggle'; 12 + } 10 10 11 - data.showHideState = !(('showHideState' in data) ? data.showHideState : content.is(':visible')); 14 + // Sichtbarkeitsstatus 15 + var isVisible = content.is(':visible'); 16 + var newState = !isVisible; 12 12 13 - var message = button.attr(data.showHideState ? 'data-hide-message' : 'data-show-message'); 14 - var icon = data.showHideState ? '▼ ' : '► '; 15 - button.html(icon + message); 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); 16 16 17 - content.stop()[effect](parseInt(button.attr('data-show-duration'))); 18 - 19 - return false; 23 + // Inhalt ein-/ausblenden 24 + content.stop()[effect](duration); 20 20 } 21 21 22 - $(document).ready(function() { 23 - $('.showhide-header).on('click', onClick); 27 + $(document).ready(function () { 28 + $('.showhide-header').on('click', onClickHeader); 24 24 }); 25 25 }); 26 26
- XWiki.StyleSheetExtension[0]
-
- Caching policy
-
... ... @@ -1,1 +1,0 @@ 1 -long - Code
-
... ... @@ -1,43 +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 -} - 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 -currentPage
- 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">► $showmessage</div>32 + <div class="showhide-icon">►</div> 33 33 </div> 34 34 </div> 35 35 {{/html}}
- XWiki.WikiMacroParameterClass[0]
-
- Parameter default value
-
... ... @@ -1,1 +1,0 @@ 1 -Ausklappen
- XWiki.WikiMacroParameterClass[1]
-
- Parameter default value
-
... ... @@ -1,1 +1,0 @@ 1 -Einklappen