feat(controlList): add controllist widget for classic mode (#300)

* feat(controlList): add controllist widget for classic mode

* fix le truc d'elias

Author: azarz

package.json

@@ -1,7 +1,7 @@
 {
   "name": "geopf-extensions-openlayers",
   "description": "French Geoportal Extensions for OpenLayers libraries",
-  "version": "1.0.0-beta.1-296",
+  "version": "1.0.0-beta.1-300",
   "date": "11/12/2024",
   "module": "src/index.js",
   "directories": {},

samples-src/pages/tests/Default/pages-ol-modules-default.html

@@ -44,6 +44,8 @@
         <script src="{{ baseurl }}/dist/modules/GpfExtOlCatalog.js"></script>
         <link rel="stylesheet" href="{{ baseurl }}/dist/modules/GpfExtOlTerritories.css" />
         <script src="{{ baseurl }}/dist/modules/GpfExtOlTerritories.js"></script>
+        <link rel="stylesheet" href="{{ baseurl }}/dist/modules/GpfExtOlControlList.css" />
+        <script src="{{ baseurl }}/dist/modules/GpfExtOlControlList.js"></script>
 {{/content}}
 
 {{#content "head"}}
@@ -54,7 +56,7 @@
         <style>
             div#map {
                 width: 100%;
-                height: 800px;
+                height: 600px;
             }
         </style>
 {{/content}}
@@ -108,16 +110,18 @@ <h2>Ajout de tous les widgets</h2>
                   position : "top-left"
                 });
                 map.addControl(overview);
-                
+
                 var drawing = new ol.control.Drawing({
                   draggable: true,
-                  position : "bottom-left"
+                  position : "bottom-left",
+                  listable: true,
                 });
                 map.addControl(drawing);
 
                 var iso = new ol.control.Isocurve({
                   draggable: true,
-                  position : "bottom-left"
+                  position : "bottom-left",
+                  listable: true,
                 });
                 map.addControl(iso);
 
@@ -148,13 +152,15 @@ <h2>Ajout de tous les widgets</h2>
                 map.addControl(route);
 
                 var feature =  new ol.control.GetFeatureInfo({
-                    position : "top-left"
+                  position : "top-left",
+                  listable: true,
                 });
                 map.addControl(feature);
 
                 var reverse = new ol.control.ReverseGeocode({
                   draggable: true,
-                  position : "top-right"
+                  position : "top-right",
+                  listable: true,
                 });
                 map.addControl(reverse);
 
@@ -202,8 +208,15 @@ <h2>Ajout de tous les widgets</h2>
                     auto: true
                 });
                 map.addControl(territories);
+
+                var controlList = new ol.control.ControlList({
+                      draggable: false,
+                      position: "bottom-right",
+                });
+                map.addControl(controlList);
               };
 
+
               Gp.Services.getConfig({
                   customConfigFile : "{{ configurl }}",
                   callbackSuffix : "",

samples-src/pages/tests/Default/pages-ol-modules-dsfr-default.html

@@ -71,7 +71,7 @@ <h2>Ajout de tous les widgets</h2>
 
 {{#content "js"}}
             <script type="text/javascript">
-              
+
               var createMap = function () {
                 // on cache l'image de chargement du Géoportail.
                 document.getElementById("map").style.backgroundImage = "none";
@@ -161,7 +161,8 @@ <h2>Ajout de tous les widgets</h2>
                 map.addControl(route);
 
                 var feature =  new ol.control.GetFeatureInfo({
-                  position : "top-left"
+                  position : "top-left",
+                  listable: true,
                 });
                 map.addControl(feature);
 

src/packages/CSS/Controls/ControlList/DSFRcontrolListStyle.css

@@ -1,3 +1,7 @@
+button[id^="GPshowControlListPicto-"][aria-pressed="true"] + dialog {
+  width: 370px;
+}
+
 div[id^="GPcontrolList-"] .GPshowOpen > span {
   font-size: 32px;
   position: absolute;

src/packages/CSS/Controls/ControlList/GPFcontrolList.css

@@ -11,7 +11,6 @@ button[id^="GPshowControlListPicto-"][aria-pressed="true"] + dialog {
   flex-direction: column;
   visibility: visible;
   opacity: 100%;
-  width: 370px;
 }
 
 dialog[id^="GPcontrolListPanel-"] {

src/packages/CSS/Controls/ControlList/GPFcontrolListStyle.css

@@ -1,4 +1,37 @@
-/* En attente d'implementation */
-div[id^="GPcontrolList-"] {
-    display: none;
+div[id^="GPcontrolList-"] .GPshowOpen > span {
+  font-size: 24px;
+  color: white;
+  display: block;
+  height: 24px;
+  line-height: 24px;
+  pointer-events: none;
+}
+
+button[id^="GPshowControlListPicto-"][aria-pressed="true"] + dialog {
+  width: 200px;
+}
+
+.GPcontrolListPanelClose {
+  background-image: url("img/close.png");
+}
+
+dialog[id^="GPcontrolListPanel-"] .gpf-panel__content > div {
+  display: flex;
+  flex-direction: row;
+  column-gap: 1rem;
+  align-items: center;
+  padding: 0.5rem 0.5rem;
+}
+
+dialog[id^="GPcontrolListPanel-"] .gpf-panel__content > div:hover {
+  background-color: #EEE;
+  cursor: pointer;
+}
+
+dialog[id^="GPcontrolListPanel-"] .gpf-panel__content > div > button {
+  flex-shrink: 0;
+}
+
+dialog[id^="GPcontrolListPanel-"] .gpf-panel__content > div > button:hover {
+  background-color: rgba(0,60,136,0.5);
 }

src/packages/CSS/Controls/ControlList/img/close.png

@@ -172,7 +172,12 @@ var ControlListDOM = {
      * @returns {DOMElement} DOM element
      */
     _createControlListPanelControl : function (control) {
-        const controlContainer = control.getContainer();
+        let controlContainer;
+        try {
+            controlContainer = control.getContainer();
+        } catch (e) {
+            controlContainer = control.container;
+        }
         var container = document.createElement("div");
         var btn = controlContainer.querySelector(".GPshowOpen").cloneNode();
         btn.id = btn.id + "-controllist";
@@ -181,12 +186,12 @@ var ControlListDOM = {
         var divText = document.createElement("div");
         var spanTitle = document.createElement("span");
         divText.appendChild(spanTitle);
-        if (controlContainer.querySelector(".GPpanelTitle")) {
+        if (controlContainer.querySelector(".GPshowOpen").ariaLabel) {
+            spanTitle.innerText = controlContainer.querySelector(".GPshowOpen").ariaLabel;
+        } else if (controlContainer.querySelector(".GPpanelTitle")) {
             spanTitle.innerText = controlContainer.querySelector(".GPpanelTitle").innerText;
         } else if (controlContainer.querySelector("[class^='gpf-btn-header-']")) {
             spanTitle.innerText = controlContainer.querySelector("[class^='gpf-btn-header-']").title;
-        } else {
-            spanTitle.innerText = controlContainer.querySelector(".GPshowOpen").ariaLabel;
         }
         if (control.description) {
             var spanDescription = document.createElement("span");