Neill Magill
1c45c9200a
Before this change when moving a section via drag and drop the aria-label for the section was not being updated neither was the title on the drag handle. The result was the the drop menu on keyboard drag and drop displayed the wrong information after a section was moved.
100 lines
3.1 KiB
JavaScript
100 lines
3.1 KiB
JavaScript
// Javascript functions for Weeks course format
|
|
|
|
M.course = M.course || {};
|
|
|
|
M.course.format = M.course.format || {};
|
|
|
|
/**
|
|
* Get sections config for this format
|
|
*
|
|
* The section structure is:
|
|
* <ul class="weeks">
|
|
* <li class="section">...</li>
|
|
* <li class="section">...</li>
|
|
* ...
|
|
* </ul>
|
|
*
|
|
* @return {object} section list configuration
|
|
*/
|
|
M.course.format.get_config = function() {
|
|
return {
|
|
container_node : 'ul',
|
|
container_class : 'weeks',
|
|
section_node : 'li',
|
|
section_class : 'section'
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Swap section
|
|
*
|
|
* @param {YUI} Y YUI3 instance
|
|
* @param {string} node1 node to swap to
|
|
* @param {string} node2 node to swap with
|
|
* @return {NodeList} section list
|
|
*/
|
|
M.course.format.swap_sections = function(Y, node1, node2) {
|
|
var CSS = {
|
|
COURSECONTENT : 'course-content',
|
|
SECTIONADDMENUS : 'section_add_menus'
|
|
};
|
|
|
|
var sectionlist = Y.Node.all('.'+CSS.COURSECONTENT+' '+M.course.format.get_section_selector(Y));
|
|
// Swap menus.
|
|
sectionlist.item(node1).one('.'+CSS.SECTIONADDMENUS).swap(sectionlist.item(node2).one('.'+CSS.SECTIONADDMENUS));
|
|
}
|
|
|
|
/**
|
|
* Process sections after ajax response
|
|
*
|
|
* @param {YUI} Y YUI3 instance
|
|
* @param {NodeList} sectionlist of sections
|
|
* @param {array} response ajax response
|
|
* @param {string} sectionfrom first affected section
|
|
* @param {string} sectionto last affected section
|
|
* @return void
|
|
*/
|
|
M.course.format.process_sections = function(Y, sectionlist, response, sectionfrom, sectionto) {
|
|
var CSS = {
|
|
SECTIONNAME : 'sectionname'
|
|
},
|
|
SELECTORS = {
|
|
SECTIONLEFTSIDE : '.left .section-handle .icon'
|
|
};
|
|
|
|
if (response.action == 'move') {
|
|
// If moving up swap around 'sectionfrom' and 'sectionto' so the that loop operates.
|
|
if (sectionfrom > sectionto) {
|
|
var temp = sectionto;
|
|
sectionto = sectionfrom;
|
|
sectionfrom = temp;
|
|
}
|
|
|
|
// Update titles and move icons in all affected sections.
|
|
var ele, str, stridx, newstr;
|
|
|
|
for (var i = sectionfrom; i <= sectionto; i++) {
|
|
// Update section title.
|
|
var content = Y.Node.create('<span>' + response.sectiontitles[i] + '</span>');
|
|
sectionlist.item(i).all('.'+CSS.SECTIONNAME).setHTML(content);
|
|
|
|
// Update the drag handle.
|
|
ele = sectionlist.item(i).one(SELECTORS.SECTIONLEFTSIDE).ancestor('.section-handle');
|
|
str = ele.getAttribute('title');
|
|
stridx = str.lastIndexOf(' ');
|
|
newstr = str.substr(0, stridx +1) + i;
|
|
ele.setAttribute('title', newstr);
|
|
// Update the aria-label for the section.
|
|
sectionlist.item(i).setAttribute('aria-label', content.get('innerText').trim());
|
|
|
|
// Remove the current class as section has been moved.
|
|
sectionlist.item(i).removeClass('current');
|
|
}
|
|
// If there is a current section, apply corresponding class in order to highlight it.
|
|
if (response.current !== -1) {
|
|
// Add current class to the required section.
|
|
sectionlist.item(response.current).addClass('current');
|
|
}
|
|
}
|
|
}
|