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

navigation-dock MDL-22560 Major changes to he way the dock works

Browse source 
* Themes can now check if a region is completely docked
* Dock now delegates events to improve performance
* Dock now completely YUI3
* No longer uses YUI overlay instead has custom control
This commit is contained in:
Sam Hemelryk 2010-05-31 03:33:34 +00:00
parent 8cb4148657
commit 7e4617f7a6
12 changed files with 766 additions and 711 deletions
Download patch file Download diff file Expand all files Collapse all files

1326
blocks/dock.js
View file

File diff suppressed because it is too large Load diff

5
blocks/navigation/block_navigation.php
View file

@ -92,8 +92,6 @@ class block_navigation extends block_base {
function get_required_javascript() { function get_required_javascript() {
global $CFG; global $CFG;
$this->page->requires->js_module(array('name'=>'core_dock', 'fullpath'=>'/blocks/dock.js', 'requires'=>array('base', 'cookie', 'dom', 'io', 'node', 'event-custom', 'event-mouseenter', 'yui2-container')));
$this->page->requires->js_module(array('name'=>'block_navigation', 'fullpath'=>'/blocks/navigation/navigation.js', 'requires'=>array('core_dock', 'io', 'node', 'dom', 'event-custom', 'json-parse')));
user_preference_allow_ajax_update('docked_block_instance_'.$this->instance->id, PARAM_INT); user_preference_allow_ajax_update('docked_block_instance_'.$this->instance->id, PARAM_INT);
} }
@ -162,14 +160,13 @@ class block_navigation extends block_base {
$navigation->find_expandable($expandable); $navigation->find_expandable($expandable);
// Initialise the JS tree object // Initialise the JS tree object
$module = array('name'=>'block_navigation', 'fullpath'=>'/blocks/navigation/navigation.js', 'requires'=>array('core_dock', 'io', 'node', 'dom', 'event-custom', 'json-parse')); $module = array('name'=>'block_navigation', 'fullpath'=>'/blocks/navigation/navigation.js', 'requires'=>array('core_dock', 'io', 'node', 'dom', 'event-custom', 'json-parse'), 'strings'=>array(array('viewallcourses','moodle')));
$limit = 20; $limit = 20;
if (!empty($CFG->navcourselimit)) { if (!empty($CFG->navcourselimit)) {
$limit = $CFG->navcourselimit; $limit = $CFG->navcourselimit;
} }
$arguments = array($this->instance->id, array('expansions'=>$expandable, 'instance'=>$this->instance->id, 'candock'=>$this->instance_can_be_docked(), 'courselimit'=>$limit)); $arguments = array($this->instance->id, array('expansions'=>$expandable, 'instance'=>$this->instance->id, 'candock'=>$this->instance_can_be_docked(), 'courselimit'=>$limit));
$this->page->requires->js_init_call('M.block_navigation.init_add_tree', $arguments, false, $module); $this->page->requires->js_init_call('M.block_navigation.init_add_tree', $arguments, false, $module);
$this->page->requires->string_for_js('viewallcourses','moodle');
// Grab the items to display // Grab the items to display
$renderer = $this->page->get_renderer('block_navigation'); $renderer = $this->page->get_renderer('block_navigation');

1
blocks/navigation/navigation.js
View file

@ -47,6 +47,7 @@ M.block_navigation = M.block_navigation || {
* @function * @function
*/ */
init:function(Y) { init:function(Y) {
M.core_dock.init(Y);
if (M.core_dock.genericblock) { if (M.core_dock.genericblock) {
// Give the tree class the dock block properties // Give the tree class the dock block properties
Y.augment(M.block_navigation.classes.tree, M.core_dock.genericblock); Y.augment(M.block_navigation.classes.tree, M.core_dock.genericblock);

1
blocks/settings/block_settings.php
View file

@ -83,7 +83,6 @@ class block_settings extends block_base {
function get_required_javascript() { function get_required_javascript() {
global $CFG; global $CFG;
$this->page->requires->js_module(array('name'=>'core_dock', 'fullpath'=>'/blocks/dock.js', 'requires'=>array('base', 'cookie', 'dom', 'io', 'node', 'event-custom', 'event-mouseenter', 'yui2-container')));
$module = array('name'=>'block_navigation', 'fullpath'=>'/blocks/navigation/navigation.js', 'requires'=>array('core_dock', 'io', 'node', 'dom', 'event-custom', 'json-parse')); $module = array('name'=>'block_navigation', 'fullpath'=>'/blocks/navigation/navigation.js', 'requires'=>array('core_dock', 'io', 'node', 'dom', 'event-custom', 'json-parse'));
$arguments = array($this->instance->id, array('instance'=>$this->instance->id, 'candock'=>$this->instance_can_be_docked())); $arguments = array($this->instance->id, array('instance'=>$this->instance->id, 'candock'=>$this->instance_can_be_docked()));
$this->page->requires->js_init_call('M.block_navigation.init_add_tree', $arguments, false, $module); $this->page->requires->js_init_call('M.block_navigation.init_add_tree', $arguments, false, $module);

20
lib/blocklib.php
View file

@ -413,6 +413,26 @@ class block_manager {
$this->extracontent[$region][] = $bc; $this->extracontent[$region][] = $bc;
} }
/**
* Checks to see whether all of the blocks within the given region are docked
*
* @param string $region
* @return bool True if all of the blocks within that region are docked
*/
public function region_completely_docked($region, $output) {
if (!$this->page->theme->enable_dock) {
return false;
}
$this->check_is_loaded();
$this->ensure_content_created($region, $output);
foreach($this->visibleblockcontent[$region] as $instance) {
if (!empty($instance->content) && !get_user_preferences('docked_block_instance_'.$instance->blockinstanceid, 0)) {
return false;
}
}
return true;
}
/// Actions ==================================================================== /// Actions ====================================================================
/** /**

2
lib/outputrequirementslib.php
View file

@ -380,7 +380,7 @@ class page_requirements_manager {
case 'core_dock': case 'core_dock':
$module = array('name' => 'core_dock', $module = array('name' => 'core_dock',
'fullpath' => '/blocks/dock.js', 'fullpath' => '/blocks/dock.js',
'requires' => array('base', 'cookie', 'dom', 'io', 'node', 'event-custom', 'event-mouseenter', 'yui2-container'), 'requires' => array('base', 'node', 'event-custom', 'event-mouseenter', 'event-resize'),
'strings' => array(array('addtodock', 'block'),array('undockitem', 'block'),array('undockall', 'block'),array('thisdirectionvertical', 'langconfig'))); 'strings' => array(array('addtodock', 'block'),array('undockitem', 'block'),array('undockall', 'block'),array('thisdirectionvertical', 'langconfig')));
break; break;
case 'core_calendar': case 'core_calendar':

1
theme/base/config.php
View file

@ -44,6 +44,7 @@ $THEME->sheets = array(
'blocks', 'blocks',
'calendar', 'calendar',
'course', 'course',
'dock',
'grade', 'grade',
'message', 'message',
'question', 'question',

8
theme/base/layout/frontpage.php
View file

@ -2,16 +2,18 @@
$hassidepre = $PAGE->blocks->region_has_content('side-pre', $OUTPUT); $hassidepre = $PAGE->blocks->region_has_content('side-pre', $OUTPUT);
$hassidepost = $PAGE->blocks->region_has_content('side-post', $OUTPUT); $hassidepost = $PAGE->blocks->region_has_content('side-post', $OUTPUT);
$showsidepre = $hassidepre && !$PAGE->blocks->region_completely_docked('side-pre', $OUTPUT);
$showsidepost = $hassidepost && !$PAGE->blocks->region_completely_docked('side-post', $OUTPUT);
$custommenu = $OUTPUT->custom_menu(); $custommenu = $OUTPUT->custom_menu();
$hascustommenu = (empty($PAGE->layout_options['nocustommenu']) && !empty($custommenu)); $hascustommenu = (empty($PAGE->layout_options['nocustommenu']) && !empty($custommenu));
$bodyclasses = array(); $bodyclasses = array();
if ($hassidepre && !$hassidepost) { if ($showsidepre && !$showsidepost) {
$bodyclasses[] = 'side-pre-only'; $bodyclasses[] = 'side-pre-only';
} else if ($hassidepost && !$hassidepre) { } else if ($showsidepost && !$showsidepre) {
$bodyclasses[] = 'side-post-only'; $bodyclasses[] = 'side-post-only';
} else if (!$hassidepost && !$hassidepre) { } else if (!$showsidepost && !$showsidepre) {
$bodyclasses[] = 'content-only'; $bodyclasses[] = 'content-only';
} }
if ($hascustommenu) { if ($hascustommenu) {

10
theme/base/layout/general.php
View file

@ -6,15 +6,18 @@ $hasfooter = (empty($PAGE->layout_options['nofooter']));
$hassidepre = (empty($PAGE->layout_options['noblocks']) && $PAGE->blocks->region_has_content('side-pre', $OUTPUT)); $hassidepre = (empty($PAGE->layout_options['noblocks']) && $PAGE->blocks->region_has_content('side-pre', $OUTPUT));
$hassidepost = (empty($PAGE->layout_options['noblocks']) && $PAGE->blocks->region_has_content('side-post', $OUTPUT)); $hassidepost = (empty($PAGE->layout_options['noblocks']) && $PAGE->blocks->region_has_content('side-post', $OUTPUT));
$showsidepre = ($hassidepre && !$PAGE->blocks->region_completely_docked('side-pre', $OUTPUT));
$showsidepost = ($hassidepost && !$PAGE->blocks->region_completely_docked('side-post', $OUTPUT));
$custommenu = $OUTPUT->custom_menu(); $custommenu = $OUTPUT->custom_menu();
$hascustommenu = (empty($PAGE->layout_options['nocustommenu']) && !empty($custommenu)); $hascustommenu = (empty($PAGE->layout_options['nocustommenu']) && !empty($custommenu));
$bodyclasses = array(); $bodyclasses = array();
if ($hassidepre && !$hassidepost) { if ($showsidepre && !$showsidepost) {
$bodyclasses[] = 'side-pre-only'; $bodyclasses[] = 'side-pre-only';
} else if ($hassidepost && !$hassidepre) { } else if ($showsidepost && !$showsidepre) {
$bodyclasses[] = 'side-post-only'; $bodyclasses[] = 'side-post-only';
} else if (!$hassidepost && !$hassidepre) { } else if (!$showsidepost && !$showsidepre) {
$bodyclasses[] = 'content-only'; $bodyclasses[] = 'content-only';
} }
if ($hascustommenu) { if ($hascustommenu) {
@ -82,7 +85,6 @@ echo $OUTPUT->doctype() ?>
</div> </div>
</div> </div>
<?php } ?> <?php } ?>
</div> </div>
</div> </div>
</div> </div>

28
theme/base/style/dock.css Normal file
View file

@ -0,0 +1,28 @@
/**
* Whilst the dock isn't supported by the base theme this CSS is here so that those
* themes that do want to use the dock will have a starting point at least
*/
/* Put a margin on the body if the dock is shown */
body.has_dock {margin-left:30px;}
/** For the dock itself */
#dock {width:30px;position:fixed;top:0px;left:0px;height:100%;background-color:#FFF;border-right:1px solid #000;z-index:11000;}
#dock.nothingdocked {visibility: hidden;display:none;}
#dock .dockeditem .firstdockitem {margin-top:1em;}
#dock .dockeditem .dockedtitle {border-bottom:1px solid #000;border-top:1px solid #000;cursor:pointer;}
#dock .dockeditem .dockedtitle h2 {font-size:0.8em;line-height:100%;text-align:center;}
#dock .dockeditem .dockedtitle .filterrotate {margin-left:8px;}
#dock .controls {position:absolute;bottom:1em;text-align:center;width:100%;}
#dock .controls img {cursor:pointer;}
/** For the panel the docked blocks are shown in */
#dockeditempanel {min-width:200px;position:relative;z-index:12000;left:100%;}
#dockeditempanel.dockitempanel_hidden {display:none;}
#dockeditempanel .dockeditempanel_content {background-color:#fff;border:1px solid #000;z-index:12050;}
#dockeditempanel .dockeditempanel_bd {overflow:auto;width:auto;}
#dockeditempanel .dockeditempanel_bd .block_docked {margin:10px;}
#dockeditempanel .dockeditempanel_hd {border-bottom:1px solid #000;text-align:right;}
#dockeditempanel .dockeditempanel_hd h2 {display:inline;margin:0;padding-right:1em;}
#dockeditempanel .dockeditempanel_hd .commands {display:inline;}
#dockeditempanel .dockeditempanel_hd .commands img {margin-right:2px;vertical-align:middle;}

9
theme/standard/javascript/navigation.js
View file

@ -1,9 +0,0 @@
function customise_dock_for_theme() {
if (!M.core_dock) {
return false;
}
// Throw a lightbox for the navigation boxes
M.core_dock.cfg.panel.modal = true;
return true;
}

60
theme/standard/style/dock.css
View file

@ -1,54 +1,28 @@
/** Core overrides **/ /* For the dock and items on the dock */
body.has_dock {margin-left:30px;margin-right:30px;} #dock {background-image:url([[pix:theme|vgradient]]);background-repeat: repeat-y;background-position:100% 0;background-color:#DDD;border-right-color:#AAA;}
#dock .dockeditem_container {margin-top:10px;}
#dock .dockeditem {background-color:#DDD;}
#dock .dockeditem .firstdockitem {margin-top:1em;}
#dock .dockeditem .dockedtitle {border-color:#AAA;background-image:url([[pix:theme|vgradient]]);background-position:90% 0;background-repeat: repeat-y;}
#dock .dockeditem .dockedtitle.activeitem {background-position:80% 0;}
#dock .dockeditem .dockedtitle h2 {margin:12px 0px;}
/* This CSS is for the dock */ /** For the panel the docked blocks are shown in */
.dock {width:30px;position:fixed;top:0px;left:0px;height:100%;background-image:url([[pix:theme|vgradient]]);background-repeat: repeat-y;background-position:100% 0;background-color:#DDD;border-right:1px solid #AAA;z-index:2002;} #dockeditempanel .dockeditempanel_content {border-color:#AAA;}
.dock .dockeditem {background-color:#DDD;} #dockeditempanel .dockeditempanel_hd {border-bottom-color:#AAA;padding:3px 5px;background-image:url([[pix:theme|hgradient]]);}
.dock .dockeditem .firstdockitem {margin-top:1em;} #dockeditempanel .dockeditempanel_hd h2 {font-size:80%;color:#999;}
.dock .dockeditem .dockedtitle {border-bottom:1px solid #AAA;border-top:1px solid #CCC;cursor:pointer;background-image:url([[pix:theme|vgradient]]);background-position:90% 0;background-repeat: repeat-y;}
.dock .dockeditem .dockedtitle.activeitem {background-position:80% 0;}
.dock .dockeditem .dockedtitle h2 {font-size:0.8em;line-height:100%;text-transform:uppercase;text-align:center;margin:12px 0px;}
.dock .block_tree .current_branch {}
.dock .controls {position:absolute;bottom:1em;text-align:center;width:100%;}
.dock .controls img {cursor:pointer;}
.dock .bd.oversized_content {overflow-y:auto;overflow-x:visible;height:inherit;}
.dock .bd.oversized_content .content {margin:6px 6px 6px 0px;padding-bottom:6px;}
.dock .yui-panel .hd {text-align:right;border-width:0 0 1px 0;padding:3px 5px;}
.dock .yui-panel .hd .commands img {margin-right:2px;}
/**.dock .bd .content .blockcommands {text-align:right;border:1px solid #AAA;border-width:0 0 1px 1px;background-image:url([[pix:theme|hgradient]]);background-repeat: repeat-x;}**/
/** YUI overrides **/
.yui-skin-sam .dock .yui-panel {border-width:1px 2px 1px 1px;border-color:#AAA;min-width:150px;}
.yui-skin-sam .dock .yui-panel .bd {border-width:0;background-color:#FAFAFA;}
/** Override the above if the dock is on the right **/
.dock.dock_right_vertical {left:auto;right:0px;border-width:0px 0px 1px 5px;}
.dock.dock_right_vertical .commands {text-align:right;}
.yui-skin-sam .dock.dock_right_vertical .yui-panel {border-width:1px 0 1px 5px;}
/* block expansion code */ /* block expansion code */
.block_js_expansion .block_tree {overflow-x:scroll;} .block_js_expansion .block_tree {overflow-x:scroll;}
.block_js_expansion.mouseover .content {width:200%;z-index:1000;position:relative;} .block_js_expansion.mouseover .content {width:200%;z-index:1000;position:relative;}
.block_js_expansion.mouseover .content .block_tree {width:100%; background-color:#FAFAFA; padding-bottom:0px;} .block_js_expansion.mouseover .content .block_tree {width:100%; background-color:#FAFAFA; padding-bottom:0px;}
/* CSS for shadows */
.divshadow div {position:absolute;width:3px;height:3px;background-color:#333;}
.divshadow .shadow_top {top:-3px;right:0px;width:100%;}
.divshadow .shadow_bottom {bottom:-3px;right:0px;width:100%;}
.divshadow .shadow_left {top:0px;left:-3px;height:100%;}
.divshadow .shadow_right {bottom:0px;right:-3px;height:100%;}
.divshadow .shadow_top_right {top:-3px;right:-3px;}
.divshadow .shadow_bottom_right {bottom:-3px;right:-3px;}
.divshadow .shadow_top_left {top:-3px;left:-3px;}
.divshadow .shadow_bottom_left {bottom:-3px;left:-3px;}
/** IE stylings */ /** IE stylings */
.ie6 .block .block_tree {width:160px;overflow-x:scroll;} .ie6 .block .block_tree {width:160px;overflow-x:scroll;}
.ie7 .block .block_tree {overflow-x:scroll;}
.ie6 .block_tree .tree_item {width:100%;} .ie6 .block_tree .tree_item {width:100%;}
.ie6 .dock {position:absolute;} .ie6 #dock {position:absolute;}
.ie6 .dock hr {display:none;margin:0px;height:0px;padding:0px;} .ie6 #dock hr {display:none;margin:0px;height:0px;padding:0px;}
.ie6 .dock li p {background-color:inherit;} .ie6 #dock li p {background-color:inherit;}
.ie6 .dock .bd.oversized_content .content, .ie7 .dock .bd.oversized_content .content {padding-bottom:0px;} .ie6 #dock .bd.oversized_content .content, .ie7 #dock .bd.oversized_content .content {padding-bottom:0px;}
.ie6 .block_js_expansion.mouseover .content, .ie7 .block_js_expansion.mouseover .content{ padding-bottom:2px;} .ie6 .block_js_expansion.mouseover .content, .ie7 .block_js_expansion.mouseover .content{ padding-bottom:2px;}
.ie6 .dock .bd.oversized_content {width:100%;} .ie6 #dock .bd.oversized_content {width:100%;}
.ie7 .dock .bd.oversized_content {width:400px;}