From 1ce18c08d34b65e58d0ba89f260f5e5da15ce61d Mon Sep 17 00:00:00 2001 From: nicolasconnault <nicolasconnault> Date: Tue, 6 Nov 2007 14:01:13 +0000 Subject: [PATCH] MDL-9306 Applied Ann's patches: seems to work very well, the output is entirely XHTML compliant, and displays really nicely. --- course/format/topicscss/ajax.php | 10 + course/format/topicscss/config.php | 13 ++ course/format/topicscss/format.php | 301 +++++++++++++++++++++++++++ course/format/weekscss/ajax.php | 10 + lang/en_utf8/moodle.php | 1 + lib/ajax/section_classes.js | 12 +- theme/custom_corners/user_styles.css | 20 +- theme/standard/styles_layout.css | 53 +++-- 8 files changed, 388 insertions(+), 32 deletions(-) create mode 100644 course/format/topicscss/ajax.php create mode 100644 course/format/topicscss/config.php create mode 100644 course/format/topicscss/format.php create mode 100644 course/format/weekscss/ajax.php diff --git a/course/format/topicscss/ajax.php b/course/format/topicscss/ajax.php new file mode 100644 index 0000000000..2280eddd81 --- /dev/null +++ b/course/format/topicscss/ajax.php @@ -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); + +?> diff --git a/course/format/topicscss/config.php b/course/format/topicscss/config.php new file mode 100644 index 0000000000..2d3eaca707 --- /dev/null +++ b/course/format/topicscss/config.php @@ -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'; +// +?> \ No newline at end of file diff --git a/course/format/topicscss/format.php b/course/format/topicscss/format.php new file mode 100644 index 0000000000..8894d6fdd7 --- /dev/null +++ b/course/format/topicscss/format.php @@ -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 © 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.' (<a href="mod.php?cancelcopy=true&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"> </div>'; + echo '<div class="right side" > </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"> </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.'&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.'&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.'&marker=0&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.'&marker='.$section.'&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.'&hide='.$section.'&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.'&show='.$section.'&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.'&random='.rand(1,10000).'&section='.$section.'&move=-1&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.'&random='.rand(1,10000).'&section='.$section.'&move=1&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 ' '; + } + + 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.'&', $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>'; + +?> diff --git a/course/format/weekscss/ajax.php b/course/format/weekscss/ajax.php new file mode 100644 index 0000000000..2280eddd81 --- /dev/null +++ b/course/format/weekscss/ajax.php @@ -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); + +?> diff --git a/lang/en_utf8/moodle.php b/lang/en_utf8/moodle.php index dc66d531d5..e928e3e754 100644 --- a/lang/en_utf8/moodle.php +++ b/lang/en_utf8/moodle.php @@ -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'; diff --git a/lib/ajax/section_classes.js b/lib/ajax/section_classes.js index 9c0add9077..1adcc78930 100755 --- a/lib/ajax/section_classes.js +++ b/lib/ajax/section_classes.js @@ -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; diff --git a/theme/custom_corners/user_styles.css b/theme/custom_corners/user_styles.css index 604af5bc8b..b14859aa9b 100644 --- a/theme/custom_corners/user_styles.css +++ b/theme/custom_corners/user_styles.css @@ -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; @@ -1083,4 +1083,4 @@ body.grade-report-grader table#user-grades td.cat { } body.grade-report-grader table#user-grades td.course { font-weight: bold; -} \ No newline at end of file +} diff --git a/theme/standard/styles_layout.css b/theme/standard/styles_layout.css index 5f1d398fca..94c203ec5c 100644 --- a/theme/standard/styles_layout.css +++ b/theme/standard/styles_layout.css @@ -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,53 +1803,71 @@ 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; - float: right; + padding: 5px 0; +} +.weekscss .left, +.topicscss .left { + float: left; +} +.weekscss .right, +.topicscss .right { + float: right; text-align:center; } @@ -4139,4 +4160,4 @@ wikiadminactions { background: #eee; border: 1px dashed #ddd; padding: 3px; -} \ No newline at end of file +} -- 2.39.5