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

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