Changes for page Menu Macro

Last modified by Sebastian Marsching on 2024/09/04 17:56

From 4.1 to 5.1 From 7.1 to 8.1

From version 5.1

edited by Sebastian Marsching
on 2023/08/13 16:14

Change comment: Migrated property [type] from class [XWiki.WikiMacroParameterClass]

To version 7.1

edited by Sebastian Marsching
on 2024/08/10 15:00

Change comment: Install extension [org.xwiki.platform:xwiki-platform-menu-ui/15.10.11]

Raw
Rendered

Summary

Objects (3 modified, 1 added, 0 removed)

Details

XWiki.JavaScriptExtension[0]

Code

@@ -1,26 +1,85 @@
--require(['jquery'], function($) {
++define('menu-ui-translation-keys', {
++  prefix: 'menu.ui.',
++  keys: [
++    "openSubMenu",
++    "closeSubMenu"
++  ]
++});
++require(['jquery','xwiki-l10n!menu-ui-translation-keys'], function($, l10n) {
    // It's not possible to write a CSS selector that targets list items containing lists so we rely on JavaScript.
    // The 'dropdown' CSS class is used only to display the down/left arrow.
--  $('.menu-horizontal li ul').parent().addClass('xDropdown');
--
++  // All nodes on the tree.
++  $('.menu-horizontal ul , .menu-vertical ul')
++    .attr('role', 'menu');
++  // All leaves on the tree.
++  $('.menu-horizontal li, .menu-vertical li')
++    .attr('role', 'menuitem');
++  $('.menu-horizontal li ul, .menu-vertical li ul')
++    .parent()
++    .addClass('xDropdown');
    // Make sure the menu separators are really empty.
--  $('.menu-horizontal, .menu-vertical').find('li > br:first-child').remove();
++  var menus = $('.menu-horizontal, .menu-vertical');
++  menus.find('li > br:first-child').remove();
--  // Collapsible menu bahavior.
--  $('.menu-vertical.collapsible').each(function(){
++  // Add aria attributes to the menu separators.
++  menus.find('li')
++    .filter(function() {return this.textContent.trim() === ""; })
++    .attr('role', 'separator')
++    .attr('aria-hidden', 'true');
++
++  // Vertical menus are initially expanded
++  $('.menu-vertical.collapsible').each(function() {
      var open = $(this).hasClass('open');
      $(this).find('li ul').each(function() {
        $(this).addClass('xDropdown-menu').parent().addClass('xDropdown' + (open ? ' open' : ''));
--      // Wrap everything (including text nodes) before the sub-menu in a DIV that will toggle its state.
--      var toggle = this.ownerDocument.createElement('div');
--      $(this).parent().prepend(toggle);
--      for(var next = toggle.nextSibling; next != this; next = toggle.nextSibling) {
--        toggle.appendChild(next);
++    });
++  });
++
++  function setDropdownButtonTitle(dropDownButton) {
++    var xDropdown = $(dropDownButton).parent().parent();
++    if($(xDropdown).hasClass('open')) {
++      $(dropDownButton).attr('title', l10n['closeSubMenu']);
++      $(xDropdown).attr('aria-expanded', "true");
++    } else {
++      $(dropDownButton).attr('title', l10n['openSubMenu']);
++      $(xDropdown).attr('aria-expanded', "false");
++    }
++  }
++
++  $('.xDropdown').each(function() {
++    var dropDownHeader = this.ownerDocument.createElement("div");
++    $(dropDownHeader).addClass("xDropdown-header");
++    var dropDownButton = this.ownerDocument.createElement("button");
++    $(dropDownButton).addClass("xDropdown-header-toggle");
++    setDropdownButtonTitle(dropDownButton);
++    dropDownButton.addEventListener('click',function() {
++      //Swaps the state of the submenu.
++      var xDropdown = $(this).parent().parent();
++      xDropdown.toggleClass('open');
++      setDropdownButtonTitle(dropDownButton);
++    });
++      let dropDownContent = $(this).contents();
++      // We put all the content of the entry in the header,
++      // except for the last one which is the content of the dropdown. This dropdown stays where it is.
++      for (let index = 0; index < dropDownContent.length - 1 ; index++) {
++        let item = dropDownContent[index];
++        dropDownHeader.append(item);
        }
--      $(toggle).addClass('xDropdown-toggle').on('click', function() {
--        $(this).parent().toggleClass('open');
--      });
++      dropDownHeader.append(dropDownButton);
++      $(this).prepend(dropDownHeader);
++      $(dropDownHeader).next().addClass('xDropdown-menu');
++  });
++
++  $('.menu-horizontal .xDropdown').each(function() {
++    // In case of horizontal menus, make it so that a class is added on hover, instead of using the :hover pseudo-class
++    this.addEventListener("mouseover", function() {
++      $(this).addClass('open');
++      setDropdownButtonTitle(this.firstChild.lastChild);
      });
++    this.addEventListener("mouseout", function() {
++      $(this).removeClass('open');
++      setDropdownButtonTitle(this.firstChild.lastChild);
++    });
    });
    // In case of horizontal responsive menus, make sub-submenus in the navbar work on mobile devices

XWiki.StyleSheetExtension[1]

Code

@@ -4,6 +4,32 @@
    }
  }
  .menu {
++  /* Rotate the carets when the menu is opened. */
++  .xDropdown{
++    > .xDropdown-header > .xDropdown-header-toggle:before {
++        transform: rotate(90deg);
++      }
++    &.open > .xDropdown-header > .xDropdown-header-toggle:before {
++      transform: rotate(0);
++    }
++  }
++  .xDropdown-header-toggle {
++    background: transparent;
++    border:none;
++    border-radius: @border-radius-base;
++    margin: 0 .3em;
++    line-height: (@line-height-computed / 2);
++    min-width: 24px;
++    min-height: 24px;
++    &:hover, &:focus-within {
++      background-color: @dropdown-bg;
++    }
++    &:before {
++      .caret;
++      margin-left: 0;
++      content: '';
++    }
++  }
    &.menu-vertical {
      ul {
        list-style-type: none;
@@ -25,32 +25,8 @@
      .xDropdown-menu {
        display: none;
      }
--    .xDropdown-toggle {
--      cursor: pointer;
--      position: relative;
--      &:hover {
--        background-color: @nav-link-hover-bg;
--      }
--      &:after {
--        .caret;
--        content: '';
--        /* Positioning */
--        position: absolute;
--        margin-top: @line-height-computed / 3;
--        right: 1em;
--        /* Collapsed arrow style */
--        border-bottom: 4px solid transparent;
--        border-right: 4px solid;
--        border-top: 4px solid transparent;
--      }
--    }
      .xDropdown.open {
--      > .xDropdown-toggle:after {
--        /* Expanded arrow style */
--        .caret;
--        margin-top: @line-height-computed / 2;
--      }
--      > .xDropdown-menu {
++      > ul {
          display: block;
        }
      }
@@ -64,22 +64,35 @@
      .box-shadow(0 2px 8px rgba(0,0,0,0.4) inset);
      min-height: @navbar-height;
      padding-left: 25px;
++    .xDropdown.open {
++      > .xDropdown-header > .xDropdown-header-toggle:before {
++        transform: rotate(0);
++      }
++      > ul {
++        display: block;
++      }
++    }
      & > ul {
        padding-left: 0;
        list-style-type: none;
        margin: 0;
++      min-height: 50px;
++      display: flex;
++      align-items: stretch;
        & > li {
          position: relative;
--        display: block;
++        min-height: 50px;
++        display: flex;
++        align-items: center;
          padding: @nav-link-padding;
--        padding-top: @navbar-padding-vertical;
--        padding-bottom: @navbar-padding-vertical;
++        padding-top: 0;
++        padding-bottom: 0;
          @media (min-width: @grid-float-breakpoint) {
            float: left;
          }
          line-height: @line-height-computed;
          color: @navbar-default-link-color;
--        &:hover {
++        &:hover, &:focus-within {
            color: @navbar-default-link-hover-color;
            background-color: @navbar-default-link-hover-bg;
            background-color: @navbar-default-link-active-bg;
@@ -93,7 +93,7 @@
          /* Links inside menu */
          a {
            color: @navbar-default-link-color;
--          &:hover {
++          &:hover, &:focus-within {
              text-decoration: none;
            }
          }
@@ -102,7 +102,18 @@
            /* Limit the height to the nav height minus the padding and minus border */
            max-height: @navbar-height - (2 * @navbar-padding-vertical) - 2px;
            overflow: hidden;
++          &.xDropdown-header{
++            /* No border on the dropdown header */
++            max-height: unset;
++          }
          }
++        /* Horizontal menu top-level headers. */
++        & > .xDropdown-header > .xDropdown-header-toggle {
++          &:hover, &:focus-within {
++            /* Change background color of the caret when hovering on the navbar. */
++            background-color: @navbar-default-bg;
++          }
++        }
          /* Separator vertical inside menu */
          &:empty {
            height: @navbar-height;
@@ -146,7 +146,7 @@
              color: @dropdown-link-color;
              overflow: hidden;
              text-overflow: ellipsis; // Displaying ... if the text is too long
--            &:hover {
++            &:hover, &:focus-within {
                /* &:extend(.dropdown-menu>li>a:hover); */
                text-decoration: none;
                color: @dropdown-link-hover-color;
@@ -164,7 +164,7 @@
              color: @dropdown-link-color;
              /* Empty dropdowns should have height in order to display the arrow */
              min-height: 2 * @font-size-base;
--            &:hover {
++            &:hover, &:focus-within {
                text-decoration: none;
                color: @dropdown-link-hover-color;
                background-color: @dropdown-link-hover-bg;
@@ -174,15 +174,16 @@
                }
              }
              /* When in dropdown we also have a link, reset the duplicated padding */
--            & > span > a {
++            & > .xDropdown-header > span > a {
                padding: 0;
                display: inherit;
              }
--            /* Place the arrow on the right */
--            &:after {
++            /* Reposition the toggle when in a dropdown of fixed size
++              to avoid eating away at the bit of space we have for the text. */
++            & > .xDropdown-header > .xDropdown-header-toggle {
                position: absolute;
--              margin-top: @line-height-computed / 2;
--              right: 8px;
++              right: 0;
++              top: 0;
              }
            }
            /* Separator horizontal inside menu */
@@ -196,17 +196,9 @@
      /* Stylization: Generic */
      li {
        /* Display submenus on hover */
--      &:hover > ul {
++      &.open > ul {
          display: block;
        }
--      /* Display an arrow for expandable items */
--      &.xDropdown {
--        &:after {
--          .caret;
--          content: '';
--          margin-left: .5em;
--        }
--      }
      }
      /* The only way to have a menu with more than 2 levels without JavaScript is to use a fixed width. */
      &.fixedWidth {
@@ -228,7 +228,7 @@
      }
      /* Resetting rules for mobile view */
      @media (max-width: @screen-xs-max) {
--      > ul {
++      > ul {
          margin: 0 0 0 -25px; /* Remove padding added in normal view */
          > li {
            &:empty {
@@ -250,19 +250,16 @@
              /* Links inside menu */
              a {
                color: @navbar-default-link-color;
--              &:hover {
--                /* Preserve the styling from dropdown */
--              }
              }
              /* Submenus inside menu */
              &.xDropdown {
                color: @navbar-default-link-color;
--              &:hover {
++              &.open {
                  background-color: transparent;
                  color: inherit;
                }
                /* When in dropdown we also have a link */
--              > span > a {
++              > span > a {
                  color: @navbar-default-link-color;
                }
              }

XWiki.WikiMacroClass[0]

Macro code

@@ -1,6 +1,7 @@
  {{velocity}}
  #set ($id = $xcontext.macro.params.id)
  #set ($type = $xcontext.macro.params.type)
++#set ($label = $xcontext.macro.params.label)
  #set ($colorTheme = $xwiki.getUserPreference('colorTheme'))
  #if ("$!colorTheme" != '')
    ## Make sure we use an absolute reference (see XWIKI-9672)
@@ -8,16 +8,24 @@
  #end
  #set ($discard = $xwiki.ssx.use("$xcontext.macro.doc.prefixedFullName", {'colorTheme': $colorTheme}))
  #set ($discard = $xwiki.jsx.use("$xcontext.macro.doc.prefixedFullName"))
++## Make sure the label is non-empty as otherwise the aria-label doesn't work.
++#if ("$!label" != '')
++  #set ($label = $wikimacro.context.getXDOM().getIdGenerator().generateUniqueId('Menu',''))
++#end
  #if($type.contains('horizontal'))
    ## Make sure the id is non-empty for horizontal menus as otherwise the toggle doesn't work.
--  #if ($stringtool.isBlank("$!id"))
++  #if ("$!id" == '')
      #set ($id = $wikimacro.context.getXDOM().getIdGenerator().generateUniqueId("M", "GeneratedMenuId"))
    #end
--  (% role="navigation" class="menu-horizontal-toggle" %)(((
++  (% role='navigation' class='menu-horizontal-toggle'
++  aria-label="${services.rendering.escape($label, 'xwiki/2.1')}" %)(((
      (% class="navbar-header" %)(((
        {{html}}
--        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#$!{escapetool.xml($id)}" aria-expanded="false">
--          <span class="sr-only"></span>
++        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#$!{escapetool.xml($id)}"
++          aria-expanded="false" aria-controls="$!{escapetool.xml($id)}">
++          <span class="sr-only">
++            $escapetool.xml($services.localization.render('menu.ui.horizontal.toggler.description'))
++          </span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
@@ -24,12 +24,13 @@
          </button>
        {{/html}}
      )))
--    (% id="$!{services.rendering.escape($id, 'xwiki/2.1')}" class="menu menu-${services.rendering.escape($!type, 'xwiki/2.1')} collapse navbar-collapse" %)(((
++    (% id="$!{services.rendering.escape($id, 'xwiki/2.1')}" class="menu menu-${services.rendering.escape($!type, 'xwiki/2.1')} collapse navbar-collapse" role="navigation" %)(((
        {{wikimacrocontent/}}
      )))
    )))
  #else
--  (% #if ("$!id" != '') id="${services.rendering.escape($id, 'xwiki/2.1')}"#end class="menu menu-${services.rendering.escape($!type, 'xwiki/2.1')}" %)(((
++  (% role="navigation" #if ("$!id" != '') id="${services.rendering.escape($id, 'xwiki/2.1')}"#end class="menu menu-${services.rendering.escape($!type, 'xwiki/2.1')}"
++        aria-label="${services.rendering.escape($label, 'xwiki/2.1')}" %)(((
      {{wikimacrocontent/}}
    )))
  #end

XWiki.WikiMacroParameterClass[3]

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

Parameter name

...	...	@@ -1,0 +1,1 @@
	1	+label

Changes for page Menu Macro

Summary

Details

Applications

Navigation

Tips

Need help?