Changes for page Show Hide Macro

Summary

• Page properties (1 modified, 0 added, 0 removed)
• Objects (3 modified, 0 added, 0 removed)
  • XWiki.JavaScriptExtension[0]
  • XWiki.StyleSheetExtension[0]
  • XWiki.WikiMacroClass[0]

Details

Page properties

Content

...	...	@@ -4,9 +4,12 @@
4	4	XWiki 5.x or more.
5	5
6	6	{{showhide title="PublicAPI" effect="slide" effectduration="0.5"}}
7		-Inhalt
8		-Inhalt
9		-Inhalt
	7	+{{code language="PowerShell"}}
	8	+Hier steht neuer Code
	9	+Code
	10	+Code
	11	+Code
	12	+{{/code}}
10	10	{{/showhide}}
11	11
12	12	{{info}}

XWiki.JavaScriptExtension[0]

Code

...	...	@@ -1,26 +1,37 @@
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	+ arrowEl = header.find('.showhide-arrow'),
	8	+ iconEl = header.find('.showhide-icon');
7	7
8		- if ($.inArray(effect, ['toggle', 'fadeToggle', 'slideToggle']) == -1)
	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	+ var isVisible = content.is(':visible');
	15	+ 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);
	17	+ // Pfeil aktualisieren
	18	+ if (arrowEl.length) {
	19	+ arrowEl.text(newState ? '▼' : '►');
	20	+ }
16	16
17		- content.stop()[effect](parseInt(button.attr('data-show-duration')));
	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	+ }
18	18
19		- return false;
	30	+ content.stop()[effect](duration);
20	20	}
21	21
22		- $(document).ready(function() {
23		- $('.showhide-header).on('click', onClick);
	33	+ $(document).ready(function () {
	34	+ $('.showhide-header').on('click', onClickHeader);
24	24	});
25	25	});
26	26

XWiki.StyleSheetExtension[0]

Code

...	...	@@ -41,3 +41,14 @@
41	41	.showhidebutton a:hover {
42	42	text-decoration: underline;
43	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	+}

Use this extension

...	...	@@ -1,1 +1,1 @@
1		-currentPage
	1	+always

XWiki.WikiMacroClass[0]

Macro code

...	...	@@ -28,9 +28,12 @@
28	28	data-show-message="$showmessage"
29	29	data-hide-message="$hidemessage">
30	30	<div class="showhide-header-flex">
31		- <div class="showhide-title">$title</div>
32		- <div class="showhide-icon">► $showmessage</div>
	31	+ <div class="showhide-title">
	32	+ <span class="showhide-arrow">►</span> $title
	33	+ </div>
	34	+ <div class="showhide-icon">$showmessage</div>
33	33	</div>
	36	+ </div>
34	34	</div>
35	35	{{/html}}
36	36	(% class="showhidecontent" #if($id && $id!="")id="showhidecontent${id}" #end#if($xcontext.action != 'edit') style="display: none;"#end %)