From 15034e710016cede8f6bcca5361a3382f2037706 Mon Sep 17 00:00:00 2001 From: Stefan Hanauska Date: Tue, 3 Jan 2023 21:49:06 +0100 Subject: [PATCH] MDL-75596 course: Allow inserting activities everywhere Co-authored-by: Mathew May --- course/amd/build/activitychooser.min.js | 2 +- course/amd/build/activitychooser.min.js.map | 2 +- course/amd/src/activitychooser.js | 12 +++-- .../templates/local/content/cm.mustache | 5 +++ .../activitychooserbuttonactivity.mustache | 37 ++++++++++++++++ .../tests/behat/activity_chooser_plus.feature | 42 ++++++++++++++++++ course/tests/behat/behat_course.php | 4 +- lang/en/moodle.php | 1 + theme/boost/scss/moodle/course.scss | 44 +++++++++++++++++++ theme/boost/style/moodle.css | 36 +++++++++++++++ theme/classic/style/moodle.css | 36 +++++++++++++++ 11 files changed, 214 insertions(+), 7 deletions(-) create mode 100644 course/templates/activitychooserbuttonactivity.mustache create mode 100644 course/tests/behat/activity_chooser_plus.feature diff --git a/course/amd/build/activitychooser.min.js b/course/amd/build/activitychooser.min.js index 62971cc3956..67290cc9d77 100644 --- a/course/amd/build/activitychooser.min.js +++ b/course/amd/build/activitychooser.min.js @@ -5,6 +5,6 @@ define("core_course/activitychooser",["exports","core_course/local/activitychoos * @module core_course/activitychooser * @copyright 2020 Mathew May * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later - */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.init=void 0,ChooserDialogue=_interopRequireWildcard(ChooserDialogue),Repository=_interopRequireWildcard(Repository),_selectors=_interopRequireDefault(_selectors),_custom_interaction_events=_interopRequireDefault(_custom_interaction_events),Templates=_interopRequireWildcard(Templates),ModalFactory=_interopRequireWildcard(ModalFactory),_pending=_interopRequireDefault(_pending);_exports.init=(courseId,chooserConfig)=>{const pendingPromise=new _pending.default;registerListenerEvents(courseId,chooserConfig),pendingPromise.resolve()};const registerListenerEvents=(courseId,chooserConfig)=>{const events=["click",_custom_interaction_events.default.events.activate,_custom_interaction_events.default.events.keyboardActivate],fetchModuleData=(()=>{let innerPromise=null;return()=>(innerPromise||(innerPromise=new Promise((resolve=>{resolve(Repository.activityModules(courseId))}))),innerPromise)})(),fetchFooterData=(()=>{let footerInnerPromise=null;return sectionId=>(footerInnerPromise||(footerInnerPromise=new Promise((resolve=>{resolve(Repository.fetchFooterData(courseId,sectionId))}))),footerInnerPromise)})();_custom_interaction_events.default.define(document,events),events.forEach((event=>{document.addEventListener(event,(async e=>{if(e.target.closest(_selectors.default.elements.sectionmodchooser)){let caller;const sectionDiv=e.target.closest(_selectors.default.elements.section),button=e.target.closest(_selectors.default.elements.sectionmodchooser);let bodyPromiseResolver;caller=null!==sectionDiv&§ionDiv.hasAttribute("data-sectionid")?sectionDiv:button;const bodyPromise=new Promise((resolve=>{bodyPromiseResolver=resolve})),footerData=await fetchFooterData(caller.dataset.sectionid),sectionModal=buildModal(bodyPromise,footerData),data=await fetchModuleData().catch((async e=>{const errorTemplateData={errormessage:e.message};bodyPromiseResolver(await Templates.render("core_course/local/activitychooser/error",errorTemplateData))}));if(!data)return;const builtModuleData=sectionIdMapper(data,caller.dataset.sectionid,caller.dataset.sectionreturnid);ChooserDialogue.displayChooser(sectionModal,builtModuleData,partiallyAppliedFavouriteManager(data,caller.dataset.sectionid),footerData),bodyPromiseResolver(await Templates.render("core_course/activitychooser",templateDataBuilder(builtModuleData,chooserConfig)))}}))}))},sectionIdMapper=(webServiceData,id,sectionreturnid)=>{const newData=JSON.parse(JSON.stringify(webServiceData));return newData.content_items.forEach((module=>{module.link+="§ion="+id+"&sr="+(null!=sectionreturnid?sectionreturnid:0)})),newData.content_items},templateDataBuilder=(data,chooserConfig)=>{let activities=[],resources=[],showAll=!0,showActivities=!1,showResources=!1;const tabMode=parseInt(chooserConfig.tabmode),favourites=data.filter((mod=>!0===mod.favourite)),recommended=data.filter((mod=>!0===mod.recommended));0!==tabMode&&2!==tabMode||1===tabMode||(activities=data.filter((mod=>0===mod.archetype)),resources=data.filter((mod=>1===mod.archetype)),showActivities=!0,showResources=!0,2===tabMode&&(showAll=!1));const favouritesFirst=!!favourites.length;return{default:data,showAll:showAll,activities:activities,showActivities:showActivities,activitiesFirst:!1===showAll&&!1===favouritesFirst,resources:resources,showResources:showResources,favourites:favourites,recommended:recommended,favouritesFirst:favouritesFirst,fallback:!0===showAll&&!1===favouritesFirst}},buildModal=(bodyPromise,footer)=>ModalFactory.create({type:ModalFactory.types.DEFAULT,title:(0,_str.get_string)("addresourceoractivity"),body:bodyPromise,footer:footer.customfootertemplate,large:!0,scrollable:!1,templateContext:{classes:"modchooser"}}).then((modal=>(modal.show(),modal))),partiallyAppliedFavouriteManager=(moduleData,sectionId)=>async(internal,favourite,modalBody)=>{const favouriteArea=modalBody.querySelector(_selectors.default.render.favourites),favouriteButtons=modalBody.querySelectorAll('[data-internal="'.concat(internal,'"] ').concat(_selectors.default.actions.optionActions.manageFavourite)),favouriteTabNav=modalBody.querySelector(_selectors.default.regions.favouriteTabNav),result=moduleData.content_items.find((_ref=>{let{name:name}=_ref;return name===internal})),newFaves={};if(result)if(favourite){result.favourite=!0,newFaves.content_items=moduleData.content_items.filter((mod=>!0===mod.favourite));const builtFaves=sectionIdMapper(newFaves,sectionId),{html:html,js:js}=await Templates.renderForPromise("core_course/local/activitychooser/favourites",{favourites:builtFaves});await Templates.replaceNodeContents(favouriteArea,html,js),Array.from(favouriteButtons).forEach((element=>{element.classList.remove("text-muted"),element.classList.add("text-primary"),element.dataset.favourited="true",element.setAttribute("aria-pressed",!0),element.firstElementChild.classList.remove("fa-star-o"),element.firstElementChild.classList.add("fa-star")})),favouriteTabNav.classList.remove("d-none")}else{result.favourite=!1;const nodeToRemove=favouriteArea.querySelector('[data-internal="'.concat(internal,'"]'));nodeToRemove.parentNode.removeChild(nodeToRemove),Array.from(favouriteButtons).forEach((element=>{element.classList.add("text-muted"),element.classList.remove("text-primary"),element.dataset.favourited="false",element.setAttribute("aria-pressed",!1),element.firstElementChild.classList.remove("fa-star"),element.firstElementChild.classList.add("fa-star-o")}));0===moduleData.content_items.filter((mod=>!0===mod.favourite)).length&&((favouriteTabNav,modalBody)=>{if(favouriteTabNav.tabIndex=-1,favouriteTabNav.classList.add("d-none"),favouriteTabNav.classList.contains("active")){favouriteTabNav.classList.remove("active"),favouriteTabNav.setAttribute("aria-selected","false"),modalBody.querySelector(_selectors.default.regions.favouriteTab).classList.remove("active");const defaultTabNav=modalBody.querySelector(_selectors.default.regions.defaultTabNav),activitiesTabNav=modalBody.querySelector(_selectors.default.regions.activityTabNav);!1===defaultTabNav.classList.contains("d-none")?(defaultTabNav.classList.add("active"),defaultTabNav.setAttribute("aria-selected","true"),defaultTabNav.tabIndex=0,defaultTabNav.focus(),modalBody.querySelector(_selectors.default.regions.defaultTab).classList.add("active")):(activitiesTabNav.classList.add("active"),activitiesTabNav.setAttribute("aria-selected","true"),activitiesTabNav.tabIndex=0,activitiesTabNav.focus(),modalBody.querySelector(_selectors.default.regions.activityTab).classList.add("active"))}})(favouriteTabNav,modalBody)}}})); + */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.init=void 0,ChooserDialogue=_interopRequireWildcard(ChooserDialogue),Repository=_interopRequireWildcard(Repository),_selectors=_interopRequireDefault(_selectors),_custom_interaction_events=_interopRequireDefault(_custom_interaction_events),Templates=_interopRequireWildcard(Templates),ModalFactory=_interopRequireWildcard(ModalFactory),_pending=_interopRequireDefault(_pending);_exports.init=(courseId,chooserConfig)=>{const pendingPromise=new _pending.default;registerListenerEvents(courseId,chooserConfig),pendingPromise.resolve()};const registerListenerEvents=(courseId,chooserConfig)=>{const events=["click",_custom_interaction_events.default.events.activate,_custom_interaction_events.default.events.keyboardActivate],fetchModuleData=(()=>{let innerPromise=null;return()=>(innerPromise||(innerPromise=new Promise((resolve=>{resolve(Repository.activityModules(courseId))}))),innerPromise)})(),fetchFooterData=(()=>{let footerInnerPromise=null;return sectionId=>(footerInnerPromise||(footerInnerPromise=new Promise((resolve=>{resolve(Repository.fetchFooterData(courseId,sectionId))}))),footerInnerPromise)})();_custom_interaction_events.default.define(document,events),events.forEach((event=>{document.addEventListener(event,(async e=>{if(e.target.closest(_selectors.default.elements.sectionmodchooser)){let caller;const sectionDiv=e.target.closest(_selectors.default.elements.section),button=e.target.closest(_selectors.default.elements.sectionmodchooser);let bodyPromiseResolver;caller=null!==sectionDiv&§ionDiv.hasAttribute("data-sectionid")?sectionDiv:button;const bodyPromise=new Promise((resolve=>{bodyPromiseResolver=resolve})),footerData=await fetchFooterData(caller.dataset.sectionid),sectionModal=buildModal(bodyPromise,footerData),data=await fetchModuleData().catch((async e=>{const errorTemplateData={errormessage:e.message};bodyPromiseResolver(await Templates.render("core_course/local/activitychooser/error",errorTemplateData))}));if(!data)return;const builtModuleData=sectionIdMapper(data,caller.dataset.sectionid,caller.dataset.sectionreturnid,caller.dataset.beforemod);ChooserDialogue.displayChooser(sectionModal,builtModuleData,partiallyAppliedFavouriteManager(data,caller.dataset.sectionid),footerData),bodyPromiseResolver(await Templates.render("core_course/activitychooser",templateDataBuilder(builtModuleData,chooserConfig)))}}))}))},sectionIdMapper=(webServiceData,id,sectionreturnid,beforemod)=>{const newData=JSON.parse(JSON.stringify(webServiceData));return newData.content_items.forEach((module=>{module.link+="§ion="+id+"&sr="+(null!=sectionreturnid?sectionreturnid:0)+"&beforemod="+(null!=beforemod?beforemod:0)})),newData.content_items},templateDataBuilder=(data,chooserConfig)=>{let activities=[],resources=[],showAll=!0,showActivities=!1,showResources=!1;const tabMode=parseInt(chooserConfig.tabmode),favourites=data.filter((mod=>!0===mod.favourite)),recommended=data.filter((mod=>!0===mod.recommended));0!==tabMode&&2!==tabMode||1===tabMode||(activities=data.filter((mod=>0===mod.archetype)),resources=data.filter((mod=>1===mod.archetype)),showActivities=!0,showResources=!0,2===tabMode&&(showAll=!1));const favouritesFirst=!!favourites.length;return{default:data,showAll:showAll,activities:activities,showActivities:showActivities,activitiesFirst:!1===showAll&&!1===favouritesFirst,resources:resources,showResources:showResources,favourites:favourites,recommended:recommended,favouritesFirst:favouritesFirst,fallback:!0===showAll&&!1===favouritesFirst}},buildModal=(bodyPromise,footer)=>ModalFactory.create({type:ModalFactory.types.DEFAULT,title:(0,_str.get_string)("addresourceoractivity"),body:bodyPromise,footer:footer.customfootertemplate,large:!0,scrollable:!1,templateContext:{classes:"modchooser"}}).then((modal=>(modal.show(),modal))),partiallyAppliedFavouriteManager=(moduleData,sectionId)=>async(internal,favourite,modalBody)=>{const favouriteArea=modalBody.querySelector(_selectors.default.render.favourites),favouriteButtons=modalBody.querySelectorAll('[data-internal="'.concat(internal,'"] ').concat(_selectors.default.actions.optionActions.manageFavourite)),favouriteTabNav=modalBody.querySelector(_selectors.default.regions.favouriteTabNav),result=moduleData.content_items.find((_ref=>{let{name:name}=_ref;return name===internal})),newFaves={};if(result)if(favourite){result.favourite=!0,newFaves.content_items=moduleData.content_items.filter((mod=>!0===mod.favourite));const builtFaves=sectionIdMapper(newFaves,sectionId),{html:html,js:js}=await Templates.renderForPromise("core_course/local/activitychooser/favourites",{favourites:builtFaves});await Templates.replaceNodeContents(favouriteArea,html,js),Array.from(favouriteButtons).forEach((element=>{element.classList.remove("text-muted"),element.classList.add("text-primary"),element.dataset.favourited="true",element.setAttribute("aria-pressed",!0),element.firstElementChild.classList.remove("fa-star-o"),element.firstElementChild.classList.add("fa-star")})),favouriteTabNav.classList.remove("d-none")}else{result.favourite=!1;const nodeToRemove=favouriteArea.querySelector('[data-internal="'.concat(internal,'"]'));nodeToRemove.parentNode.removeChild(nodeToRemove),Array.from(favouriteButtons).forEach((element=>{element.classList.add("text-muted"),element.classList.remove("text-primary"),element.dataset.favourited="false",element.setAttribute("aria-pressed",!1),element.firstElementChild.classList.remove("fa-star"),element.firstElementChild.classList.add("fa-star-o")}));0===moduleData.content_items.filter((mod=>!0===mod.favourite)).length&&((favouriteTabNav,modalBody)=>{if(favouriteTabNav.tabIndex=-1,favouriteTabNav.classList.add("d-none"),favouriteTabNav.classList.contains("active")){favouriteTabNav.classList.remove("active"),favouriteTabNav.setAttribute("aria-selected","false"),modalBody.querySelector(_selectors.default.regions.favouriteTab).classList.remove("active");const defaultTabNav=modalBody.querySelector(_selectors.default.regions.defaultTabNav),activitiesTabNav=modalBody.querySelector(_selectors.default.regions.activityTabNav);!1===defaultTabNav.classList.contains("d-none")?(defaultTabNav.classList.add("active"),defaultTabNav.setAttribute("aria-selected","true"),defaultTabNav.tabIndex=0,defaultTabNav.focus(),modalBody.querySelector(_selectors.default.regions.defaultTab).classList.add("active")):(activitiesTabNav.classList.add("active"),activitiesTabNav.setAttribute("aria-selected","true"),activitiesTabNav.tabIndex=0,activitiesTabNav.focus(),modalBody.querySelector(_selectors.default.regions.activityTab).classList.add("active"))}})(favouriteTabNav,modalBody)}}})); //# sourceMappingURL=activitychooser.min.js.map \ No newline at end of file diff --git a/course/amd/build/activitychooser.min.js.map b/course/amd/build/activitychooser.min.js.map index 5ca030905d2..22318aee779 100644 --- a/course/amd/build/activitychooser.min.js.map +++ b/course/amd/build/activitychooser.min.js.map @@ -1 +1 @@ -{"version":3,"file":"activitychooser.min.js","sources":["../src/activitychooser.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle. If not, see .\n\n/**\n * A type of dialogue used as for choosing modules in a course.\n *\n * @module core_course/activitychooser\n * @copyright 2020 Mathew May \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport * as ChooserDialogue from 'core_course/local/activitychooser/dialogue';\nimport * as Repository from 'core_course/local/activitychooser/repository';\nimport selectors from 'core_course/local/activitychooser/selectors';\nimport CustomEvents from 'core/custom_interaction_events';\nimport * as Templates from 'core/templates';\nimport * as ModalFactory from 'core/modal_factory';\nimport {get_string as getString} from 'core/str';\nimport Pending from 'core/pending';\n\n// Set up some JS module wide constants that can be added to in the future.\n\n// Tab config options.\nconst ALLACTIVITIESRESOURCES = 0;\nconst ONLYALL = 1;\nconst ACTIVITIESRESOURCES = 2;\n\n// Module types.\nconst ACTIVITY = 0;\nconst RESOURCE = 1;\n\n/**\n * Set up the activity chooser.\n *\n * @method init\n * @param {Number} courseId Course ID to use later on in fetchModules()\n * @param {Object} chooserConfig Any PHP config settings that we may need to reference\n */\nexport const init = (courseId, chooserConfig) => {\n const pendingPromise = new Pending();\n\n registerListenerEvents(courseId, chooserConfig);\n\n pendingPromise.resolve();\n};\n\n/**\n * Once a selection has been made make the modal & module information and pass it along\n *\n * @method registerListenerEvents\n * @param {Number} courseId\n * @param {Object} chooserConfig Any PHP config settings that we may need to reference\n */\nconst registerListenerEvents = (courseId, chooserConfig) => {\n const events = [\n 'click',\n CustomEvents.events.activate,\n CustomEvents.events.keyboardActivate\n ];\n\n const fetchModuleData = (() => {\n let innerPromise = null;\n\n return () => {\n if (!innerPromise) {\n innerPromise = new Promise((resolve) => {\n resolve(Repository.activityModules(courseId));\n });\n }\n\n return innerPromise;\n };\n })();\n\n const fetchFooterData = (() => {\n let footerInnerPromise = null;\n\n return (sectionId) => {\n if (!footerInnerPromise) {\n footerInnerPromise = new Promise((resolve) => {\n resolve(Repository.fetchFooterData(courseId, sectionId));\n });\n }\n\n return footerInnerPromise;\n };\n })();\n\n CustomEvents.define(document, events);\n\n // Display module chooser event listeners.\n events.forEach((event) => {\n document.addEventListener(event, async(e) => {\n if (e.target.closest(selectors.elements.sectionmodchooser)) {\n let caller;\n // We need to know who called this.\n // Standard courses use the ID in the main section info.\n const sectionDiv = e.target.closest(selectors.elements.section);\n // Front page courses need some special handling.\n const button = e.target.closest(selectors.elements.sectionmodchooser);\n\n // If we don't have a section ID use the fallback ID.\n // We always want the sectionDiv caller first as it keeps track of section ID's after DnD changes.\n // The button attribute is always just a fallback for us as the section div is not always available.\n // A YUI change could be done maybe to only update the button attribute but we are going for minimal change here.\n if (sectionDiv !== null && sectionDiv.hasAttribute('data-sectionid')) {\n // We check for attributes just in case of outdated contrib course formats.\n caller = sectionDiv;\n } else {\n caller = button;\n }\n\n // We want to show the modal instantly but loading whilst waiting for our data.\n let bodyPromiseResolver;\n const bodyPromise = new Promise(resolve => {\n bodyPromiseResolver = resolve;\n });\n\n const footerData = await fetchFooterData(caller.dataset.sectionid);\n const sectionModal = buildModal(bodyPromise, footerData);\n\n // Now we have a modal we should start fetching data.\n // If an error occurs while fetching the data, display the error within the modal.\n const data = await fetchModuleData().catch(async(e) => {\n const errorTemplateData = {\n 'errormessage': e.message\n };\n bodyPromiseResolver(await Templates.render('core_course/local/activitychooser/error', errorTemplateData));\n });\n\n // Early return if there is no module data.\n if (!data) {\n return;\n }\n\n // Apply the section id to all the module instance links.\n const builtModuleData = sectionIdMapper(data, caller.dataset.sectionid, caller.dataset.sectionreturnid);\n\n ChooserDialogue.displayChooser(\n sectionModal,\n builtModuleData,\n partiallyAppliedFavouriteManager(data, caller.dataset.sectionid),\n footerData,\n );\n\n bodyPromiseResolver(await Templates.render(\n 'core_course/activitychooser',\n templateDataBuilder(builtModuleData, chooserConfig)\n ));\n }\n });\n });\n};\n\n/**\n * Given the web service data and an ID we want to make a deep copy\n * of the WS data then add on the section ID to the addoption URL\n *\n * @method sectionIdMapper\n * @param {Object} webServiceData Our original data from the Web service call\n * @param {Number} id The ID of the section we need to append to the links\n * @param {Number|null} sectionreturnid The ID of the section return we need to append to the links\n * @return {Array} [modules] with URL's built\n */\nconst sectionIdMapper = (webServiceData, id, sectionreturnid) => {\n // We need to take a fresh deep copy of the original data as an object is a reference type.\n const newData = JSON.parse(JSON.stringify(webServiceData));\n newData.content_items.forEach((module) => {\n module.link += '§ion=' + id + '&sr=' + (sectionreturnid ?? 0);\n });\n return newData.content_items;\n};\n\n/**\n * Given an array of modules we want to figure out where & how to place them into our template object\n *\n * @method templateDataBuilder\n * @param {Array} data our modules to manipulate into a Templatable object\n * @param {Object} chooserConfig Any PHP config settings that we may need to reference\n * @return {Object} Our built object ready to render out\n */\nconst templateDataBuilder = (data, chooserConfig) => {\n // Setup of various bits and pieces we need to mutate before throwing it to the wolves.\n let activities = [];\n let resources = [];\n let showAll = true;\n let showActivities = false;\n let showResources = false;\n\n // Tab mode can be the following [All, Resources & Activities, All & Activities & Resources].\n const tabMode = parseInt(chooserConfig.tabmode);\n\n // Filter the incoming data to find favourite & recommended modules.\n const favourites = data.filter(mod => mod.favourite === true);\n const recommended = data.filter(mod => mod.recommended === true);\n\n // Both of these modes need Activity & Resource tabs.\n if ((tabMode === ALLACTIVITIESRESOURCES || tabMode === ACTIVITIESRESOURCES) && tabMode !== ONLYALL) {\n // Filter the incoming data to find activities then resources.\n activities = data.filter(mod => mod.archetype === ACTIVITY);\n resources = data.filter(mod => mod.archetype === RESOURCE);\n showActivities = true;\n showResources = true;\n\n // We want all of the previous information but no 'All' tab.\n if (tabMode === ACTIVITIESRESOURCES) {\n showAll = false;\n }\n }\n\n // Given the results of the above filters lets figure out what tab to set active.\n // We have some favourites.\n const favouritesFirst = !!favourites.length;\n // We are in tabMode 2 without any favourites.\n const activitiesFirst = showAll === false && favouritesFirst === false;\n // We have nothing fallback to show all modules.\n const fallback = showAll === true && favouritesFirst === false;\n\n return {\n 'default': data,\n showAll: showAll,\n activities: activities,\n showActivities: showActivities,\n activitiesFirst: activitiesFirst,\n resources: resources,\n showResources: showResources,\n favourites: favourites,\n recommended: recommended,\n favouritesFirst: favouritesFirst,\n fallback: fallback,\n };\n};\n\n/**\n * Given an object we want to build a modal ready to show\n *\n * @method buildModal\n * @param {Promise} bodyPromise\n * @param {String|Boolean} footer Either a footer to add or nothing\n * @return {Object} The modal ready to display immediately and render body in later.\n */\nconst buildModal = (bodyPromise, footer) => {\n return ModalFactory.create({\n type: ModalFactory.types.DEFAULT,\n title: getString('addresourceoractivity'),\n body: bodyPromise,\n footer: footer.customfootertemplate,\n large: true,\n scrollable: false,\n templateContext: {\n classes: 'modchooser'\n }\n })\n .then(modal => {\n modal.show();\n return modal;\n });\n};\n\n/**\n * A small helper function to handle the case where there are no more favourites\n * and we need to mess a bit with the available tabs in the chooser\n *\n * @method nullFavouriteDomManager\n * @param {HTMLElement} favouriteTabNav Dom node of the favourite tab nav\n * @param {HTMLElement} modalBody Our current modals' body\n */\nconst nullFavouriteDomManager = (favouriteTabNav, modalBody) => {\n favouriteTabNav.tabIndex = -1;\n favouriteTabNav.classList.add('d-none');\n // Need to set active to an available tab.\n if (favouriteTabNav.classList.contains('active')) {\n favouriteTabNav.classList.remove('active');\n favouriteTabNav.setAttribute('aria-selected', 'false');\n const favouriteTab = modalBody.querySelector(selectors.regions.favouriteTab);\n favouriteTab.classList.remove('active');\n const defaultTabNav = modalBody.querySelector(selectors.regions.defaultTabNav);\n const activitiesTabNav = modalBody.querySelector(selectors.regions.activityTabNav);\n if (defaultTabNav.classList.contains('d-none') === false) {\n defaultTabNav.classList.add('active');\n defaultTabNav.setAttribute('aria-selected', 'true');\n defaultTabNav.tabIndex = 0;\n defaultTabNav.focus();\n const defaultTab = modalBody.querySelector(selectors.regions.defaultTab);\n defaultTab.classList.add('active');\n } else {\n activitiesTabNav.classList.add('active');\n activitiesTabNav.setAttribute('aria-selected', 'true');\n activitiesTabNav.tabIndex = 0;\n activitiesTabNav.focus();\n const activitiesTab = modalBody.querySelector(selectors.regions.activityTab);\n activitiesTab.classList.add('active');\n }\n\n }\n};\n\n/**\n * Export a curried function where the builtModules has been applied.\n * We have our array of modules so we can rerender the favourites area and have all of the items sorted.\n *\n * @method partiallyAppliedFavouriteManager\n * @param {Array} moduleData This is our raw WS data that we need to manipulate\n * @param {Number} sectionId We need this to add the sectionID to the URL's in the faves area after rerender\n * @return {Function} partially applied function so we can manipulate DOM nodes easily & update our internal array\n */\nconst partiallyAppliedFavouriteManager = (moduleData, sectionId) => {\n /**\n * Curried function that is being returned.\n *\n * @param {String} internal Internal name of the module to manage\n * @param {Boolean} favourite Is the caller adding a favourite or removing one?\n * @param {HTMLElement} modalBody What we need to update whilst we are here\n */\n return async(internal, favourite, modalBody) => {\n const favouriteArea = modalBody.querySelector(selectors.render.favourites);\n\n // eslint-disable-next-line max-len\n const favouriteButtons = modalBody.querySelectorAll(`[data-internal=\"${internal}\"] ${selectors.actions.optionActions.manageFavourite}`);\n const favouriteTabNav = modalBody.querySelector(selectors.regions.favouriteTabNav);\n const result = moduleData.content_items.find(({name}) => name === internal);\n const newFaves = {};\n if (result) {\n if (favourite) {\n result.favourite = true;\n\n // eslint-disable-next-line camelcase\n newFaves.content_items = moduleData.content_items.filter(mod => mod.favourite === true);\n\n const builtFaves = sectionIdMapper(newFaves, sectionId);\n\n const {html, js} = await Templates.renderForPromise('core_course/local/activitychooser/favourites',\n {favourites: builtFaves});\n\n await Templates.replaceNodeContents(favouriteArea, html, js);\n\n Array.from(favouriteButtons).forEach((element) => {\n element.classList.remove('text-muted');\n element.classList.add('text-primary');\n element.dataset.favourited = 'true';\n element.setAttribute('aria-pressed', true);\n element.firstElementChild.classList.remove('fa-star-o');\n element.firstElementChild.classList.add('fa-star');\n });\n\n favouriteTabNav.classList.remove('d-none');\n } else {\n result.favourite = false;\n\n const nodeToRemove = favouriteArea.querySelector(`[data-internal=\"${internal}\"]`);\n\n nodeToRemove.parentNode.removeChild(nodeToRemove);\n\n Array.from(favouriteButtons).forEach((element) => {\n element.classList.add('text-muted');\n element.classList.remove('text-primary');\n element.dataset.favourited = 'false';\n element.setAttribute('aria-pressed', false);\n element.firstElementChild.classList.remove('fa-star');\n element.firstElementChild.classList.add('fa-star-o');\n });\n const newFaves = moduleData.content_items.filter(mod => mod.favourite === true);\n\n if (newFaves.length === 0) {\n nullFavouriteDomManager(favouriteTabNav, modalBody);\n }\n }\n }\n };\n};\n"],"names":["courseId","chooserConfig","pendingPromise","Pending","registerListenerEvents","resolve","events","CustomEvents","activate","keyboardActivate","fetchModuleData","innerPromise","Promise","Repository","activityModules","fetchFooterData","footerInnerPromise","sectionId","define","document","forEach","event","addEventListener","async","e","target","closest","selectors","elements","sectionmodchooser","caller","sectionDiv","section","button","bodyPromiseResolver","hasAttribute","bodyPromise","footerData","dataset","sectionid","sectionModal","buildModal","data","catch","errorTemplateData","message","Templates","render","builtModuleData","sectionIdMapper","sectionreturnid","ChooserDialogue","displayChooser","partiallyAppliedFavouriteManager","templateDataBuilder","webServiceData","id","newData","JSON","parse","stringify","content_items","module","link","activities","resources","showAll","showActivities","showResources","tabMode","parseInt","tabmode","favourites","filter","mod","favourite","recommended","archetype","favouritesFirst","length","activitiesFirst","fallback","footer","ModalFactory","create","type","types","DEFAULT","title","body","customfootertemplate","large","scrollable","templateContext","classes","then","modal","show","moduleData","internal","modalBody","favouriteArea","querySelector","favouriteButtons","querySelectorAll","actions","optionActions","manageFavourite","favouriteTabNav","regions","result","find","_ref","name","newFaves","builtFaves","html","js","renderForPromise","replaceNodeContents","Array","from","element","classList","remove","add","favourited","setAttribute","firstElementChild","nodeToRemove","parentNode","removeChild","tabIndex","contains","favouriteTab","defaultTabNav","activitiesTabNav","activityTabNav","focus","defaultTab","activityTab","nullFavouriteDomManager"],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"activitychooser.min.js","sources":["../src/activitychooser.js"],"sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle. If not, see .\n\n/**\n * A type of dialogue used as for choosing modules in a course.\n *\n * @module core_course/activitychooser\n * @copyright 2020 Mathew May \n * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport * as ChooserDialogue from 'core_course/local/activitychooser/dialogue';\nimport * as Repository from 'core_course/local/activitychooser/repository';\nimport selectors from 'core_course/local/activitychooser/selectors';\nimport CustomEvents from 'core/custom_interaction_events';\nimport * as Templates from 'core/templates';\nimport * as ModalFactory from 'core/modal_factory';\nimport {get_string as getString} from 'core/str';\nimport Pending from 'core/pending';\n\n// Set up some JS module wide constants that can be added to in the future.\n\n// Tab config options.\nconst ALLACTIVITIESRESOURCES = 0;\nconst ONLYALL = 1;\nconst ACTIVITIESRESOURCES = 2;\n\n// Module types.\nconst ACTIVITY = 0;\nconst RESOURCE = 1;\n\n/**\n * Set up the activity chooser.\n *\n * @method init\n * @param {Number} courseId Course ID to use later on in fetchModules()\n * @param {Object} chooserConfig Any PHP config settings that we may need to reference\n */\nexport const init = (courseId, chooserConfig) => {\n const pendingPromise = new Pending();\n\n registerListenerEvents(courseId, chooserConfig);\n\n pendingPromise.resolve();\n};\n\n/**\n * Once a selection has been made make the modal & module information and pass it along\n *\n * @method registerListenerEvents\n * @param {Number} courseId\n * @param {Object} chooserConfig Any PHP config settings that we may need to reference\n */\nconst registerListenerEvents = (courseId, chooserConfig) => {\n const events = [\n 'click',\n CustomEvents.events.activate,\n CustomEvents.events.keyboardActivate\n ];\n\n const fetchModuleData = (() => {\n let innerPromise = null;\n\n return () => {\n if (!innerPromise) {\n innerPromise = new Promise((resolve) => {\n resolve(Repository.activityModules(courseId));\n });\n }\n\n return innerPromise;\n };\n })();\n\n const fetchFooterData = (() => {\n let footerInnerPromise = null;\n\n return (sectionId) => {\n if (!footerInnerPromise) {\n footerInnerPromise = new Promise((resolve) => {\n resolve(Repository.fetchFooterData(courseId, sectionId));\n });\n }\n\n return footerInnerPromise;\n };\n })();\n\n CustomEvents.define(document, events);\n\n // Display module chooser event listeners.\n events.forEach((event) => {\n document.addEventListener(event, async(e) => {\n if (e.target.closest(selectors.elements.sectionmodchooser)) {\n let caller;\n // We need to know who called this.\n // Standard courses use the ID in the main section info.\n const sectionDiv = e.target.closest(selectors.elements.section);\n // Front page courses need some special handling.\n const button = e.target.closest(selectors.elements.sectionmodchooser);\n\n // If we don't have a section ID use the fallback ID.\n // We always want the sectionDiv caller first as it keeps track of section ID's after DnD changes.\n // The button attribute is always just a fallback for us as the section div is not always available.\n // A YUI change could be done maybe to only update the button attribute but we are going for minimal change here.\n if (sectionDiv !== null && sectionDiv.hasAttribute('data-sectionid')) {\n // We check for attributes just in case of outdated contrib course formats.\n caller = sectionDiv;\n } else {\n caller = button;\n }\n\n // We want to show the modal instantly but loading whilst waiting for our data.\n let bodyPromiseResolver;\n const bodyPromise = new Promise(resolve => {\n bodyPromiseResolver = resolve;\n });\n\n const footerData = await fetchFooterData(caller.dataset.sectionid);\n const sectionModal = buildModal(bodyPromise, footerData);\n\n // Now we have a modal we should start fetching data.\n // If an error occurs while fetching the data, display the error within the modal.\n const data = await fetchModuleData().catch(async(e) => {\n const errorTemplateData = {\n 'errormessage': e.message\n };\n bodyPromiseResolver(await Templates.render('core_course/local/activitychooser/error', errorTemplateData));\n });\n\n // Early return if there is no module data.\n if (!data) {\n return;\n }\n\n // Apply the section id to all the module instance links.\n const builtModuleData = sectionIdMapper(\n data,\n caller.dataset.sectionid,\n caller.dataset.sectionreturnid,\n caller.dataset.beforemod\n );\n\n ChooserDialogue.displayChooser(\n sectionModal,\n builtModuleData,\n partiallyAppliedFavouriteManager(data, caller.dataset.sectionid),\n footerData,\n );\n\n bodyPromiseResolver(await Templates.render(\n 'core_course/activitychooser',\n templateDataBuilder(builtModuleData, chooserConfig)\n ));\n }\n });\n });\n};\n\n/**\n * Given the web service data and an ID we want to make a deep copy\n * of the WS data then add on the section ID to the addoption URL\n *\n * @method sectionIdMapper\n * @param {Object} webServiceData Our original data from the Web service call\n * @param {Number} id The ID of the section we need to append to the links\n * @param {Number|null} sectionreturnid The ID of the section return we need to append to the links\n * @param {Number|null} beforemod The ID of the cm we need to append to the links\n * @return {Array} [modules] with URL's built\n */\nconst sectionIdMapper = (webServiceData, id, sectionreturnid, beforemod) => {\n // We need to take a fresh deep copy of the original data as an object is a reference type.\n const newData = JSON.parse(JSON.stringify(webServiceData));\n newData.content_items.forEach((module) => {\n module.link += '§ion=' + id + '&sr=' + (sectionreturnid ?? 0) + '&beforemod=' + (beforemod ?? 0);\n });\n return newData.content_items;\n};\n\n/**\n * Given an array of modules we want to figure out where & how to place them into our template object\n *\n * @method templateDataBuilder\n * @param {Array} data our modules to manipulate into a Templatable object\n * @param {Object} chooserConfig Any PHP config settings that we may need to reference\n * @return {Object} Our built object ready to render out\n */\nconst templateDataBuilder = (data, chooserConfig) => {\n // Setup of various bits and pieces we need to mutate before throwing it to the wolves.\n let activities = [];\n let resources = [];\n let showAll = true;\n let showActivities = false;\n let showResources = false;\n\n // Tab mode can be the following [All, Resources & Activities, All & Activities & Resources].\n const tabMode = parseInt(chooserConfig.tabmode);\n\n // Filter the incoming data to find favourite & recommended modules.\n const favourites = data.filter(mod => mod.favourite === true);\n const recommended = data.filter(mod => mod.recommended === true);\n\n // Both of these modes need Activity & Resource tabs.\n if ((tabMode === ALLACTIVITIESRESOURCES || tabMode === ACTIVITIESRESOURCES) && tabMode !== ONLYALL) {\n // Filter the incoming data to find activities then resources.\n activities = data.filter(mod => mod.archetype === ACTIVITY);\n resources = data.filter(mod => mod.archetype === RESOURCE);\n showActivities = true;\n showResources = true;\n\n // We want all of the previous information but no 'All' tab.\n if (tabMode === ACTIVITIESRESOURCES) {\n showAll = false;\n }\n }\n\n // Given the results of the above filters lets figure out what tab to set active.\n // We have some favourites.\n const favouritesFirst = !!favourites.length;\n // We are in tabMode 2 without any favourites.\n const activitiesFirst = showAll === false && favouritesFirst === false;\n // We have nothing fallback to show all modules.\n const fallback = showAll === true && favouritesFirst === false;\n\n return {\n 'default': data,\n showAll: showAll,\n activities: activities,\n showActivities: showActivities,\n activitiesFirst: activitiesFirst,\n resources: resources,\n showResources: showResources,\n favourites: favourites,\n recommended: recommended,\n favouritesFirst: favouritesFirst,\n fallback: fallback,\n };\n};\n\n/**\n * Given an object we want to build a modal ready to show\n *\n * @method buildModal\n * @param {Promise} bodyPromise\n * @param {String|Boolean} footer Either a footer to add or nothing\n * @return {Object} The modal ready to display immediately and render body in later.\n */\nconst buildModal = (bodyPromise, footer) => {\n return ModalFactory.create({\n type: ModalFactory.types.DEFAULT,\n title: getString('addresourceoractivity'),\n body: bodyPromise,\n footer: footer.customfootertemplate,\n large: true,\n scrollable: false,\n templateContext: {\n classes: 'modchooser'\n }\n })\n .then(modal => {\n modal.show();\n return modal;\n });\n};\n\n/**\n * A small helper function to handle the case where there are no more favourites\n * and we need to mess a bit with the available tabs in the chooser\n *\n * @method nullFavouriteDomManager\n * @param {HTMLElement} favouriteTabNav Dom node of the favourite tab nav\n * @param {HTMLElement} modalBody Our current modals' body\n */\nconst nullFavouriteDomManager = (favouriteTabNav, modalBody) => {\n favouriteTabNav.tabIndex = -1;\n favouriteTabNav.classList.add('d-none');\n // Need to set active to an available tab.\n if (favouriteTabNav.classList.contains('active')) {\n favouriteTabNav.classList.remove('active');\n favouriteTabNav.setAttribute('aria-selected', 'false');\n const favouriteTab = modalBody.querySelector(selectors.regions.favouriteTab);\n favouriteTab.classList.remove('active');\n const defaultTabNav = modalBody.querySelector(selectors.regions.defaultTabNav);\n const activitiesTabNav = modalBody.querySelector(selectors.regions.activityTabNav);\n if (defaultTabNav.classList.contains('d-none') === false) {\n defaultTabNav.classList.add('active');\n defaultTabNav.setAttribute('aria-selected', 'true');\n defaultTabNav.tabIndex = 0;\n defaultTabNav.focus();\n const defaultTab = modalBody.querySelector(selectors.regions.defaultTab);\n defaultTab.classList.add('active');\n } else {\n activitiesTabNav.classList.add('active');\n activitiesTabNav.setAttribute('aria-selected', 'true');\n activitiesTabNav.tabIndex = 0;\n activitiesTabNav.focus();\n const activitiesTab = modalBody.querySelector(selectors.regions.activityTab);\n activitiesTab.classList.add('active');\n }\n\n }\n};\n\n/**\n * Export a curried function where the builtModules has been applied.\n * We have our array of modules so we can rerender the favourites area and have all of the items sorted.\n *\n * @method partiallyAppliedFavouriteManager\n * @param {Array} moduleData This is our raw WS data that we need to manipulate\n * @param {Number} sectionId We need this to add the sectionID to the URL's in the faves area after rerender\n * @return {Function} partially applied function so we can manipulate DOM nodes easily & update our internal array\n */\nconst partiallyAppliedFavouriteManager = (moduleData, sectionId) => {\n /**\n * Curried function that is being returned.\n *\n * @param {String} internal Internal name of the module to manage\n * @param {Boolean} favourite Is the caller adding a favourite or removing one?\n * @param {HTMLElement} modalBody What we need to update whilst we are here\n */\n return async(internal, favourite, modalBody) => {\n const favouriteArea = modalBody.querySelector(selectors.render.favourites);\n\n // eslint-disable-next-line max-len\n const favouriteButtons = modalBody.querySelectorAll(`[data-internal=\"${internal}\"] ${selectors.actions.optionActions.manageFavourite}`);\n const favouriteTabNav = modalBody.querySelector(selectors.regions.favouriteTabNav);\n const result = moduleData.content_items.find(({name}) => name === internal);\n const newFaves = {};\n if (result) {\n if (favourite) {\n result.favourite = true;\n\n // eslint-disable-next-line camelcase\n newFaves.content_items = moduleData.content_items.filter(mod => mod.favourite === true);\n\n const builtFaves = sectionIdMapper(newFaves, sectionId);\n\n const {html, js} = await Templates.renderForPromise('core_course/local/activitychooser/favourites',\n {favourites: builtFaves});\n\n await Templates.replaceNodeContents(favouriteArea, html, js);\n\n Array.from(favouriteButtons).forEach((element) => {\n element.classList.remove('text-muted');\n element.classList.add('text-primary');\n element.dataset.favourited = 'true';\n element.setAttribute('aria-pressed', true);\n element.firstElementChild.classList.remove('fa-star-o');\n element.firstElementChild.classList.add('fa-star');\n });\n\n favouriteTabNav.classList.remove('d-none');\n } else {\n result.favourite = false;\n\n const nodeToRemove = favouriteArea.querySelector(`[data-internal=\"${internal}\"]`);\n\n nodeToRemove.parentNode.removeChild(nodeToRemove);\n\n Array.from(favouriteButtons).forEach((element) => {\n element.classList.add('text-muted');\n element.classList.remove('text-primary');\n element.dataset.favourited = 'false';\n element.setAttribute('aria-pressed', false);\n element.firstElementChild.classList.remove('fa-star');\n element.firstElementChild.classList.add('fa-star-o');\n });\n const newFaves = moduleData.content_items.filter(mod => mod.favourite === true);\n\n if (newFaves.length === 0) {\n nullFavouriteDomManager(favouriteTabNav, modalBody);\n }\n }\n }\n };\n};\n"],"names":["courseId","chooserConfig","pendingPromise","Pending","registerListenerEvents","resolve","events","CustomEvents","activate","keyboardActivate","fetchModuleData","innerPromise","Promise","Repository","activityModules","fetchFooterData","footerInnerPromise","sectionId","define","document","forEach","event","addEventListener","async","e","target","closest","selectors","elements","sectionmodchooser","caller","sectionDiv","section","button","bodyPromiseResolver","hasAttribute","bodyPromise","footerData","dataset","sectionid","sectionModal","buildModal","data","catch","errorTemplateData","message","Templates","render","builtModuleData","sectionIdMapper","sectionreturnid","beforemod","ChooserDialogue","displayChooser","partiallyAppliedFavouriteManager","templateDataBuilder","webServiceData","id","newData","JSON","parse","stringify","content_items","module","link","activities","resources","showAll","showActivities","showResources","tabMode","parseInt","tabmode","favourites","filter","mod","favourite","recommended","archetype","favouritesFirst","length","activitiesFirst","fallback","footer","ModalFactory","create","type","types","DEFAULT","title","body","customfootertemplate","large","scrollable","templateContext","classes","then","modal","show","moduleData","internal","modalBody","favouriteArea","querySelector","favouriteButtons","querySelectorAll","actions","optionActions","manageFavourite","favouriteTabNav","regions","result","find","_ref","name","newFaves","builtFaves","html","js","renderForPromise","replaceNodeContents","Array","from","element","classList","remove","add","favourited","setAttribute","firstElementChild","nodeToRemove","parentNode","removeChild","tabIndex","contains","favouriteTab","defaultTabNav","activitiesTabNav","activityTabNav","focus","defaultTab","activityTab","nullFavouriteDomManager"],"mappings":"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"} \ No newline at end of file diff --git a/course/amd/src/activitychooser.js b/course/amd/src/activitychooser.js index 49abbc41334..8442ed62149 100644 --- a/course/amd/src/activitychooser.js +++ b/course/amd/src/activitychooser.js @@ -146,7 +146,12 @@ const registerListenerEvents = (courseId, chooserConfig) => { } // Apply the section id to all the module instance links. - const builtModuleData = sectionIdMapper(data, caller.dataset.sectionid, caller.dataset.sectionreturnid); + const builtModuleData = sectionIdMapper( + data, + caller.dataset.sectionid, + caller.dataset.sectionreturnid, + caller.dataset.beforemod + ); ChooserDialogue.displayChooser( sectionModal, @@ -172,13 +177,14 @@ const registerListenerEvents = (courseId, chooserConfig) => { * @param {Object} webServiceData Our original data from the Web service call * @param {Number} id The ID of the section we need to append to the links * @param {Number|null} sectionreturnid The ID of the section return we need to append to the links + * @param {Number|null} beforemod The ID of the cm we need to append to the links * @return {Array} [modules] with URL's built */ -const sectionIdMapper = (webServiceData, id, sectionreturnid) => { +const sectionIdMapper = (webServiceData, id, sectionreturnid, beforemod) => { // We need to take a fresh deep copy of the original data as an object is a reference type. const newData = JSON.parse(JSON.stringify(webServiceData)); newData.content_items.forEach((module) => { - module.link += '§ion=' + id + '&sr=' + (sectionreturnid ?? 0); + module.link += '§ion=' + id + '&sr=' + (sectionreturnid ?? 0) + '&beforemod=' + (beforemod ?? 0); }); return newData.content_items; }; diff --git a/course/format/templates/local/content/cm.mustache b/course/format/templates/local/content/cm.mustache index 017fd65e8ca..a650fe1a2f9 100644 --- a/course/format/templates/local/content/cm.mustache +++ b/course/format/templates/local/content/cm.mustache @@ -56,6 +56,11 @@ "modstealth": true } }} +{{#editing}} +
+ {{> core_course/activitychooserbuttonactivity}} +
+{{/editing}}
diff --git a/course/templates/activitychooserbuttonactivity.mustache b/course/templates/activitychooserbuttonactivity.mustache new file mode 100644 index 00000000000..dbd29206600 --- /dev/null +++ b/course/templates/activitychooserbuttonactivity.mustache @@ -0,0 +1,37 @@ +{{! + This file is part of Moodle - http://moodle.org/ + + Moodle is free software: you can redistribute it and/or modify + it under the terms of the GNU General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + Moodle is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU General Public License for more details. + + You should have received a copy of the GNU General Public License + along with Moodle. If not, see . +}} +{{! + @template core_course/activitychooserbuttonactivity + + Displays a add activity or resource button. + + Context variables required for this template: + * id - Which activity we want to add the new activity before. + * num - Relative section number (field course_sections.section). + * sectionreturn - The section to link back to. + + Example context (json): + { + "id": 0, + "num": 1, + "sectionreturn": 5 + } +}} + diff --git a/course/tests/behat/activity_chooser_plus.feature b/course/tests/behat/activity_chooser_plus.feature new file mode 100644 index 00000000000..d62559ef219 --- /dev/null +++ b/course/tests/behat/activity_chooser_plus.feature @@ -0,0 +1,42 @@ +@core @core_course @javascript +Feature: Use the activity chooser to insert activities anywhere in a section + In order to add activities to a course + As a teacher + I should be able to add an activity anywhere in a section. + + Background: + Given the following "users" exist: + | username | firstname | lastname | email | + | teacher | Teacher | 1 | teacher@example.com | + And the following "courses" exist: + | fullname | shortname | format | + | Course | C | topics | + And the following "course enrolments" exist: + | user | course | role | + | teacher | C | editingteacher | + And the following "activities" exist: + | activity | course | idnumber | intro | name | section | + | page | C | p1 | x | Test Page | 1 | + | forum | C | f1 | x | Test Forum | 1 | + | label | C | l1 | x | Test Label | 1 | + And I log in as "teacher" + And I am on "Course" course homepage with editing mode on + + Scenario: The activity chooser icon is hidden by default and be made visible on hover + Given I hover ".navbar-brand" "css_element" + And "[data-action='insert-before-Test Forum'] button" "css_element" should not be visible + When I hover "[data-action='insert-before-Test Forum']" "css_element" + Then "[data-action='insert-before-Test Forum'] button" "css_element" should be visible + + Scenario: The activity chooser can be used to insert modules before existing modules + Given I hover "[data-action='insert-before-Test Forum']" "css_element" + And I click on "[data-action='insert-before-Test Forum'] button" "css_element" + And I should see "Add an activity or resource" in the ".modal-title" "css_element" + When I click on "Add a new Assignment" "link" in the "Add an activity or resource" "dialogue" + And I set the following fields to these values: + | Assignment name | Test Assignment | + And I press "Save and return to course" + And I should see "Test Assignment" in the "Topic 1" "section" + # Ensure the new assignment is in the middle of the two existing modules. + Then "Test Page" "text" should appear before "Test Assignment" "text" + And "Test Assignment" "text" should appear before "Test Forum" "text" diff --git a/course/tests/behat/behat_course.php b/course/tests/behat/behat_course.php index 9a21a979e12..7e5ccd53e21 100644 --- a/course/tests/behat/behat_course.php +++ b/course/tests/behat/behat_course.php @@ -215,8 +215,8 @@ class behat_course extends behat_base { // Clicks add activity or resource section link. $sectionnode = $this->find('xpath', $sectionxpath); $this->execute('behat_general::i_click_on_in_the', [ - get_string('addresourceoractivity', 'moodle'), - 'button', + "//button[@data-action='open-chooser' and not(@data-beforemod)]", + 'xpath', $sectionnode, 'NodeElement', ]); diff --git a/lang/en/moodle.php b/lang/en/moodle.php index 668805b785b..1542ed961f6 100644 --- a/lang/en/moodle.php +++ b/lang/en/moodle.php @@ -1150,6 +1150,7 @@ $string['indicator:userforumstracking'] = 'User is tracking forums'; $string['indicator:userforumstracking_help'] = 'This indicator represents whether or not the student has tracking turned on in the forums.'; $string['info'] = 'Information'; $string['inprogress'] = 'In progress'; +$string['insertresourceoractivitybefore'] = 'Insert an activity or resource before \'{$a->activityname}\''; $string['institution'] = 'Institution'; $string['instudentview'] = 'in student view'; $string['interests'] = 'Interests'; diff --git a/theme/boost/scss/moodle/course.scss b/theme/boost/scss/moodle/course.scss index 64f077246d9..8cbb2ca2724 100644 --- a/theme/boost/scss/moodle/course.scss +++ b/theme/boost/scss/moodle/course.scss @@ -1530,3 +1530,47 @@ $activity-add-hover: theme-color-level('primary', -10) !default; margin-top: 0; } } + +.activity:focus-within + .activity div.divider button, +.course-section-header:focus-within + .content .section .activity:first-child div.divider button, +.content .section .activity:focus-within div.divider button { + visibility: visible; +} + +.activity { + div.divider { + height: 2rem; + margin-top: -1.25rem; + margin-bottom: -0.75rem; + z-index: 5; + button { + border-radius: 100%; + width: 2rem; + height: 2rem; + position: relative; + left: calc(50% - 1rem); + top: calc(50% - 1rem); + opacity: 0; + visibility: hidden; + transition: visibility 0.1s; + margin: 0; + padding: 0; + i.icon { + height: 1.5rem; + width: 1.5rem; + font-size: 1.5rem; + position: absolute; + left: 0.25rem; + top: 0.25rem; + } + } + } + &:not(.dragging) div.divider { + &:hover button, + &:focus button, + &:focus-within button { + opacity: 1; + visibility: visible; + } + } +} diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css index df98d2b605f..cd150995d3c 100644 --- a/theme/boost/style/moodle.css +++ b/theme/boost/style/moodle.css @@ -14967,6 +14967,42 @@ span.editinstructions { .automatic-completion-conditions .badge:first-child { margin-top: 0; } +.activity:focus-within + .activity div.divider button, +.course-section-header:focus-within + .content .section .activity:first-child div.divider button, +.content .section .activity:focus-within div.divider button { + visibility: visible; } + +.activity div.divider { + height: 2rem; + margin-top: -1.25rem; + margin-bottom: -0.75rem; + z-index: 5; } + .activity div.divider button { + border-radius: 100%; + width: 2rem; + height: 2rem; + position: relative; + left: calc(50% - 1rem); + top: calc(50% - 1rem); + opacity: 0; + visibility: hidden; + transition: visibility 0.1s; + margin: 0; + padding: 0; } + .activity div.divider button i.icon { + height: 1.5rem; + width: 1.5rem; + font-size: 1.5rem; + position: absolute; + left: 0.25rem; + top: 0.25rem; } + +.activity:not(.dragging) div.divider:hover button, +.activity:not(.dragging) div.divider:focus button, +.activity:not(.dragging) div.divider:focus-within button { + opacity: 1; + visibility: visible; } + /* Anchor link offset fix. This makes hash links scroll 60px down to account for the fixed header. */ :target { scroll-margin-top: 70px; } diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css index b103e172bf9..e2c2772b388 100644 --- a/theme/classic/style/moodle.css +++ b/theme/classic/style/moodle.css @@ -14967,6 +14967,42 @@ span.editinstructions { .automatic-completion-conditions .badge:first-child { margin-top: 0; } +.activity:focus-within + .activity div.divider button, +.course-section-header:focus-within + .content .section .activity:first-child div.divider button, +.content .section .activity:focus-within div.divider button { + visibility: visible; } + +.activity div.divider { + height: 2rem; + margin-top: -1.25rem; + margin-bottom: -0.75rem; + z-index: 5; } + .activity div.divider button { + border-radius: 100%; + width: 2rem; + height: 2rem; + position: relative; + left: calc(50% - 1rem); + top: calc(50% - 1rem); + opacity: 0; + visibility: hidden; + transition: visibility 0.1s; + margin: 0; + padding: 0; } + .activity div.divider button i.icon { + height: 1.5rem; + width: 1.5rem; + font-size: 1.5rem; + position: absolute; + left: 0.25rem; + top: 0.25rem; } + +.activity:not(.dragging) div.divider:hover button, +.activity:not(.dragging) div.divider:focus button, +.activity:not(.dragging) div.divider:focus-within button { + opacity: 1; + visibility: visible; } + /* Anchor link offset fix. This makes hash links scroll 60px down to account for the fixed header. */ :target { scroll-margin-top: 60px; }