mirror of
https://github.com/moodle/moodle.git
synced 2025-04-20 07:56:06 +02:00
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
parent
0043daf4ca
commit
a71b983db8
@ -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;
|
||||
}
|
||||
|
||||
@ -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;}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user