Merge pull request #425 from IGNF/feat/mouse-position-accordion

ajout accordeon mouse position

Author: IGNFhc

src/packages/CSS/Controls/MousePosition/GPFmousePositionStyle.css

@@ -116,3 +116,17 @@ select.GPmousePositionDirection:disabled::-ms-value {
 .GPmousePositionEditTool {
   background-image: url("img/GPmousePositionEditCoordinates.png");
 }
+
+button[aria-expanded="true"] span.GPshowMousePositionAdvancedTools {
+  -webkit-transform: rotateX(180deg);
+  transform: rotateX(180deg);
+}
+
+.GPshowMousePositionAdvancedTools {
+  display: inline-block;
+  width: 28px;
+  height: 28px;
+  vertical-align: middle;
+  background-image: url("img/GPMousePositionTools.png");
+  background-position: -26px 0;
+}

src/packages/CSS/Controls/MousePosition/img/GPMousePositionTools.png

@@ -868,8 +868,8 @@ class MousePosition extends Control {
         var settings = this._createMousePositionSettingsElement();
         var systems = this._projectionSystemsContainer = this._createMousePositionSettingsSystemsElement(this._projectionSystems);
         var units = this._projectionUnitsContainer = this._createMousePositionSettingsUnitsElement(this._projectionUnits[this._currentProjectionType]);
-        settings.appendChild(systems);
-        settings.appendChild(units);
+        var settingsAccordion = this._createMousePositionSettingsAccordion([systems, units]);
+        settings.appendChild(settingsAccordion);
         mousePositionPanelDiv.appendChild(settings);
 
         container.appendChild(mousePositionPanel);

src/packages/Controls/MousePosition/MousePosition.js

@@ -1,3 +1,30 @@
+const stringToHTML = (str) => {
+    var support = function () {
+        if (!window.DOMParser) {
+            return false;
+        }
+        var parser = new DOMParser();
+        try {
+            parser.parseFromString("x", "text/html");
+        } catch (err) {
+            return false;
+        }
+        return true;
+    };
+
+    // If DOMParser is supported, use it
+    if (support()) {
+        var parser = new DOMParser();
+        var doc = parser.parseFromString(str, "text/html");
+        return doc.body;
+    }
+
+    // Otherwise, fallback to old-school method
+    var dom = document.createElement("div");
+    dom.innerHTML = str;
+    return dom;
+};
+
 var MousePositionDOM = {
 
     /**
@@ -546,12 +573,47 @@ var MousePositionDOM = {
 
         var span = document.createElement("span");
         span.className = "GPmousePositionSettingsLabel";
-        span.innerHTML = "Système de référence";
         container.appendChild(span);
 
         return container;
     },
 
+    /**
+     * settings accordion
+     * @param { [HTMLElement] } htmlContent - array of DOM elements to append
+     *
+     * @returns {HTMLElement} DOM element
+     */
+    _createMousePositionSettingsAccordion : function (htmlContent) {
+        var div = stringToHTML(
+            `
+                <section class="fr-accordion">
+                               <div class="fr-accordion__title GPmousePositionSettingsLabel">
+                                   <button type="button" class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-more-settings-1">
+                                       <span class="GPshowMousePositionAdvancedTools gpf-hidden"></span>Système de référence
+                                   </button>
+                               </div>
+                               <div class="fr-collapse GPelementHidden" id="accordion-more-settings-1">
+                               </div>
+                    </section>
+           `
+        );
+        htmlContent.map(content => div.getElementsByClassName("fr-collapse")[0].append(content));
+        div.getElementsByTagName("button")[0].addEventListener("click", function (e) {
+            var status = (e.target.ariaExpanded === "true");
+            e.target.setAttribute("aria-expanded", !status);
+            if (!status) {
+                div.getElementsByClassName("fr-collapse")[0].classList.add("fr-collapse--expanded");
+                div.getElementsByClassName("fr-collapse")[0].classList.remove("GPelementHidden");
+            }
+            else {
+                div.getElementsByClassName("fr-collapse")[0].classList.remove("fr-collapse--expanded");
+                div.getElementsByClassName("fr-collapse")[0].classList.add("GPelementHidden");
+            }
+        });
+        return div;
+    },
+
     /**
      * @param {Object[]} systems - list of systems
      *