feat(position): copy coords to clipboard

android/app/capacitor.build.gradle

@@ -11,6 +11,7 @@ apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
     implementation project(':aashu-dubey-capacitor-statusbar-safe-area')
     implementation project(':capacitor-app')
+    implementation project(':capacitor-clipboard')
     implementation project(':capacitor-device')
     implementation project(':capacitor-filesystem')
     implementation project(':capacitor-geolocation')

android/capacitor.settings.gradle

@@ -8,6 +8,9 @@ project(':aashu-dubey-capacitor-statusbar-safe-area').projectDir = new File('../
 include ':capacitor-app'
 project(':capacitor-app').projectDir = new File('../node_modules/@capacitor/app/android')
 
+include ':capacitor-clipboard'
+project(':capacitor-clipboard').projectDir = new File('../node_modules/@capacitor/clipboard/android')
+
 include ':capacitor-device'
 project(':capacitor-device').projectDir = new File('../node_modules/@capacitor/device/android')
 

ios/App/Podfile

@@ -13,6 +13,7 @@ def capacitor_pods
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
   pod 'AashuDubeyCapacitorStatusbarSafeArea', :path => '../../node_modules/@aashu-dubey/capacitor-statusbar-safe-area'
   pod 'CapacitorApp', :path => '../../node_modules/@capacitor/app'
+  pod 'CapacitorClipboard', :path => '../../node_modules/@capacitor/clipboard'
   pod 'CapacitorDevice', :path => '../../node_modules/@capacitor/device'
   pod 'CapacitorFilesystem', :path => '../../node_modules/@capacitor/filesystem'
   pod 'CapacitorGeolocation', :path => '../../node_modules/@capacitor/geolocation'

package.json

@@ -32,6 +32,7 @@
     "@aashu-dubey/capacitor-statusbar-safe-area": "^3.0.0",
     "@capacitor/android": "^6.0.0",
     "@capacitor/app": "^6.0.0",
+    "@capacitor/clipboard": "^6.0.0",
     "@capacitor/core": "^6.0.0",
     "@capacitor/device": "^6.0.0",
     "@capacitor/filesystem": "^6.0.0",

src/css/position.css

@@ -190,6 +190,24 @@
   margin: 0;
   color: var(--darkish-grey);
   font-size: 13px;
+  display: flex;
+}
+
+#positionCoordsSpan {
+  text-decoration: underline;
+  display: flex;
+  align-items: center;
+}
+
+#positionCoordsSpan::after {
+  content: "";
+  display: inline-block;
+  background-image: url("assets/copy.svg");
+  width: 20px;
+  height: 18px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 10px;
 }
 
 /*

src/js/position.js

@@ -12,8 +12,9 @@ import Globals from "./globals";
 import DomUtils from "./utils/dom-utils";
 import { Share } from "@capacitor/share";
 import { Toast } from "@capacitor/toast";
-import ActionSheet from "./action-sheet";
+import { Clipboard } from "@capacitor/clipboard";
 
+import ActionSheet from "./action-sheet";
 import PopupUtils from "./utils/popup-utils";
 
 import LoadingDark from "../css/assets/loading-darkgrey.svg";
@@ -103,7 +104,7 @@ class Position {
     var address = this.address;
     var latitude = this.coordinates.lat;
     var longitude = this.coordinates.lon;
-    var altitudeHtml = `<img src="${LoadingDark}" height="8px">`;
+    var altitudeHtml = `<img src="${LoadingDark}" height="8px" title="Chargement de l'altitude en cours...">`;
     var templateAddress;
 
     // adresse disponible
@@ -169,7 +170,7 @@ class Position {
               <div class="divPositionSectionAddress fontLight">
                 ${templateAddress}
                 <div class="divPositionCoord fontLight">
-                  (${latitude}, ${longitude}) - Alt : <span id="positionAltitudeSpan">${altitudeHtml}</span> m
+                  <span id="positionCoordsSpan">(${latitude}, ${longitude})</span><span> - Alt : <span id="positionAltitudeSpan">${altitudeHtml}</span> m</span>
                 </div>
               </div>
           </div>
@@ -377,6 +378,18 @@ class Position {
     shadowContainer.getElementById("divPositionButtonsAfter").addEventListener("click", DomUtils.horizontalParentScroll);
     shadowContainer.getElementById("divPositionButtonsAfter").parentElement.addEventListener("scroll", DomUtils.horizontalParentScrollend);
 
+    shadowContainer.getElementById("positionCoordsSpan").addEventListener("click", () => {
+      let coordinates = this.coordinates;
+      Clipboard.write({
+        string: `${coordinates.lat}, ${coordinates.lon}`
+      }).then( () => {
+        Toast.show({
+          text: "Coordonnées copiées dans le presse-papier",
+          duration: "short",
+          position: "bottom"
+        });
+      });
+    });
     // ajout du container shadow
     target.appendChild(shadowContainer);