diff --git a/block_course_overview_uwmoodle.php b/block_course_overview_uwmoodle.php
index 6ec5f7dc79caf473c1ed0367a7b1766357ab0dbc..215597db931998abdc068a48563a9cf21c9babf5 100644
--- a/block_course_overview_uwmoodle.php
+++ b/block_course_overview_uwmoodle.php
@@ -39,6 +39,17 @@ class block_course_overview_uwmoodle extends block_base {
$this->title = get_string('pluginname', 'block_course_overview_uwmoodle');
}
+ /**
+ * Require jQuery and jQuery ui plugins for rendering the block
+ */
+ public function get_required_javascript() {
+ parent::get_required_javascript();
+ $this->page->requires->jquery();
+ $this->page->requires->jquery_plugin('ui');
+ $this->page->requires->jquery_plugin('ui-css');
+ $this->page->requires->js('/blocks/course_overview_uwmoodle/js/course_overview_uwmoodle.js');
+ }
+
const TERM_OTHER = 0; // our "term_code" for non-timetable classes
/**
diff --git a/js/course_overview_uwmoodle.js b/js/course_overview_uwmoodle.js
new file mode 100644
index 0000000000000000000000000000000000000000..9c7fa203bfd87a550ea76092edf549a283983e0b
--- /dev/null
+++ b/js/course_overview_uwmoodle.js
@@ -0,0 +1,15 @@
+
+$(document).ready(function(){
+ $('#uwmm_terms_content').accordion({ header: "h2", heightStyle: "content"});
+
+ $.each(window.uwmm_course_overviewids, function(index, value){
+ $('#' + value + '_contents').hide();
+ $('#' + value + '_title > a').click(function(e){
+ e.preventDefault();
+ });
+
+ $('#' + value + '_title').click(function(e){
+ $('#' + value + '_contents').slideToggle();
+ });
+ });
+});
\ No newline at end of file
diff --git a/module.js b/module.js
deleted file mode 100644
index 6afcf71f745d9764895f093a262291eb5ef6b404..0000000000000000000000000000000000000000
--- a/module.js
+++ /dev/null
@@ -1,141 +0,0 @@
-M.block_course_overview_uwmoodle = {}
-
-/**
- * Init a collapsible region, see print_collapsible_region in weblib.php
- * @param {YUI} Y YUI3 instance with all libraries loaded
- * @param {String} id the HTML id for the div.
- * @param {String} userpref the user preference that records the state of this box. false if none.
- * @param {String} strtooltip
- */
-M.block_course_overview_uwmoodle.collapsible = function(Y, id, userpref, strtooltip) {
- if (userpref) {
- M.block_course_overview_uwmoodle.userpref = true;
- }
- Y.use('anim', function(Y) {
- new M.block_course_overview_uwmoodle.CollapsibleRegion(Y, id, userpref, strtooltip);
- });
-};
-
-/**
- * Object to handle a collapsible region : instantiate and forget styled object
- *
- * @class
- * @constructor
- * @param {YUI} Y YUI3 instance with all libraries loaded
- * @param {String} id The HTML id for the div.
- * @param {String} userpref The user preference that records the state of this box. false if none.
- * @param {String} strtooltip
- */
-M.block_course_overview_uwmoodle.CollapsibleRegion = function(Y, id, userpref, strtooltip) {
- // Record the pref name
- this.userpref = userpref;
-
- // Find the divs in the document.
- this.div = Y.one('#'+id);
-
- // Get the caption for the collapsible region
- var caption = this.div.one('#'+id + '_caption');
- caption.setAttribute('title', strtooltip);
-
- // Create a link
- var a = Y.Node.create('<a href="#"></a>');
- // Create a local scoped lamba function to move nodes to a new link
- var movenode = function(node){
- node.remove();
- a.append(node);
- };
- // Apply the lamba function on each of the captions child nodes
- caption.get('children').each(movenode, this);
- caption.prepend(a);
-
- // Get the height of the div at this point before we shrink it if required
- var height = this.div.get('offsetHeight');
- if (this.div.hasClass('collapsed')) {
- // Shrink the div as it is collapsed by default
- this.div.setStyle('height', caption.get('offsetHeight')+'px');
- }
-
- // Create the animation.
- var animation = new Y.Anim({
- node: this.div,
- duration: 0.3,
- easing: Y.Easing.easeBoth,
- to: {height:caption.get('offsetHeight')},
- from: {height:height}
- });
-
- // Handler for the animation finishing.
- animation.on('end', function() {
- this.div.toggleClass('collapsed');
- }, this);
-
- // Hook up the event handler.
- caption.on('click', function(e, animation) {
- e.preventDefault();
- // Animate to the appropriate size.
- if (animation.get('running')) {
- animation.stop();
- }
- animation.set('reverse', this.div.hasClass('collapsed'));
- // Update the user preference.
- if (this.userpref) {
- M.util.set_user_preference(this.userpref, !this.div.hasClass('collapsed'));
- }
- animation.run();
- }, this, animation);
-};
-
-M.block_course_overview_uwmoodle.userpref = false;
-
-/**
- * The user preference that stores the state of this box.
- * @property userpref
- * @type String
- */
-M.block_course_overview_uwmoodle.CollapsibleRegion.prototype.userpref = null;
-
-/**
- * The key divs that make up this
- * @property div
- * @type Y.Node
- */
-M.block_course_overview_uwmoodle.CollapsibleRegion.prototype.div = null;
-
-/**
- * The key divs that make up this
- * @property icon
- * @type Y.Node
- */
-M.block_course_overview_uwmoodle.CollapsibleRegion.prototype.icon = null;
-
-M.block_course_overview_uwmoodle.TermSelector = function(Y) {
-
- // Find the selector div in the document.
- var selector = Y.one('#uwmm_terms');
-
- // Find all the content nodes.
- var contentnodes = Y.all('#uwmm_terms_content div.courselist');
-
- var onClick = function(e) {
- var content = Y.one('#'+e.currentTarget.get('id')+'_courses');
- if (content) {
- selector.all('.active').each(function(e) {e.removeClass('active');});
- e.currentTarget.addClass('active'); // e.currentTarget === li
-
- contentnodes.each(function(e) {e.addClass('hidden');});
- content.removeClass('hidden');
-
- // Stop the event's default behavior
- e.preventDefault();
-
- // Stop the event from bubbling up the DOM tree
- e.stopPropagation();
- }
- };
-
- selector.delegate('click', onClick, 'li');
-};
-
-M.block_course_overview_uwmoodle.termselector = function(Y) {
- new M.block_course_overview_uwmoodle.TermSelector(Y);
-};
diff --git a/renderer.php b/renderer.php
index 0ed2223200836299fc08a57f873a391844253251..6c1bdf574b6e951c12ee1b4e774a392b4204696a 100644
--- a/renderer.php
+++ b/renderer.php
@@ -38,6 +38,9 @@ defined('MOODLE_INTERNAL') || die;
*/
class block_course_overview_uwmoodle_renderer extends plugin_renderer_base {
+ /** @var array $overviewids hold all activity overviewids used to write js variable */
+ public $overviewids;
+
/**
* Generate course_block containing term courses
*
@@ -50,9 +53,6 @@ class block_course_overview_uwmoodle_renderer extends plugin_renderer_base {
$html = '';
$html .= $this->begin_course_block(get_string('courses', 'block_course_overview_uwmoodle'), 'uwmm_mycourses_block');
$termcodes = array_keys($terms);
- $html .= html_writer::start_tag('div', array('class' => 'lhs'));
- $html .= $this->term_list($termcodes, $selectedterm);
- $html .= html_writer::end_tag('div');
$html .= html_writer::start_tag('div', array('class' => 'rhs'));
$html .= $this->course_overview_allterms($terms, $overviews, $selectedterm);
$html .= html_writer::end_tag('div');
@@ -88,24 +88,15 @@ class block_course_overview_uwmoodle_renderer extends plugin_renderer_base {
$html .= html_writer::start_tag('div', array('class' => 'courselistcontainer', 'id' => 'uwmm_terms_content'));
foreach ($terms as $termcode => $courses) {
- if ($termcode != $selectedterm) {
- $hidden = 'hidden';
- } else {
- $hidden = '';
- }
- $html .= html_writer::start_tag('div', array('class' => 'courselist '.$hidden, 'id' => 'uwmm_term_'.$termcode.'_courses'));
+
$termstr = block_course_overview_uwmoodle_get_term_name($termcode);
$title = get_string('mycoursesinterm', 'block_course_overview_uwmoodle', $termstr);
- $html .= html_writer::start_tag('div', array('class' => 'title'));
$html .= $this->output->heading($title, 2, 'termname');
- $html .= html_writer::end_tag('div');
$html .= $this->course_overview($courses, $overviews, $termcode);
- $html .= html_writer::end_tag('div');
}
$html .= html_writer::end_tag('div');
- $this->page->requires->js_init_call('M.block_course_overview_uwmoodle.termselector');
return $html;
}
@@ -120,7 +111,7 @@ class block_course_overview_uwmoodle_renderer extends plugin_renderer_base {
*/
protected function course_overview($courses, $overviews, $termcode) {
$html = '';
- $html .= html_writer::start_tag('div', array('class' => 'courselistcontainer'));
+ $html .= html_writer::start_tag('div', array('class' => 'courselistcontainer', 'id' => $termcode . '_courses'));
if (empty($courses)) {
$html .= $this->output->box_start('coursebox');
$html .= $this->output->box(get_string('nocourses','block_course_overview_uwmoodle'), 'notify');
@@ -228,6 +219,22 @@ class block_course_overview_uwmoodle_renderer extends plugin_renderer_base {
global $CFG;
$output = html_writer::tag('a', get_string("fulllistofcourses"), array('href' => "$CFG->wwwroot/course/index.php"));
$output .= ' ...';
+ $output .= $this->write_overviewids();
+ return $output;
+ }
+
+ /**
+ * Write uwmm_course_overviewids js variable with the activity overview id strings for js to manipulate display
+ * of dom elements
+ *
+ * @return string HTMl string of script that writes the uwmm_course_overviewids
+ */
+ public function write_overviewids(){
+
+ $output = '';
+ $output .= '<script type="text/javascript">';
+ $output .= 'var uwmm_course_overviewids = ' . json_encode($this->overviewids) . ';';
+ $output .= '</script>';
return $output;
}
@@ -251,8 +258,11 @@ class block_course_overview_uwmoodle_renderer extends plugin_renderer_base {
$icontext .= get_string("activityoverview", 'block_course_overview_uwmoodle', $modulename);
}
- // Add collapsible region with overview text in it.
- $output .= $this->collapsible_region($overview[$module], '', 'uwmm_region_'.$id.'_'.$cid.'_'.$module, $icontext, '', true);
+ // Create activity overview section
+ $output .= html_writer::tag('div', $icontext, array('id'=> 'uwmm_region_'.$id.'_'.$cid.'_'.$module . '_title'));
+ $output .= html_writer::tag('div', $overview[$module], array('id'=>'uwmm_region_'.$id.'_'.$cid.'_'.$module . '_contents'));
+ // Add overviewid to array to print out ids as an array for javascript
+ $this->overviewids[] = 'uwmm_region_'.$id.'_'.$cid.'_'.$module;
$output .= html_writer::end_tag('div');
}
@@ -260,73 +270,6 @@ class block_course_overview_uwmoodle_renderer extends plugin_renderer_base {
return $output;
}
- /**
- * Creates collapsable region
- *
- * @param string $contents existing contents
- * @param string $classes class names added to the div that is output.
- * @param string $id id added to the div that is output. Must not be blank.
- * @param string $caption text displayed at the top. Clicking on this will cause the region to expand or contract.
- * @param string $userpref the name of the user preference that stores the user's preferred default state.
- * (May be blank if you do not wish the state to be persisted.
- * @param bool $default Initial collapsed state to use if the user_preference it not set.
- * @return bool if true, return the HTML as a string, rather than printing it.
- */
- protected function collapsible_region($contents, $classes, $id, $caption, $userpref = '', $default = false) {
- $output = $this->collapsible_region_start($classes, $id, $caption, $userpref, $default);
- $output .= $contents;
- $output .= $this->collapsible_region_end();
-
- return $output;
- }
-
- /**
- * Print (or return) the start of a collapsible region, that has a caption that can
- * be clicked to expand or collapse the region. If JavaScript is off, then the region
- * will always be expanded.
- *
- * @param string $classes class names added to the div that is output.
- * @param string $id id added to the div that is output. Must not be blank.
- * @param string $caption text displayed at the top. Clicking on this will cause the region to expand or contract.
- * @param string $userpref the name of the user preference that stores the user's preferred default state.
- * (May be blank if you do not wish the state to be persisted.
- * @param bool $default Initial collapsed state to use if the user_preference it not set.
- * @return bool if true, return the HTML as a string, rather than printing it.
- */
- protected function collapsible_region_start($classes, $id, $caption, $userpref = '', $default = false) {
- // Work out the initial state.
- if (!empty($userpref) and is_string($userpref)) {
- user_preference_allow_ajax_update($userpref, PARAM_BOOL);
- $collapsed = get_user_preferences($userpref, $default);
- } else {
- $collapsed = $default;
- $userpref = false;
- }
-
- if ($collapsed) {
- $classes .= ' collapsed';
- }
-
- $output = '';
- $output .= '<div id="' . $id . '" class="collapsibleregion ' . $classes . '">';
- $output .= '<div id="' . $id . '_sizer">';
- $output .= '<div id="' . $id . '_caption" class="collapsibleregioncaption">';
- $output .= $caption . ' ';
- $output .= '</div><div id="' . $id . '_inner" class="collapsibleregioninner">';
- $this->page->requires->js_init_call('M.block_course_overview_uwmoodle.collapsible', array($id, $userpref, get_string('clicktohideshow')));
-
- return $output;
- }
-
- /**
- * Close a region started with print_collapsible_region_start.
- *
- * @return string return the HTML as a string, rather than printing it.
- */
- protected function collapsible_region_end() {
- $output = '</div></div></div>';
- return $output;
- }
/**
* Cretes html for welcome area
diff --git a/styles.css b/styles.css
index 18772b2e823ee0a9cc471dbcedef74b4c0b1763b..1be4c1276f3ab3c53898603908787280f1c334f3 100644
--- a/styles.css
+++ b/styles.css
@@ -63,7 +63,7 @@
z-index: 1;
}
.block_course_overview_uwmoodle .rhs {
- border-left: 10em solid #E3DFD4;
+ /*border-left: 10em solid #E3DFD4;*/
}
.block_course_overview_uwmoodle .courselistcontainer {
@@ -122,7 +122,7 @@
}
#uwmm_mycourses_block .courselistcontainer {
- min-height: 14.56em;
+ /*min-height: 14.56em;*/
}
#uwmm_othercourses_block .courselistcontainer {