MDL-72642 navigation: Fix duplicated ID in more menu items

This commit is contained in:
Mihail Geshoski 2021-09-23 10:57:20 +08:00
parent 1d700796ca
commit 8e4a7c6b90
3 changed files with 10 additions and 8 deletions

View File

@ -64,6 +64,7 @@ class more_menu implements renderable, templatable {
} else { } else {
$data['nodearray'] = (array) $this->content; $data['nodearray'] = (array) $this->content;
} }
$data['moremenuid'] = uniqid();
return $data; return $data;
} }

View File

@ -41,11 +41,12 @@
"action": "/admin/search.php" "action": "/admin/search.php"
} }
] ]
} },
"moremenuid": "614c104dbacfa"
} }
}} }}
<nav class="moremenu"> <nav class="moremenu">
<ul id="moremenu-{{ uniqid }}-{{navbarstyle}}" role="menubar" class="nav more-nav {{navbarstyle}}"> <ul id="moremenu-{{moremenuid}}-{{navbarstyle}}" role="menubar" class="nav more-nav {{navbarstyle}}">
{{#nodecollection}} {{#nodecollection}}
{{#children}} {{#children}}
{{> core/moremenu_children}} {{> core/moremenu_children}}
@ -55,16 +56,16 @@
{{> core/moremenu_children}} {{> core/moremenu_children}}
{{/nodearray}} {{/nodearray}}
<li role="none" class="nav-item dropdown dropdownmoremenu d-none" data-region="morebutton"> <li role="none" class="nav-item dropdown dropdownmoremenu d-none" data-region="morebutton">
<a class="dropdown-toggle nav-link" href="#" id="moremenu-dropdown{{ uniqid }}" role="menuitem" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" tabindex="-1"> <a class="dropdown-toggle nav-link" href="#" id="moremenu-dropdown-{{moremenuid}}" role="menuitem" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" tabindex="-1">
{{#str}}moremenu, core{{/str}} {{#str}}moremenu, core{{/str}}
</a> </a>
<ul class="dropdown-menu dropdown-menu-right" data-region="moredropdown" aria-labelledby="moremenu-dropdown{{ uniqid }}" role="menu"> <ul class="dropdown-menu dropdown-menu-right" data-region="moredropdown" aria-labelledby="moremenu-dropdown-{{moremenuid}}" role="menu">
</ul> </ul>
</li> </li>
</ul> </ul>
</nav> </nav>
{{#js}} {{#js}}
require(['core/moremenu'], function(moremenu) { require(['core/moremenu'], function(moremenu) {
moremenu(document.querySelector('#moremenu-{{ uniqid }}-{{navbarstyle}}')); moremenu(document.querySelector('#moremenu-{{moremenuid}}-{{navbarstyle}}'));
}); });
{{/js}} {{/js}}

View File

@ -23,7 +23,7 @@
{ {
"divider": "", "divider": "",
"haschildren": "", "haschildren": "",
"uniqid": "Unique string", "moremenuid": "614c104dbacfa",
"text": "Moodle community", "text": "Moodle community",
"children": "", "children": "",
"title": "Moodle community", "title": "Moodle community",
@ -32,10 +32,10 @@
}} }}
{{#haschildren}} {{#haschildren}}
<li class="dropdown nav-item" role="none" data-forceintomoremenu="{{#forceintomoremenu}}true{{/forceintomoremenu}}{{^forceintomoremenu}}false{{/forceintomoremenu}}"> <li class="dropdown nav-item" role="none" data-forceintomoremenu="{{#forceintomoremenu}}true{{/forceintomoremenu}}{{^forceintomoremenu}}false{{/forceintomoremenu}}">
<a class="dropdown-toggle nav-link" id="drop-down-{{uniqid}}" role="menuitem" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#" aria-controls="drop-down-menu-{{uniqid}}" tabindex="-1"> <a class="dropdown-toggle nav-link" id="drop-down-{{moremenuid}}" role="menuitem" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#" aria-controls="drop-down-menu-{{moremenuid}}" tabindex="-1">
{{{text}}} {{{text}}}
</a> </a>
<div class="dropdown-menu" role="menu" id="drop-down-menu-{{uniqid}}" aria-labelledby="drop-down-{{uniqid}}"> <div class="dropdown-menu" role="menu" id="drop-down-menu-{{moremenuid}}" aria-labelledby="drop-down-{{moremenuid}}">
{{#children}} {{#children}}
{{^divider}} {{^divider}}
<a class="dropdown-item" role="menuitem" href="{{{url}}}">{{{text}}}</a> <a class="dropdown-item" role="menuitem" href="{{{url}}}">{{{text}}}</a>