Commit d46ff292 authored by Andrew Nicols's avatar Andrew Nicols
Browse files

Merge branch 'MDL-71727-master-v03' of git://github.com/ferranrecio/moodle

parents a8268e65 9abf7e1a
......@@ -58,6 +58,24 @@ export default class extends BaseComponent {
// Drag and drop methods.
/**
* The element drop start hook.
*
* @param {Object} dropdata the dropdata
*/
dragStart(dropdata) {
this.reactive.dispatch('cmDrag', [dropdata.id], true);
}
/**
* The element drop end hook.
*
* @param {Object} dropdata the dropdata
*/
dragEnd(dropdata) {
this.reactive.dispatch('cmDrag', [dropdata.id], false);
}
/**
* Get the draggable data of this component.
*
......
......@@ -80,6 +80,24 @@ export default class extends BaseComponent {
// Drag and drop methods.
/**
* The element drop start hook.
*
* @param {Object} dropdata the dropdata
*/
dragStart(dropdata) {
this.reactive.dispatch('sectionDrag', [dropdata.id], true);
}
/**
* The element drop end hook.
*
* @param {Object} dropdata the dropdata
*/
dragEnd(dropdata) {
this.reactive.dispatch('sectionDrag', [dropdata.id], false);
}
/**
* Validate if the drop data can be dropped over the component.
*
......
......@@ -73,6 +73,24 @@ export default class extends BaseComponent {
// Drag and drop methods.
/**
* The element drop start hook.
*
* @param {Object} dropdata the dropdata
*/
dragStart(dropdata) {
this.reactive.dispatch('sectionDrag', [dropdata.id], true);
}
/**
* The element end start hook.
*
* @param {Object} dropdata the dropdata
*/
dragEnd(dropdata) {
this.reactive.dispatch('sectionDrag', [dropdata.id], false);
}
/**
* Get the draggable data of this component.
*
......
......@@ -96,6 +96,39 @@ export default class {
stateManager.processUpdates(updates);
}
/**
* Mark or unmark course modules as dragging.
*
* @param {StateManager} stateManager the current state manager
* @param {array} cmIds the list of course modules ids
* @param {bool} dragValue the new dragging value
*/
cmDrag(stateManager, cmIds, dragValue) {
this._setElementsValue(stateManager, 'cm', cmIds, 'dragging', dragValue);
}
/**
* Mark or unmark course sections as dragging.
*
* @param {StateManager} stateManager the current state manager
* @param {array} sectionIds the list of section ids
* @param {bool} dragValue the new dragging value
*/
sectionDrag(stateManager, sectionIds, dragValue) {
this._setElementsValue(stateManager, 'section', sectionIds, 'dragging', dragValue);
}
_setElementsValue(stateManager, name, ids, fieldName, newValue) {
stateManager.setReadOnly(false);
ids.forEach((id) => {
const element = stateManager.get(name, id);
if (element) {
element[fieldName] = newValue;
}
});
stateManager.setReadOnly(true);
}
/**
* Get updated state data related to some cm ids.
*
......
......@@ -34,6 +34,14 @@ export default class Component extends DndCmItem {
create() {
// Optional component name for debugging.
this.name = 'courseindex_cm';
// Default query selectors.
this.selectors = {
CM_NAME: `[data-for='cm_name']`,
};
// Default classes to toggle on refresh.
this.classes = {
CMHIDDEN: 'dimmed',
};
// We need our id to watch specific events.
this.id = this.element.dataset.id;
}
......@@ -67,7 +75,20 @@ export default class Component extends DndCmItem {
getWatchers() {
return [
{watch: `cm[${this.id}]:deleted`, handler: this.remove},
{watch: `cm[${this.id}]:updated`, handler: this._refreshCm},
];
}
/**
* Update a course index cm using the state information.
*
* @param {Object} details the update details.
*/
_refreshCm({element}) {
// Update classes.
this.element.classList.toggle(this.classes.CMHIDDEN, !element.visible);
this.getElement(this.selectors.CM_NAME).innerHTML = element.name;
this.element.classList.toggle(this.classes.DRAGGING, element.dragging ?? false);
}
}
......@@ -36,11 +36,8 @@ export default class Component extends BaseComponent {
// Default query selectors.
this.selectors = {
SECTION: `[data-for='section']`,
SECTION_ITEM: `[data-for='section_item']`,
SECTION_TITLE: `[data-for='section_title']`,
SECTION_CMLIST: `[data-for='cmlist']`,
CM: `[data-for='cm']`,
CM_NAME: `[data-for='cm_name']`,
TOGGLER: `[data-action="togglecourseindexsection"]`,
COLLAPSE: `[data-toggle="collapse"]`,
};
......@@ -91,8 +88,6 @@ export default class Component extends BaseComponent {
getWatchers() {
return [
{watch: `section:updated`, handler: this._refreshSection},
{watch: `cm:updated`, handler: this._refreshCm},
{watch: `cm:created`, handler: this._createCm},
{watch: `cm:deleted`, handler: this._deleteCm},
// Sections and cm sorting.
......@@ -119,41 +114,6 @@ export default class Component extends BaseComponent {
}
}
/**
* Update a course index section using the state information.
*
* @param {Object} details the update details.
*/
_refreshSection({element}) {
// Find the element.
const target = this.sections[element.id];
if (!target) {
throw new Error(`Unkown section with ID ${element.id}`);
}
// Update classes.
const sectionitem = target.querySelector(this.selectors.SECTION_ITEM);
sectionitem.classList.toggle(this.classes.SECTIONHIDDEN, !element.visible);
target.classList.toggle(this.classes.SECTIONCURRENT, element.current);
// Update title.
target.querySelector(this.selectors.SECTION_TITLE).innerHTML = element.title;
}
/**
* Update a course index cm using the state information.
*
* @param {Object} details the update details.
*/
_refreshCm({element}) {
// Find the element.
const target = this.cms[element.id];
if (!target) {
throw new Error(`Unkown course module with ID ${element.id}`);
}
// Update classes.
target.classList.toggle(this.classes.CMHIDDEN, !element.visible);
target.querySelector(this.selectors.CM_NAME).innerHTML = element.name;
}
/**
* Create a newcm instance.
*
......
......@@ -38,8 +38,17 @@ export default class Component extends DndSection {
// Default query selectors.
this.selectors = {
SECTION_ITEM: `[data-for='section_item']`,
SECTION_TITLE: `[data-for='section_title']`,
CM_LAST: `[data-for="cm"]:last-child`,
};
// Default classes to toggle on refresh.
this.classes = {
SECTIONHIDDEN: 'dimmed',
SECTIONCURRENT: 'current',
};
// We need our id to watch specific events.
this.id = this.element.dataset.id;
}
/**
......@@ -75,6 +84,17 @@ export default class Component extends DndSection {
}
}
/**
* Component watchers.
*
* @returns {Array} of watchers
*/
getWatchers() {
return [
{watch: `section[${this.id}]:updated`, handler: this._refreshSection},
];
}
/**
* Get the last CM element of that section.
*
......@@ -83,4 +103,19 @@ export default class Component extends DndSection {
getLastCm() {
return this.getElement(this.selectors.CM_LAST);
}
/**
* Update a course index section using the state information.
*
* @param {Object} details the update details.
*/
_refreshSection({element}) {
// Update classes.
const sectionitem = this.getElement(this.selectors.SECTION_ITEM);
sectionitem.classList.toggle(this.classes.SECTIONHIDDEN, !element.visible);
this.element.classList.toggle(this.classes.SECTIONCURRENT, element.current);
this.element.classList.toggle(this.classes.DRAGGING, element.dragging ?? false);
// Update title.
this.getElement(this.selectors.SECTION_TITLE).innerHTML = element.title;
}
}
Supports Markdown
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