Changes for page Menu Macro

Summary

• Objects (2 modified, 0 added, 0 removed)
  • XWiki.JavaScriptExtension[0]
  • XWiki.StyleSheetExtension[1]

Details

XWiki.JavaScriptExtension[0]

Code

...	...	@@ -70,6 +70,18 @@
70	70	$(dropDownHeader).next().addClass('xDropdown-menu');
71	71	});
72	72
	73	+ $('.xDropdown-menu').each(function() {
	74	+ this.addEventListener('keyup', function(event) {
	75	+ if (event.key === 'Escape') {
	76	+ // We change the state of the parent xDropdown
	77	+ this.parentNode.classList.remove('open');
	78	+ // We set the focus on the toggle button of the section we just collapsed
	79	+ this.parentNode.querySelector(':scope > .xDropdown-header > .xDropdown-header-toggle').focus();
	80	+ }
	81	+ event.stopPropagation();
	82	+ });
	83	+ });
	84	+
73	73	$('.menu-horizontal .xDropdown').each(function() {
74	74	// In case of horizontal menus, make it so that a class is added on hover, instead of using the :hover pseudo-class
75	75	this.addEventListener("mouseover", function() {

XWiki.StyleSheetExtension[1]

Code

...	...	@@ -159,19 +159,19 @@
159	159	margin-top: 0;
160	160	border-top-right-radius: 0;
161	161	border-top-left-radius: 0;
	162	+ overflow-wrap: break-word;
	163	+ hyphens: auto;
162	162	li {
163	163	/* Text inside menu */
164	164	color: @dropdown-link-color;
	167	+ padding: 3px 20px;
165	165	/* Links inside menu */
166	166	a {
167	167	display: block;
168		- padding: 3px 20px;
169	169	clear: both;
170	170	font-weight: normal;
171	171	line-height: @line-height-base;
172	172	color: @dropdown-link-color;
173		- overflow: hidden;
174		- text-overflow: ellipsis; // Displaying ... if the text is too long
175	175	&:hover, &:focus-within {
176	176	/* &:extend(.dropdown-menu>li>a:hover); */
177	177	text-decoration: none;
...	...	@@ -200,10 +200,17 @@
200	200	}
201	201	}
202	202	/* When in dropdown we also have a link, reset the duplicated padding */
203		- & > span > a {
	203	+ & > .xDropdown-header > span > a {
204	204	padding: 0;
205	205	display: inherit;
206	206	}
	207	+ /* Reposition the toggle when in a dropdown of fixed size
	208	+ to avoid eating away at the bit of space we have for the text. */
	209	+ & > .xDropdown-header > .xDropdown-header-toggle {
	210	+ position: absolute;
	211	+ right: 0;
	212	+ top: 0;
	213	+ }
207	207	}
208	208	/* Separator horizontal inside menu */
209	209	&:empty {