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 1.1

edited by admins admins
on 2021/12/11 17:14

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

Raw
Rendered

Summary

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

Details

Page properties

Author

@@ -1,1 +1,1 @@
--XWiki.skorshunov
++XWiki.admins

Content

@@ -3,11 +3,9 @@
  = Horizontal Menu =
  {{velocity}}
--#set ($menuTemplateDoc = $xwiki.getDocument('MenuTemplate'))
  {{code language="none"}}
  {{menu type="horizontal fixedWidth"}}
--## No way to escape content in the code macro, so just remove {, see https://jira.xwiki.org/browse/XRENDERING-13.
--$menuTemplateDoc.content.replace('{', '')
++$xwiki.getDocument('MenuTemplate').content
  {{/menu}}
  {{/code}}
  {{/velocity}}

XWiki.JavaScriptExtension[0]

Code

@@ -1,97 +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');
--  });
--
--  $('.xDropdown-menu').each(function() {
--     this.addEventListener('keyup', function(event) {
--       if (event.key === 'Escape') {
--         // We change the state of the parent xDropdown
--         this.parentNode.classList.remove('open');
--         // We set the focus on the toggle button of the section we just collapsed
--         this.parentNode.querySelector(':scope > .xDropdown-header > .xDropdown-header-toggle').focus();
--       }
--       event.stopPropagation();
--     });
--  });
--
--  $('.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;
        }
      }
@@ -60,52 +60,42 @@
    &.menu-horizontal {
      /* Stylization: Navbars */
      .clearfix;
--    background-color: @menu-default-bg;
--    border-color: @menu-default-border;
--    min-height: @menu-height;
++    background-color: @navbar-default-bg;
++    border-color: @navbar-default-border;
++    /* Custom styling */
++    .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: @menu-height;
--      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;
          }
--        color: @menu-default-link-color;
--        &:hover, &:focus-within {
--          color: @menu-default-link-hover-color;
--          background-color: @menu-default-link-hover-bg;
--          background-color: @menu-default-link-active-bg;
--          color: @menu-default-link-active-color;
++        line-height: @line-height-computed;
++        color: @navbar-default-link-color;
++        &:hover {
++          color: @navbar-default-link-hover-color;
++          background-color: @navbar-default-link-hover-bg;
++          background-color: @navbar-default-link-active-bg;
++          color: @navbar-default-link-active-color;
            /* When hovering, have the same color for text and link usage */
            & > span > a {
--            background-color: @menu-default-link-active-bg;
--            color: @menu-default-link-active-color;
++            background-color: @navbar-default-link-active-bg;
++            color: @navbar-default-link-active-color;
            }
          }
          /* Links inside menu */
          a {
--          color: @menu-default-link-color;
--          &:hover, &:focus-within {
++          color: @navbar-default-link-color;
++          &:hover {
              text-decoration: none;
            }
          }
@@ -112,26 +112,15 @@
          /* Containers, images inside menu */
          div, img {
            /* Limit the height to the nav height minus the padding and minus border */
--          max-height: @menu-height - (2 * @navbar-padding-vertical) - 2px;
++          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: @menu-default-bg;
--          }
--        }
          /* Separator vertical inside menu */
          &:empty {
--          height: @menu-height;
++          height: @navbar-height;
            margin: 0 ((@line-height-computed / 2) - 1);
            padding: 0;
--          border-right: 1px solid @menu-default-border;
++          border-right: 1px solid @navbar-default-border;
          }
        }
        /* Stylization: Dropdowns */
@@ -149,29 +149,28 @@
          font-size: @font-size-base;
          text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
          background-color: @dropdown-bg;
++        border: 1px solid @dropdown-fallback-border; // IE8 fallback
          border: 1px solid @dropdown-border;
          border-radius: @border-radius-base;
--        /* On this element, the box-shadow is very useful since it appears in front of other elements.
--          We don't want to remove it despite the Flamingo theme now using flat designs almost everywhere. */
          .box-shadow(0 6px 12px rgba(0,0,0,.175));
          background-clip: padding-box;
          margin-top: 0;
          border-top-right-radius: 0;
          border-top-left-radius: 0;
--        overflow-wrap: break-word;
--        hyphens: auto;
          li {
            /* Text inside menu */
            color: @dropdown-link-color;
--          padding: 3px 20px;
            /* Links inside menu */
            a {
              display: block;
++            padding: 3px 20px;
              clear: both;
              font-weight: normal;
              line-height: @line-height-base;
              color: @dropdown-link-color;
--            &:hover, &:focus-within {
++            overflow: hidden;
++            text-overflow: ellipsis; // Displaying ... if the text is too long
++            &:hover {
                /* &:extend(.dropdown-menu>li>a:hover); */
                text-decoration: none;
                color: @dropdown-link-hover-color;
@@ -188,8 +188,8 @@
              line-height: @line-height-base;
              color: @dropdown-link-color;
              /* Empty dropdowns should have height in order to display the arrow */
--            min-height: 1lh;
--            &:hover, &:focus-within {
++            min-height: 2 * @font-size-base;
++            &:hover {
                text-decoration: none;
                color: @dropdown-link-hover-color;
                background-color: @dropdown-link-hover-bg;
@@ -199,16 +199,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 */
@@ -222,9 +222,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 {
@@ -246,11 +246,11 @@
      }
      /* 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 {
--            .nav-divider(@menu-default-border);
++            .nav-divider(@navbar-default-border);
            }
          }
          ul {
@@ -264,25 +264,28 @@
            box-shadow: none;
            li {
              /* Text inside menu */
--            color: @menu-default-link-color;
++            color: @navbar-default-link-color;
              /* Links inside menu */
              a {
--              color: @menu-default-link-color;
++              color: @navbar-default-link-color;
++              &:hover {
++                /* Preserve the styling from dropdown */
++              }
              }
              /* Submenus inside menu */
              &.xDropdown {
--              color: @menu-default-link-color;
--              &.open {
++              color: @navbar-default-link-color;
++              &:hover {
                  background-color: transparent;
                  color: inherit;
                }
                /* When in dropdown we also have a link */
--              > span > a {
--                color: @menu-default-link-color;
++              > span > a {
++                color: @navbar-default-link-color;
                }
              }
              &:empty {
--              .nav-divider(@menu-default-border);
++              .nav-divider(@navbar-default-border);
              }
            }
          }
@@ -312,16 +312,15 @@
  .menu-horizontal-toggle {
    .clearfix;
--  background-color: @menu-default-bg;
--  border-color: @menu-default-border;
--  min-height: @menu-height;
++  background-color: @navbar-default-bg;
++  border-color: @navbar-default-border;
++  .box-shadow(0 2px 8px rgba(0,0,0,0.4) inset);
++  min-height: @navbar-height;
    & .navbar-toggle {
      float: left;
      padding-left: 15px;
--    padding-top: 0;
--    padding-bottom: 0;
      & .icon-bar {
--      background-color: @menu-default-link-color;
++      background-color: @navbar-default-link-color;
        transition: .3s ease all;
        &:nth-of-type(2) {
          opacity: 0;

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,12 @@
  #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" == '')
--    #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="#$!{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,14 +33,13 @@
          </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" %)(((
--      {{wikimacrocontent/}}
++    (% id="${id}" class="menu menu-$!type collapse navbar-collapse" %)(((
++      $xcontext.macro.content
      )))
    )))
  #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')}" %)(((
--    {{wikimacrocontent/}}
++  (% #if ("$!id" != '') id="$id"#end class="menu menu-$!type" %)(((
++    $xcontext.macro.content
    )))
  #end
  {{/velocity}}

Macro content type

...	...	@@ -1,1 +1,0 @@
1		-Wiki

Default category

...	...	@@ -1,0 +1,1 @@
	1	+Navigation

Default categories

...	...	@@ -1,1 +1,0 @@
1		-Navigation

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

Changes for page Menu Macro

Summary

Details

Applications

Navigation

My Recent Modifications

Need help?