MDL-9306 Applied Ann's patches: seems to work very well, the output is entirely XHTML compliant, and displays really nicely.

This commit is contained in:
nicolasconnault 2007-11-06 14:01:13 +00:00
parent 3b84c6bd05
commit 1ce18c08d3
8 changed files with 388 additions and 32 deletions

View File

@ -0,0 +1,10 @@
<?php
/**
* This file is required if the course format is to support AJAX.
*/
$CFG->ajaxcapable = true;
$CFG->ajaxtestedbrowsers = array('MSIE' => 6.0, 'Gecko' => 20061111);
?>

View File

@ -0,0 +1,13 @@
<?php
//
// Optional course format configuration file
//
// This file contains any specific configuration settings for the
// format.
//
// The default blocks layout for this course format:
$format['defaultblocks'] = 'participants,activity_modules,search_forums,'.
'admin,course_list:news_items,calendar_upcoming,'.
'recent_activity';
//
?>

View File

@ -0,0 +1,301 @@
<?php // $Id$
// Display the whole course as "topics" made of of modules
// Included from "view.php"
/**
* Evaluation topics format for course display - NO layout tables, for accessibility, etc.
*
* A duplicate course format to enable the Moodle development team to evaluate
* CSS for the multi-column layout in place of layout tables.
* Less risk for the Moodle 1.6 beta release.
* 1. Straight copy of topics/format.php
* 2. Replace <table> and <td> with DIVs; inline styles.
* 3. Reorder columns so that in linear view content is first then blocks;
* styles to maintain original graphical (side by side) view.
*
* Target: 3-column graphical view using relative widths for pixel screen sizes
* 800x600, 1024x768... on IE6, Firefox. Below 800 columns will shift downwards.
*
* http://www.maxdesign.com.au/presentation/em/ Ideal length for content.
* http://www.svendtofte.com/code/max_width_in_ie/ Max width in IE.
*
* @copyright &copy; 2006 The Open University
* @author N.D.Freear@open.ac.uk, and others.
* @license http://www.gnu.org/copyleft/gpl.html GNU Public License
* @package
*/
//TODO (nfreear): Accessibility: evaluation, lang/en_utf8/moodle.php: $string['formattopicscss']
require_once($CFG->libdir.'/ajax/ajaxlib.php');
if (!empty($THEME->customcorners)) {
require_once($CFG->dirroot.'/lib/custom_corners_lib.php');
}
$topic = optional_param('topic', -1, PARAM_INT);
if ($topic != -1) {
$displaysection = course_set_display($course->id, $topic);
} else {
if (isset($USER->display[$course->id])) {
$displaysection = $USER->display[$course->id];
} else {
$displaysection = course_set_display($course->id, 0);
}
}
$context = get_context_instance(CONTEXT_COURSE, $course->id);
if (($marker >=0) && has_capability('moodle/course:setcurrentsection', $context) && confirm_sesskey()) {
$course->marker = $marker;
if (! set_field("course", "marker", $marker, "id", $course->id)) {
error("Could not mark that topic for this course");
}
}
$streditsummary = get_string('editsummary');
$stradd = get_string('add');
$stractivities = get_string('activities');
$strshowalltopics = get_string('showalltopics');
$strtopic = get_string('topic');
$strgroups = get_string('groups');
$strgroupmy = get_string('groupmy');
$editing = $PAGE->user_is_editing();
if ($editing) {
$strstudents = moodle_strtolower($course->students);
$strtopichide = get_string('topichide', '', $strstudents);
$strtopicshow = get_string('topicshow', '', $strstudents);
$strmarkthistopic = get_string('markthistopic');
$strmarkedthistopic = get_string('markedthistopic');
$strmoveup = get_string('moveup');
$strmovedown = get_string('movedown');
}
/* Internet Explorer min-width fix. (See theme/standard/styles_layout.css: min-width for Firefox.)
Window width: 800px, Firefox 763px, IE 752px. (Window width: 640px, Firefox 602px, IE 588px.)
*/
?>
<!--[if IE]>
<style type="text/css">
.topicscss-format { width: expression(document.body.clientWidth < 800 ? "752px" : "auto"); }
</style>
<![endif]-->
<?php
/// Layout the whole page as three big columns (was, id="layout-table")
echo '<div class="topicscss-format">';
/// The left column ...
if (blocks_have_content($pageblocks, BLOCK_POS_LEFT) || $editing) {
echo '<div id="left-column">';
blocks_print_group($PAGE, $pageblocks, BLOCK_POS_LEFT);
echo '</div>';
}
/// The right column, BEFORE the middle-column.
if (blocks_have_content($pageblocks, BLOCK_POS_RIGHT) || $editing) {
echo '<div id="right-column">';
blocks_print_group($PAGE, $pageblocks, BLOCK_POS_RIGHT);
echo '</div>';
}
/// Start main column
echo '<div id="middle-column">';
if (!empty($THEME->customcorners)) print_custom_corners_start();
echo '<a name="startofcontent"></a>';
print_heading_block(get_string('topicoutline'), 'outline');
// Note, an ordered list would confuse - "1" could be the clipboard or summary.
echo "<ul class='topicscss'>\n";
/// If currently moving a file then show the current clipboard
if (ismoving($course->id)) {
$stractivityclipboard = strip_tags(get_string('activityclipboard', '', addslashes($USER->activitycopyname)));
$strcancel= get_string('cancel');
echo '<li class="clipboard">';
echo $stractivityclipboard.'&nbsp;&nbsp;(<a href="mod.php?cancelcopy=true&amp;sesskey='.$USER->sesskey.'">'.$strcancel.'</a>)';
echo "</li>\n";
}
/// Print Section 0 with general activities
$section = 0;
$thissection = $sections[$section];
if ($thissection->summary or $thissection->sequence or isediting($course->id)) {
// Note, no need for a 'left side' cell or DIV.
// Note, 'right side' is BEFORE content.
echo '<li id="section-0" class="section main" >';
echo '<div class="left side">&nbsp;</div>';
echo '<div class="right side" >&nbsp;</div>';
echo '<div class="content">';
echo '<div class="summary">';
$summaryformatoptions->noclean = true;
echo format_text($thissection->summary, FORMAT_HTML, $summaryformatoptions);
if (isediting($course->id) && has_capability('moodle/course:update', get_context_instance(CONTEXT_COURSE, $course->id))) {
echo '<a title="'.$streditsummary.'" '.
' href="editsection.php?id='.$thissection->id.'"><img src="'.$CFG->pixpath.'/t/edit.gif" '.
' class="icon edit" alt="'.$streditsummary.'" /></a>';
}
echo '</div>';
print_section($course, $thissection, $mods, $modnamesused);
if (isediting($course->id)) {
print_section_add_menus($course, $section, $modnames);
}
echo '</div>';
echo "</li>\n";
}
/// Now all the normal modules by topic
/// Everything below uses "section" terminology - each "section" is a topic.
$timenow = time();
$section = 1;
$sectionmenu = array();
while ($section <= $course->numsections) {
if (!empty($sections[$section])) {
$thissection = $sections[$section];
} else {
unset($thissection);
$thissection->course = $course->id; // Create a new section structure
$thissection->section = $section;
$thissection->summary = '';
$thissection->visible = 1;
if (!$thissection->id = insert_record('course_sections', $thissection)) {
notify('Error inserting new topic!');
}
}
$showsection = (has_capability('moodle/course:viewhiddensections', $context) or $thissection->visible or !$course->hiddensections);
if (!empty($displaysection) and $displaysection != $section) { // Check this topic is visible
if ($showsection) {
$strsummary = strip_tags(format_string($thissection->summary,true));
if (strlen($strsummary) < 57) {
$strsummary = ' - '.$strsummary;
} else {
$strsummary = ' - '.substr($strsummary, 0, 60).'...';
}
$sectionmenu['topic='.$section] = s($section.$strsummary);
}
$section++;
continue;
}
if ($showsection) {
$currenttopic = ($course->marker == $section);
$currenttext = '';
if (!$thissection->visible) {
$sectionstyle = ' hidden';
} else if ($currenttopic) {
$sectionstyle = ' current';
$currenttext = get_accesshide(get_string('currenttopic','access'));
} else {
$sectionstyle = '';
}
echo '<li id="section-'.$section.'" class="section main'.$sectionstyle.'" >'; //'<div class="left side">&nbsp;</div>';
echo '<div class="left side">'.$section.'</div>';
// Note, 'right side' is BEFORE content.
echo '<div class="right side">';
if ($displaysection == $section) { // Show the zoom boxes
echo '<a href="view.php?id='.$course->id.'&amp;topic=0#section-'.$section.'" title="'.$strshowalltopics.'">'.
'<img src="'.$CFG->pixpath.'/i/all.gif" class="icon" alt="'.$strshowalltopics.'" /></a><br />';
} else {
$strshowonlytopic = get_string("showonlytopic", "", $section);
echo '<a href="view.php?id='.$course->id.'&amp;topic='.$section.'" title="'.$strshowonlytopic.'">'.
'<img src="'.$CFG->pixpath.'/i/one.gif" class="icon" alt="'.$strshowonlytopic.'" /></a><br />';
}
if (isediting($course->id) && has_capability('moodle/course:update', get_context_instance(CONTEXT_COURSE, $course->id))) {
if ($course->marker == $section) { // Show the "light globe" on/off
echo '<a href="view.php?id='.$course->id.'&amp;marker=0&amp;sesskey='.$USER->sesskey.'#section-'.$section.'" title="'.$strmarkedthistopic.'">'.'<img src="'.$CFG->pixpath.'/i/marked.gif" alt="'.$strmarkedthistopic.'" /></a><br />';
} else {
echo '<a href="view.php?id='.$course->id.'&amp;marker='.$section.'&amp;sesskey='.$USER->sesskey.'#section-'.$section.'" title="'.$strmarkthistopic.'">'.'<img src="'.$CFG->pixpath.'/i/marker.gif" alt="'.$strmarkthistopic.'" /></a><br />';
}
if ($thissection->visible) { // Show the hide/show eye
echo '<a href="view.php?id='.$course->id.'&amp;hide='.$section.'&amp;sesskey='.$USER->sesskey.'#section-'.$section.'" title="'.$strtopichide.'">'.
'<img src="'.$CFG->pixpath.'/i/hide.gif" class="icon hide" alt="'.$strtopichide.'" /></a><br />';
} else {
echo '<a href="view.php?id='.$course->id.'&amp;show='.$section.'&amp;sesskey='.$USER->sesskey.'#section-'.$section.'" title="'.$strtopicshow.'">'.
'<img src="'.$CFG->pixpath.'/i/show.gif" class="icon hide" alt="'.$strtopicshow.'" /></a><br />';
}
if ($section > 1) { // Add a arrow to move section up
echo '<a href="view.php?id='.$course->id.'&amp;random='.rand(1,10000).'&amp;section='.$section.'&amp;move=-1&amp;sesskey='.$USER->sesskey.'#section-'.($section-1).'" title="'.$strmoveup.'">'.
'<img src="'.$CFG->pixpath.'/t/up.gif" class="icon up" alt="'.$strmoveup.'" /></a><br />';
}
if ($section < $course->numsections) { // Add a arrow to move section down
echo '<a href="view.php?id='.$course->id.'&amp;random='.rand(1,10000).'&amp;section='.$section.'&amp;move=1&amp;sesskey='.$USER->sesskey.'#section-'.($section+1).'" title="'.$strmovedown.'">'.
'<img src="'.$CFG->pixpath.'/t/down.gif" class="icon down" alt="'.$strmovedown.'" /></a><br />';
}
}
echo '</div>';
echo '<div class="content">';
if (!has_capability('moodle/course:viewhiddensections', $context) and !$thissection->visible) { // Hidden for students
echo get_string('notavailable').'</div>';
} else {
echo '<div class="summary">';
$summaryformatoptions->noclean = true;
if ($thissection->summary) {
echo format_text($thissection->summary, FORMAT_HTML, $summaryformatoptions);
} else {
echo '&nbsp;';
}
if (isediting($course->id) && has_capability('moodle/course:update', get_context_instance(CONTEXT_COURSE, $course->id))) {
echo ' <a title="'.$streditsummary.'" href="editsection.php?id='.$thissection->id.'">'.
'<img src="'.$CFG->pixpath.'/t/edit.gif" class="icon edit" alt="'.$streditsummary.'" /></a><br /><br />';
}
echo '</div>';
print_section($course, $thissection, $mods, $modnamesused);
if (isediting($course->id)) {
print_section_add_menus($course, $section, $modnames);
}
}
echo '</div>';
echo "</li>\n";
}
$section++;
}
echo "</ul>\n";
if (!empty($sectionmenu)) {
echo '<div align="center" class="jumpmenu">';
echo popup_form($CFG->wwwroot.'/course/view.php?id='.$course->id.'&amp;', $sectionmenu,
'sectionmenu', '', get_string('jumpto'), '', '', true);
echo '</div>';
}
if (!empty($THEME->customcorners)) print_custom_corners_end();
echo '</div>';
echo '</div>';
echo '<div class="clearer"></div>';
?>

View File

@ -0,0 +1,10 @@
<?php
/**
* This file is required if the course format is to support AJAX.
*/
$CFG->ajaxcapable = true;
$CFG->ajaxtestedbrowsers = array('MSIE' => 6.0, 'Gecko' => 20061111);
?>

View File

@ -643,6 +643,7 @@ $string['formatsocial'] = 'Social format';
$string['formattext'] = 'Moodle auto-format';
$string['formattexttype'] = 'Formatting';
$string['formattopics'] = 'Topics format';
$string['formattopicscss'] = 'Topics format - CSS/No tables';
$string['formattopicsajax'] = 'Topics format - AJAX';
$string['formatweeks'] = 'Weekly format';
$string['formatweekscss'] = 'Weekly format - CSS/No tables';

View File

@ -54,7 +54,7 @@ section_class.prototype.init_section = function(id, group, config, isDraggable)
this.numberDisplay = null; // Used to display the section number on the top left
// of the section. Not used in all course formats.
this.summary = null;
this.content_td = null;
this.content_div = null;
this.hidden = false;
this.highlighted = false;
this.showOnly = false;
@ -79,7 +79,7 @@ section_class.prototype.init_section = function(id, group, config, isDraggable)
section_class.prototype.init_buttons = function() {
var commandContainer = this.getEl().childNodes[2];
var commandContainer = YAHOO.util.Dom.getElementsByClassName('right',null,this.getEl())[0];
//clear all but show only button
var commandContainerCount = commandContainer.childNodes.length;
@ -115,7 +115,7 @@ section_class.prototype.add_handle = function() {
section_class.prototype.process_section = function() {
this.content_td = this.getEl().childNodes[1];
this.content_div = YAHOO.util.Dom.getElementsByClassName('content',null,this.getEl())[0];
if (YAHOO.util.Dom.hasClass(this.getEl(),'current')) {
this.highlighted = true;
@ -137,11 +137,11 @@ section_class.prototype.process_section = function() {
}
// Find/edit resources
this.resources_ul = this.content_td.getElementsByTagName('ul')[0];
this.resources_ul = this.content_div.getElementsByTagName('ul')[0];
if (!this.resources_ul) {
this.resources_ul = document.createElement('ul');
this.resources_ul.className='section';
this.content_td.insertBefore(this.resources_ul, this.content_td.lastChild);
this.content_div.insertBefore(this.resources_ul, this.content_div.lastChild);
}
var resource_count = this.resources_ul.getElementsByTagName('li').length;
@ -195,7 +195,7 @@ section_class.prototype.endDrag = function() {
section_class.prototype.move_to_section = function(target) {
var tempTd = document.createElement('td');
var tempDiv = document.createElement('div');
var tempStore = null;
var sectionCount = main.sections.length;
var found = null;

View File

@ -609,7 +609,7 @@ td#left-column div.hidden div.header {
td#right-column div.hidden div.header {
border-bottom-style: none;
}
td#middle-column div.bt div {
td#middle-column div.bt div, div#middle-column div.bt div {
background-image: url(pix/box.png);
background-repeat: no-repeat;
background-position: 0 0;
@ -619,7 +619,7 @@ td#middle-column div.bt div {
position: relative;
width: 13px;
}
td#middle-column div.bt {
td#middle-column div.bt, div#middle-column div.bt {
background-image: url(pix/box.png);
background-repeat: no-repeat;
background-position: 100% 0;
@ -627,14 +627,14 @@ td#middle-column div.bt {
height: 12px;
background-color: transparent;
}
td#middle-column div.i1 {
td#middle-column div.i1, div#middle-column div.i1 {
background-image: url(pix/borders.png);
background-repeat: repeat-y;
background-position: 0 0;
background-color: transparent;
padding: 0 0 0 12px;
}
td#middle-column div.i2 {
td#middle-column div.i2, div#middle-column div.i2 {
background-image: url(pix/borders.png);
background-repeat: repeat-y;
background-attachment: scroll;
@ -642,14 +642,14 @@ td#middle-column div.i2 {
background-color: transparent;
padding: 0 12px 0 0;
}
td#middle-column div.i3 {
td#middle-column div.i3, div#middle-column div.i3 {
background-color: #FFFFFF;
padding: 0 10px;
border-width: 1px 0;
border-style: solid;
border-color: #FFFFFF;
}
td#middle-column div.bb div {
td#middle-column div.bb div, div#middle-column div.bb div {
background-image: url(pix/box.png);
background-repeat: no-repeat;
background-position: 0 100%;
@ -659,7 +659,7 @@ td#middle-column div.bb div {
position: relative;
width: 13px;
}
td#middle-column div.bb {
td#middle-column div.bb, div#middle-column div.bb {
background-image: url(pix/box.png);
background-repeat: no-repeat;
background-position: 100% 100%;
@ -667,7 +667,7 @@ td#middle-column div.bb {
height: 12px;
background-color: transparent;
}
td#middle-column div.bt div {
td#middle-column div.bt div, div#middle-column div.bt div {
z-index: 10;
}
div#footer div.bt div {
@ -913,7 +913,7 @@ body.nocoursepage div#content div.bb {
height: 12px;
background-color: transparent;
}
td#middle-column tr.section {
td#middle-column tr.section, div#middle-column li.section {
background-image: url(pix/bottom_shadow_to_top.png);
background-repeat: repeat-x;
background-position: center bottom;

View File

@ -1793,6 +1793,9 @@ border-width:0px;
display:inline;
}
.weekscss-format, .topicscss-format {
margin-top: 8px;
}
/*#course-view ul.section li.activity ul li,
#site-index ul.section li.activity ul li {
@ -1800,52 +1803,70 @@ border-width:0px;
}*/
/*Accessibility: No-tables course format. */
#course-view ul.weekscss {
#course-view ul.weekscss , #course-view ul.topicscss{
margin: 0;
padding: 0;
list-style: none;
}
/* Window-width: 800 pixels.
IE doesn't support, see inline IE conditional comment. */
.weekscss-format {
.weekscss-format, .topicscss-format {
min-width: 763px;
}
.weekscss-format .block_adminblock select,
.weekscss-format .block_calendar_month .minicalendar {
.topicscss-format .block_adminblock select,
.weekscss-format .block_calendar_month .minicalendar,
.topicscss-format .block_calendar_month .minicalendar {
width: 100%;
padding: 0;
}
.weekscss-format .block_calendar_month .minicalendar th,
.weekscss-format .block_calendar_month .minicalendar td {
.topicscss-format .block_calendar_month .minicalendar th,
.weekscss-format .block_calendar_month .minicalendar td,
.topicscss-format .block_calendar_month .minicalendar td, {
padding: 0.1em 0 0.1em 1px;
}
.weekscss-format #middle-column {
.weekscss-format #middle-column ,
.topicscss-format #middle-column {
margin: 0 12.5em 0 12.5em;
}
.weekscss-format #left-column,
.weekscss-format #right-column {
.weekscss-format #right-column,
.topicscss-format #left-column,
.topicscss-format #right-column {
width: 11.5em;
}
.weekscss-format #left-column {
.weekscss-format #left-column,
.topicscss-format #left-column {
float: left;
}
.weekscss-format #right-column {
.weekscss-format #right-column,
.topicscss-format #right-column {
float: right;
}
.weekscss li.section {
.weekscss li.section ,
.topicscss li.section {
margin-bottom: 0.5em;
border-style:solid;
border-width:1px;
}
.weekscss .content,
.weekscss .side {
.topicscss .content {
padding: 5px;
}
.weekscss .content {
margin: 0 1.7em 0 1.7em;
}
.weekscss .right {
.weekscss .right,
.weekscss .left,
.topicscss .right,
.topicscss .left {
width: 1.6em;
padding: 5px 0;
}
.weekscss .left,
.topicscss .left {
float: left;
}
.weekscss .right,
.topicscss .right {
float: right;
text-align:center;
}