diff --git a/src/component/accordion/example/index.ejs b/src/component/accordion/example/index.ejs
index eba73481c..f80962e42 100755
--- a/src/component/accordion/example/index.ejs
+++ b/src/component/accordion/example/index.ejs
@@ -3,3 +3,5 @@
<%- sample('Accordéon', './sample/accordion', {}, true); %>
<%- sample('Groupe d‘accordéons', './sample/accordions-group', {}, true); %>
+
+<%- sample('Groupe d‘accordéons dissociés', './sample/accordions-group', {accordionsGroup: {group: false}}, true); %>
diff --git a/src/component/accordion/example/sample/accordions-group.ejs b/src/component/accordion/example/sample/accordions-group.ejs
index dadaef82d..b156598f1 100755
--- a/src/component/accordion/example/sample/accordions-group.ejs
+++ b/src/component/accordion/example/sample/accordions-group.ejs
@@ -1,14 +1,16 @@
<%
-const accordions = [];
+let accordionsGroup = locals.accordionsGroup || {};
+const accordions = [];
for (let i = 0; i < 6; i++) accordions.push({
label: 'Intitulé accordéon',
content: randomContent(),
id: uniqueId('accordion'),
});
-const accordionsGroup = {
- accordions: accordions
+accordionsGroup = {
+ accordions: accordions,
+ ...accordionsGroup
}
%>
diff --git a/src/component/accordion/template/ejs/accordions-group.ejs b/src/component/accordion/template/ejs/accordions-group.ejs
index 12e70f010..149b21152 100644
--- a/src/component/accordion/template/ejs/accordions-group.ejs
+++ b/src/component/accordion/template/ejs/accordions-group.ejs
@@ -6,8 +6,13 @@
%>
<% eval(include('../../../../core/index.ejs')); %>
-<% let accordionsGroup = locals.accordionsGroup || {accordions: []} %>
-
+<%
+let accordionsGroup = locals.accordionsGroup || {accordions: []}
+let attributes = accordionsGroup.attributes || {};
+if (accordionsGroup.group !== undefined) attributes[`data-${prefix}-group`] = accordionsGroup.group;
+%>
+
+
class="<%= prefix %>-accordions-group">
<%
for (let i = 0; i < accordionsGroup.accordions.length; i++) {
%>
diff --git a/src/component/navigation/script/navigation/navigation.js b/src/component/navigation/script/navigation/navigation.js
index 7c8c1f0c2..defa514fb 100644
--- a/src/component/navigation/script/navigation/navigation.js
+++ b/src/component/navigation/script/navigation/navigation.js
@@ -14,6 +14,7 @@ class Navigation extends api.core.CollapsesGroup {
this.addEmission(api.core.RootEmission.CLICK, this._handleRootClick.bind(this));
this.listen('mousedown', this.handleMouseDown.bind(this));
this.listenClick({ capture: true });
+ this.isResizing = true;
}
validate (member) {
@@ -77,6 +78,14 @@ class Navigation extends api.core.CollapsesGroup {
if (value === -1 && this.current && this.current.hasFocus) this.current.focus();
super.index = value;
}
+
+ get canUngroup () {
+ return !this.isBreakpoint(api.core.Breakpoints.LG);
+ }
+
+ resize () {
+ this.update();
+ }
}
export { Navigation };
diff --git a/src/core/script/collapse/collapses-group.js b/src/core/script/collapse/collapses-group.js
index a7510679e..c41b07eda 100644
--- a/src/core/script/collapse/collapses-group.js
+++ b/src/core/script/collapse/collapses-group.js
@@ -8,6 +8,10 @@ class CollapsesGroup extends DisclosuresGroup {
static get instanceClassName () {
return 'CollapsesGroup';
}
+
+ get canUngroup () {
+ return true;
+ }
}
export { CollapsesGroup };
diff --git a/src/core/script/disclosure/disclosure-selector.js b/src/core/script/disclosure/disclosure-selector.js
index e4573d171..8141d93d6 100644
--- a/src/core/script/disclosure/disclosure-selector.js
+++ b/src/core/script/disclosure/disclosure-selector.js
@@ -1,5 +1,6 @@
import ns from '../api/utilities/namespace.js';
export const DisclosureSelector = {
- PREVENT_CONCEAL: ns.attr.selector('prevent-conceal')
+ PREVENT_CONCEAL: ns.attr.selector('prevent-conceal'),
+ GROUP: ns.attr('group')
};
diff --git a/src/core/script/disclosure/disclosures-group.js b/src/core/script/disclosure/disclosures-group.js
index 8282d532f..e487ccbd1 100644
--- a/src/core/script/disclosure/disclosures-group.js
+++ b/src/core/script/disclosure/disclosures-group.js
@@ -1,6 +1,7 @@
import { Instance } from '../api/modules/register/instance.js';
import { DisclosureEmission } from './disclosure-emission.js';
import { completeAssign } from '../api/utilities/property/complete-assign.js';
+import { DisclosureSelector } from './disclosure-selector.js';
class DisclosuresGroup extends Instance {
constructor (disclosureInstanceClassName, jsAttribute) {
@@ -10,6 +11,7 @@ class DisclosuresGroup extends Instance {
this._index = -1;
this._isRetrieving = false;
this._hasRetrieved = false;
+ this._isGrouped = true;
}
static get instanceClassName () {
@@ -21,6 +23,7 @@ class DisclosuresGroup extends Instance {
this.addAscent(DisclosureEmission.RETRIEVE, this.retrieve.bind(this));
this.addAscent(DisclosureEmission.REMOVED, this.update.bind(this));
this.descend(DisclosureEmission.GROUP);
+ this._isGrouped = this.getAttribute(DisclosureSelector.GROUP) !== 'false';
this.update();
}
@@ -46,6 +49,12 @@ class DisclosuresGroup extends Instance {
},
get hasFocus () {
return scope.hasFocus;
+ },
+ set isGrouped (value) {
+ scope.isGrouped = value;
+ },
+ get isGrouped () {
+ return scope.isGrouped;
}
};
@@ -134,7 +143,7 @@ class DisclosuresGroup extends Instance {
if (value === i) {
if (!member.isDisclosed) member.disclose(true);
} else {
- if (member.isDisclosed) member.conceal(true);
+ if ((this.isGrouped || !this.canUngroup) && member.isDisclosed) member.conceal(true);
}
}
this.apply();
@@ -155,6 +164,28 @@ class DisclosuresGroup extends Instance {
return false;
}
+ set isGrouped (value) {
+ const isGrouped = !!value;
+ if (this._isGrouped === isGrouped) return;
+ this._isGrouped = isGrouped;
+ this.setAttribute(DisclosureSelector.GROUP, !!value);
+ this.update();
+ }
+
+ get isGrouped () {
+ return this._isGrouped;
+ }
+
+ get canUngroup () {
+ return false;
+ }
+
+ mutate (attributesNames) {
+ if (attributesNames.includes(DisclosureSelector.GROUP)) {
+ this.isGrouped = this.getAttribute(DisclosureSelector.GROUP) !== 'false';
+ }
+ }
+
apply () {}
dispose () {