From 106c4df35a9607391d915591bc1a5bb121122d06 Mon Sep 17 00:00:00 2001 From: "Baptiste.z" Date: Wed, 31 Jan 2024 16:10:31 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(accordions-group):=20ajoute=20?= =?UTF-8?q?un=20attribut=20pour=20d=C3=A9grouper=20[DS-3687]=20(#860)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - ajout d'un attribut `data-fr-group="false"` pour dissocier le comportement d'ouverture/fermeture des accordéons à l'intérieur d'un groupe d'accordéons - étend l'utilisation de cet attribut aux composants héritant du collapses-group : la navigation (uniquement en mobile) et le menu latéral --- src/component/accordion/example/index.ejs | 2 ++ .../example/sample/accordions-group.ejs | 8 +++-- .../template/ejs/accordions-group.ejs | 9 +++-- .../script/navigation/navigation.js | 9 +++++ src/core/script/collapse/collapses-group.js | 4 +++ .../script/disclosure/disclosure-selector.js | 3 +- .../script/disclosure/disclosures-group.js | 33 ++++++++++++++++++- 7 files changed, 61 insertions(+), 7 deletions(-) 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 () {