mirror of
https://github.com/moodle/moodle.git
synced 2025-08-04 08:26:37 +02:00
navigation-dock MDL-22560 Major changes to he way the dock works
* 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
parent
8cb4148657
commit
7e4617f7a6
12 changed files with 766 additions and 711 deletions
1194
blocks/dock.js
1194
blocks/dock.js
File diff suppressed because it is too large
Load diff
|
|
@ -92,8 +92,6 @@ class block_navigation extends block_base {
|
|||
|
||||
function get_required_javascript() {
|
||||
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);
|
||||
}
|
||||
|
||||
|
|
@ -162,14 +160,13 @@ class block_navigation extends block_base {
|
|||
$navigation->find_expandable($expandable);
|
||||
|
||||
// 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;
|
||||
if (!empty($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));
|
||||
$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
|
||||
$renderer = $this->page->get_renderer('block_navigation');
|
||||
|
|
|
|||
|
|
@ -47,6 +47,7 @@ M.block_navigation = M.block_navigation || {
|
|||
* @function
|
||||
*/
|
||||
init:function(Y) {
|
||||
M.core_dock.init(Y);
|
||||
if (M.core_dock.genericblock) {
|
||||
// Give the tree class the dock block properties
|
||||
Y.augment(M.block_navigation.classes.tree, M.core_dock.genericblock);
|
||||
|
|
|
|||
|
|
@ -83,7 +83,6 @@ class block_settings extends block_base {
|
|||
|
||||
function get_required_javascript() {
|
||||
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'));
|
||||
$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);
|
||||
|
|
|
|||
|
|
@ -413,6 +413,26 @@ class block_manager {
|
|||
$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 ====================================================================
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -380,7 +380,7 @@ class page_requirements_manager {
|
|||
case 'core_dock':
|
||||
$module = array('name' => 'core_dock',
|
||||
'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')));
|
||||
break;
|
||||
case 'core_calendar':
|
||||
|
|
|
|||
|
|
@ -44,6 +44,7 @@ $THEME->sheets = array(
|
|||
'blocks',
|
||||
'calendar',
|
||||
'course',
|
||||
'dock',
|
||||
'grade',
|
||||
'message',
|
||||
'question',
|
||||
|
|
|
|||
|
|
@ -2,16 +2,18 @@
|
|||
|
||||
$hassidepre = $PAGE->blocks->region_has_content('side-pre', $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();
|
||||
$hascustommenu = (empty($PAGE->layout_options['nocustommenu']) && !empty($custommenu));
|
||||
|
||||
$bodyclasses = array();
|
||||
if ($hassidepre && !$hassidepost) {
|
||||
if ($showsidepre && !$showsidepost) {
|
||||
$bodyclasses[] = 'side-pre-only';
|
||||
} else if ($hassidepost && !$hassidepre) {
|
||||
} else if ($showsidepost && !$showsidepre) {
|
||||
$bodyclasses[] = 'side-post-only';
|
||||
} else if (!$hassidepost && !$hassidepre) {
|
||||
} else if (!$showsidepost && !$showsidepre) {
|
||||
$bodyclasses[] = 'content-only';
|
||||
}
|
||||
if ($hascustommenu) {
|
||||
|
|
|
|||
|
|
@ -6,15 +6,18 @@ $hasfooter = (empty($PAGE->layout_options['nofooter']));
|
|||
$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));
|
||||
|
||||
$showsidepre = ($hassidepre && !$PAGE->blocks->region_completely_docked('side-pre', $OUTPUT));
|
||||
$showsidepost = ($hassidepost && !$PAGE->blocks->region_completely_docked('side-post', $OUTPUT));
|
||||
|
||||
$custommenu = $OUTPUT->custom_menu();
|
||||
$hascustommenu = (empty($PAGE->layout_options['nocustommenu']) && !empty($custommenu));
|
||||
|
||||
$bodyclasses = array();
|
||||
if ($hassidepre && !$hassidepost) {
|
||||
if ($showsidepre && !$showsidepost) {
|
||||
$bodyclasses[] = 'side-pre-only';
|
||||
} else if ($hassidepost && !$hassidepre) {
|
||||
} else if ($showsidepost && !$showsidepre) {
|
||||
$bodyclasses[] = 'side-post-only';
|
||||
} else if (!$hassidepost && !$hassidepre) {
|
||||
} else if (!$showsidepost && !$showsidepre) {
|
||||
$bodyclasses[] = 'content-only';
|
||||
}
|
||||
if ($hascustommenu) {
|
||||
|
|
@ -82,7 +85,6 @@ echo $OUTPUT->doctype() ?>
|
|||
</div>
|
||||
</div>
|
||||
<?php } ?>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
28
theme/base/style/dock.css
Normal file
28
theme/base/style/dock.css
Normal 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;}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -1,54 +1,28 @@
|
|||
/** Core overrides **/
|
||||
body.has_dock {margin-left:30px;margin-right:30px;}
|
||||
/* For the dock and items on the dock */
|
||||
#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 */
|
||||
.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;}
|
||||
.dock .dockeditem {background-color:#DDD;}
|
||||
.dock .dockeditem .firstdockitem {margin-top:1em;}
|
||||
.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;}
|
||||
/** For the panel the docked blocks are shown in */
|
||||
#dockeditempanel .dockeditempanel_content {border-color:#AAA;}
|
||||
#dockeditempanel .dockeditempanel_hd {border-bottom-color:#AAA;padding:3px 5px;background-image:url([[pix:theme|hgradient]]);}
|
||||
#dockeditempanel .dockeditempanel_hd h2 {font-size:80%;color:#999;}
|
||||
|
||||
/* block expansion code */
|
||||
.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 .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 */
|
||||
.ie6 .block .block_tree {width:160px;overflow-x:scroll;}
|
||||
.ie7 .block .block_tree {overflow-x:scroll;}
|
||||
.ie6 .block_tree .tree_item {width:100%;}
|
||||
.ie6 .dock {position:absolute;}
|
||||
.ie6 .dock hr {display:none;margin:0px;height:0px;padding:0px;}
|
||||
.ie6 .dock li p {background-color:inherit;}
|
||||
.ie6 .dock .bd.oversized_content .content, .ie7 .dock .bd.oversized_content .content {padding-bottom:0px;}
|
||||
.ie6 #dock {position:absolute;}
|
||||
.ie6 #dock hr {display:none;margin:0px;height:0px;padding:0px;}
|
||||
.ie6 #dock li p {background-color:inherit;}
|
||||
.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 .dock .bd.oversized_content {width:100%;}
|
||||
.ie7 .dock .bd.oversized_content {width:400px;}
|
||||
.ie6 #dock .bd.oversized_content {width:100%;}
|
||||
Loading…
Add table
Add a link
Reference in a new issue