Skip to content
Snippets Groups Projects
Commit deab6d95 authored by John Hoopes's avatar John Hoopes
Browse files

[UWMOODLE-532] Updating block to be responsive.

parent 20498607
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
block_course_overview_uwmoodle.php
+ 11
− 0
View file @ deab6d95
...@@ -39,6 +39,17 @@ class block_course_overview_uwmoodle extends block_base { ...@@ -39,6 +39,17 @@ class block_course_overview_uwmoodle extends block_base {
$this->title = get_string('pluginname', 'block_course_overview_uwmoodle'); $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 const TERM_OTHER = 0; // our "term_code" for non-timetable classes
/** /**
......
js/course_overview_uwmoodle.js 0 → 100644
+ 15
− 0
View file @ deab6d95
$(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
module.js deleted 100644 → 0
+ 0
− 141
View file @ 20498607
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);
};
renderer.php
+ 26
− 83
View file @ deab6d95
...@@ -38,6 +38,9 @@ defined('MOODLE_INTERNAL') || die; ...@@ -38,6 +38,9 @@ defined('MOODLE_INTERNAL') || die;
*/ */
class block_course_overview_uwmoodle_renderer extends plugin_renderer_base { 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 * Generate course_block containing term courses
* *
...@@ -50,9 +53,6 @@ class block_course_overview_uwmoodle_renderer extends plugin_renderer_base { ...@@ -50,9 +53,6 @@ class block_course_overview_uwmoodle_renderer extends plugin_renderer_base {
$html = ''; $html = '';
$html .= $this->begin_course_block(get_string('courses', 'block_course_overview_uwmoodle'), 'uwmm_mycourses_block'); $html .= $this->begin_course_block(get_string('courses', 'block_course_overview_uwmoodle'), 'uwmm_mycourses_block');
$termcodes = array_keys($terms); $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 .= html_writer::start_tag('div', array('class' => 'rhs'));
$html .= $this->course_overview_allterms($terms, $overviews, $selectedterm); $html .= $this->course_overview_allterms($terms, $overviews, $selectedterm);
$html .= html_writer::end_tag('div'); $html .= html_writer::end_tag('div');
...@@ -88,24 +88,15 @@ class block_course_overview_uwmoodle_renderer extends plugin_renderer_base { ...@@ -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')); $html .= html_writer::start_tag('div', array('class' => 'courselistcontainer', 'id' => 'uwmm_terms_content'));
foreach ($terms as $termcode => $courses) { 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); $termstr = block_course_overview_uwmoodle_get_term_name($termcode);
$title = get_string('mycoursesinterm', 'block_course_overview_uwmoodle', $termstr); $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 .= $this->output->heading($title, 2, 'termname');
$html .= html_writer::end_tag('div');
$html .= $this->course_overview($courses, $overviews, $termcode); $html .= $this->course_overview($courses, $overviews, $termcode);
$html .= html_writer::end_tag('div');
} }
$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; return $html;
} }
...@@ -120,7 +111,7 @@ class block_course_overview_uwmoodle_renderer extends plugin_renderer_base { ...@@ -120,7 +111,7 @@ class block_course_overview_uwmoodle_renderer extends plugin_renderer_base {
*/ */
protected function course_overview($courses, $overviews, $termcode) { protected function course_overview($courses, $overviews, $termcode) {
$html = ''; $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)) { if (empty($courses)) {
$html .= $this->output->box_start('coursebox'); $html .= $this->output->box_start('coursebox');
$html .= $this->output->box(get_string('nocourses','block_course_overview_uwmoodle'), 'notify'); $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 { ...@@ -228,6 +219,22 @@ class block_course_overview_uwmoodle_renderer extends plugin_renderer_base {
global $CFG; global $CFG;
$output = html_writer::tag('a', get_string("fulllistofcourses"), array('href' => "$CFG->wwwroot/course/index.php")); $output = html_writer::tag('a', get_string("fulllistofcourses"), array('href' => "$CFG->wwwroot/course/index.php"));
$output .= ' ...'; $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; return $output;
} }
...@@ -251,8 +258,11 @@ class block_course_overview_uwmoodle_renderer extends plugin_renderer_base { ...@@ -251,8 +258,11 @@ class block_course_overview_uwmoodle_renderer extends plugin_renderer_base {
$icontext .= get_string("activityoverview", 'block_course_overview_uwmoodle', $modulename); $icontext .= get_string("activityoverview", 'block_course_overview_uwmoodle', $modulename);
} }
// Add collapsible region with overview text in it. // Create activity overview section
$output .= $this->collapsible_region($overview[$module], '', 'uwmm_region_'.$id.'_'.$cid.'_'.$module, $icontext, '', true); $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'); $output .= html_writer::end_tag('div');
} }
...@@ -260,73 +270,6 @@ class block_course_overview_uwmoodle_renderer extends plugin_renderer_base { ...@@ -260,73 +270,6 @@ class block_course_overview_uwmoodle_renderer extends plugin_renderer_base {
return $output; 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 * Cretes html for welcome area
......
styles.css
+ 2
− 2
View file @ deab6d95
...@@ -63,7 +63,7 @@ ...@@ -63,7 +63,7 @@
z-index: 1; z-index: 1;
} }
.block_course_overview_uwmoodle .rhs { .block_course_overview_uwmoodle .rhs {
border-left: 10em solid #E3DFD4; /*border-left: 10em solid #E3DFD4;*/
} }
.block_course_overview_uwmoodle .courselistcontainer { .block_course_overview_uwmoodle .courselistcontainer {
...@@ -122,7 +122,7 @@ ...@@ -122,7 +122,7 @@
} }
#uwmm_mycourses_block .courselistcontainer { #uwmm_mycourses_block .courselistcontainer {
min-height: 14.56em; /*min-height: 14.56em;*/
} }
#uwmm_othercourses_block .courselistcontainer { #uwmm_othercourses_block .courselistcontainer {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment