Skip to Content
0 Votes

Changes for page Menu Macro

Last modified by Сергей Коршунов on 2025/09/03 12:19
From version 6.1
edited by Сергей Коршунов
on 2023/04/25 15:02
Change comment: Install extension [org.xwiki.platform:xwiki-platform-menu-ui/15.3]
To version 15.1
edited by Сергей Коршунов
on 2025/09/03 12:19
Change comment: Install extension [org.xwiki.platform:xwiki-platform-menu-ui/17.7.0]

Summary

Details

XWiki.JavaScriptExtension[0]
Code
... ... @@ -58,12 +58,30 @@
58 58   xDropdown.toggleClass('open');
59 59   setDropdownButtonTitle(dropDownButton);
60 60   });
61 - dropDownHeader.append($(this).contents()[0]);
62 - dropDownHeader.append(dropDownButton);
63 - $(this).prepend(dropDownHeader);
64 - $(dropDownHeader).next().addClass('xDropdown-menu');
61 + let dropDownContent = $(this).contents();
62 + // We put all the content of the entry in the header,
63 + // except for the last one which is the content of the dropdown. This dropdown stays where it is.
64 + for (let index = 0; index < dropDownContent.length - 1 ; index++) {
65 + let item = dropDownContent[index];
66 + dropDownHeader.append(item);
67 + }
68 + dropDownHeader.append(dropDownButton);
69 + $(this).prepend(dropDownHeader);
70 + $(dropDownHeader).next().addClass('xDropdown-menu');
65 65   });
66 66  
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 +
67 67   $('.menu-horizontal .xDropdown').each(function() {
68 68   // In case of horizontal menus, make it so that a class is added on hover, instead of using the :hover pseudo-class
69 69   this.addEventListener("mouseover", function() {
XWiki.StyleSheetExtension[1]
Code
... ... @@ -60,11 +60,9 @@
60 60   &.menu-horizontal {
61 61   /* Stylization: Navbars */
62 62   .clearfix;
63 - background-color: @navbar-default-bg;
64 - border-color: @navbar-default-border;
65 - /* Custom styling */
66 - .box-shadow(0 2px 8px rgba(0,0,0,0.4) inset);
67 - min-height: @navbar-height;
63 + background-color: @menu-default-bg;
64 + border-color: @menu-default-border;
65 + min-height: @menu-height;
68 68   padding-left: 25px;
69 69   .xDropdown.open {
70 70   > .xDropdown-header > .xDropdown-header-toggle:before {
... ... @@ -78,7 +78,7 @@
78 78   padding-left: 0;
79 79   list-style-type: none;
80 80   margin: 0;
81 - min-height: 50px;
79 + min-height: @menu-height;
82 82   display: flex;
83 83   align-items: stretch;
84 84   & > li {
... ... @@ -92,22 +92,21 @@
92 92   @media (min-width: @grid-float-breakpoint) {
93 93   float: left;
94 94   }
95 - line-height: @line-height-computed;
96 - color: @navbar-default-link-color;
93 + color: @menu-default-link-color;
97 97   &:hover, &:focus-within {
98 - color: @navbar-default-link-hover-color;
99 - background-color: @navbar-default-link-hover-bg;
100 - background-color: @navbar-default-link-active-bg;
101 - color: @navbar-default-link-active-color;
95 + color: @menu-default-link-hover-color;
96 + background-color: @menu-default-link-hover-bg;
97 + background-color: @menu-default-link-active-bg;
98 + color: @menu-default-link-active-color;
102 102   /* When hovering, have the same color for text and link usage */
103 103   & > span > a {
104 - background-color: @navbar-default-link-active-bg;
105 - color: @navbar-default-link-active-color;
101 + background-color: @menu-default-link-active-bg;
102 + color: @menu-default-link-active-color;
106 106   }
107 107   }
108 108   /* Links inside menu */
109 109   a {
110 - color: @navbar-default-link-color;
107 + color: @menu-default-link-color;
111 111   &:hover, &:focus-within {
112 112   text-decoration: none;
113 113   }
... ... @@ -115,7 +115,7 @@
115 115   /* Containers, images inside menu */
116 116   div, img {
117 117   /* Limit the height to the nav height minus the padding and minus border */
118 - max-height: @navbar-height - (2 * @navbar-padding-vertical) - 2px;
115 + max-height: @menu-height - (2 * @navbar-padding-vertical) - 2px;
119 119   overflow: hidden;
120 120   &.xDropdown-header{
121 121   /* No border on the dropdown header */
... ... @@ -126,15 +126,15 @@
126 126   & > .xDropdown-header > .xDropdown-header-toggle {
127 127   &:hover, &:focus-within {
128 128   /* Change background color of the caret when hovering on the navbar. */
129 - background-color: @navbar-default-bg;
126 + background-color: @menu-default-bg;
130 130   }
131 131   }
132 132   /* Separator vertical inside menu */
133 133   &:empty {
134 - height: @navbar-height;
131 + height: @menu-height;
135 135   margin: 0 ((@line-height-computed / 2) - 1);
136 136   padding: 0;
137 - border-right: 1px solid @navbar-default-border;
134 + border-right: 1px solid @menu-default-border;
138 138   }
139 139   }
140 140   /* Stylization: Dropdowns */
... ... @@ -154,24 +154,26 @@
154 154   background-color: @dropdown-bg;
155 155   border: 1px solid @dropdown-border;
156 156   border-radius: @border-radius-base;
154 + /* On this element, the box-shadow is very useful since it appears in front of other elements.
155 + We don't want to remove it despite the Flamingo theme now using flat designs almost everywhere. */
157 157   .box-shadow(0 6px 12px rgba(0,0,0,.175));
158 158   background-clip: padding-box;
159 159   margin-top: 0;
160 160   border-top-right-radius: 0;
161 161   border-top-left-radius: 0;
161 + overflow-wrap: break-word;
162 + hyphens: auto;
162 162   li {
163 163   /* Text inside menu */
164 164   color: @dropdown-link-color;
166 + 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;
... ... @@ -189,7 +189,7 @@
189 189   line-height: @line-height-base;
190 190   color: @dropdown-link-color;
191 191   /* Empty dropdowns should have height in order to display the arrow */
192 - min-height: 2 * @font-size-base;
191 + min-height: 1lh;
193 193   &:hover, &:focus-within {
194 194   text-decoration: none;
195 195   color: @dropdown-link-hover-color;
... ... @@ -200,15 +200,16 @@
200 200   }
201 201   }
202 202   /* When in dropdown we also have a link, reset the duplicated padding */
203 - & > span > a {
202 + & > .xDropdown-header > span > a {
204 204   padding: 0;
205 205   display: inherit;
206 206   }
207 - /* Place the arrow on the right */
208 - &:after {
206 + /* Reposition the toggle when in a dropdown of fixed size
207 + to avoid eating away at the bit of space we have for the text. */
208 + & > .xDropdown-header > .xDropdown-header-toggle {
209 209   position: absolute;
210 - margin-top: @line-height-computed / 2;
211 - right: 8px;
210 + right: 0;
211 + top: 0;
212 212   }
213 213   }
214 214   /* Separator horizontal inside menu */
... ... @@ -250,7 +250,7 @@
250 250   margin: 0 0 0 -25px; /* Remove padding added in normal view */
251 251   > li {
252 252   &:empty {
253 - .nav-divider(@navbar-default-border);
253 + .nav-divider(@menu-default-border);
254 254   }
255 255   }
256 256   ul {
... ... @@ -264,14 +264,14 @@
264 264   box-shadow: none;
265 265   li {
266 266   /* Text inside menu */
267 - color: @navbar-default-link-color;
267 + color: @menu-default-link-color;
268 268   /* Links inside menu */
269 269   a {
270 - color: @navbar-default-link-color;
270 + color: @menu-default-link-color;
271 271   }
272 272   /* Submenus inside menu */
273 273   &.xDropdown {
274 - color: @navbar-default-link-color;
274 + color: @menu-default-link-color;
275 275   &.open {
276 276   background-color: transparent;
277 277   color: inherit;
... ... @@ -278,11 +278,11 @@
278 278   }
279 279   /* When in dropdown we also have a link */
280 280   > span > a {
281 - color: @navbar-default-link-color;
281 + color: @menu-default-link-color;
282 282   }
283 283   }
284 284   &:empty {
285 - .nav-divider(@navbar-default-border);
285 + .nav-divider(@menu-default-border);
286 286   }
287 287   }
288 288   }
... ... @@ -312,15 +312,16 @@
312 312  
313 313  .menu-horizontal-toggle {
314 314   .clearfix;
315 - background-color: @navbar-default-bg;
316 - border-color: @navbar-default-border;
317 - .box-shadow(0 2px 8px rgba(0,0,0,0.4) inset);
318 - min-height: @navbar-height;
315 + background-color: @menu-default-bg;
316 + border-color: @menu-default-border;
317 + min-height: @menu-height;
319 319   & .navbar-toggle {
320 320   float: left;
321 321   padding-left: 15px;
321 + padding-top: 0;
322 + padding-bottom: 0;
322 322   & .icon-bar {
323 - background-color: @navbar-default-link-color;
324 + background-color: @menu-default-link-color;
324 324   transition: .3s ease all;
325 325   &:nth-of-type(2) {
326 326   opacity: 0;
XWiki.WikiMacroClass[0]
Macro code
... ... @@ -1,6 +1,7 @@
1 1  {{velocity}}
2 2  #set ($id = $xcontext.macro.params.id)
3 3  #set ($type = $xcontext.macro.params.type)
4 +#set ($label = $xcontext.macro.params.label)
4 4  #set ($colorTheme = $xwiki.getUserPreference('colorTheme'))
5 5  #if ("$!colorTheme" != '')
6 6   ## Make sure we use an absolute reference (see XWIKI-9672)
... ... @@ -8,16 +8,24 @@
8 8  #end
9 9  #set ($discard = $xwiki.ssx.use("$xcontext.macro.doc.prefixedFullName", {'colorTheme': $colorTheme}))
10 10  #set ($discard = $xwiki.jsx.use("$xcontext.macro.doc.prefixedFullName"))
12 +## Make sure the label is non-empty as otherwise the aria-label doesn't work.
13 +#if ("$!label" != '')
14 + #set ($label = $wikimacro.context.getXDOM().getIdGenerator().generateUniqueId('Menu',''))
15 +#end
11 11  #if($type.contains('horizontal'))
12 12   ## Make sure the id is non-empty for horizontal menus as otherwise the toggle doesn't work.
13 - #if ($stringtool.isBlank("$!id"))
18 + #if ("$!id" == '')
14 14   #set ($id = $wikimacro.context.getXDOM().getIdGenerator().generateUniqueId("M", "GeneratedMenuId"))
15 15   #end
16 - (% role="navigation" class="menu-horizontal-toggle" %)(((
21 + (% role='navigation' class='menu-horizontal-toggle'
22 + aria-label="${services.rendering.escape($label, 'xwiki/2.1')}" %)(((
17 17   (% class="navbar-header" %)(((
18 18   {{html}}
19 - <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#$!{escapetool.xml($id)}" aria-expanded="false">
20 - <span class="sr-only"></span>
25 + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#$!{escapetool.xml($id)}"
26 + aria-expanded="false" aria-controls="$!{escapetool.xml($id)}">
27 + <span class="sr-only">
28 + $escapetool.xml($services.localization.render('menu.ui.horizontal.toggler.description'))
29 + </span>
21 21   <span class="icon-bar"></span>
22 22   <span class="icon-bar"></span>
23 23   <span class="icon-bar"></span>
... ... @@ -24,12 +24,13 @@
24 24   </button>
25 25   {{/html}}
26 26   )))
27 - (% id="$!{services.rendering.escape($id, 'xwiki/2.1')}" class="menu menu-${services.rendering.escape($!type, 'xwiki/2.1')} collapse navbar-collapse" role="menubar" %)(((
36 + (% id="$!{services.rendering.escape($id, 'xwiki/2.1')}" class="menu menu-${services.rendering.escape($!type, 'xwiki/2.1')} collapse navbar-collapse" role="navigation" %)(((
28 28   {{wikimacrocontent/}}
29 29   )))
30 30   )))
31 31  #else
32 - (% #if ("$!id" != '') id="${services.rendering.escape($id, 'xwiki/2.1')}"#end class="menu menu-${services.rendering.escape($!type, 'xwiki/2.1')}" role="menu" %)(((
41 + (% role="navigation" #if ("$!id" != '') id="${services.rendering.escape($id, 'xwiki/2.1')}"#end class="menu menu-${services.rendering.escape($!type, 'xwiki/2.1')}"
42 + aria-label="${services.rendering.escape($label, 'xwiki/2.1')}" %)(((
33 33   {{wikimacrocontent/}}
34 34   )))
35 35  #end
XWiki.WikiMacroParameterClass[3]
Parameter name
... ... @@ -1,0 +1,1 @@
1 +label
Parameter description
... ... @@ -1,0 +1,1 @@
1 +Optional menu label used to describe the content of the menu.
Parameter mandatory
... ... @@ -1,0 +1,1 @@
1 +No