From 0de5d7902b98c9b8054e1a65ffbb2b4d2a089064 Mon Sep 17 00:00:00 2001 From: "amaury.zarzelli" Date: Thu, 8 Aug 2024 15:05:31 +0200 Subject: [PATCH] feat(route:dsfr): route widget compatible with dsfr --- package.json | 2 +- .../pages-ol-route-modules-dsfr-default.html | 4 +- .../Controls/Isochron/DSFRisochronStyle.css | 4 - .../LocationSelector/DSFRlocationStyle.css | 52 ++++- .../Controls/LocationSelector/GPFlocation.css | 8 - .../LocationSelector/GPFlocationStyle.css | 10 +- .../LocationSelector/img/dsfr/close-line.svg | 1 + .../CSS/Controls/Route/DSFRrouteStyle.css | 70 +++++++ src/packages/CSS/Controls/Route/GPFroute.css | 52 ----- .../CSS/Controls/Route/GPFrouteStyle.css | 54 ++++- src/packages/CSS/DSFRgeneralWidget.css | 6 + src/packages/CSS/GPFgeneralWidget.css | 13 +- .../LocationSelector/LocationSelectorDOM.js | 10 +- src/packages/Controls/Route/Route.js | 12 +- src/packages/Controls/Route/RouteDOM.js | 186 +++++++++++------- 15 files changed, 322 insertions(+), 162 deletions(-) create mode 100644 src/packages/CSS/Controls/LocationSelector/img/dsfr/close-line.svg diff --git a/package.json b/package.json index 1fee8e94a..0cc649b0f 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "geopf-extensions-openlayers", "description": "French Geoportal Extensions for OpenLayers libraries", - "version": "1.0.0-beta.0-137", + "version": "1.0.0-beta.0-139", "date": "01/08/2024", "module": "src/index.js", "directories": {}, diff --git a/samples-src/pages/tests/Route/pages-ol-route-modules-dsfr-default.html b/samples-src/pages/tests/Route/pages-ol-route-modules-dsfr-default.html index 6d272cc32..902903d66 100644 --- a/samples-src/pages/tests/Route/pages-ol-route-modules-dsfr-default.html +++ b/samples-src/pages/tests/Route/pages-ol-route-modules-dsfr-default.html @@ -1,7 +1,7 @@ {{#extend "ol-sample-modules-dsfr-layout"}} {{#content "vendor"}} - + @@ -16,7 +16,7 @@ {{/content}} diff --git a/src/packages/CSS/Controls/Isochron/DSFRisochronStyle.css b/src/packages/CSS/Controls/Isochron/DSFRisochronStyle.css index 7089f7227..e63dc16ef 100644 --- a/src/packages/CSS/Controls/Isochron/DSFRisochronStyle.css +++ b/src/packages/CSS/Controls/Isochron/DSFRisochronStyle.css @@ -22,10 +22,6 @@ margin-top: 0; } -.GPlocationOriginLabel { - display: none; -} - div[id^="GPisochronChoice"] { justify-content: left; gap: 1em; diff --git a/src/packages/CSS/Controls/LocationSelector/DSFRlocationStyle.css b/src/packages/CSS/Controls/LocationSelector/DSFRlocationStyle.css index 19bbefb48..a1c259f86 100644 --- a/src/packages/CSS/Controls/LocationSelector/DSFRlocationStyle.css +++ b/src/packages/CSS/Controls/LocationSelector/DSFRlocationStyle.css @@ -17,13 +17,57 @@ position: relative; } +.gpf-btn-icon-remove { + height: 2.5rem; + width: 2.5rem; +} + .gpf-btn-icon-label {} .gpf-btn-icon-remove::after { - -webkit-mask: url("img/GPlocationOptions.png") -82px center no-repeat; - mask: url("img/GPlocationOptions.png") -82px center no-repeat; + -webkit-mask: url("img/dsfr/close-line.svg") center no-repeat; + mask: url("img/dsfr/close-line.svg") center no-repeat; } .gpf-btn-icon-add::after { - -webkit-mask: url("img/GPlocationOptions.png") -54px center no-repeat; - mask: url("img/GPlocationOptions.png") -54px center no-repeat; + -webkit-mask: url("img/GPlocationOptions.png") -51px center no-repeat; + mask: url("img/GPlocationOptions.png") -51px center no-repeat; + width: 2.5rem; + height: 2.5rem; +} + +.GPlocationOriginLabel { + display: none; + pointer-events: none; +} + +[class^="GPlocationPoint-"]:has(.GPflexInput.GPelementHidden) { + padding: 0; +} +[id^="GPlocationPoint_"] { + justify-content: left; +} + +.GPlocationStageFlexInput { + flex-wrap: wrap; +} + +.GPlocationStageAdd { + flex-basis: 45%; + width: 0px; + min-height: 40px; + padding: 0.25rem 0.75rem 0.25rem 2.5rem; + text-align: left; +} + +.GPlocationOriginLabel { + flex-basis: fit-content; +} + +.GPlocationOriginPointerImg { + flex-basis: 2.5em; +} + +.GPlocationStageFlexInput input { + flex-basis: 33%; + flex-grow: 1; } diff --git a/src/packages/CSS/Controls/LocationSelector/GPFlocation.css b/src/packages/CSS/Controls/LocationSelector/GPFlocation.css index 68d050e3c..917705dac 100644 --- a/src/packages/CSS/Controls/LocationSelector/GPFlocation.css +++ b/src/packages/CSS/Controls/LocationSelector/GPFlocation.css @@ -1,13 +1,5 @@ /* Location */ -[id^=GPlocationStageRemove], -[id^=GPlocationStageAdd] { - width: 28px; - height: 28px; - border: none; - cursor: pointer; -} - [id^=GPlocationStageRemove] { } diff --git a/src/packages/CSS/Controls/LocationSelector/GPFlocationStyle.css b/src/packages/CSS/Controls/LocationSelector/GPFlocationStyle.css index 21472c172..0776839dd 100644 --- a/src/packages/CSS/Controls/LocationSelector/GPFlocationStyle.css +++ b/src/packages/CSS/Controls/LocationSelector/GPFlocationStyle.css @@ -9,6 +9,14 @@ background-image: url("img/GPlocationOptions.png"); } +[id^=GPlocationStageRemove], +[id^=GPlocationStageAdd] { + width: 28px; + height: 28px; + border: none; + cursor: pointer; +} + .GPlocationOpen { background-color: unset; } @@ -46,4 +54,4 @@ button.GPlocationOriginPointerImg[id*="GPlocationOriginPointerImg"] { div[id^=GPlocationAutoCompleteList] { -} \ No newline at end of file +} diff --git a/src/packages/CSS/Controls/LocationSelector/img/dsfr/close-line.svg b/src/packages/CSS/Controls/LocationSelector/img/dsfr/close-line.svg new file mode 100644 index 000000000..c725cde66 --- /dev/null +++ b/src/packages/CSS/Controls/LocationSelector/img/dsfr/close-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/packages/CSS/Controls/Route/DSFRrouteStyle.css b/src/packages/CSS/Controls/Route/DSFRrouteStyle.css index 36cf6646d..a308318c0 100644 --- a/src/packages/CSS/Controls/Route/DSFRrouteStyle.css +++ b/src/packages/CSS/Controls/Route/DSFRrouteStyle.css @@ -12,3 +12,73 @@ .GProuteFormMini .GPelementShow { color: var(--grey-200-850); } + +[id^="GProuteForm-"] .GPlocationOriginLabel { + display: unset; +} + +[id^="GProuteForm-"] > .GPpanelFooter { + position: unset; +} + +[id^="GProuteSubmit-"] { + width: 80%; +} + +[id^="GProuteForm-"] > [class^="GPlocationPoint-"] { + margin-top: 1rem; +} + +[id^="GProuteForm-"].GProuteFormMini > [class^="GPlocationPoint-"] { + margin-top: 0; +} + +[id^="GProuteForm-"] > [class^="GPlocationPoint-"] ~ [class^="GPlocationPoint-"] { + margin-top: 0; +} + +/* Reset picto */ +button[id^=GProuteReset-], div[id^=GProuteResultsNew-] { + min-width: 2.5em; +} + +div[id^=GProuteResultsValueDist], +div[id^=GProuteResultsValueTime] { + color: var(--text-action-high-blue-france); + font-weight: bold; +} + +.GProuteResultsShowDetailsDiv { + justify-content: left; +} + +div:has(input[id^=GProuteResultsShowDetails]) + div[id^=GProuteResultsDetails-] { + max-height: 0; + opacity: 0; + overflow: hidden; +} + +div:has(input[id^=GProuteResultsShowDetails]:checked) + div[id^=GProuteResultsDetails-] { + max-height: 200px; + opacity: 1; + overflow-y: scroll; +} + +div[id^=GProuteResultsDetails-] { + max-width: 350px; + transition: max-height 0.5s ease-in-out 0.25s, opacity 0.5s ease-in-out 0.25s; + display: grid; + grid-template-columns: 30px 1fr; + gap: 0.5rem 5px; +} + +.GProuteResultsDetailsNumber, +.GProuteResultsDetailsInstruction { + display: inline-block; +} + +.GProuteResultsDetailsNumber { + font-weight: bold; + text-align: right; + vertical-align: top; +} diff --git a/src/packages/CSS/Controls/Route/GPFroute.css b/src/packages/CSS/Controls/Route/GPFroute.css index 3ce61dc10..021b64595 100644 --- a/src/packages/CSS/Controls/Route/GPFroute.css +++ b/src/packages/CSS/Controls/Route/GPFroute.css @@ -28,13 +28,6 @@ button[id^="GPshowRoutePicto-"][aria-pressed="true"] + dialog { left: 34px; } -/* Reset picto */ - -button[id^=GProuteReset] { - opacity: 0.8; - transition: opacity 0.2s ease-out; -} - button[id^=GProuteReset]:hover { opacity: 1; } @@ -159,37 +152,6 @@ div[id^=GProuteResultsPanel] { padding: 15px; } -div[id^=GProuteResultsValueDist], -div[id^=GProuteResultsValueTime] { - color: #366291; -} - -div[id^=GProuteResultsNew] { - background-color: #366291; - background-image: url("img/GProuteOptions.png"); -} - -input[id^=GProuteResultsShowDetails] + label:hover, -input[id^=GProuteResultsShowDetails] + label + label:hover { - color: #366291; -} - -div[id^=GProuteResultsStages] { - margin-bottom: 15px; -} - -div[id^=GProuteResultsValueDist], -div[id^=GProuteResultsValueTime] { - display: inline-block; - line-height: 18px; -} - -div[id^=GProuteResultsValueDist], -div[id^=GProuteResultsValueTime] { - width: 80px; - font-weight: bold; -} - div[id^=GProuteResults-] { display: -webkit-flex; display: -ms-flexbox; @@ -206,20 +168,6 @@ div[id^=GProuteResults-] { margin-bottom: 10px; } -select[id^=GProuteResultsComputationSelect] { - width: 100px; -} - -div[id^=GProuteResultsNew] { - width: 28px; - height: 28px; - border-radius: 3px; - opacity: 0.8; - background-position: -224px 0; - transition: opacity 0.2s ease-out; - cursor: pointer; -} - div[id^=GProuteResultsNew]:hover { opacity: 1; } diff --git a/src/packages/CSS/Controls/Route/GPFrouteStyle.css b/src/packages/CSS/Controls/Route/GPFrouteStyle.css index dae176578..2c87246a9 100644 --- a/src/packages/CSS/Controls/Route/GPFrouteStyle.css +++ b/src/packages/CSS/Controls/Route/GPFrouteStyle.css @@ -82,6 +82,10 @@ div[id^=GProuteTransportChoice] input { display: none; } +div[id^=GProuteTransportChoice] .gpf-radio-btn-group { + justify-content: center; +} + select[id^=GProuteComputationSelect] { width: 100px; } @@ -182,6 +186,8 @@ button[id^=GProuteReset] { /* background-color: #366291; */ background-image: url("img/GProuteOptions.png"); background-position: -224px center; + opacity: 0.8; + transition: opacity 0.2s ease-out; } /* Results popup */ @@ -191,6 +197,50 @@ button[id^=GProuteReset] { } /* Results details header */ +div[id^=GProuteResultsValueDist], +div[id^=GProuteResultsValueTime] { + color: #366291; +} + +input[id^=GProuteResultsShowDetails] + label:hover, +input[id^=GProuteResultsShowDetails] + label + label:hover { + color: #366291; +} + +div[id^=GProuteResultsStages] { + margin-bottom: 15px; +} + +div[id^=GProuteResultsValueDist], +div[id^=GProuteResultsValueTime] { + display: inline-block; + line-height: 18px; +} + +div[id^=GProuteResultsValueDist], +div[id^=GProuteResultsValueTime] { + width: 80px; + font-weight: bold; +} + +div[id^=GProuteResultsNew] { + background-color: #366291; + background-image: url("img/GProuteOptions.png"); +} + +select[id^=GProuteResultsComputationSelect] { + width: 100px; +} + +div[id^=GProuteResultsNew] { + width: 28px; + height: 28px; + border-radius: 3px; + opacity: 0.8; + background-position: -224px 0; + transition: opacity 0.2s ease-out; + cursor: pointer; +} .GPfakeBorder { display: inline-block; @@ -224,12 +274,12 @@ input[id^=GProuteResultsShowDetails] + label + label { display: none; } -input[id^=GProuteResultsShowDetails] + label + label + div + div[id^=GProuteResultsDetails] { +div:has(input[id^=GProuteResultsShowDetails]) + div[id^=GProuteResultsDetails] { max-height: 0; opacity: 0; } -input[id^=GProuteResultsShowDetails]:checked + label + label + div + div[id^=GProuteResultsDetails] { +div:has(input[id^=GProuteResultsShowDetails]:checked) + div[id^=GProuteResultsDetails] { max-height: 200px; opacity: 1; } diff --git a/src/packages/CSS/DSFRgeneralWidget.css b/src/packages/CSS/DSFRgeneralWidget.css index 908306971..658f4747f 100644 --- a/src/packages/CSS/DSFRgeneralWidget.css +++ b/src/packages/CSS/DSFRgeneralWidget.css @@ -42,6 +42,7 @@ background-color: transparent; padding: 0; margin-top: 0; + justify-content: center; } .gpf-panel__content { @@ -226,6 +227,11 @@ .gpf-radio-group {} +.gpf-radio-btn-group { + display: flex; + gap: 1em; +} + .gpf-upload {} /*************/ diff --git a/src/packages/CSS/GPFgeneralWidget.css b/src/packages/CSS/GPFgeneralWidget.css index 3b8b19d1d..9028096d5 100644 --- a/src/packages/CSS/GPFgeneralWidget.css +++ b/src/packages/CSS/GPFgeneralWidget.css @@ -127,8 +127,8 @@ .GPpanelIcon, .GPresetPicto, .GPreturnPicto, -.GPpanelClose, -.GPpanelReduce, +.GPpanelClose, +.GPpanelReduce, .GPpanelInfo { position: absolute; width: 26px; @@ -173,7 +173,7 @@ padding: 2px; background-color: rgba(255, 255, 255, 0.4); border-radius: 4px; - border: 2px solid rgba(255, 255, 255, 0.4) ; + border: 2px solid rgba(255, 255, 255, 0.4) ; } .GPshowAdvancedToolPicto:hover { @@ -349,7 +349,7 @@ input.GPsubmit:hover { } .GPinput { - + } .GPform { @@ -551,3 +551,8 @@ input[type="checkbox"]:checked + .GPshowMoreOptions { padding-bottom: 10px; border-bottom: 1px dotted #666; } + +.gpf-radio-btn-group { + display: flex; + gap: 1em; +} diff --git a/src/packages/Controls/LocationSelector/LocationSelectorDOM.js b/src/packages/Controls/LocationSelector/LocationSelectorDOM.js index 84c52f4cf..c84bf93ab 100644 --- a/src/packages/Controls/LocationSelector/LocationSelectorDOM.js +++ b/src/packages/Controls/LocationSelector/LocationSelectorDOM.js @@ -1,6 +1,7 @@ import ID from "../../Utils/SelectorID"; import Logger from "../../Utils/LoggerByDefault"; import GeocodeUtils from "../../Utils/GeocodeUtils"; +import checkDsfr from "../Utils/CheckDsfr"; var logger = Logger.getLogger("LocationSelectorDOM"); @@ -79,7 +80,7 @@ var LocationSelectorDOM = { document.getElementById(self._addUID("GPlocationStageRemove_" + i)).className = "GPlocationStageRemove gpf-btn gpf-btn-icon-remove fr-btn--sm fr-btn--secondary gpf-btn--secondary"; } if (document.getElementById(self._addUID("GPlocationStageAdd"))) { - document.getElementById(self._addUID("GPlocationStageAdd")).className = "GPlocationStageAdd gpf-btn gpf-btn-icon-add fr-btn--sm fr-btn--secondary gpf-btn--secondary"; + document.getElementById(self._addUID("GPlocationStageAdd")).className = "GPlocationStageAdd gpf-btn gpf-btn-icon-add fr-btn--sm fr-btn--secondary gpf-btn--secondary fr-mt-2w"; } // document.getElementById(self._addUID("GPlocationOriginCoords_" + i)).disabled = true; self.onLocationClearPointClick(e); @@ -278,7 +279,7 @@ var LocationSelectorDOM = { document.getElementById(self._addUID("GPlocationStageRemove_" + i)).className = "GPlocationStageRemove gpf-btn gpf-btn-icon-remove fr-btn--sm fr-btn--secondary gpf-btn--secondary"; } if (document.getElementById(self._addUID("GPlocationStageAdd"))) { - document.getElementById(self._addUID("GPlocationStageAdd")).className = "GPlocationStageAdd gpf-btn gpf-btn-icon-add fr-btn--sm fr-btn--secondary gpf-btn--secondary"; + document.getElementById(self._addUID("GPlocationStageAdd")).className = "GPlocationStageAdd gpf-btn gpf-btn-icon-add fr-btn--sm fr-btn--secondary gpf-btn--secondary fr-mt-2w"; } document.getElementById(self._addUID("GPlocationOriginPointer_" + i)).checked = false; document.getElementById(self._addUID("GPlocationOrigin_" + i)).className = "GPelementShow gpf-show gpf-input fr-input"; @@ -375,8 +376,11 @@ var LocationSelectorDOM = { var buttonAdd = document.createElement("button"); buttonAdd.id = this._addUID("GPlocationStageAdd"); - buttonAdd.className = "GPlocationOpen GPlocationStageAdd gpf-btn gpf-btn-icon-add fr-btn--sm fr-btn--secondary gpf-btn--secondary"; + buttonAdd.className = "GPlocationOpen GPlocationStageAdd gpf-btn gpf-btn-icon-add fr-btn--sm fr-btn--secondary gpf-btn--secondary fr-mt-2w"; buttonAdd.title = "Ajouter une étape"; + if (checkDsfr()) { + buttonAdd.innerText = "Ajouter une étape"; + } buttonAdd.setAttribute("tabindex", "0"); buttonAdd.setAttribute("aria-pressed", false); buttonAdd.setAttribute("type", "button"); diff --git a/src/packages/Controls/Route/Route.js b/src/packages/Controls/Route/Route.js index 64b8d4e8f..4f7f68878 100644 --- a/src/packages/Controls/Route/Route.js +++ b/src/packages/Controls/Route/Route.js @@ -694,17 +694,16 @@ var Route = class Route extends Control { // form var routeForm = this._formRouteContainer = this._createRoutePanelFormElement(); + // form: menu des modes + routeForm.appendChild(this._createRoutePanelFormModeChoiceTransportElement(this.options.graphs)); + // form: menu des points var points = this._createRoutePanelFormPointsElement(map); for (var i = 0; i < points.length; i++) { routeForm.appendChild(points[i]); } - // form: menu des modes - var choice = this._createRoutePanelFormModeChoiceElement(); - choice.appendChild(this._createRoutePanelFormModeChoiceTransportElement(this.options.graphs)); - choice.appendChild(this._createRoutePanelFormModeChoiceComputeElement()); - routeForm.appendChild(choice); + routeForm.appendChild(this._createRoutePanelFormModeChoiceComputeElement()); // form: menu des exclusions this._showRouteExclusionsElement = this._createShowRouteExclusionsPictoElement(); @@ -1261,8 +1260,7 @@ var Route = class Route extends Control { * @private */ onRouteModeComputationChange (e) { - var idx = e.target.selectedIndex; - var value = e.target.options[idx].value; + var value = e.target.value; if (!value) { return; diff --git a/src/packages/Controls/Route/RouteDOM.js b/src/packages/Controls/Route/RouteDOM.js index dd0436725..be6e3ff2d 100644 --- a/src/packages/Controls/Route/RouteDOM.js +++ b/src/packages/Controls/Route/RouteDOM.js @@ -1,6 +1,7 @@ import ID from "../../Utils/SelectorID"; import Logger from "../../Utils/LoggerByDefault"; import GeocodeUtils from "../../Utils/GeocodeUtils"; +import checkDsfr from "../Utils/CheckDsfr"; var logger = Logger.getLogger("RouteDOM"); @@ -205,10 +206,19 @@ var RouteDOM = { // computation mode params var modeComputation = null; - if (document.getElementById(self._addUID("GProuteComputationSelect"))) { - var select = document.getElementById(self._addUID("GProuteResultsComputationSelect")); - select.selectedIndex = document.getElementById(self._addUID("GProuteComputationSelect")).selectedIndex; - modeComputation = select.options[select.selectedIndex].value; + if (document.getElementById(self._addUID("GProuteComputationChoice"))) { + // plus rapide ? + if (document.getElementById(self._addUID("GProuteComputationFastest"))) { + if (document.getElementById(self._addUID("GProuteComputationFastest")).checked) { + modeComputation = document.getElementById(self._addUID("GProuteComputationFastest")).value; + } + } + // plus court ? + if (document.getElementById(self._addUID("GProuteComputationShortest"))) { + if (document.getElementById(self._addUID("GProuteComputationShortest")).checked) { + modeComputation = document.getElementById(self._addUID("GProuteComputationShortest")).value; + } + } } // transport mode params @@ -265,27 +275,7 @@ var RouteDOM = { container.appendChild(this._createRouteResultsStagesElement()); container.appendChild(this._createRouteResultsElement()); - - var divBorderUp = document.createElement("div"); - divBorderUp.className = "GPfakeBorder GPfakeBorderLeft"; - container.appendChild(divBorderUp); - container.appendChild(this._createRouteShowResultsDetailsElement()); - - var labelShow = document.createElement("label"); - labelShow.htmlFor = this._addUID("GProuteResultsShowDetails"); - labelShow.innerHTML = "Afficher le détail"; - container.appendChild(labelShow); - - var labelHide = document.createElement("label"); - labelHide.htmlFor = this._addUID("GProuteResultsShowDetails"); - labelHide.innerHTML = "Masquer le détail"; - container.appendChild(labelHide); - - var divBorderDown = document.createElement("div"); - divBorderDown.className = "GPfakeBorder"; - container.appendChild(divBorderDown); - container.appendChild(this._createRouteResultsDetailsElement()); return container; @@ -384,7 +374,7 @@ var RouteDOM = { var select = document.createElement("select"); select.id = this._addUID("GProuteResultsComputationSelect"); - select.className = "GPselect"; + select.className = "GPselect gpf-select fr-select"; // gestionnaire d'evenement : // on stocke la valeur du mode de calcul, et on relance le calcul d'itiniraire select.addEventListener("change", function (e) { @@ -410,6 +400,7 @@ var RouteDOM = { var divNew = document.createElement("div"); divNew.id = this._addUID("GProuteResultsNew"); + divNew.className = "GPresetPicto gpf-btn gpf-btn-icon-reset fr-btn fr-btn--secondary gpf-btn--secondary"; divNew.title = "Modifier le calcul"; divNew.addEventListener("click", function (e) { document.getElementById(self._addUID("GProuteResultsPanel")).className = "GPelementHidden gpf-hidden"; @@ -491,10 +482,32 @@ var RouteDOM = { * @returns {DOMElement} DOM element */ _createRouteShowResultsDetailsElement : function () { + var div = document.createElement("div"); + div.className = "GProuteResultsShowDetailsDiv gpf-flex fr-checkbox-group fr-m-1w"; + if (!checkDsfr()) { + var divBorderUp = document.createElement("div"); + divBorderUp.className = "GPfakeBorder GPfakeBorderLeft"; + div.appendChild(divBorderUp); + } var input = document.createElement("input"); input.id = this._addUID("GProuteResultsShowDetails"); input.type = "checkbox"; - return input; + div.appendChild(input); + var labelShow = document.createElement("label"); + labelShow.className = "gpf-label fr-label"; + labelShow.htmlFor = this._addUID("GProuteResultsShowDetails"); + labelShow.innerHTML = "Afficher le détail"; + div.appendChild(labelShow); + if (!checkDsfr()) { + var labelHide = document.createElement("label"); + labelHide.htmlFor = this._addUID("GProuteResultsShowDetails"); + labelHide.innerHTML = "Masquer le détail"; + div.appendChild(labelHide); + var divBorderDown = document.createElement("div"); + divBorderDown.className = "GPfakeBorder"; + div.appendChild(divBorderDown); + } + return div; }, /** @@ -855,21 +868,6 @@ var RouteDOM = { // ############## Methods to the choice mode into form ############### // // ################################################################### // - /** - * Create Container to Mode choice transport - * - * @returns {DOMElement} DOM element - */ - _createRoutePanelFormModeChoiceElement : function () { - var div = document.createElement("div"); - div.id = this._addUID("GProuteModeChoice"); - - // div.appendChild(this._createRoutePanelFormModeChoiceTransportElement()); - // div.appendChild(this._createRoutePanelFormModeChoiceComputeElement()); - - return div; - }, - /** * Create Mode choice transport * see event ! @@ -887,9 +885,11 @@ var RouteDOM = { var label = document.createElement("label"); label.className = "GProuteModeLabel gpf-label fr-label"; - label.innerHTML = "Mode de transport"; + label.innerHTML = "Choisir un mode de déplacement"; divContainer.appendChild(label); + var divRadio = document.createElement("div"); + divRadio.className = "gpf-radio-btn-group"; /* jshint -W083 */ for (var i = 0; i < transports.length; i++) { var transport = transports[i]; @@ -959,8 +959,9 @@ var RouteDOM = { div.appendChild(labelPedestrian); } - divContainer.appendChild(div); + divRadio.appendChild(div); } + divContainer.appendChild(divRadio); return divContainer; }, @@ -975,44 +976,80 @@ var RouteDOM = { // contexte d'execution var context = this; - var div = document.createElement("div"); - div.id = this._addUID("GProuteComputationChoice"); + var divContainer = document.createElement("div"); + divContainer.id = this._addUID("GProuteComputationChoice"); + divContainer.className = "fr-mt-2w"; var label = document.createElement("label"); - label.htmlFor = this._addUID("GProuteComputationSelect"); + label.className = "GProuteComputationLabel gpf-label fr-label"; label.innerHTML = "Mode de calcul"; - var span = document.createElement("span"); - span.className = "GProuteModeLabel"; - span.appendChild(label); - div.appendChild(span); + divContainer.appendChild(label); - var select = document.createElement("select"); - select.id = this._addUID("GProuteComputationSelect"); - select.className = "GPselect gpf-select fr-select"; + var divRadio = document.createElement("div"); + divRadio.className = "gpf-radio-btn-group"; + + var div = document.createElement("div"); + div.className = "GProuteComputationChoice gpf-flex gpf-radio-group fr-radio-group fr-my-1w"; + var inputFastest = document.createElement("input"); + inputFastest.id = this._addUID("GProuteComputationFastest"); + inputFastest.type = "radio"; + inputFastest.name = "GProuteComputation"; + inputFastest.value = "fastest"; + inputFastest.checked = true; // gestionnaire d'evenement : - // on stocke la valeur du mode de calcul, + // on stocke le mode de transport, // utilisation pour la requête sur le service de calcul d'itiniraire - select.addEventListener("change", function (e) { - context.onRouteModeComputationChange(e); - }); + if (inputFastest.addEventListener) { + inputFastest.addEventListener("change", function (e) { + context.onRouteModeComputationChange(e); + }); + } else if (inputFastest.attachEvent) { + inputFastest.attachEvent("onchange", function (e) { + context.onRouteModeComputationChange(e); + }); + } + div.appendChild(inputFastest); + + var labelFastest = document.createElement("label"); + labelFastest.className = "gpf-label fr-label"; + labelFastest.htmlFor = this._addUID("GProuteComputationFastest"); + labelFastest.title = "Plus rapide"; + labelFastest.innerHTML = "Plus rapide"; + div.appendChild(labelFastest); + divRadio.appendChild(div); + + var div2 = document.createElement("div"); + div2.className = "GProuteComputationChoice gpf-flex gpf-radio-group fr-radio-group fr-my-1w"; + var inputShortest = document.createElement("input"); + inputShortest.id = this._addUID("GProuteComputationShortest"); + inputShortest.type = "radio"; + inputShortest.name = "GProuteComputation"; + inputShortest.value = "shortest"; + // gestionnaire d'evenement : + // on stocke le mode de transport, + // utilisation pour la requête sur le service de calcul d'itiniraire + if (inputShortest.addEventListener) { + inputShortest.addEventListener("change", function (e) { + context.onRouteModeComputationChange(e); + }); + } else if (inputShortest.attachEvent) { + inputShortest.attachEvent("onchange", function (e) { + context.onRouteModeComputationChange(e); + }); + } + div2.appendChild(inputShortest); - var computes = [{ - code : "fastest", - label : "Plus rapide" - }, { - code : "shortest", - label : "Plus court" - }]; + var labelShortest = document.createElement("label"); + labelShortest.className = "gpf-label fr-label"; + labelShortest.htmlFor = this._addUID("GProuteComputationShortest"); + labelShortest.title = "Plus court"; + labelShortest.innerHTML = "Plus court"; + div2.appendChild(labelShortest); - for (var i = 0; i < computes.length; i++) { - var option = document.createElement("option"); - option.value = computes[i].code; - option.text = computes[i].label; - select.appendChild(option); - } - div.appendChild(select); + divRadio.appendChild(div2); + divContainer.appendChild(divRadio); - return div; + return divContainer; }, // ################################################################### // @@ -1065,6 +1102,7 @@ var RouteDOM = { _createRoutePanelFormExclusionsElement : function () { var div = document.createElement("div"); div.id = this._addUID("GProuteExclusions"); + div.className = "fr-mt-2w"; var label = document.createElement("label"); label.className = "GProuteExclusionsLabel fr-m-1w"; @@ -1198,7 +1236,7 @@ var RouteDOM = { _createRouteSubmitFormElement : function () { var input = document.createElement("input"); input.id = this._addUID("GProuteSubmit"); - input.className = "GPsubmit gpf-btn gpf-btn-icon-submit fr-btn fr-btn--secondary gpf-btn--secondary"; + input.className = "GPsubmit gpf-btn gpf-btn-icon-submit fr-btn"; input.type = "submit"; input.value = "Calculer"; @@ -1220,7 +1258,7 @@ var RouteDOM = { var buttonReset = document.createElement("button"); buttonReset.id = this._addUID("GProuteReset"); buttonReset.title = "Réinitialiser les paramètres"; - buttonReset.className = "GPresetPicto gpf-btn gpf-btn-icon-return fr-btn fr-btn--secondary gpf-btn--secondary"; + buttonReset.className = "GPresetPicto gpf-btn gpf-btn-icon-reset fr-btn fr-btn--secondary gpf-btn--secondary"; buttonReset.title = "Réinitialiser les paramètres"; buttonReset.setAttribute("tabindex", "0"); buttonReset.setAttribute("aria-pressed", false);