Skip to content

Commit

Permalink
fix(button) : Conformité DSFR du widget d'un bouton d'export pour les…
Browse files Browse the repository at this point in the history
… outils de calcul (#334)

* Bouton Exporter ou Sauvegarder en DSFR
* Menu des options
* Ajout d'un container sur les widgets pour plugger le bouton
* Ajout events sur les widgets
  • Loading branch information
lowzonenose authored Jan 27, 2025
1 parent 5de4067 commit 91db51b
Show file tree
Hide file tree
Showing 26 changed files with 955 additions and 190 deletions.
1 change: 1 addition & 0 deletions DRAFT_CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ __DATE__
* 🐛 [Fixed]

- ContextMenu : correction pour affichage du menu en mode dark (#332, #333)
- Export : mise en conformité DSFR du bouton Export (#334)

* 🔒 [Security]

Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "geopf-extensions-openlayers",
"description": "French Geoportal Extensions for OpenLayers libraries",
"version": "1.0.0-beta.2-333",
"version": "1.0.0-beta.2-334",
"date": "23/01/2025",
"module": "src/index.js",
"directories": {},
Expand Down
39 changes: 29 additions & 10 deletions samples-src/pages/tests/Export/pages-ol-export-modules-default.html
Original file line number Diff line number Diff line change
Expand Up @@ -67,30 +67,41 @@ <h2>Ajout du widget Export</h2>
})
});

var layerSwitcher = new ol.control.LayerSwitcher({});
var layerSwitcher = new ol.control.LayerSwitcher({
options : {
position : "top-right"
}
});
map.addControl(layerSwitcher);

// var importLayer = new ol.control.LayerImport();
// map.addControl(importLayer);

// drawing + export into widget
var drawing = new ol.control.Drawing({
position : "bottom-left",
tools : {
export : false
}
});
map.addControl(drawing);
var exportDrawing = new ol.control.Export({
control: drawing,
format : "kml"
format : "kml",
icons : {
button : true
}
});
map.addControl(exportDrawing);
exportDrawing.on("export:compute", (e) => {
exportDrawing.on("button:clicked", (e) => {
console.log("Export Drawing", e);
});

// iso + export with config
var iso = new ol.control.Isocurve({draggable:true});
var iso = new ol.control.Isocurve({
position : "bottom-left",
draggable : true
});
map.addControl(iso);
var exportIso = new ol.control.Export({
control: iso,
Expand All @@ -99,18 +110,24 @@ <h2>Ajout du widget Export</h2>
name: "export-iso",
title : "Exporter",
menu : true,
icons : {
menu : "",
button : true
}
// Desactive le download de l'export :
// onExport : function (content) {
// callback : function (content) {
// console.log(content);
// }
});
map.addControl(exportIso);
exportIso.on("export:compute", (e) => {
exportIso.on("button:clicked", (e) => {
console.log("Export Iso", e);
});

// route + export with setters
var route = new ol.control.Route();
var route = new ol.control.Route({
position : "bottom-left"
});
map.addControl(route);
exportRoute = new ol.control.Export({});
exportRoute.setControl(route);
Expand All @@ -119,13 +136,15 @@ <h2>Ajout du widget Export</h2>
exportRoute.setName("export-route");
exportRoute.setTitle("Exporter Iti");
exportRoute.setMenu(true);
exportRoute.on("export:compute", (e) => {
exportRoute.on("button:clicked", (e) => {
console.log("Export Route", e);
});
map.addControl(exportRoute);

// profil
var measureProfil = new ol.control.ElevationPath();
var measureProfil = new ol.control.ElevationPath({
position : "bottom-left"
});
map.addControl(measureProfil);
var exportProfil = new ol.control.Export({
control: measureProfil,
Expand All @@ -134,7 +153,7 @@ <h2>Ajout du widget Export</h2>
menu: false
});
map.addControl(exportProfil);
exportProfil.on("export:compute", (e) => {
exportProfil.on("button:clicked", (e) => {
console.log("Export Profil", e);
});
};
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
{{#extend "ol-sample-modules-dsfr-layout"}}

{{#content "vendor"}}

<link rel="stylesheet" href="{{ baseurl }}/dist/modules/GpfExtOlExport.css" />
<script src="{{ baseurl }}/dist/modules/GpfExtOlExport.js"></script>
<link rel="stylesheet" href="{{ baseurl }}/dist/modules/GpfExtOlLayerSwitcher.css" />
<script src="{{ baseurl }}/dist/modules/GpfExtOlLayerSwitcher.js"></script>
<link rel="stylesheet" href="{{ baseurl }}/dist/modules/GpfExtOlDrawing.css" />
<script src="{{ baseurl }}/dist/modules/GpfExtOlDrawing.js"></script>
{{/content}}

{{#content "head"}}
<title>Sample openlayers</title>
{{/content}}

{{#content "style"}}
<style>
div#map {
width: 100%;
height: 100vh;
}
div[id^=GPlayerSwitcher-] {
top: 80px;
right: 8px;
}
</style>
{{/content}}

{{#content "body"}}
<h2>Ajout du widget Export</h2>
<!-- map -->
<div id="map"></div>
{{/content}}

{{#content "js"}}
<script type="text/javascript">
if (window.Gp) {
// activation des loggers
Gp.Logger.enableAll();
}
var map;
var exportRoute;
var createMap = function() {
// on cache l'image de chargement du Géoportail.
document.getElementById('map').style.backgroundImage = 'none';

// Création de la map
map = new ol.Map({
target : "map",
layers : [
new ol.layer.Tile({
source: new ol.source.OSM(),
opacity: 0.5
})
],
view : new ol.View({
center : [288074.8449901076, 6247982.515792289],
zoom : 18
})
});

// Ajout du widget LayerSwitcher
var layerSwitcher = new ol.control.LayerSwitcher({
options : {
position : "top-right",
collapsed : true,
panel : true,
counter : true
}
});
map.addControl(layerSwitcher);

// cas drawing :
// * bouton secondary avec icone
// * mode sauvegarde
// * sans menu
// * target interne
// * appel instance externe
var drawing = new ol.control.Drawing({
position: "bottom-left",
tools : {
export : false
}
});
map.addControl(drawing);

var exportDrawingExport = new ol.control.Export({
title : "Exporter",
download : true,
control: drawing,
format : "kml",
menu : false,
icons : {
button : "export"
},
kind : "secondary"
});
map.addControl(exportDrawingExport);
exportDrawingExport.on("button:clicked", (e) => {
console.log("Export Drawing", e);
});
var exportDrawingSave = new ol.control.Export({
title : "Sauvegarder",
download : false,
control: drawing,
format : "kml",
icons : {
button : "save"
},
kind : "secondary"
});
map.addControl(exportDrawingSave);
exportDrawingSave.on("button:clicked", (e) => {
console.log("Save Drawing", e);
});

};
Gp.Services.getConfig({
customConfigFile : "{{ configurl }}",
callbackSuffix : "",
// apiKey: "{{ apikey }}",
timeOut : 20000,
onSuccess : createMap,
onFailure : (e) => {
console.error(e);
}
});
</script>
{{/content}}
{{/extend}}
Loading

0 comments on commit 91db51b

Please sign in to comment.