moodle/moodle
3
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-08-05 00:46:50 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch '36296-29' of git://github.com/samhemelryk/moodle

Browse source
This commit is contained in:
Eloy Lafuente (stronk7) 2015-02-09 17:59:06 +01:00
commit bd308dd09f
6 changed files with 167 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

50
blocks/navigation/renderer.php
View file

@ -51,7 +51,7 @@ class block_navigation_renderer extends plugin_renderer_base {
/** /**
* Produces a navigation node for the navigation tree * Produces a navigation node for the navigation tree
* *
* @param array $items * @param navigation_node[] $items
* @param array $attrs * @param array $attrs
* @param int $expansionlimit * @param int $expansionlimit
* @param array $options * @param array $options
@ -59,13 +59,12 @@ class block_navigation_renderer extends plugin_renderer_base {
* @return string * @return string
*/ */
protected function navigation_node($items, $attrs=array(), $expansionlimit=null, array $options = array(), $depth=1) { protected function navigation_node($items, $attrs=array(), $expansionlimit=null, array $options = array(), $depth=1) {
// Exit if empty, we don't want an empty ul element.
// exit if empty, we don't want an empty ul element if (count($items) === 0) {
if (count($items)==0) {
return ''; return '';
} }
// array of nested li elements // Turn our navigation items into list items.
$lis = array(); $lis = array();
foreach ($items as $item) { foreach ($items as $item) {
if (!$item->display && !$item->contains_active_node()) { if (!$item->display && !$item->contains_active_node()) {
@ -86,10 +85,13 @@ class block_navigation_renderer extends plugin_renderer_base {
if ($hasicon) { if ($hasicon) {
$icon = $this->output->render($item->icon); $icon = $this->output->render($item->icon);
// Because an icon is being used we're going to wrap the actual content in a span.
// This will allow designers to create columns for the content, as we've done in styles.css.
$content = $icon . html_writer::span($content, 'item-content-wrap');
} else { } else {
$icon = ''; $icon = '';
} }
$content = $icon.$content; // use CSS for spacing of icons
if ($item->helpbutton !== null) { if ($item->helpbutton !== null) {
$content = trim($item->helpbutton).html_writer::tag('span', $content, array('class'=>'clearhelpbutton')); $content = trim($item->helpbutton).html_writer::tag('span', $content, array('class'=>'clearhelpbutton'));
} }
@ -116,13 +118,16 @@ class block_navigation_renderer extends plugin_renderer_base {
$link->text = $icon.$link->text; $link->text = $icon.$link->text;
$link->attributes = array_merge($link->attributes, $attributes); $link->attributes = array_merge($link->attributes, $attributes);
$content = $this->output->render($link); $content = $this->output->render($link);
$linkrendered = true;
} else if ($item->action instanceof moodle_url) { } else if ($item->action instanceof moodle_url) {
$content = html_writer::link($item->action, $content, $attributes); $content = html_writer::link($item->action, $content, $attributes);
} }
// this applies to the li item which contains all child lists too // This applies to the li item which contains all child lists too.
$liclasses = array($item->get_css_type(), 'depth_'.$depth); $liclasses = array($item->get_css_type(), 'depth_'.$depth);
// Class attribute on the div item which only contains the item content.
$divclasses = array('tree_item');
$liexpandable = array(); $liexpandable = array();
if ($item->has_children() && (!$item->forceopen || $item->collapse)) { if ($item->has_children() && (!$item->forceopen || $item->collapse)) {
$liclasses[] = 'collapsed'; $liclasses[] = 'collapsed';
@ -130,30 +135,30 @@ class block_navigation_renderer extends plugin_renderer_base {
if ($isbranch) { if ($isbranch) {
$liclasses[] = 'contains_branch'; $liclasses[] = 'contains_branch';
$liexpandable = array('aria-expanded' => in_array('collapsed', $liclasses) ? "false" : "true"); $liexpandable = array('aria-expanded' => in_array('collapsed', $liclasses) ? "false" : "true");
} else if ($hasicon) {
$liclasses[] = 'item_with_icon';
}
if ($item->isactive === true) {
$liclasses[] = 'current_branch';
}
$liattr = array('class' => join(' ',$liclasses)) + $liexpandable;
// class attribute on the div item which only contains the item content
$divclasses = array('tree_item');
if ($isbranch) {
$divclasses[] = 'branch'; $divclasses[] = 'branch';
} else { } else {
$divclasses[] = 'leaf'; $divclasses[] = 'leaf';
} }
if ($hasicon) { if ($hasicon) {
// Add this class if the item has an icon, whether it is a branch or not.
$liclasses[] = 'item_with_icon';
$divclasses[] = 'hasicon'; $divclasses[] = 'hasicon';
} }
if ($item->isactive === true) {
$liclasses[] = 'current_branch';
}
if (!empty($item->classes) && count($item->classes)>0) { if (!empty($item->classes) && count($item->classes)>0) {
$divclasses[] = join(' ', $item->classes); $divclasses[] = join(' ', $item->classes);
} }
// Now build attribute arrays.
$liattr = array('class' => join(' ', $liclasses)) + $liexpandable;
$divattr = array('class'=>join(' ', $divclasses)); $divattr = array('class'=>join(' ', $divclasses));
if (!empty($item->id)) { if (!empty($item->id)) {
$divattr['id'] = $item->id; $divattr['id'] = $item->id;
} }
// Create the structure.
$content = html_writer::tag('p', $content, $divattr); $content = html_writer::tag('p', $content, $divattr);
if ($isexpandable) { if ($isexpandable) {
$content .= $this->navigation_node($item->children, array(), $expansionlimit, $options, $depth+1); $content .= $this->navigation_node($item->children, array(), $expansionlimit, $options, $depth+1);
@ -165,11 +170,14 @@ class block_navigation_renderer extends plugin_renderer_base {
$lis[] = $content; $lis[] = $content;
} }
if (count($lis)) { if (count($lis) === 0) {
return html_writer::tag('ul', implode("\n", $lis), $attrs); // There is still a chance, despite having items, that nothing had content and no list items were created.
} else {
return ''; return '';
} }
// We used to separate using new lines, however we don't do that now, instead we'll save a few chars.
// The source is complex already anyway.
return html_writer::tag('ul', implode('', $lis), $attrs);
} }
} }

149
blocks/navigation/styles.css
View file

@ -1,66 +1,105 @@
/** General display rules **/ .block_navigation .block_tree {
.block_navigation .block_tree {margin:5px;padding-left:0px;overflow:visible;} margin: 0;
.block_navigation .block_tree li {margin:3px;list-style: none;padding:0;} list-style: none;
.block_navigation .block_tree li.item_with_icon > p {position:relative; padding-left: 21px;} }
.block_navigation .block_tree li.item_with_icon > p img,
.block_navigation .block_tree .type_activity > p.tree_item.active_tree_node img,
.block_navigation .block_tree li > p.hasicon img {vertical-align:middle;position:absolute;left:0;top:-1px;width:16px;height:16px;}
.block_navigation .block_tree li.item_with_icon.contains_branch > p img {left:16px;}
.block_navigation .block_tree .type_activity > p.branch.hasicon,
.block_navigation .block_tree .type_activity > p.emptybranch.hasicon,
.block_navigation .block_tree li.item_with_icon.contains_branch > .tree_item {padding-left:37px;}
.block_navigation .block_tree li ul {padding-left:0;margin:0;} .block_navigation .block_tree .depth_1 > .tree_item.branch,
.block_navigation .block_tree li.depth_2 ul {padding-left:16px;margin:0;} .block_navigation .block_tree .depth_1 > .tree_item.emptybranch {
.block_navigation .block_tree .type_activity > p.tree_item.branch.hasicon.active_tree_node, padding-left: 0;
.block_navigation .block_tree .tree_item {padding-left: 21px;margin:3px 0px;text-align:left;} background-image: none;
}
.block_navigation .block_tree .tree_item.branch {background-image: url([[pix:t/expanded]]);background-position: 0 0;background-repeat: no-repeat;} .block_navigation .block_tree .tree_item {
.block_navigation .block_tree .tree_item.branch.navigation_node {background-image:none;padding-left:0;} margin: 3px 0;
.block_navigation .block_tree .type_activity > .tree_item.emptybranch, background-position: 0 50%;
.block_navigation .block_tree .type_activity > .tree_item.branch {background-image:none;position:relative;} background-repeat: no-repeat;
.block_navigation .block_tree .type_activity > .tree_item.hasicon.emptybranch img, }
.block_navigation .block_tree .type_activity > .tree_item.branch img {left: 16px;}
.block_navigation .block_tree .root_node.leaf {padding-left:0px;}
.block_navigation .block_tree .active_tree_node {font-weight:bold;}
.block_navigation .block_tree .depth_1.current_branch ul {font-weight:normal;}
.dock .block_navigation .tree_item {white-space: nowrap;} .block_navigation .block_tree .tree_item.branch {
padding-left: 21px;
cursor: pointer;
background-image: url('[[pix:t/expanded]]');
}
.jsenabled .block_navigation .block_tree .tree_item.branch {cursor:pointer;} .block_navigation .block_tree .tree_item.emptybranch {
.jsenabled .block_navigation .block_tree .tree_item.emptybranch {background-image: url([[pix:t/collapsed_empty]]);background-position: 0 0;background-repeat: no-repeat;} padding-left: 21px;
.jsenabled .block_navigation .block_tree .collapsed ul {display: none;} background-image: url('[[pix:t/collapsed_empty]]');
.jsenabled .block_navigation .block_tree .type_activity > .tree_item.branch {background-image: url([[pix:t/expanded]]);} }
.jsenabled .block_navigation .block_tree .collapsed .tree_item.branch {background-image: url([[pix:t/collapsed]]);}
.jsenabled .block_navigation .block_tree .tree_item.branch.loadingbranch {background-image:url([[pix:i/loading_small]]);}
/** JavaScript state rules **/ .block_navigation .block_tree .tree_item.loadingbranch {
.jsenabled .block_navigation.dock_on_load, background-image: url('[[pix:i/loading_small]]');
.block_navigation .block_tree_box .requiresjs {display:none;} }
.jsenabled .block_navigation .block_tree_box .requiresjs {display:inline;}
/** Internet explorer specific rules **/ .block_navigation .block_tree .tree_item img {
.ie6 .block_navigation .block_tree .tree_item {width:100%;} width: 16px;
height: 16px;
margin-top: 3px;
margin-right: 5px;
vertical-align: top;
}
/** Overide for RTL layout **/ .block_navigation .block_tree .tree_item.active_tree_node {
.dir-rtl .block_navigation .block_tree li.depth_2 ul {padding-left: 0; padding-right: 16px;} font-weight: bold;
.dir-rtl .block_navigation .block_tree .type_activity > p.tree_item.branch.hasicon.active_tree_node, }
.dir-rtl .block_navigation .block_tree .tree_item {padding-right: 21px;text-align:right;}
.dir-rtl .block_navigation .block_tree .tree_item.branch {background-position: center right;} .block_navigation .block_tree .tree_item.hasicon {
white-space: nowrap;
}
.dir-rtl .block_navigation .block_tree, .block_navigation .block_tree .tree_item.hasicon .item-content-wrap {
.dir-rtl .block_navigation .block_tree li ul, display: inline-block;
.dir-rtl .block_navigation .block_tree .navigation_node.tree_item.branch, white-space: normal;
.dir-rtl .block_navigation .block_tree .root_node.leaf {padding-right:0;} }
.dir-rtl .block_navigation .block_tree li.item_with_icon > p img, .block_navigation .block_tree ul {
.dir-rtl .block_navigation .block_tree .type_activity > p.tree_item.active_tree_node img, margin: 0;
.dir-rtl .block_navigation .block_tree li > p.hasicon img {left:auto; right:0;} }
.dir-rtl .block_navigation .block_tree li.item_with_icon.contains_branch > p img {left: auto; right:16px;}
.dir-rtl .block_navigation .block_tree .type_activity > p.branch.hasicon,
.dir-rtl .block_navigation .block_tree li.item_with_icon.contains_branch > .tree_item {padding-right:37px; padding-left: 0;}
.dir-rtl .block_navigation .block_tree .type_activity > .tree_item.branch img {right: 16px; left: auto;}
.jsenabled.dir-rtl .block_navigation .block_tree .tree_item.emptybranch {background-image: url([[pix:t/collapsed_empty_rtl]]);background-position: center right;} .block_navigation .block_tree ul ul {
.jsenabled.dir-rtl .block_navigation .block_tree .collapsed .tree_item.branch {background-image: url([[pix:t/collapsed_rtl]]);} margin: 0 0 0 16px;
list-style: none;
}
.jsenabled .block_navigation .block_tree li.collapsed ul {
display: none;
}
.jsenabled .block_navigation .block_tree li.collapsed .tree_item.branch {
background-image: url('[[pix:t/collapsed]]');
}
.jsenabled .block_navigation.dock_on_load {
display: none;
}
.dir-rtl .block_navigation .block_tree .depth_1 .tree_item {
padding-left: 0;
}
.dir-rtl .block_navigation .block_tree .tree_item {
background-position: 100% 50%;
}
.dir-rtl .block_navigation .block_tree .tree_item.branch {
padding-right: 21px;
padding-left: 0;
}
.dir-rtl .block_navigation .block_tree .tree_item.emptybranch {
padding-right: 21px;
padding-left: 0;
background-image: url('[[pix:t/collapsed_empty_rtl]]');
}
.dir-rtl .block_navigation .block_tree .tree_item img {
margin-right: 0;
margin-left: 5px;
}
.dir-rtl .block_navigation .block_tree ul {
margin: 0 16px 0 0;
}
.dir-rtl.jsenabled .block_navigation .block_tree .collapsed .tree_item.branch {
background-image: url('[[pix:t/collapsed_rtl]]');
}

17
blocks/navigation/yui/build/moodle-block_navigation-navigation/moodle-block_navigation-navigation-debug.js vendored
View file

@ -483,6 +483,9 @@ BRANCH.prototype = {
* This function creates a DOM structure for the branch and then injects * This function creates a DOM structure for the branch and then injects
* it into the navigation tree at the correct point. * it into the navigation tree at the correct point.
* *
* It is important that this is kept in check with block_navigation_renderer::navigation_node as that produces
* the same thing as this but on the php side.
*
* @method draw * @method draw
* @chainable * @chainable
* @param {Node} element * @param {Node} element
@ -494,6 +497,7 @@ BRANCH.prototype = {
var branchli = Y.Node.create('<li></li>'); var branchli = Y.Node.create('<li></li>');
var link = this.get('link'); var link = this.get('link');
var branchp = Y.Node.create('<p class="tree_item"></p>').setAttribute('id', this.get('id')); var branchp = Y.Node.create('<p class="tree_item"></p>').setAttribute('id', this.get('id'));
var name;
if (!link) { if (!link) {
//add tab focus if not link (so still one focus per menu node). //add tab focus if not link (so still one focus per menu node).
// it was suggested to have 2 foci. one for the node and one for the link in MDL-27428. // it was suggested to have 2 foci. one for the node and one for the link in MDL-27428.
@ -508,10 +512,11 @@ BRANCH.prototype = {
// Prepare the icon, should be an object representing a pix_icon // Prepare the icon, should be an object representing a pix_icon
var branchicon = false; var branchicon = false;
var icon = this.get('icon'); var icon = this.get('icon');
if (icon && (!isbranch || this.get('type') === NODETYPE.ACTIVITY)) { if (icon && (!isbranch || this.get('type') === NODETYPE.ACTIVITY || this.get('type') === NODETYPE.RESOURCE)) {
branchicon = Y.Node.create('<img alt="" />'); branchicon = Y.Node.create('<img alt="" />');
branchicon.setAttribute('src', M.util.image_url(icon.pix, icon.component)); branchicon.setAttribute('src', M.util.image_url(icon.pix, icon.component));
branchli.addClass('item_with_icon'); branchli.addClass('item_with_icon');
branchp.addClass('hasicon');
if (icon.alt) { if (icon.alt) {
branchicon.setAttribute('alt', icon.alt); branchicon.setAttribute('alt', icon.alt);
} }
@ -529,8 +534,11 @@ BRANCH.prototype = {
var branchspan = Y.Node.create('<span></span>'); var branchspan = Y.Node.create('<span></span>');
if (branchicon) { if (branchicon) {
branchspan.appendChild(branchicon); branchspan.appendChild(branchicon);
name = '<span class="item-content-wrap">' + this.get('name') + '</span>';
} else {
name = this.get('name');
} }
branchspan.append(this.get('name')); branchspan.append(name);
if (this.get('hidden')) { if (this.get('hidden')) {
branchspan.addClass('dimmed_text'); branchspan.addClass('dimmed_text');
} }
@ -539,8 +547,11 @@ BRANCH.prototype = {
var branchlink = Y.Node.create('<a title="'+this.get('title')+'" href="'+link+'"></a>'); var branchlink = Y.Node.create('<a title="'+this.get('title')+'" href="'+link+'"></a>');
if (branchicon) { if (branchicon) {
branchlink.appendChild(branchicon); branchlink.appendChild(branchicon);
name = '<span class="item-content-wrap">' + this.get('name') + '</span>';
} else {
name = this.get('name');
} }
branchlink.append(this.get('name')); branchlink.append(name);
if (this.get('hidden')) { if (this.get('hidden')) {
branchlink.addClass('dimmed'); branchlink.addClass('dimmed');
} }

4
blocks/navigation/yui/build/moodle-block_navigation-navigation/moodle-block_navigation-navigation-min.js vendored
View file

File diff suppressed because one or more lines are too long

17
blocks/navigation/yui/build/moodle-block_navigation-navigation/moodle-block_navigation-navigation.js vendored
View file

@ -482,6 +482,9 @@ BRANCH.prototype = {
* This function creates a DOM structure for the branch and then injects * This function creates a DOM structure for the branch and then injects
* it into the navigation tree at the correct point. * it into the navigation tree at the correct point.
* *
* It is important that this is kept in check with block_navigation_renderer::navigation_node as that produces
* the same thing as this but on the php side.
*
* @method draw * @method draw
* @chainable * @chainable
* @param {Node} element * @param {Node} element
@ -493,6 +496,7 @@ BRANCH.prototype = {
var branchli = Y.Node.create('<li></li>'); var branchli = Y.Node.create('<li></li>');
var link = this.get('link'); var link = this.get('link');
var branchp = Y.Node.create('<p class="tree_item"></p>').setAttribute('id', this.get('id')); var branchp = Y.Node.create('<p class="tree_item"></p>').setAttribute('id', this.get('id'));
var name;
if (!link) { if (!link) {
//add tab focus if not link (so still one focus per menu node). //add tab focus if not link (so still one focus per menu node).
// it was suggested to have 2 foci. one for the node and one for the link in MDL-27428. // it was suggested to have 2 foci. one for the node and one for the link in MDL-27428.
@ -507,10 +511,11 @@ BRANCH.prototype = {
// Prepare the icon, should be an object representing a pix_icon // Prepare the icon, should be an object representing a pix_icon
var branchicon = false; var branchicon = false;
var icon = this.get('icon'); var icon = this.get('icon');
if (icon && (!isbranch || this.get('type') === NODETYPE.ACTIVITY)) { if (icon && (!isbranch || this.get('type') === NODETYPE.ACTIVITY || this.get('type') === NODETYPE.RESOURCE)) {
branchicon = Y.Node.create('<img alt="" />'); branchicon = Y.Node.create('<img alt="" />');
branchicon.setAttribute('src', M.util.image_url(icon.pix, icon.component)); branchicon.setAttribute('src', M.util.image_url(icon.pix, icon.component));
branchli.addClass('item_with_icon'); branchli.addClass('item_with_icon');
branchp.addClass('hasicon');
if (icon.alt) { if (icon.alt) {
branchicon.setAttribute('alt', icon.alt); branchicon.setAttribute('alt', icon.alt);
} }
@ -528,8 +533,11 @@ BRANCH.prototype = {
var branchspan = Y.Node.create('<span></span>'); var branchspan = Y.Node.create('<span></span>');
if (branchicon) { if (branchicon) {
branchspan.appendChild(branchicon); branchspan.appendChild(branchicon);
name = '<span class="item-content-wrap">' + this.get('name') + '</span>';
} else {
name = this.get('name');
} }
branchspan.append(this.get('name')); branchspan.append(name);
if (this.get('hidden')) { if (this.get('hidden')) {
branchspan.addClass('dimmed_text'); branchspan.addClass('dimmed_text');
} }
@ -538,8 +546,11 @@ BRANCH.prototype = {
var branchlink = Y.Node.create('<a title="'+this.get('title')+'" href="'+link+'"></a>'); var branchlink = Y.Node.create('<a title="'+this.get('title')+'" href="'+link+'"></a>');
if (branchicon) { if (branchicon) {
branchlink.appendChild(branchicon); branchlink.appendChild(branchicon);
name = '<span class="item-content-wrap">' + this.get('name') + '</span>';
} else {
name = this.get('name');
} }
branchlink.append(this.get('name')); branchlink.append(name);
if (this.get('hidden')) { if (this.get('hidden')) {
branchlink.addClass('dimmed'); branchlink.addClass('dimmed');
} }

17
blocks/navigation/yui/src/navigation/js/navigation.js vendored
View file

@ -481,6 +481,9 @@ BRANCH.prototype = {
* This function creates a DOM structure for the branch and then injects * This function creates a DOM structure for the branch and then injects
* it into the navigation tree at the correct point. * it into the navigation tree at the correct point.
* *
* It is important that this is kept in check with block_navigation_renderer::navigation_node as that produces
* the same thing as this but on the php side.
*
* @method draw * @method draw
* @chainable * @chainable
* @param {Node} element * @param {Node} element
@ -492,6 +495,7 @@ BRANCH.prototype = {
var branchli = Y.Node.create('<li></li>'); var branchli = Y.Node.create('<li></li>');
var link = this.get('link'); var link = this.get('link');
var branchp = Y.Node.create('<p class="tree_item"></p>').setAttribute('id', this.get('id')); var branchp = Y.Node.create('<p class="tree_item"></p>').setAttribute('id', this.get('id'));
var name;
if (!link) { if (!link) {
//add tab focus if not link (so still one focus per menu node). //add tab focus if not link (so still one focus per menu node).
// it was suggested to have 2 foci. one for the node and one for the link in MDL-27428. // it was suggested to have 2 foci. one for the node and one for the link in MDL-27428.
@ -506,10 +510,11 @@ BRANCH.prototype = {
// Prepare the icon, should be an object representing a pix_icon // Prepare the icon, should be an object representing a pix_icon
var branchicon = false; var branchicon = false;
var icon = this.get('icon'); var icon = this.get('icon');
if (icon && (!isbranch || this.get('type') === NODETYPE.ACTIVITY)) { if (icon && (!isbranch || this.get('type') === NODETYPE.ACTIVITY || this.get('type') === NODETYPE.RESOURCE)) {
branchicon = Y.Node.create('<img alt="" />'); branchicon = Y.Node.create('<img alt="" />');
branchicon.setAttribute('src', M.util.image_url(icon.pix, icon.component)); branchicon.setAttribute('src', M.util.image_url(icon.pix, icon.component));
branchli.addClass('item_with_icon'); branchli.addClass('item_with_icon');
branchp.addClass('hasicon');
if (icon.alt) { if (icon.alt) {
branchicon.setAttribute('alt', icon.alt); branchicon.setAttribute('alt', icon.alt);
} }
@ -527,8 +532,11 @@ BRANCH.prototype = {
var branchspan = Y.Node.create('<span></span>'); var branchspan = Y.Node.create('<span></span>');
if (branchicon) { if (branchicon) {
branchspan.appendChild(branchicon); branchspan.appendChild(branchicon);
name = '<span class="item-content-wrap">' + this.get('name') + '</span>';
} else {
name = this.get('name');
} }
branchspan.append(this.get('name')); branchspan.append(name);
if (this.get('hidden')) { if (this.get('hidden')) {
branchspan.addClass('dimmed_text'); branchspan.addClass('dimmed_text');
} }
@ -537,8 +545,11 @@ BRANCH.prototype = {
var branchlink = Y.Node.create('<a title="'+this.get('title')+'" href="'+link+'"></a>'); var branchlink = Y.Node.create('<a title="'+this.get('title')+'" href="'+link+'"></a>');
if (branchicon) { if (branchicon) {
branchlink.appendChild(branchicon); branchlink.appendChild(branchicon);
name = '<span class="item-content-wrap">' + this.get('name') + '</span>';
} else {
name = this.get('name');
} }
branchlink.append(this.get('name')); branchlink.append(name);
if (this.get('hidden')) { if (this.get('hidden')) {
branchlink.addClass('dimmed'); branchlink.addClass('dimmed');
} }