0 Votes

Changes for page Menu Macro

Last modified by Ruud de Jong on 2024/10/24 11:40

From 4.1 to 3.1 From 8.1 to 7.1

From version 7.1

edited by Ruud de Jong
on 2024/07/13 21:59

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

To version 4.1

edited by Bart Vastenhouw
on 2022/08/02 10:56

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

Raw
Rendered

Summary

Page properties (1 modified, 0 added, 0 removed)
Objects (3 modified, 0 added, 1 removed)

Details

Page properties

Author

@@ -1,1 +1,1 @@
--XWiki.RuuddeJong
++XWiki.BartVastenhouw

XWiki.JavaScriptExtension[0]

Code

@@ -1,85 +1,26 @@
--define('menu-ui-translation-keys', {
--  prefix: 'menu.ui.',
--  keys: [
--    "openSubMenu",
--    "closeSubMenu"
--  ]
--});
--require(['jquery','xwiki-l10n!menu-ui-translation-keys'], function($, l10n) {
++require(['jquery'], function($) {
    // 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.
--  // 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');
++  $('.menu-horizontal li ul').parent().addClass('xDropdown');
++
    // Make sure the menu separators are really empty.
--  var menus = $('.menu-horizontal, .menu-vertical');
--  menus.find('li > br:first-child').remove();
++  $('.menu-horizontal, .menu-vertical').find('li > br:first-child').remove();
--  // 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() {
++  // Collapsible menu bahavior.
++  $('.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' : ''));
--    });
--  });
--
--  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);
++      // 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);
        }
--      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);
++      $(toggle).addClass('xDropdown-toggle').on('click', function() {
++        $(this).parent().toggleClass('open');
++      });
      });
--    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,32 +4,6 @@
    }
  }
  .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;
@@ -51,8 +51,32 @@
      .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 {
--      > ul {
++      > .xDropdown-toggle:after {
++        /* Expanded arrow style */
++        .caret;
++        margin-top: @line-height-computed / 2;
++      }
++      > .xDropdown-menu {
          display: block;
        }
      }
@@ -66,35 +66,22 @@
      .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;
--        min-height: 50px;
--        display: flex;
--        align-items: center;
++        display: block;
          padding: @nav-link-padding;
--        padding-top: 0;
--        padding-bottom: 0;
++        padding-top: @navbar-padding-vertical;
++        padding-bottom: @navbar-padding-vertical;
          @media (min-width: @grid-float-breakpoint) {
            float: left;
          }
          line-height: @line-height-computed;
          color: @navbar-default-link-color;
--        &:hover, &:focus-within {
++        &:hover {
            color: @navbar-default-link-hover-color;
            background-color: @navbar-default-link-hover-bg;
            background-color: @navbar-default-link-active-bg;
@@ -108,7 +108,7 @@
          /* Links inside menu */
          a {
            color: @navbar-default-link-color;
--          &:hover, &:focus-within {
++          &:hover {
              text-decoration: none;
            }
          }
@@ -117,10 +117,6 @@
            /* 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;
--          }
          }
          /* Separator vertical inside menu */
          &:empty {
@@ -166,7 +166,7 @@
              color: @dropdown-link-color;
              overflow: hidden;
              text-overflow: ellipsis; // Displaying ... if the text is too long
--            &:hover, &:focus-within {
++            &:hover {
                /* &:extend(.dropdown-menu>li>a:hover); */
                text-decoration: none;
                color: @dropdown-link-hover-color;
@@ -184,7 +184,7 @@
              color: @dropdown-link-color;
              /* Empty dropdowns should have height in order to display the arrow */
              min-height: 2 * @font-size-base;
--            &:hover, &:focus-within {
++            &:hover {
                text-decoration: none;
                color: @dropdown-link-hover-color;
                background-color: @dropdown-link-hover-bg;
@@ -194,16 +194,15 @@
                }
              }
              /* When in dropdown we also have a link, reset the duplicated padding */
--            & > .xDropdown-header > span > a {
++            & > span > a {
                padding: 0;
                display: inherit;
              }
--            /* 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 {
++            /* Place the arrow on the right */
++            &:after {
                position: absolute;
--              right: 0;
--              top: 0;
++              margin-top: @line-height-computed / 2;
++              right: 8px;
              }
            }
            /* Separator horizontal inside menu */
@@ -217,9 +217,17 @@
      /* Stylization: Generic */
      li {
        /* Display submenus on hover */
--      &.open > ul {
++      &:hover > 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 {
@@ -241,7 +241,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 {
@@ -263,16 +263,19 @@
              /* Links inside menu */
              a {
                color: @navbar-default-link-color;
++              &:hover {
++                /* Preserve the styling from dropdown */
++              }
              }
              /* Submenus inside menu */
              &.xDropdown {
                color: @navbar-default-link-color;
--              &.open {
++              &:hover {
                  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,7 +1,6 @@
  {{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)
@@ -9,24 +9,16 @@
  #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 ("$!id" == '')
++  #if ($stringtool.isBlank("$!id"))
      #set ($id = $wikimacro.context.getXDOM().getIdGenerator().generateUniqueId("M", "GeneratedMenuId"))
    #end
--  (% role='navigation' class='menu-horizontal-toggle'
--  aria-label="${services.rendering.escape($label, 'xwiki/2.1')}" %)(((
++  (% role="navigation" class="menu-horizontal-toggle" %)(((
      (% class="navbar-header" %)(((
        {{html}}
--        <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>
++        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#$!{escapetool.xml($id)}" aria-expanded="false">
++          <span class="sr-only"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
@@ -33,13 +33,12 @@
          </button>
        {{/html}}
      )))
--    (% id="$!{services.rendering.escape($id, 'xwiki/2.1')}" class="menu menu-${services.rendering.escape($!type, 'xwiki/2.1')} collapse navbar-collapse" role="navigation" %)(((
++    (% id="$!{services.rendering.escape($id, 'xwiki/2.1')}" class="menu menu-${services.rendering.escape($!type, 'xwiki/2.1')} collapse navbar-collapse" %)(((
        {{wikimacrocontent/}}
      )))
    )))
  #else
--  (% 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')}" %)(((
++  (% #if ("$!id" != '') id="${services.rendering.escape($id, 'xwiki/2.1')}"#end class="menu menu-${services.rendering.escape($!type, 'xwiki/2.1')}" %)(((
      {{wikimacrocontent/}}
    )))
  #end

XWiki.WikiMacroParameterClass[3]

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

Parameter name

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