Merge pull request #394 from mrdiamonddirt/feature/copy_clipboard

Click on the phone number and Serial Number to add to clipboard in settings app
qbcore-framework · Jul 25, 2024 · bd396e1 · bd396e1
2 parents bde034d + edf0b30
commit bd396e1
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 3 deletions.
diff --git a/html/index.html b/html/index.html
@@ -33,6 +33,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.2/emojionearea.min.js" integrity="sha512-hkvXFLlESjeYENO4CNi69z3A1puvONQV5Uh+G4TUDayZxSLyic5Kba9hhuiNLbHqdnKNMk2PxXKm0v7KDnWkYA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <!-- Bootstrap -->
     <script src="https://code.jquery.com/color/jquery.color-2.2.0.min.js" integrity="sha256-aSe2ZC5QeunlL/w/7PsVKmV+fa0eDbmybn/ptsKHR6I=" crossorigin="anonymous"></script> <!-- Color CDN -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js" ></script> <!-- Clipboard.js -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.2/emojionearea.min.css" integrity="sha512-vEia6TQGr3FqC6h55/NdU3QSM5XR6HSl5fW71QTKrgeER98LIMGwymBVM867C1XHIkYD9nMTfWK2A0xcodKHNA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <!-- Bootstrap -->
@@ -122,12 +123,12 @@
 
                         <div class="settings-app-tab-information">
                             <!-- <div class="settings-app-tab-header"><p>Infomation</p></div> -->
-                            <div class="settings-app-tab secondTab" data-settingstab="myPhone">
+                            <div class="settings-app-tab secondTab" data-settingstab="myPhone" id="phoneNumberSelect">
                                 <div class="settings-tab-icon"><i class="fas fa-phone-alt" style="color: #e67e22;"></i></div>
                                 <div class="settings-tab-title"><p>My phone number</p></div>
                                 <div class="settings-tab-description" id="myPhoneNumber"><p>0612345678</p></div>
                             </div>
-                            <div class="settings-app-tab secondTab" data-settingstab="serialNumber">
+                            <div class="settings-app-tab secondTab" data-settingstab="serialNumber" id="serialNumberSelect">
                                 <div class="settings-tab-icon"><i class="fas fa-phone-alt" style="color: #e67e22;"></i></div>
                                 <div class="settings-tab-title"><p>Serial Number</p></div>
                                 <div class="settings-tab-description" id="mySerialNumber"><p>0612345678</p></div>

diff --git a/html/js/settings.js b/html/js/settings.js
@@ -35,6 +35,39 @@ $(document).on('click', '.settings-app-tab', function(e){
     }
 });
 
+
+$(document).on(
+    "click",
+    "#phoneNumberSelect, #serialNumberSelect",
+    function (e) {
+        // Get the title of the clicked element
+        var title = "";
+        if ($(this).attr("id") == "phoneNumberSelect") {
+            title = "Phone Number";
+        } else {
+            title = "Serial Number";
+        }
+
+        // get the result id of myPhoneNumber or mySerialNumber
+        var textToCopy =
+            $(this).attr("id") == "phoneNumberSelect"
+                ? $("#myPhoneNumber").text()
+                : $("#mySerialNumber").text();
+
+        // Copying the text to clipboard using Clipboard.js
+        var clipboard = new ClipboardJS(this, {
+            text: function () {
+                QB.Phone.Notifications.Add(
+                    "fas fa-phone",
+                    "Copied " + title + "!",
+                    textToCopy
+                );
+                return textToCopy;
+            },
+        });
+    }
+);
+
 $(document).on('click', '#accept-background', function(e){
     e.preventDefault();
     var hasCustomBackground = QB.Phone.Functions.IsBackgroundCustom();
@@ -190,4 +223,4 @@ $(document).on('click', '#cancel-profilepicture', function(e){
 $(document).on('click', '#cancel-custom-profilepicture', function(e){
     e.preventDefault();
     QB.Phone.Animations.TopSlideUp(".profilepicture-custom", 200, -23);
-});
+});