mirror of
https://github.com/moodle/moodle.git
synced 2025-01-18 22:08:20 +01:00
MDL-78728 forms: correctly refer to outermost form element.
Read-only forms do not belong to a <form> element, so we can't refer to that. Instead find the `.mform` element (which exists for regular and read-only forms).
This commit is contained in:
parent
8ac8ea416a
commit
3b2690ef9c
2
lib/form/amd/build/collapsesections.min.js
vendored
2
lib/form/amd/build/collapsesections.min.js
vendored
@ -6,6 +6,6 @@ define("core_form/collapsesections",["exports","jquery","core/pending"],(functio
|
||||
* @copyright 2021 Bas Brands
|
||||
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
|
||||
* @since 4.0
|
||||
*/Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.init=void 0,_jquery=_interopRequireDefault(_jquery),_pending=_interopRequireDefault(_pending);const SELECTORS_FORMHEADER=".fheader",SELECTORS_FORMCONTAINER="fieldset > .fcontainer",CLASSES_SHOW="show",CLASSES_COLLAPSED="collapsed";_exports.init=collapsesections=>{const pendingPromise=new _pending.default("core_form/collapsesections"),collapsemenu=document.querySelector(collapsesections),formParent=collapsemenu.closest("form"),formContainers=(null==formParent?void 0:formParent.querySelectorAll(SELECTORS_FORMCONTAINER))||[];collapsemenu.addEventListener("keydown",(e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),collapsemenu.click())}));let expandedcount=0;const formcontainercount=(0,_jquery.default)(SELECTORS_FORMCONTAINER).length;formContainers.forEach((container=>{container.classList.contains(CLASSES_SHOW)&&expandedcount++})),formcontainercount===expandedcount&&(collapsemenu.classList.remove(CLASSES_COLLAPSED),collapsemenu.setAttribute("aria-expanded",!0)),collapsemenu.addEventListener("click",(()=>{let action="hide";collapsemenu.classList.contains(CLASSES_COLLAPSED)&&(action="show"),formContainers.forEach((container=>(0,_jquery.default)(container).collapse(action)))}));const collapseElementIds=[...(0,_jquery.default)(SELECTORS_FORMHEADER)].map(((element,index)=>(element.id=element.id||"collapseElement-".concat(index),element.id)));collapsemenu.setAttribute("aria-controls",collapseElementIds.join(" ")),(0,_jquery.default)(SELECTORS_FORMCONTAINER).on("hidden.bs.collapse",(()=>{[...formContainers].every((container=>!container.classList.contains(CLASSES_SHOW)))&&(collapsemenu.classList.add(CLASSES_COLLAPSED),collapsemenu.setAttribute("aria-expanded",!1))})),(0,_jquery.default)(SELECTORS_FORMCONTAINER).on("shown.bs.collapse",(()=>{[...formContainers].every((container=>container.classList.contains(CLASSES_SHOW)))&&(collapsemenu.classList.remove(CLASSES_COLLAPSED),collapsemenu.setAttribute("aria-expanded",!0))})),pendingPromise.resolve()}}));
|
||||
*/Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.init=void 0,_jquery=_interopRequireDefault(_jquery),_pending=_interopRequireDefault(_pending);const SELECTORS_FORM=".mform",SELECTORS_FORMHEADER=".fheader",SELECTORS_FORMCONTAINER="fieldset > .fcontainer",CLASSES_SHOW="show",CLASSES_COLLAPSED="collapsed";_exports.init=collapsesections=>{const pendingPromise=new _pending.default("core_form/collapsesections"),collapsemenu=document.querySelector(collapsesections),formParent=collapsemenu.closest(SELECTORS_FORM),formContainers=formParent.querySelectorAll(SELECTORS_FORMCONTAINER);collapsemenu.addEventListener("keydown",(e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),collapsemenu.click())}));let expandedcount=0;const formcontainercount=(0,_jquery.default)(SELECTORS_FORMCONTAINER).length;formContainers.forEach((container=>{container.classList.contains(CLASSES_SHOW)&&expandedcount++})),formcontainercount===expandedcount&&(collapsemenu.classList.remove(CLASSES_COLLAPSED),collapsemenu.setAttribute("aria-expanded",!0)),collapsemenu.addEventListener("click",(()=>{let action="hide";collapsemenu.classList.contains(CLASSES_COLLAPSED)&&(action="show"),formContainers.forEach((container=>(0,_jquery.default)(container).collapse(action)))}));const collapseElementIds=[...formParent.querySelectorAll(SELECTORS_FORMHEADER)].map(((element,index)=>(element.id=element.id||"collapseElement-".concat(index),element.id)));collapsemenu.setAttribute("aria-controls",collapseElementIds.join(" ")),(0,_jquery.default)(SELECTORS_FORMCONTAINER).on("hidden.bs.collapse",(()=>{[...formContainers].every((container=>!container.classList.contains(CLASSES_SHOW)))&&(collapsemenu.classList.add(CLASSES_COLLAPSED),collapsemenu.setAttribute("aria-expanded",!1))})),(0,_jquery.default)(SELECTORS_FORMCONTAINER).on("shown.bs.collapse",(()=>{[...formContainers].every((container=>container.classList.contains(CLASSES_SHOW)))&&(collapsemenu.classList.remove(CLASSES_COLLAPSED),collapsemenu.setAttribute("aria-expanded",!0))})),pendingPromise.resolve()}}));
|
||||
|
||||
//# sourceMappingURL=collapsesections.min.js.map
|
File diff suppressed because one or more lines are too long
@ -26,6 +26,7 @@ import $ from 'jquery';
|
||||
import Pending from 'core/pending';
|
||||
|
||||
const SELECTORS = {
|
||||
FORM: '.mform',
|
||||
FORMHEADER: '.fheader',
|
||||
FORMCONTAINER: 'fieldset > .fcontainer',
|
||||
};
|
||||
@ -44,8 +45,9 @@ export const init = collapsesections => {
|
||||
// All jQuery in this code can be replaced when MDL-71979 is integrated (move to Bootstrap 5).
|
||||
const pendingPromise = new Pending('core_form/collapsesections');
|
||||
const collapsemenu = document.querySelector(collapsesections);
|
||||
const formParent = collapsemenu.closest('form');
|
||||
const formContainers = formParent?.querySelectorAll(SELECTORS.FORMCONTAINER) || [];
|
||||
|
||||
const formParent = collapsemenu.closest(SELECTORS.FORM);
|
||||
const formContainers = formParent.querySelectorAll(SELECTORS.FORMCONTAINER);
|
||||
|
||||
collapsemenu.addEventListener('keydown', e => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
@ -79,7 +81,7 @@ export const init = collapsesections => {
|
||||
});
|
||||
|
||||
// Ensure collapse menu button adds aria-controls attribute referring to each collapsible element.
|
||||
const collapseElements = $(SELECTORS.FORMHEADER);
|
||||
const collapseElements = formParent.querySelectorAll(SELECTORS.FORMHEADER);
|
||||
const collapseElementIds = [...collapseElements].map((element, index) => {
|
||||
element.id = element.id || `collapseElement-${index}`;
|
||||
return element.id;
|
||||
|
@ -6,27 +6,23 @@ Feature: Read-only forms should work
|
||||
|
||||
@javascript
|
||||
Scenario: Shortforms expand collapsing should work for read-only forms - one-section form
|
||||
Given the following "courses" exist:
|
||||
| fullname | shortname | format |
|
||||
| Course 1 | C1 | topics |
|
||||
And the following "activities" exist:
|
||||
| activity | name | intro | course | idnumber |
|
||||
| label | L1 | <a href="../lib/tests/fixtures/readonlyform.php?sections=1">Fixture link</a> | C1 | label1 |
|
||||
Given I am on the "C1" "Course" page logged in as "admin"
|
||||
And I follow "Fixture link"
|
||||
When I expand all fieldsets
|
||||
Then the field "Name" matches value "Important information"
|
||||
Given I log in as "admin"
|
||||
And I visit "/lib/tests/fixtures/readonlyform.php?sections=1"
|
||||
When I press "First section"
|
||||
Then "Name" "field" should be visible
|
||||
And the field "Name" matches value "Important information"
|
||||
And I press "First section"
|
||||
And "Name" "field" should not be visible
|
||||
|
||||
@javascript
|
||||
Scenario: Shortforms expand collapsing should work for read-only forms - two-section form
|
||||
Given the following "courses" exist:
|
||||
| fullname | shortname | format |
|
||||
| Course 1 | C1 | topics |
|
||||
And the following "activities" exist:
|
||||
| activity | name | intro | course | idnumber |
|
||||
| label | L1 | <a href="../lib/tests/fixtures/readonlyform.php?sections=2">Fixture link</a> | C1 | label1 |
|
||||
Given I am on the "C1" "Course" page logged in as "admin"
|
||||
And I follow "Fixture link"
|
||||
When I expand all fieldsets
|
||||
Then the field "Name" matches value "Important information"
|
||||
Then the field "Other" matches value "Other information"
|
||||
Given I log in as "admin"
|
||||
And I visit "/lib/tests/fixtures/readonlyform.php?sections=2"
|
||||
When I press "Expand all"
|
||||
Then "Name" "field" should be visible
|
||||
And the field "Name" matches value "Important information"
|
||||
And "Other" "field" should be visible
|
||||
And the field "Other" matches value "Other information"
|
||||
And I press "Collapse all"
|
||||
And "Name" "field" should not be visible
|
||||
And "Other" "field" should not be visible
|
||||
|
Loading…
x
Reference in New Issue
Block a user