Skip to content

Commit 91db51b

Browse files
lowzonenoselowzonenose
authored
fix(button) : Conformité DSFR du widget d'un bouton d'export pour les 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
1 parent 5de4067 commit 91db51b

26 files changed

+955
-190
lines changed

‎DRAFT_CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ __DATE__
2424
* 🐛 [Fixed]
2525

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

2829
* 🔒 [Security]
2930

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "geopf-extensions-openlayers",
33
"description": "French Geoportal Extensions for OpenLayers libraries",
4-
"version": "1.0.0-beta.2-333",
4+
"version": "1.0.0-beta.2-334",
55
"date": "23/01/2025",
66
"module": "src/index.js",
77
"directories": {},

‎samples-src/pages/tests/Export/pages-ol-export-modules-default.html‎

Lines changed: 29 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -67,30 +67,41 @@ <h2>Ajout du widget Export</h2>
6767
})
6868
});
6969

70-
var layerSwitcher = new ol.control.LayerSwitcher({});
70+
var layerSwitcher = new ol.control.LayerSwitcher({
71+
options : {
72+
position : "top-right"
73+
}
74+
});
7175
map.addControl(layerSwitcher);
7276

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

7680
// drawing + export into widget
7781
var drawing = new ol.control.Drawing({
82+
position : "bottom-left",
7883
tools : {
7984
export : false
8085
}
8186
});
8287
map.addControl(drawing);
8388
var exportDrawing = new ol.control.Export({
8489
control: drawing,
85-
format : "kml"
90+
format : "kml",
91+
icons : {
92+
button : true
93+
}
8694
});
8795
map.addControl(exportDrawing);
88-
exportDrawing.on("export:compute", (e) => {
96+
exportDrawing.on("button:clicked", (e) => {
8997
console.log("Export Drawing", e);
9098
});
9199

92100
// iso + export with config
93-
var iso = new ol.control.Isocurve({draggable:true});
101+
var iso = new ol.control.Isocurve({
102+
position : "bottom-left",
103+
draggable : true
104+
});
94105
map.addControl(iso);
95106
var exportIso = new ol.control.Export({
96107
control: iso,
@@ -99,18 +110,24 @@ <h2>Ajout du widget Export</h2>
99110
name: "export-iso",
100111
title : "Exporter",
101112
menu : true,
113+
icons : {
114+
menu : "",
115+
button : true
116+
}
102117
// Desactive le download de l'export :
103-
// onExport : function (content) {
118+
// callback : function (content) {
104119
// console.log(content);
105120
// }
106121
});
107122
map.addControl(exportIso);
108-
exportIso.on("export:compute", (e) => {
123+
exportIso.on("button:clicked", (e) => {
109124
console.log("Export Iso", e);
110125
});
111126

112127
// route + export with setters
113-
var route = new ol.control.Route();
128+
var route = new ol.control.Route({
129+
position : "bottom-left"
130+
});
114131
map.addControl(route);
115132
exportRoute = new ol.control.Export({});
116133
exportRoute.setControl(route);
@@ -119,13 +136,15 @@ <h2>Ajout du widget Export</h2>
119136
exportRoute.setName("export-route");
120137
exportRoute.setTitle("Exporter Iti");
121138
exportRoute.setMenu(true);
122-
exportRoute.on("export:compute", (e) => {
139+
exportRoute.on("button:clicked", (e) => {
123140
console.log("Export Route", e);
124141
});
125142
map.addControl(exportRoute);
126143

127144
// profil
128-
var measureProfil = new ol.control.ElevationPath();
145+
var measureProfil = new ol.control.ElevationPath({
146+
position : "bottom-left"
147+
});
129148
map.addControl(measureProfil);
130149
var exportProfil = new ol.control.Export({
131150
control: measureProfil,
@@ -134,7 +153,7 @@ <h2>Ajout du widget Export</h2>
134153
menu: false
135154
});
136155
map.addControl(exportProfil);
137-
exportProfil.on("export:compute", (e) => {
156+
exportProfil.on("button:clicked", (e) => {
138157
console.log("Export Profil", e);
139158
});
140159
};

‎samples-src/pages/tests/Export/pages-ol-export-modules-dsfr-buttons.html‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
{{#extend "ol-sample-modules-dsfr-layout"}}
2+
3+
{{#content "vendor"}}
4+
5+
<link rel="stylesheet" href="{{ baseurl }}/dist/modules/GpfExtOlExport.css" />
6+
<script src="{{ baseurl }}/dist/modules/GpfExtOlExport.js"></script>
7+
<link rel="stylesheet" href="{{ baseurl }}/dist/modules/GpfExtOlLayerSwitcher.css" />
8+
<script src="{{ baseurl }}/dist/modules/GpfExtOlLayerSwitcher.js"></script>
9+
<link rel="stylesheet" href="{{ baseurl }}/dist/modules/GpfExtOlDrawing.css" />
10+
<script src="{{ baseurl }}/dist/modules/GpfExtOlDrawing.js"></script>
11+
{{/content}}
12+
13+
{{#content "head"}}
14+
<title>Sample openlayers</title>
15+
{{/content}}
16+
17+
{{#content "style"}}
18+
<style>
19+
div#map {
20+
width: 100%;
21+
height: 100vh;
22+
}
23+
div[id^=GPlayerSwitcher-] {
24+
top: 80px;
25+
right: 8px;
26+
}
27+
</style>
28+
{{/content}}
29+
30+
{{#content "body"}}
31+
<h2>Ajout du widget Export</h2>
32+
<!-- map -->
33+
<div id="map"></div>
34+
{{/content}}
35+
36+
{{#content "js"}}
37+
<script type="text/javascript">
38+
if (window.Gp) {
39+
// activation des loggers
40+
Gp.Logger.enableAll();
41+
}
42+
var map;
43+
var exportRoute;
44+
var createMap = function() {
45+
// on cache l'image de chargement du Géoportail.
46+
document.getElementById('map').style.backgroundImage = 'none';
47+
48+
// Création de la map
49+
map = new ol.Map({
50+
target : "map",
51+
layers : [
52+
new ol.layer.Tile({
53+
source: new ol.source.OSM(),
54+
opacity: 0.5
55+
})
56+
],
57+
view : new ol.View({
58+
center : [288074.8449901076, 6247982.515792289],
59+
zoom : 18
60+
})
61+
});
62+
63+
// Ajout du widget LayerSwitcher
64+
var layerSwitcher = new ol.control.LayerSwitcher({
65+
options : {
66+
position : "top-right",
67+
collapsed : true,
68+
panel : true,
69+
counter : true
70+
}
71+
});
72+
map.addControl(layerSwitcher);
73+
74+
// cas drawing :
75+
// * bouton secondary avec icone
76+
// * mode sauvegarde
77+
// * sans menu
78+
// * target interne
79+
// * appel instance externe
80+
var drawing = new ol.control.Drawing({
81+
position: "bottom-left",
82+
tools : {
83+
export : false
84+
}
85+
});
86+
map.addControl(drawing);
87+
88+
var exportDrawingExport = new ol.control.Export({
89+
title : "Exporter",
90+
download : true,
91+
control: drawing,
92+
format : "kml",
93+
menu : false,
94+
icons : {
95+
button : "export"
96+
},
97+
kind : "secondary"
98+
});
99+
map.addControl(exportDrawingExport);
100+
exportDrawingExport.on("button:clicked", (e) => {
101+
console.log("Export Drawing", e);
102+
});
103+
var exportDrawingSave = new ol.control.Export({
104+
title : "Sauvegarder",
105+
download : false,
106+
control: drawing,
107+
format : "kml",
108+
icons : {
109+
button : "save"
110+
},
111+
kind : "secondary"
112+
});
113+
map.addControl(exportDrawingSave);
114+
exportDrawingSave.on("button:clicked", (e) => {
115+
console.log("Save Drawing", e);
116+
});
117+
118+
};
119+
Gp.Services.getConfig({
120+
customConfigFile : "{{ configurl }}",
121+
callbackSuffix : "",
122+
// apiKey: "{{ apikey }}",
123+
timeOut : 20000,
124+
onSuccess : createMap,
125+
onFailure : (e) => {
126+
console.error(e);
127+
}
128+
});
129+
</script>
130+
{{/content}}
131+
{{/extend}}

0 commit comments

Comments
 (0)