From a71b983db80dfc7fb2cdf09aad874068c40e7529 Mon Sep 17 00:00:00 2001 From: Cameron Ball Date: Thu, 28 Apr 2016 15:41:31 +0800 Subject: [PATCH] MDL-53311 block_settings: Update renderer The renderer and styles require changes to match the new behaviour introduced by the modifications to tree.js and the JavaScript renderer. The PHP renderer now closely matches the JavaScript one, and we now use the aria-hidden attribute to determine the node state. --- blocks/settings/renderer.php | 57 +++++++++++++++++++++--------------- blocks/settings/styles.css | 56 +++++++++++++---------------------- 2 files changed, 53 insertions(+), 60 deletions(-) diff --git a/blocks/settings/renderer.php b/blocks/settings/renderer.php index d5572e85277..10afa754c91 100644 --- a/blocks/settings/renderer.php +++ b/blocks/settings/renderer.php @@ -69,52 +69,61 @@ class block_settings_renderer extends plugin_renderer_base { } $isbranch = ($item->children->count()>0 || $item->nodetype==navigation_node::NODETYPE_BRANCH); - $hasicon = (!$isbranch && $item->icon instanceof renderable); if ($isbranch) { $item->hideicon = true; } - $content = $this->output->render($item); - // this applies to the li item which contains all child lists too - $liclasses = array($item->get_css_type()); - $liexpandable = array(); + $content = $this->output->render($item); + $id = $item->id ? $item->id : uniqid(); + $ulattr = ['id' => $id . '_group', 'role' => 'group']; + $liattr = ['class' => [$item->get_css_type(), 'depth_'.$depth], 'tabindex' => '-1']; + $pattr = ['class' => ['tree_item'], 'role' => 'treeitem']; + $pattr += !empty($item->id) ? ['id' => $item->id] : []; + $hasicon = (!$isbranch && $item->icon instanceof renderable); + if ($isbranch) { - $liclasses[] = 'contains_branch'; + $liattr['class'][] = 'contains_branch'; if (!$item->forceopen || (!$item->forceopen && $item->collapse) || ($item->children->count() == 0 && $item->nodetype == navigation_node::NODETYPE_BRANCH)) { - $liexpandable = array('aria-expanded' => 'false'); + $pattr += ['aria-expanded' => 'false']; } else { - $liexpandable = array('aria-expanded' => 'true'); + $pattr += ['aria-expanded' => 'true']; } if ($item->requiresajaxloading) { - $liexpandable['data-requires-ajax'] = 'true'; - $liexpandable['data-loaded'] = 'false'; + $pattr['data-requires-ajax'] = 'true'; + $pattr['data-loaded'] = 'false'; + } else { + $pattr += ['aria-owns' => $id . '_group']; } - } else if ($hasicon) { - $liclasses[] = 'item_with_icon'; + $liattr['class'][] = 'item_with_icon'; + $pattr['class'][] = 'hasicon'; } if ($item->isactive === true) { - $liclasses[] = 'current_branch'; + $liattr['class'][] = 'current_branch'; + } + if (!empty($item->classes) && count($item->classes) > 0) { + $pattr['class'] = array_merge($pattr['class'], $item->classes); } $nodetextid = 'label_' . $depth . '_' . $number; - $liattr = array('class' => join(' ', $liclasses), 'tabindex' => '-1', 'role' => 'treeitem') + $liexpandable; + // class attribute on the div item which only contains the item content - $divclasses = array('tree_item'); + $pattr['class'][] = 'tree_item'; if ($isbranch) { - $divclasses[] = 'branch'; + $pattr['class'][] = 'branch'; } else { - $divclasses[] = 'leaf'; + $pattr['class'][] = 'leaf'; } - if (!empty($item->classes) && count($item->classes)>0) { - $divclasses[] = join(' ', $item->classes); + + $liattr['class'] = join(' ', $liattr['class']); + $pattr['class'] = join(' ', $pattr['class']); + + if (isset($pattr['aria-expanded']) && $pattr['aria-expanded'] === 'false') { + $ulattr += ['aria-hidden' => 'true']; } - $divattr = array('class'=>join(' ', $divclasses)); - if (!empty($item->id)) { - $divattr['id'] = $item->id; - } - $content = html_writer::tag('p', $content, $divattr) . $this->navigation_node($item, array(), $depth + 1); + + $content = html_writer::tag('p', $content, $pattr) . $this->navigation_node($item, $ulattr, $depth + 1); if (!empty($item->preceedwithhr) && $item->preceedwithhr===true) { $content = html_writer::empty_tag('hr') . $content; } diff --git a/blocks/settings/styles.css b/blocks/settings/styles.css index 6cb127c3542..31b27ec918c 100644 --- a/blocks/settings/styles.css +++ b/blocks/settings/styles.css @@ -1,43 +1,27 @@ -/** JavaScript state rules **/ -.jsenabled .block_settings.dock_on_load, -.block_settings .block_tree_box .requiresjs {display:none;} -.jsenabled .block_settings .block_tree_box .requiresjs {display:inline;} +.block_settings .block_tree ul {margin-left: 18px;} +.block_settings .block_tree p.hasicon {text-indent: -21px; padding-left: 21px;} +.block_settings .block_tree p.hasicon img {width: 16px; height: 16px; margin-top: 3px; margin-right: 5px; vertical-align: top;} -/** General display rules **/ -.block_settings .block_tree {margin:5px;padding-left:0px;overflow:visible;} -.block_settings .block_tree li {margin:0;list-style: none;} -.block_settings .block_tree li ul {padding-left:18px;margin:0;} - -.block_settings .block_tree li.item_with_icon > p {position:relative;} -.block_settings .block_tree li.item_with_icon > p img {vertical-align:middle;position:absolute;left:0;top:-1px; width: 16px; height: 16px;} - -.block_settings .block_tree .tree_item {padding-left: 21px;margin:3px 0px;text-align:left;} - -.block_settings .block_tree .tree_item.branch {background-image: url([[pix:t/expanded]]);background-position: 0 10%;background-repeat: no-repeat;} -.block_settings .block_tree .loading .tree_item.branch {background-image: url('[[pix:i/loading_small]]');} +.block_settings .block_tree .tree_item.branch {padding-left: 21px;} +.block_settings .block_tree .tree_item {cursor:pointer; margin:3px 0px; background-position: 0 50%; background-repeat: no-repeat;} .block_settings .block_tree .active_tree_node {font-weight:bold;} -.jsenabled .block_settings .block_tree .tree_item.branch {cursor:pointer;} -.jsenabled .block_settings .block_tree .emptybranch .tree_item, -.jsenabled .block_settings .block_tree [aria-expanded="false"].emptybranch .tree_item.branch { - background-image: url([[pix:t/collapsed_empty]]);background-position: 0 10%;background-repeat: no-repeat; -} -.jsenabled .block_settings .block_tree [aria-expanded="false"] ul {display: none;} -.jsenabled .block_settings .block_tree [aria-expanded="false"] .tree_item.branch {background-image: url([[pix:t/collapsed]]);} -.jsenabled .block_settings .block_tree [aria-expanded="false"].loading .tree_item.branch {background-image: url('[[pix:i/loading_small]]');} + +.block_settings .block_tree [aria-expanded="true"] {background-image: url('[[pix:t/expanded]]');} +.block_settings .block_tree [aria-expanded="false"] {background-image: url('[[pix:t/collapsed]]');} +.block_settings .block_tree [aria-expanded="true"].emptybranch {background-image: url('[[pix:t/collapsed_empty]]');} +.block_settings .block_tree [aria-expanded="false"].loading {background-image: url('[[pix:i/loading_small]]');} +.block_settings .block_tree [aria-hidden="false"] {display: block;} +.block_settings .block_tree [aria-hidden="true"] {display: none;} /** Internet explorer specific rules **/ .ie6 .block_settings .block_tree .tree_item {width:100%;} /** Overide for RTL layout **/ -.dir-rtl .block_settings .block_tree {padding-right:0px;} -.dir-rtl .block_settings .block_tree li ul {padding-left:0;padding-right: 18px;} -.dir-rtl .block_settings .block_tree .tree_item {padding-right: 21px; padding-left: 0; text-align:right;} -.dir-rtl .block_settings .block_tree .tree_item.branch {background-position: center right;} -.dir-rtl .block_settings .block_tree li.item_with_icon > p img { right: 0; left: auto;} -.jsenabled .block_settings .block_tree .tree_item.branch.loadingbranch {background-image:url([[pix:i/loading_small]]);} - -.jsenabled.dir-rtl .block_settings .block_tree .emptybranch .tree_item, -.jsenabled.dir-rtl .block_settings .block_tree [aria-expanded="false"].emptybranch .tree_item.branch { - background-image: url([[pix:t/collapsed_empty_rtl]]);background-position: center right; -} -.jsenabled.dir-rtl .block_settings .block_tree [aria-expanded="false"] .tree_item.branch {background-image: url([[pix:t/collapsed_rtl]]);} +.dir-rtl .block_settings .block_tree p.hasicon {padding-left: 0px; padding-right: 21px;} +.dir-rtl .block_settings .block_tree .tree_item {background-position: 100% 50%;} +.dir-rtl .block_settings .block_tree .tree_item.branch {padding-right: 21px; padding-left: 0;} +.dir-rtl .block_settings .block_tree [aria-expanded="false"] {background-image: url('[[pix:t/collapsed_rtl]]');} +.dir-rtl .block_settings .block_tree [aria-expanded="true"].emptybranch {background-image: url('[[pix:t/collapsed_empty_rtl]]');} +.dir-rtl .block_settings .block_tree [aria-expanded="false"].loading {background-image: url('[[pix:i/loading_small]]');} +.dir-rtl .block_settings .block_tree .tree_item img {margin-right: 0; margin-left: 5px;} +.dir-rtl .block_settings .block_tree ul {margin: 0 16px 0 0;}