Commit 9c05aa08 authored by Sam MASSET's avatar Sam MASSET
Browse files

Recherche et sélection de type de territoire en mode mobile sur la carte

parent f3213750
......@@ -77,7 +77,7 @@ export class PanneauGlissant extends LitElement {
// arrow function car utilisée comme callback dans inscriterListenerClicExterieurMenu
private plier = (event: Event) => {
const estTypeFermer: boolean = event.type === IDS_EVENEMENTS.fermer;
const estTypeClicEtExterieurMenu: boolean = event.type === 'click' && !this.contains(<Node>event.target);
const estTypeClicEtExterieurMenu: boolean = event.type === 'click' && !event.composedPath().includes(this);
if (estTypeFermer || estTypeClicEtExterieurMenu) {
this.supprimerListenerPlier();
......
......@@ -2,7 +2,7 @@ import '../../base/Bouton.js';
import {
CSS_BREAKPOINT_MAX_WIDTH_MOBILE_PAYSAGE,
CSS_BREAKPOINT_MAX_WIDTH_TABLETTE,
CSS_BREAKPOINT_MAX_WIDTH_TABLETTE, EvenementFermer,
EvenementNaviguer,
EvenementSelectionner
} from '@lga/commun/build/composants/composants-base';
......
import './MenuIndicateurs.js';
import '../../structure/RadioBoutonTerritoires.js';
import { EvenementFermer } from '@lga/commun/build/composants/composants-base';
import { css, html, LitElement } from 'lit';
import { customElement, query, state } from 'lit/decorators.js';
import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
import { ICONES_SVG } from '../../../domaines/systeme-alimentaire/configuration/icones_svg';
import { Bouton } from '../../base/Bouton';
import { OptionsBoutonsTerritoires, RadioBoutonTerritoires } from "../../structure/RadioBoutonTerritoires";
import { MenuIndicateurs, OptionsMenuIndicateurs } from './MenuIndicateurs';
declare global {
interface HTMLElementTagNameMap {
'c-menu-selection-couche-glissant': MenuSelectionCoucheGlissant;
}
}
@customElement('c-menu-selection-couche-glissant')
export class MenuSelectionCoucheGlissant extends LitElement {
static styles = css`
:host {
position: absolute;
z-index: auto;
right: 5px;
top: 5px;
}
#boutons-territoires {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
height: var(--hauteur-barre-navigation-echelle-territoriale);
}
c-bouton {
margin-left: auto;
--c-bouton__color: var(--bleu-marine);
--c-bouton__color__hover: var(--gris3);
--c-bouton__background-color: var(--blanc);
--c-bouton__background-color__hover: var(--blanc);
}
c-panneau-glissant {
--c-bouton__color: var(--bleu-marine);
--c-bouton__color__hover: var(--gris3);
--c-bouton__background-color: var(--blanc);
--c-bouton__background-color__hover: var(--blanc);
}
c-menu-indicateurs {
margin: auto;
}
div[slot='contenu'] {
background-color: var(--blanc);
min-height: 100%;
}
header {
border-bottom: solid 2px var(--bleu-marine);
}
.titre {
display: grid;
justify-content: start;
align-items: center;
}
.titre h1 {
margin: auto;
padding: 10px;
color: var(--bleu-marine);
font-size: var(--title4);
}
`;
@query('c-bouton')
private boutonFermer!: Bouton;
@query('c-menu-indicateurs')
private menuIndicateurs!: MenuIndicateurs;
@query('c-radio-bouton-territoires')
private radioBoutonTerritoires!: RadioBoutonTerritoires;
@state()
private options?: OptionsMenuIndicateurs;
@state()
boutonsTerritoires?: OptionsBoutonsTerritoires;
render() {
return html`
<c-panneau-glissant>
${unsafeSVG(ICONES_SVG.couchesCarte)}
<div slot="contenu">
<header>
<c-bouton @click=${this.fermer} libelleTooltip="Fermer"> ${unsafeSVG(ICONES_SVG.fermer)} </c-bouton>
</header>
<div class="titre">
<h1>Changer d'échelle</h1>
</div>
<c-radio-bouton-territoires id="boutons-territoires" @selectionner="${this.fermer}"></c-radio-bouton-territoires>
<div class="titre">
<h1>Changer d'indicateur</h1>
</div>
<c-menu-indicateurs @selectionner="${this.fermer}"></c-menu-indicateurs>
</div>
</c-panneau-glissant>
`;
}
maj(options: OptionsMenuIndicateurs, optionsBoutonsTerritoires: OptionsBoutonsTerritoires) {
this.options = options;
this.boutonsTerritoires = optionsBoutonsTerritoires;
}
updated() {
if (this.options !== undefined) {
this.menuIndicateurs.maj(this.options);
}
if (this.boutonsTerritoires !== undefined) {
this.radioBoutonTerritoires.maj(this.boutonsTerritoires);
}
}
private fermer() {
this.boutonFermer.dispatchEvent(new EvenementFermer());
}
}
import './MenuIndicateurs.js';
import { EvenementFermer } from '@lga/commun/build/composants/composants-base';
import { css, html, LitElement } from 'lit';
import { customElement, query, state } from 'lit/decorators.js';
import { customElement, query } from 'lit/decorators.js';
import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
import { EchelleTerritoriale } from "../../../domaines/carte/EchelleTerritoriale";
import { ICONES_SVG } from '../../../domaines/systeme-alimentaire/configuration/icones_svg';
import { Bouton } from '../../base/Bouton';
import { MenuIndicateurs, OptionsMenuIndicateurs } from './MenuIndicateurs';
declare global {
interface HTMLElementTagNameMap {
'c-menu-indicateurs-glissant': MenuIndicateursGlissant;
'c-menu-recherche-territoire-glissant': MenuRechercheTerritoireGlissant;
}
}
@customElement('c-menu-indicateurs-glissant')
export class MenuIndicateursGlissant extends LitElement {
@customElement('c-menu-recherche-territoire-glissant')
export class MenuRechercheTerritoireGlissant extends LitElement {
static styles = css`
:host {
position: absolute;
......@@ -51,41 +49,45 @@ export class MenuIndicateursGlissant extends LitElement {
header {
border-bottom: solid 2px var(--bleu-marine);
}
.titre {
display: grid;
justify-content: start;
align-items: center;
}
.titre h1 {
margin: auto;
padding: 10px;
color: var(--bleu-marine);
font-size: var(--title4);
}
`;
@query('c-bouton')
private boutonFermer!: Bouton;
@query('c-menu-indicateurs')
private menuIndicateurs!: MenuIndicateurs;
@state()
private options?: OptionsMenuIndicateurs;
render() {
return html`
<c-panneau-glissant>
${unsafeSVG(ICONES_SVG.couchesCarte)}
${unsafeSVG(ICONES_SVG.loupe)}
<div slot="contenu">
<header>
<c-bouton @click=${this.fermer} libelleTooltip="Fermer"> ${unsafeSVG(ICONES_SVG.fermer)} </c-bouton>
</header>
<c-menu-indicateurs></c-menu-indicateurs>
<div class="titre">
<h1>Rechercher un territoire</h1>
</div>
<c-champ-recherche-territoire
codesCategorieTerritoire=${EchelleTerritoriale.listerTousLesCodeCategories.join(' ')}
data-cy="champ-recherche-territoire"
@selectionnerTerritoire="${this.fermer}"
/>
</div>
</c-panneau-glissant>
`;
}
maj(options: OptionsMenuIndicateurs) {
this.options = options;
}
updated() {
if (this.options === undefined) return;
this.menuIndicateurs.maj(this.options);
}
private fermer() {
this.boutonFermer.dispatchEvent(new EvenementFermer());
}
......
......@@ -2,7 +2,7 @@ import {
CSS_BREAKPOINT_MAX_WIDTH_DESKTOP_PETIT,
CSS_BREAKPOINT_MAX_WIDTH_MOBILE_PAYSAGE,
CSS_BREAKPOINT_MAX_WIDTH_TABLETTE,
EvenementSelectionner
EvenementSelectionner,
} from '@lga/commun/build/composants/composants-base';
import { css, html, LitElement, unsafeCSS } from 'lit';
import { customElement, state } from 'lit/decorators.js';
......
import '../../composants/structure/Entete.js';
import '../../composants/structure/BarreNavigationEchelleTerritoriale.js';
import '../../composants/carte/menu-indicateurs/MenuIndicateurs.js';
import '../../composants/carte/menu-indicateurs/MenuIndicateursGlissant.js';
import '../../composants/carte/menu-indicateurs/MenuSelectionCoucheGlissant.js';
import '../../composants/carte/menu-recherche/MenuRechercheTerritoireGlissant.js';
import '../../composants/carte/widget-carte/WidgetCarte.js';
import '../../composants/carte/widget-carte/TitreEtLegendeCarte.js';
......@@ -13,15 +14,19 @@ import {
IDS_EVENEMENTS
} from '@lga/commun/build/composants/composants-base';
import baseRawCss from '@lga/commun/build/composants/composants-base.css';
import { html, LitElement, unsafeCSS } from 'lit';
import {css, html, LitElement, unsafeCSS} from 'lit';
import { customElement, property, query } from 'lit/decorators.js';
import { MenuIndicateurs, OptionsIndicateurs, OptionsMaillon } from '../../composants/carte/menu-indicateurs/MenuIndicateurs';
import { MenuIndicateursGlissant } from '../../composants/carte/menu-indicateurs/MenuIndicateursGlissant';
import { MenuSelectionCoucheGlissant } from '../../composants/carte/menu-indicateurs/MenuSelectionCoucheGlissant';
import {
MenuRechercheTerritoireGlissant
} from "../../composants/carte/menu-recherche/MenuRechercheTerritoireGlissant";
import { TitreEtLegendeCarte } from '../../composants/carte/widget-carte/TitreEtLegendeCarte';
import { WidgetCarte } from '../../composants/carte/widget-carte/WidgetCarte';
import { BarreNavigationEchelleTerritoriale } from '../../composants/structure/BarreNavigationEchelleTerritoriale';
import { Entete } from '../../composants/structure/Entete';
import { OptionsBoutonsTerritoires } from "../../composants/structure/RadioBoutonTerritoires";
import { DomaineCarte, EtatCarte } from '../../domaines/carte/DomaineCarte';
import { EchelleTerritoriale } from '../../domaines/carte/EchelleTerritoriale';
import { IndicateurCarte, Maillon } from '../../domaines/systeme-alimentaire';
......@@ -38,7 +43,15 @@ import { ControleurCarte } from './ControleurCarte';
@customElement('c-page-carte')
export class PageCarte extends LitElement {
static styles = [unsafeCSS(baseRawCss), unsafeCSS(carteRawCss)];
static styles = [
css`
.top-50-px {
top: 50px;
}
`,
unsafeCSS(baseRawCss),
unsafeCSS(carteRawCss)
];
private controleurCarte = new ControleurCarte();
......@@ -56,7 +69,8 @@ export class PageCarte extends LitElement {
@query('c-entete') private entete!: Entete;
@query('c-barre-navigation-echelle-territoriale') private barreNavigationEchelleTerritoriale!: BarreNavigationEchelleTerritoriale;
@query('c-menu-indicateurs') private menuIndicateursFixe!: MenuIndicateurs;
@query('c-menu-indicateurs-glissant') private menuIndicateursGlissant!: MenuIndicateursGlissant;
@query('c-menu-selection-couche-glissant') private menuSelectionCoucheGlissant!: MenuSelectionCoucheGlissant;
@query('c-menu-recherche-territoire-glissant') private menuRechercheTerritoireGlissant!: MenuRechercheTerritoireGlissant;
@query('c-titre-et-legende-carte') private titreEtLegendeCarte!: TitreEtLegendeCarte;
@query('c-carte') private carte!: WidgetCarte;
......@@ -72,7 +86,8 @@ export class PageCarte extends LitElement {
<c-menu-indicateurs id="carte__menu-choix-indicateur-dans-panneau-statique"></c-menu-indicateurs>
</section>
<section id="section-carte">
<c-menu-indicateurs-glissant class="masquer-par-defaut afficher-sur-tablette"></c-menu-indicateurs-glissant>
<c-menu-recherche-territoire-glissant class="masquer-par-defaut afficher-sur-tablette"></c-menu-recherche-territoire-glissant>
<c-menu-selection-couche-glissant class="masquer-par-defaut afficher-sur-tablette top-50-px"></c-menu-selection-couche-glissant>
<c-titre-et-legende-carte></c-titre-et-legende-carte>
<c-carte autoriserZoom autoriserMouvements></c-carte>
</section>
......@@ -96,12 +111,20 @@ export class PageCarte extends LitElement {
icone: maillon.icone
}));
const listeBoutonsTerritoires: OptionsBoutonsTerritoires = {
boutons: EchelleTerritoriale.listerToutes.map((echelle: EchelleTerritoriale) => ({
id: echelle.id,
libelle: echelle.libelle
})),
idBoutonActif: this.domaineCarte.getEchelleTerritorialeActive().id
}
const optionsMenuIndicateurs = {
maillons: listeMaillons,
indicateurs: listeIndicateurs,
idIndicateurActif: this.idIndicateur
idIndicateurActif: this.idIndicateur,
};
this.menuIndicateursGlissant.maj(optionsMenuIndicateurs);
this.menuSelectionCoucheGlissant.maj(optionsMenuIndicateurs, listeBoutonsTerritoires);
this.menuIndicateursFixe.maj(optionsMenuIndicateurs);
switch (this.domaineCarte.getEtat()) {
......@@ -160,9 +183,9 @@ export class PageCarte extends LitElement {
}
firstUpdated() {
this.menuIndicateursGlissant.addEventListener(
this.menuSelectionCoucheGlissant.addEventListener(
IDS_EVENEMENTS.selectionner,
(IDS_EVENEMENTS.selectionner, (e: Event) => this.actionModifierIndicateurActif((<EvenementSelectionner>e).detail.idItemSelectionne))
(IDS_EVENEMENTS.selectionner, (e: Event) => this.actionModifierEchelleTerritorialeOuIndicateur((<EvenementSelectionner>e).detail.idItemSelectionne))
);
this.menuIndicateursFixe.addEventListener(
IDS_EVENEMENTS.selectionner,
......@@ -175,8 +198,21 @@ export class PageCarte extends LitElement {
this.entete.addEventListener(IDS_EVENEMENTS.selectionnerTerritoire, (e: Event) =>
this.actionNouveauTerritoire((<EvenementSelectionnerTerritoire>e).detail.idTerritoireCrater)
);
this.menuRechercheTerritoireGlissant.addEventListener(IDS_EVENEMENTS.selectionnerTerritoire, (e: Event) =>
this.actionNouveauTerritoire((<EvenementSelectionnerTerritoire>e).detail.idTerritoireCrater)
);
}
actionModifierEchelleTerritorialeOuIndicateur = (idItemSelectionne: string) => {
const listeTousLesCodeCategories: string[] = EchelleTerritoriale.listerToutes.map((echelle: EchelleTerritoriale) => echelle.id)
if (listeTousLesCodeCategories.includes(idItemSelectionne)) {
this.actionModifierEchelleTerritorialeCarte(idItemSelectionne)
} else {
// sinon on suppose que c'est un id d'indicateur
this.actionModifierIndicateurActif(idItemSelectionne)
}
};
actionModifierIndicateurActif = (idIndicateur: string) => {
this.domaineCarte.majIndicateurActif(idIndicateur);
changerParametreUrl(PARAMETRE_URL_IDENTIFIANT_INDICATEUR, idIndicateur);
......
......@@ -88,7 +88,7 @@ export class PageDiagnostic extends LitElement {
class="masquer-sur-desktop-petit masquer-dans-pdf"
idSectionActive=${this.section}
></c-menu-navigation-sections>`
)};
)}
${choose(
this.section,
[
......
......@@ -3,7 +3,11 @@ import { customElement, property, query, state } from 'lit/decorators.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import { getApiBaseUrl } from '../../env/config-baseurl';
import { EvenementErreur, EvenementReinitialiser, EvenementSelectionnerTerritoire } from '../composants-base';
import {
EvenementErreur, EvenementFermer,
EvenementReinitialiser,
EvenementSelectionnerTerritoire,
} from '../composants-base';
import iconeLoupeMonochrome from './loupe.svg';
import { chargerListeSuggestionsTerritoires } from './requete-api-suggestions-territoires';
import { SuggestionTerritoire } from './SuggestionTerritoire';
......@@ -282,7 +286,6 @@ export class ChampRechercheTerritoire extends LitElement {
}
private emettreEvtReinitialiser() {
console.log('Reinitialiser');
this.dispatchEvent(new EvenementReinitialiser());
}
......
......@@ -613,4 +613,3 @@ legend {
display: block;
}
}
......@@ -17,7 +17,7 @@ export const IDS_EVENEMENTS = {
selectionner: 'selectionner',
selectionnerTerritoire: 'selectionnerTerritoire',
reinitialiser: 'reinitialiser',
deplacerCarte: 'deplacer-carte'
deplacerCarte: 'deplacer-carte',
};
export class EvenementCrater<T> extends CustomEvent<T> {
......
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