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.
This commit is contained in:
Cameron Ball
@@ -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;
|
||||
}
|
||||
|
||||
+20
-36
@@ -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;}
|
||||
|
||||
Reference in New Issue
Block a user