Skip to Content

Changes for page Menu Macro

Last modified by Drunk Monkey on 2024-10-07 11:49
From version 7.1
edited by Drunk Monkey
on 2023-04-26 20:38
Change comment: Install extension [org.xwiki.platform:xwiki-platform-menu-ui/15.3]
To version 6.1
edited by Drunk Monkey
on 2023-04-26 18:21
Change comment: Migrated property [type] from class [XWiki.WikiMacroParameterClass]

Summary

Details

XWiki.JavaScriptExtension[0]
Code
... ... @@ -1,81 +1,28 @@
1 -define('menu-ui-translation-keys', {
2 - prefix: 'menu.ui.',
3 - keys: [
4 - "openSubMenu",
5 - "closeSubMenu"
6 - ]
7 -});
8 -require(['jquery','xwiki-l10n!menu-ui-translation-keys'], function($, l10n) {
1 +require(['jquery'], function($) {
9 9   // It's not possible to write a CSS selector that targets list items containing lists so we rely on JavaScript.
10 10   // The 'dropdown' CSS class is used only to display the down/left arrow.
11 - // All nodes on the tree.
12 - $('.menu-horizontal ul , .menu-vertical ul')
13 - .attr('role', 'menu');
14 - // All leaves on the tree.
15 - $('.menu-horizontal li, .menu-vertical li')
16 - .attr('role', 'menuitem');
17 - $('.menu-horizontal li ul, .menu-vertical li ul')
18 - .parent()
19 - .addClass('xDropdown');
4 + $('.menu-horizontal li ul').parent().addClass('xDropdown');
5 +
20 20   // Make sure the menu separators are really empty.
21 - var menus = $('.menu-horizontal, .menu-vertical');
22 - menus.find('li > br:first-child').remove();
7 + $('.menu-horizontal, .menu-vertical').find('li > br:first-child').remove();
23 23  
24 - // Add aria attributes to the menu separators.
25 - menus.find('li')
26 - .filter(function() {return this.textContent.trim() === ""; })
27 - .attr('role', 'separator')
28 - .attr('aria-hidden', 'true');
29 -
30 - // Vertical menus are initially expanded
31 - $('.menu-vertical.collapsible').each(function() {
9 + // Collapsible menu bahavior.
10 + $('.menu-vertical.collapsible').each(function(){
32 32   var open = $(this).hasClass('open');
33 33   $(this).find('li ul').each(function() {
34 34   $(this).addClass('xDropdown-menu').parent().addClass('xDropdown' + (open ? ' open' : ''));
14 + // Wrap everything (including text nodes) before the sub-menu in a DIV that will toggle its state.
15 + var toggle = this.ownerDocument.createElement('div');
16 + $(this).parent().prepend(toggle);
17 + for(var next = toggle.nextSibling; next != this; next = toggle.nextSibling) {
18 + toggle.appendChild(next);
19 + }
20 + $(toggle).addClass('xDropdown-toggle').on('click', function() {
21 + $(this).parent().toggleClass('open');
22 + });
35 35   });
36 36   });
37 37  
38 - function setDropdownButtonTitle(dropDownButton) {
39 - var xDropdown = $(dropDownButton).parent().parent();
40 - if($(xDropdown).hasClass('open')) {
41 - $(dropDownButton).attr('title', l10n['closeSubMenu']);
42 - $(xDropdown).attr('aria-expanded', "true");
43 - } else {
44 - $(dropDownButton).attr('title', l10n['openSubMenu']);
45 - $(xDropdown).attr('aria-expanded', "false");
46 - }
47 - }
48 -
49 - $('.xDropdown').each(function() {
50 - var dropDownHeader = this.ownerDocument.createElement("div");
51 - $(dropDownHeader).addClass("xDropdown-header");
52 - var dropDownButton = this.ownerDocument.createElement("button");
53 - $(dropDownButton).addClass("xDropdown-header-toggle");
54 - setDropdownButtonTitle(dropDownButton);
55 - dropDownButton.addEventListener('click',function() {
56 - //Swaps the state of the submenu.
57 - var xDropdown = $(this).parent().parent();
58 - xDropdown.toggleClass('open');
59 - setDropdownButtonTitle(dropDownButton);
60 - });
61 - dropDownHeader.append($(this).contents()[0]);
62 - dropDownHeader.append(dropDownButton);
63 - $(this).prepend(dropDownHeader);
64 - $(dropDownHeader).next().addClass('xDropdown-menu');
65 - });
66 -
67 - $('.menu-horizontal .xDropdown').each(function() {
68 - // In case of horizontal menus, make it so that a class is added on hover, instead of using the :hover pseudo-class
69 - this.addEventListener("mouseover", function() {
70 - $(this).addClass('open');
71 - setDropdownButtonTitle(this.firstChild.lastChild);
72 - });
73 - this.addEventListener("mouseout", function() {
74 - $(this).removeClass('open');
75 - setDropdownButtonTitle(this.firstChild.lastChild);
76 - });
77 - });
78 -
79 79   // In case of horizontal responsive menus, make sub-submenus in the navbar work on mobile devices
80 80   $(document).on('touchstart.dropdown.data-api', '.dropdown-submenu > a', function (event) {
81 81   event.preventDefault();
XWiki.StyleSheetExtension[1]
Code
... ... @@ -4,32 +4,6 @@
4 4   }
5 5  }
6 6  .menu {
7 - /* Rotate the carets when the menu is opened. */
8 - .xDropdown{
9 - > .xDropdown-header > .xDropdown-header-toggle:before {
10 - transform: rotate(90deg);
11 - }
12 - &.open > .xDropdown-header > .xDropdown-header-toggle:before {
13 - transform: rotate(0);
14 - }
15 - }
16 - .xDropdown-header-toggle {
17 - background: transparent;
18 - border:none;
19 - border-radius: @border-radius-base;
20 - margin: 0 .3em;
21 - line-height: (@line-height-computed / 2);
22 - min-width: 24px;
23 - min-height: 24px;
24 - &:hover, &:focus-within {
25 - background-color: @dropdown-bg;
26 - }
27 - &:before {
28 - .caret;
29 - margin-left: 0;
30 - content: '';
31 - }
32 - }
33 33   &.menu-vertical {
34 34   ul {
35 35   list-style-type: none;
... ... @@ -51,8 +51,32 @@
51 51   .xDropdown-menu {
52 52   display: none;
53 53   }
28 + .xDropdown-toggle {
29 + cursor: pointer;
30 + position: relative;
31 + &:hover {
32 + background-color: @nav-link-hover-bg;
33 + }
34 + &:after {
35 + .caret;
36 + content: '';
37 + /* Positioning */
38 + position: absolute;
39 + margin-top: @line-height-computed / 3;
40 + right: 1em;
41 + /* Collapsed arrow style */
42 + border-bottom: 4px solid transparent;
43 + border-right: 4px solid;
44 + border-top: 4px solid transparent;
45 + }
46 + }
54 54   .xDropdown.open {
55 - > ul {
48 + > .xDropdown-toggle:after {
49 + /* Expanded arrow style */
50 + .caret;
51 + margin-top: @line-height-computed / 2;
52 + }
53 + > .xDropdown-menu {
56 56   display: block;
57 57   }
58 58   }
... ... @@ -66,35 +66,22 @@
66 66   .box-shadow(0 2px 8px rgba(0,0,0,0.4) inset);
67 67   min-height: @navbar-height;
68 68   padding-left: 25px;
69 - .xDropdown.open {
70 - > .xDropdown-header > .xDropdown-header-toggle:before {
71 - transform: rotate(0);
72 - }
73 - > ul {
74 - display: block;
75 - }
76 - }
77 77   & > ul {
78 78   padding-left: 0;
79 79   list-style-type: none;
80 80   margin: 0;
81 - min-height: 50px;
82 - display: flex;
83 - align-items: stretch;
84 84   & > li {
85 85   position: relative;
86 - min-height: 50px;
87 - display: flex;
88 - align-items: center;
73 + display: block;
89 89   padding: @nav-link-padding;
90 - padding-top: 0;
91 - padding-bottom: 0;
75 + padding-top: @navbar-padding-vertical;
76 + padding-bottom: @navbar-padding-vertical;
92 92   @media (min-width: @grid-float-breakpoint) {
93 93   float: left;
94 94   }
95 95   line-height: @line-height-computed;
96 96   color: @navbar-default-link-color;
97 - &:hover, &:focus-within {
82 + &:hover {
98 98   color: @navbar-default-link-hover-color;
99 99   background-color: @navbar-default-link-hover-bg;
100 100   background-color: @navbar-default-link-active-bg;
... ... @@ -108,7 +108,7 @@
108 108   /* Links inside menu */
109 109   a {
110 110   color: @navbar-default-link-color;
111 - &:hover, &:focus-within {
96 + &:hover {
112 112   text-decoration: none;
113 113   }
114 114   }
... ... @@ -117,18 +117,7 @@
117 117   /* Limit the height to the nav height minus the padding and minus border */
118 118   max-height: @navbar-height - (2 * @navbar-padding-vertical) - 2px;
119 119   overflow: hidden;
120 - &.xDropdown-header{
121 - /* No border on the dropdown header */
122 - max-height: unset;
123 - }
124 124   }
125 - /* Horizontal menu top-level headers. */
126 - & > .xDropdown-header > .xDropdown-header-toggle {
127 - &:hover, &:focus-within {
128 - /* Change background color of the caret when hovering on the navbar. */
129 - background-color: @navbar-default-bg;
130 - }
131 - }
132 132   /* Separator vertical inside menu */
133 133   &:empty {
134 134   height: @navbar-height;
... ... @@ -172,7 +172,7 @@
172 172   color: @dropdown-link-color;
173 173   overflow: hidden;
174 174   text-overflow: ellipsis; // Displaying ... if the text is too long
175 - &:hover, &:focus-within {
149 + &:hover {
176 176   /* &:extend(.dropdown-menu>li>a:hover); */
177 177   text-decoration: none;
178 178   color: @dropdown-link-hover-color;
... ... @@ -190,7 +190,7 @@
190 190   color: @dropdown-link-color;
191 191   /* Empty dropdowns should have height in order to display the arrow */
192 192   min-height: 2 * @font-size-base;
193 - &:hover, &:focus-within {
167 + &:hover {
194 194   text-decoration: none;
195 195   color: @dropdown-link-hover-color;
196 196   background-color: @dropdown-link-hover-bg;
... ... @@ -222,9 +222,17 @@
222 222   /* Stylization: Generic */
223 223   li {
224 224   /* Display submenus on hover */
225 - &.open > ul {
199 + &:hover > ul {
226 226   display: block;
227 227   }
202 + /* Display an arrow for expandable items */
203 + &.xDropdown {
204 + &:after {
205 + .caret;
206 + content: '';
207 + margin-left: .5em;
208 + }
209 + }
228 228   }
229 229   /* The only way to have a menu with more than 2 levels without JavaScript is to use a fixed width. */
230 230   &.fixedWidth {
... ... @@ -246,7 +246,7 @@
246 246   }
247 247   /* Resetting rules for mobile view */
248 248   @media (max-width: @screen-xs-max) {
249 - > ul {
231 + > ul {
250 250   margin: 0 0 0 -25px; /* Remove padding added in normal view */
251 251   > li {
252 252   &:empty {
... ... @@ -268,16 +268,19 @@
268 268   /* Links inside menu */
269 269   a {
270 270   color: @navbar-default-link-color;
253 + &:hover {
254 + /* Preserve the styling from dropdown */
255 + }
271 271   }
272 272   /* Submenus inside menu */
273 273   &.xDropdown {
274 274   color: @navbar-default-link-color;
275 - &.open {
260 + &:hover {
276 276   background-color: transparent;
277 277   color: inherit;
278 278   }
279 279   /* When in dropdown we also have a link */
280 - > span > a {
265 + > span > a {
281 281   color: @navbar-default-link-color;
282 282   }
283 283   }
XWiki.WikiMacroClass[0]
Macro code
... ... @@ -24,12 +24,12 @@
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" %)(((
27 + (% id="$!{services.rendering.escape($id, 'xwiki/2.1')}" class="menu menu-${services.rendering.escape($!type, 'xwiki/2.1')} collapse navbar-collapse" %)(((
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" %)(((
32 + (% #if ("$!id" != '') id="${services.rendering.escape($id, 'xwiki/2.1')}"#end class="menu menu-${services.rendering.escape($!type, 'xwiki/2.1')}" %)(((
33 33   {{wikimacrocontent/}}
34 34   )))
35 35  #end