fix(dsfr)(css): affichage des btns tertiary (#277)

IGNF · Nov 25, 2024 · 7ffa198 · 7ffa198
1 parent 7f8fbc1
commit 7ffa198
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 32 deletions.
diff --git a/package.json b/package.json
@@ -1,8 +1,8 @@
 {
   "name": "geopf-extensions-openlayers",
   "description": "French Geoportal Extensions for OpenLayers libraries",
-  "version": "1.0.0-beta.0-272",
-  "date": "22/11/2024",
+  "version": "1.0.0-beta.0-277",
+  "date": "25/11/2024",
   "module": "src/index.js",
   "directories": {},
   "engines": {

diff --git a/samples-src/pages/tests/Default/pages-ol-modules-dsfr-default.html b/samples-src/pages/tests/Default/pages-ol-modules-dsfr-default.html
@@ -140,7 +140,8 @@ <h2>Ajout de tous les widgets</h2>
                   options : {
                     panel: true,
                     draggable: true,
-                    position : "top-left"
+                    position : "top-left",
+                    counter : true,
                   }
                 });
                 map.addControl(layerSwitcher);

diff --git a/src/packages/CSS/DSFRgeneralWidget.css b/src/packages/CSS/DSFRgeneralWidget.css
@@ -147,12 +147,12 @@
   background-color: var(--background-default-grey);
 }
 
-.gpf-btn-icon[aria-pressed="true"] {
+.gpf-widget > .gpf-btn-icon[aria-pressed="true"] {
   background-color: var(--hover-tint);
   position: relative;
 }
 
-.gpf-widget:has(.gpf-btn-icon[aria-pressed="true"])::after {
+.gpf-widget:has(> .gpf-btn-icon[aria-pressed="true"])::after {
   background-color: var(--background-action-high-blue-france);
   content: "";
   width: 3px;
@@ -168,7 +168,7 @@
   }
 }
 
-.gpf-btn-icon:not([class*=--secondary])[aria-label]:hover::before {
+.gpf-widget > .gpf-btn-icon[aria-label]:hover::before {
   content: attr(aria-label);
   position: absolute;
   top: 0;
@@ -185,13 +185,13 @@
   background-image: conic-gradient(from 56.31deg at 0% 50%,transparent 0deg,var(--background-overlap-grey) 0deg,var(--background-overlap-grey) 67.38deg,transparent 67.38deg),conic-gradient(from 56.31deg at 0% 50%,transparent 0deg,var(--border-default-grey) 0deg,var(--border-default-grey) 67.38deg,transparent 67.38deg),linear-gradient(90deg,var(--border-default-grey),var(--border-default-grey)),linear-gradient(90deg,var(--background-overlap-grey),var(--background-overlap-grey));
 }
 
-.position-container-top-left .gpf-btn-icon:not([class*=--secondary])[aria-label]:hover::before,
-.position-container-bottom-left .gpf-btn-icon:not([class*=--secondary])[aria-label]:hover::before {
+.position-container-top-left .gpf-widget > .gpf-btn-icon[aria-label]:hover::before,
+.position-container-bottom-left .gpf-widget > .gpf-btn-icon[aria-label]:hover::before {
   transform: translateX(24px);
 }
 
-.position-container-top-right .gpf-btn-icon:not([class*=--secondary])[aria-label]:hover::before,
-.position-container-bottom-right .gpf-btn-icon:not([class*=--secondary])[aria-label]:hover::before {
+.position-container-top-right .gpf-widget > .gpf-btn-icon[aria-label]:hover::before,
+.position-container-bottom-right .gpf-widget > .gpf-btn-icon[aria-label]:hover::before {
   transform: translateX(calc(-100% - 16px));
   padding: .5rem 1.25rem .5rem .5rem;
   background-size: .375rem .5rem, .375rem .5rem, 1px 100%, 100%;

diff --git a/src/packages/Controls/LayerSwitcher/LayerSwitcher.js b/src/packages/Controls/LayerSwitcher/LayerSwitcher.js
@@ -101,12 +101,7 @@ var LayerSwitcher = class LayerSwitcher extends Control {
         var _layers = options.layers || [];
 
         // call ol.control.Control constructor
-        super({
-            element : _options.element,
-            target : _options.target,
-            render : _options.render,
-            listable : _options.listable,
-        });
+        super(_options);
 
         if (!(this instanceof LayerSwitcher)) {
             throw new TypeError("ERROR CLASS_CONSTRUCTOR");

diff --git a/src/packages/Controls/LayerSwitcher/LayerSwitcherDOM.js b/src/packages/Controls/LayerSwitcher/LayerSwitcherDOM.js
@@ -67,7 +67,7 @@ var LayerSwitcherDOM = {
     _createMainContainerElement : function () {
         var container = document.createElement("div");
         container.id = this._addUID("GPlayerSwitcher");
-        container.className = "GPwidget gpf-widget gpf-mobile-fullscreen"; // gpf-widget-button
+        container.className = "GPwidget gpf-widget gpf-mobile-fullscreen gpf-widget-button";
         return container;
     },
 
@@ -319,19 +319,14 @@ var LayerSwitcherDOM = {
         button.className = "GPelementHidden GPlayerDragNDrop gpf-btn gpf-btn-icon gpf-btn-icon-ls-dragndrop gpf-btn--tertiary fr-btn fr-btn--tertiary-no-outline fr-m-1w";
         button.title = "Deplacer la couche";
         button.setAttribute("tabindex", "0");
-        button.setAttribute("aria-pressed", true);
 
         var self = this;
         if (button.addEventListener) {
             button.addEventListener("click", function (e) {
-                var status = (e.target.ariaPressed === "true");
-                e.target.setAttribute("aria-pressed", !status);
                 self._onStartDragAndDropLayerClick(e);
             });
         } else if (button.attachEvent) {
             button.attachEvent("onclick", function (e) {
-                var status = (e.target.ariaPressed === "true");
-                e.target.setAttribute("aria-pressed", !status);
                 self._onStartDragAndDropLayerClick(e);
             });
         }
@@ -517,20 +512,15 @@ var LayerSwitcherDOM = {
             button.innerText = "Supprimer";
         }
         button.setAttribute("tabindex", "0");
-        button.setAttribute("aria-pressed", true);
         button.setAttribute("type", "button");
 
         var context = this;
         if (button.addEventListener) {
             button.addEventListener("click", function (e) {
-                var status = (e.target.ariaPressed === "true");
-                e.target.setAttribute("aria-pressed", !status);
                 context._onDropLayerClick(e);
             });
         } else if (button.attachEvent) {
             button.attachEvent("onclick", function (e) {
-                var status = (e.target.ariaPressed === "true");
-                e.target.setAttribute("aria-pressed", !status);
                 context._onDropLayerClick(e);
             });
         }
@@ -571,7 +561,6 @@ var LayerSwitcherDOM = {
             btnInfo.innerText = "Informations";
         }
         btnInfo.setAttribute("tabindex", "0");
-        btnInfo.setAttribute("aria-pressed", true);
         btnInfo.setAttribute("type", "button");
 
         // add event on click
@@ -580,8 +569,6 @@ var LayerSwitcherDOM = {
             btnInfo.addEventListener(
                 "click",
                 function (e) {
-                    var status = (e.target.ariaPressed === "true");
-                    e.target.setAttribute("aria-pressed", !status);
                     context._onOpenLayerInfoClick(e);
                 }
             );
@@ -590,8 +577,6 @@ var LayerSwitcherDOM = {
             btnInfo.attachEvent(
                 "onclick",
                 function (e) {
-                    var status = (e.target.ariaPressed === "true");
-                    e.target.setAttribute("aria-pressed", !status);
                     context._onOpenLayerInfoClick(e);
                 }
             );