Fix wiki pages tree in main menu. A hierarchy toggle was also toggling a sibling. Further added a keypress event for accessibility.

pull/6362/head
Wieland Lindenthal 6 years ago
parent 37f8c0b23a
commit cf4016224f
  1. 1
      app/assets/javascripts/application.js.erb
  2. 2
      app/assets/stylesheets/layout/_tree_menu.sass
  3. 4
      app/helpers/application_helper.rb
  4. 13
      frontend/src/app/globals/tree-menu.ts
  5. 78
      spec_legacy/unit/lib/redmine/wiki_formatting/macros_spec.rb

@ -32,7 +32,6 @@
//= require top_menu
//= require action_menu
//= require tree_menu
//= require breadcrumb
//= require findDomElement
//= require jstoolbar

@ -56,7 +56,7 @@ div.wiki ul.pages-hierarchy,
.-with-hierarchy
padding-left: 18px
&.-hierarchy-collapsed > li
.-hierarchy-collapsed
> .tree-menu--item > .tree-menu--hierarchy-span > .tree-menu--hierarchy-indicator > .tree-menu--hierarchy-indicator-icon
@include icon-common
@extend .icon-arrow-right2

@ -137,9 +137,9 @@ module ApplicationHelper
def render_page_hierarchy(pages, node = nil, options = {})
return '' unless pages[node]
content_tag :ul, class: "pages-hierarchy -with-hierarchy -hierarchy-expanded" do
content_tag :ul, class: "pages-hierarchy -with-hierarchy" do
pages[node].map { |page|
content_tag :li do
content_tag :li, class: '-hierarchy-expanded' do
is_parent = pages[page.id]
concat render_hierarchy_item(page, is_parent, options)
concat render_page_hierarchy(pages, page.id, options) if is_parent

@ -38,12 +38,17 @@
}
});
// set click handlers for expanding and collapsing tree nodes
$('.pages-hierarchy.-with-hierarchy .tree-menu--hierarchy-span').click(function (event) {
function toggle (event) {
// ignore the event if a key different from ENTER was pressed.
if (event.type === 'keypress' && event.which !== 13) { return false }
var target = $(event.target);
var targetList = target.closest('.-with-hierarchy');
var targetList = target.closest('ul.-with-hierarchy > li');
targetList.toggleClass('-hierarchy-collapsed -hierarchy-expanded');
return false;
})
}
// set click handlers for expanding and collapsing tree nodes
$('.pages-hierarchy.-with-hierarchy .tree-menu--hierarchy-span').on('click keypress', toggle)
});
}(jQuery));

@ -69,52 +69,64 @@ describe Redmine::WikiFormatting::Macros, type: :helper do
end
it 'should macro child pages' do
expected = "<p><ul class=\"pages-hierarchy -with-hierarchy -hierarchy-expanded\"><li>" +
"<span class=\"tree-menu--item\" slug=\"child-1\"><span class=\"tree-menu--hierarchy-span\">" +
"<span tabindex=\"0\" class=\"tree-menu--leaf-indicator\">" +
"<span class=\"hidden-for-sighted\">Hierarchy leaf</span></span></span>" +
"<a class=\"tree-menu--title ellipsis\" href=\"/projects/ecookbook/wiki/child-1\">Child 1</a>" +
"</span></li><li><span class=\"tree-menu--item\" slug=\"child-2\">" +
"<span class=\"tree-menu--hierarchy-span\"><span tabindex=\"0\" class=\"tree-menu--leaf-indicator\">" +
"<span class=\"hidden-for-sighted\">Hierarchy leaf</span></span></span>" +
"<a class=\"tree-menu--title ellipsis\" href=\"/projects/ecookbook/wiki/child-2\">Child 2</a>" +
"</span></li></ul></p>"
expected_keywords = ['Child 1', # Child
'Child 2', # Child
'Hierarchy leaf', # Hierarchy elements
'hidden-for-sighted', # Accessability
'tabindex'] # Accessability
not_expected_keywords = ['Another page']
@project = Project.find(1)
# child pages of the current wiki page
assert_equal expected, format_text('{{child_pages}}', object: WikiPage.find(2).content)
expect(format_text('{{child_pages}}', object: WikiPage.find(2).content)).to(
include(*expected_keywords)
)
expect(format_text('{{child_pages}}', object: WikiPage.find(2).content)).to_not(
include(*not_expected_keywords)
)
# child pages of another page
assert_equal expected, format_text('{{child_pages(Another page)}}', object: WikiPage.find(1).content)
expect(format_text('{{child_pages(Another page)}}', object: WikiPage.find(2).content)).to(
include(*expected_keywords)
)
expect(format_text('{{child_pages(Another page)}}', object: WikiPage.find(2).content)).to_not(
include(*not_expected_keywords)
)
@project = Project.find(2)
assert_equal expected, format_text('{{child_pages(ecookbook:Another page)}}', object: WikiPage.find(1).content)
expect(format_text('{{child_pages(ecookbook:Another page)}}', object: WikiPage.find(2).content)).to(
include(*expected_keywords)
)
expect(format_text('{{child_pages(ecookbook:Another page)}}', object: WikiPage.find(2).content)).to_not(
include(*not_expected_keywords)
)
end
it 'should macro child pages with option' do
expected = "<p><ul class=\"pages-hierarchy -with-hierarchy -hierarchy-expanded\"><li>" +
"<span class=\"tree-menu--item\" slug=\"another-page\"><span class=\"tree-menu--hierarchy-span\">" +
"<a tabindex=\"0\" role=\"button\" class=\"tree-menu--hierarchy-indicator\">" +
"<span aria-hidden=\"true\" class=\"tree-menu--hierarchy-indicator-icon\">" +
"</span><span class=\"tree-menu--hierarchy-indicator-expanded hidden-for-sighted\">Expanded. Click to collapse</span>" +
"<span class=\"tree-menu--hierarchy-indicator-collapsed hidden-for-sighted\">Collapsed. Click to show</span></a>" +
"</span><a class=\"tree-menu--title ellipsis\" href=\"/projects/ecookbook/wiki/another-page\">Another page</a>" +
"</span><ul class=\"pages-hierarchy -with-hierarchy -hierarchy-expanded\"><li>" +
"<span class=\"tree-menu--item\" slug=\"child-1\"><span class=\"tree-menu--hierarchy-span\">" +
"<span tabindex=\"0\" class=\"tree-menu--leaf-indicator\">" +
"<span class=\"hidden-for-sighted\">Hierarchy leaf</span>" +
"</span></span><a class=\"tree-menu--title ellipsis\" href=\"/projects/ecookbook/wiki/child-1\">Child 1</a>" +
"</span></li><li><span class=\"tree-menu--item\" slug=\"child-2\"><span class=\"tree-menu--hierarchy-span\">" +
"<span tabindex=\"0\" class=\"tree-menu--leaf-indicator\"><span class=\"hidden-for-sighted\">Hierarchy leaf</span>" +
"</span></span><a class=\"tree-menu--title ellipsis\" href=\"/projects/ecookbook/wiki/child-2\">Child 2</a>" +
"</span></li></ul></li></ul></p>"
@project = Project.find(1)
expected_keywords = ['Another page', # Parent
'Child 1', # Child
'Child 2', # Child
'Hierarchy leaf', # Hierarchy elements
'hidden-for-sighted', # Accessability
'tabindex', # Accessability
'Expanded. Click to collapse'] # Accessability
# child pages of the current wiki page
assert_equal expected, format_text('{{child_pages(parent=1)}}', object: WikiPage.find(2).content)
expect(format_text('{{child_pages(parent=1)}}', object: WikiPage.find(2).content)).to(
include(*expected_keywords)
)
# child pages of another page
assert_equal expected, format_text('{{child_pages(Another page, parent=1)}}', object: WikiPage.find(1).content)
expect(format_text('{{child_pages(Another page, parent=1)}}', object: WikiPage.find(2).content)).to(
include(*expected_keywords)
)
@project = Project.find(2)
assert_equal expected, format_text('{{child_pages(ecookbook:Another page, parent=1)}}', object: WikiPage.find(1).content)
expect(format_text('{{child_pages(ecookbook:Another page, parent=1)}}', object: WikiPage.find(2).content)).to(
include(*expected_keywords)
)
end
end

Loading…
Cancel
Save