Skip to Content
0 Votes

Changes for page Menu Macro

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

Summary

Details

XWiki.JavaScriptExtension[0]
Code
... ... @@ -58,30 +58,12 @@
58 58   xDropdown.toggleClass('open');
59 59   setDropdownButtonTitle(dropDownButton);
60 60   });
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');
61 + dropDownHeader.append($(this).contents()[0]);
62 + dropDownHeader.append(dropDownButton);
63 + $(this).prepend(dropDownHeader);
64 + $(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 -
85 85   $('.menu-horizontal .xDropdown').each(function() {
86 86   // In case of horizontal menus, make it so that a class is added on hover, instead of using the :hover pseudo-class
87 87   this.addEventListener("mouseover", function() {
XWiki.StyleSheetExtension[1]
Code
... ... @@ -60,9 +60,11 @@
60 60   &.menu-horizontal {
61 61   /* Stylization: Navbars */
62 62   .clearfix;
63 - background-color: @menu-default-bg;
64 - border-color: @menu-default-border;
65 - min-height: @menu-height;
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;
66 66   padding-left: 25px;
67 67   .xDropdown.open {
68 68   > .xDropdown-header > .xDropdown-header-toggle:before {
... ... @@ -76,7 +76,7 @@
76 76   padding-left: 0;
77 77   list-style-type: none;
78 78   margin: 0;
79 - min-height: @menu-height;
81 + min-height: 50px;
80 80   display: flex;
81 81   align-items: stretch;
82 82   & > li {
... ... @@ -90,21 +90,22 @@
90 90   @media (min-width: @grid-float-breakpoint) {
91 91   float: left;
92 92   }
93 - color: @menu-default-link-color;
95 + line-height: @line-height-computed;
96 + color: @navbar-default-link-color;
94 94   &:hover, &:focus-within {
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;
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;
99 99   /* When hovering, have the same color for text and link usage */
100 100   & > span > a {
101 - background-color: @menu-default-link-active-bg;
102 - color: @menu-default-link-active-color;
104 + background-color: @navbar-default-link-active-bg;
105 + color: @navbar-default-link-active-color;
103 103   }
104 104   }
105 105   /* Links inside menu */
106 106   a {
107 - color: @menu-default-link-color;
110 + color: @navbar-default-link-color;
108 108   &:hover, &:focus-within {
109 109   text-decoration: none;
110 110   }
... ... @@ -112,7 +112,7 @@
112 112   /* Containers, images inside menu */
113 113   div, img {
114 114   /* Limit the height to the nav height minus the padding and minus border */
115 - max-height: @menu-height - (2 * @navbar-padding-vertical) - 2px;
118 + max-height: @navbar-height - (2 * @navbar-padding-vertical) - 2px;
116 116   overflow: hidden;
117 117   &.xDropdown-header{
118 118   /* No border on the dropdown header */
... ... @@ -123,15 +123,15 @@
123 123   & > .xDropdown-header > .xDropdown-header-toggle {
124 124   &:hover, &:focus-within {
125 125   /* Change background color of the caret when hovering on the navbar. */
126 - background-color: @menu-default-bg;
129 + background-color: @navbar-default-bg;
127 127   }
128 128   }
129 129   /* Separator vertical inside menu */
130 130   &:empty {
131 - height: @menu-height;
134 + height: @navbar-height;
132 132   margin: 0 ((@line-height-computed / 2) - 1);
133 133   padding: 0;
134 - border-right: 1px solid @menu-default-border;
137 + border-right: 1px solid @navbar-default-border;
135 135   }
136 136   }
137 137   /* Stylization: Dropdowns */
... ... @@ -151,26 +151,24 @@
151 151   background-color: @dropdown-bg;
152 152   border: 1px solid @dropdown-border;
153 153   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. */
156 156   .box-shadow(0 6px 12px rgba(0,0,0,.175));
157 157   background-clip: padding-box;
158 158   margin-top: 0;
159 159   border-top-right-radius: 0;
160 160   border-top-left-radius: 0;
161 - overflow-wrap: break-word;
162 - hyphens: auto;
163 163   li {
164 164   /* Text inside menu */
165 165   color: @dropdown-link-color;
166 - padding: 3px 20px;
167 167   /* Links inside menu */
168 168   a {
169 169   display: block;
168 + padding: 3px 20px;
170 170   clear: both;
171 171   font-weight: normal;
172 172   line-height: @line-height-base;
173 173   color: @dropdown-link-color;
173 + overflow: hidden;
174 + text-overflow: ellipsis; // Displaying ... if the text is too long
174 174   &:hover, &:focus-within {
175 175   /* &:extend(.dropdown-menu>li>a:hover); */
176 176   text-decoration: none;
... ... @@ -188,7 +188,7 @@
188 188   line-height: @line-height-base;
189 189   color: @dropdown-link-color;
190 190   /* Empty dropdowns should have height in order to display the arrow */
191 - min-height: 1lh;
192 + min-height: 2 * @font-size-base;
192 192   &:hover, &:focus-within {
193 193   text-decoration: none;
194 194   color: @dropdown-link-hover-color;
... ... @@ -199,16 +199,15 @@
199 199   }
200 200   }
201 201   /* When in dropdown we also have a link, reset the duplicated padding */
202 - & > .xDropdown-header > span > a {
203 + & > span > a {
203 203   padding: 0;
204 204   display: inherit;
205 205   }
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 {
207 + /* Place the arrow on the right */
208 + &:after {
209 209   position: absolute;
210 - right: 0;
211 - top: 0;
210 + margin-top: @line-height-computed / 2;
211 + right: 8px;
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(@menu-default-border);
253 + .nav-divider(@navbar-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: @menu-default-link-color;
267 + color: @navbar-default-link-color;
268 268   /* Links inside menu */
269 269   a {
270 - color: @menu-default-link-color;
270 + color: @navbar-default-link-color;
271 271   }
272 272   /* Submenus inside menu */
273 273   &.xDropdown {
274 - color: @menu-default-link-color;
274 + color: @navbar-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: @menu-default-link-color;
281 + color: @navbar-default-link-color;
282 282   }
283 283   }
284 284   &:empty {
285 - .nav-divider(@menu-default-border);
285 + .nav-divider(@navbar-default-border);
286 286   }
287 287   }
288 288   }
... ... @@ -312,16 +312,15 @@
312 312  
313 313  .menu-horizontal-toggle {
314 314   .clearfix;
315 - background-color: @menu-default-bg;
316 - border-color: @menu-default-border;
317 - min-height: @menu-height;
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;
318 318   & .navbar-toggle {
319 319   float: left;
320 320   padding-left: 15px;
321 - padding-top: 0;
322 - padding-bottom: 0;
323 323   & .icon-bar {
324 - background-color: @menu-default-link-color;
323 + background-color: @navbar-default-link-color;
325 325   transition: .3s ease all;
326 326   &:nth-of-type(2) {
327 327   opacity: 0;
XWiki.WikiMacroClass[0]
Macro code
... ... @@ -1,7 +1,6 @@
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)
5 5  #set ($colorTheme = $xwiki.getUserPreference('colorTheme'))
6 6  #if ("$!colorTheme" != '')
7 7   ## Make sure we use an absolute reference (see XWIKI-9672)
... ... @@ -9,24 +9,16 @@
9 9  #end
10 10  #set ($discard = $xwiki.ssx.use("$xcontext.macro.doc.prefixedFullName", {'colorTheme': $colorTheme}))
11 11  #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
16 16  #if($type.contains('horizontal'))
17 17   ## Make sure the id is non-empty for horizontal menus as otherwise the toggle doesn't work.
18 - #if ("$!id" == '')
13 + #if ($stringtool.isBlank("$!id"))
19 19   #set ($id = $wikimacro.context.getXDOM().getIdGenerator().generateUniqueId("M", "GeneratedMenuId"))
20 20   #end
21 - (% role='navigation' class='menu-horizontal-toggle'
22 - aria-label="${services.rendering.escape($label, 'xwiki/2.1')}" %)(((
16 + (% role="navigation" class="menu-horizontal-toggle" %)(((
23 23   (% class="navbar-header" %)(((
24 24   {{html}}
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>
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>
30 30   <span class="icon-bar"></span>
31 31   <span class="icon-bar"></span>
32 32   <span class="icon-bar"></span>
... ... @@ -33,13 +33,12 @@
33 33   </button>
34 34   {{/html}}
35 35   )))
36 - (% id="$!{services.rendering.escape($id, 'xwiki/2.1')}" class="menu menu-${services.rendering.escape($!type, 'xwiki/2.1')} collapse navbar-collapse" role="navigation" %)(((
27 + (% id="$!{services.rendering.escape($id, 'xwiki/2.1')}" class="menu menu-${services.rendering.escape($!type, 'xwiki/2.1')} collapse navbar-collapse" role="menubar" %)(((
37 37   {{wikimacrocontent/}}
38 38   )))
39 39   )))
40 40  #else
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')}" %)(((
32 + (% #if ("$!id" != '') id="${services.rendering.escape($id, 'xwiki/2.1')}"#end class="menu menu-${services.rendering.escape($!type, 'xwiki/2.1')}" role="menu" %)(((
43 43   {{wikimacrocontent/}}
44 44   )))
45 45  #end
XWiki.WikiMacroParameterClass[3]
Parameter name
... ... @@ -1,1 +1,0 @@
1 -label
Parameter description
... ... @@ -1,1 +1,0 @@
1 -Optional menu label used to describe the content of the menu.
Parameter mandatory
... ... @@ -1,1 +1,0 @@
1 -No