Clipboard (#7)

* basic ui * working copy * using label and better ui * added overflow * tweaked git workflow
angus-websites · Nov 23, 2024 · e207e43 · e207e43
1 parent 0d49c8c
commit e207e43
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 18 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -11,12 +11,12 @@ trim_trailing_whitespace = true
 charset = utf-8
 
 # 4 space indentation
-[*.{py,java,r,R}]
+[*.{py,java,r,R,html}]
 indent_style = space
 indent_size = 4
 
 # 2 space indentation
-[*.{js,json,y{a,}ml,html,cwl}]
+[*.{js,json,y{a,}ml,cwl}]
 indent_style = space
 indent_size = 2
 

diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml
@@ -2,9 +2,9 @@ name: CD Pipeline
 
 on:
   workflow_dispatch:
-  # push:
-  #   branches:
-  #     - main
+  push:
+    branches:
+      - main
 
 env:
   IMAGE_NAME: poo-image

diff --git a/templates/shortener/shortened.html b/templates/shortener/shortened.html
@@ -6,19 +6,83 @@
         {% include "shortener/_header.html" %}
 
         <div class="max-w-lg mx-auto text-center">
-          <!-- Display Shortened URL -->
-          <div class="bg-white p-8 rounded-lg shadow-md ">
-              <h2 class="text-2xl font-semibold text-emerald-800">Your new URL...</h2>
-              <a href="{{ short_url }}" target="_blank" class="text-blue-600 underline break-words mt-4 block">{{ short_url }}</a>
-          </div>
-
-          <!-- Shorten Again Button -->
-          <a
-              href="{% url 'shorten_url' %}"
-              class="inline-block mt-6 px-6 py-3  hover:text-emerald-900 hover:underline text-emerald-700 font-semibold rounded-md transition duration-300"
-          >
-              Shorten Another URL
-          </a>
+            <!-- Display Shortened URL -->
+            <div class="bg-white p-8 rounded-lg shadow-md">
+                <h2 class="text-2xl font-semibold text-emerald-800">Your new URL...</h2>
+                <div class="w-full mt-2 ">
+                <div class="relative">
+                    <label id="shortened-url-text" 
+                       class="col-span-6 bg-gray-50 text-gray-500 text-sm rounded-lg block w-full px-2.5 py-4 truncate overflow-hidden">
+                    {{ short_url }}
+                    </label>
+                    <!-- Updated button with both icons preloaded -->
+                    <button id="copy-url-button" class="absolute end-2.5 top-1/2 -translate-y-1/2 bg-emerald-700 hover:bg-emerald-800 text-white font-semibold transition duration-300 rounded-lg py-2 px-2.5 inline-flex items-center justify-center">
+                        <span id="button-icon-copy" class="inline-flex items-center">
+                            <svg class="w-3 h-3 me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
+                                <path d="M16 1h-3.278A1.992 1.992 0 0 0 11 0H7a1.993 1.993 0 0 0-1.722 1H2a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2Zm-3 14H5a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0-4H5a1 1 0 0 1 0-2h8a1 1 0 1 1 0 2Zm0-5H5a1 1 0 0 1 0-2h2V2h4v2h2a1 1 0 1 1 0 2Z"/>
+                            </svg>
+                            <span id="button-text" class="text-xs font-semibold">Copy</span>
+                        </span>
+                        <span id="button-icon-tick" class="inline-flex items-center hidden">
+                            <svg class="w-3 h-3 text-emerald-100  me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
+                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5.917 5.724 10.5 15 1.5"/>
+                            </svg>
+                            <span id="button-text-copied" class="text-xs font-semibold text-emerald-100">Copied</span>
+                        </span>
+                    </button>
+                </div>
+            </div>
+            </div>
+
+
+
+            <!-- Shorten Again Button -->
+            <a
+                href="{% url 'shorten_url' %}"
+                class="inline-block mt-6 px-6 py-3 hover:text-emerald-900 hover:underline text-emerald-700 font-semibold rounded-md transition duration-300"
+            >
+                Shorten Another URL
+            </a>
         </div>
     </div>
+
+    <!-- Add the JavaScript for clipboard functionality -->
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+    const copyButton = document.getElementById('copy-url-button');
+    const shortenedUrlLabel = document.getElementById('shortened-url-text');
+    const buttonIconCopy = document.getElementById('button-icon-copy');
+    const buttonIconTick = document.getElementById('button-icon-tick');
+
+    copyButton.addEventListener('click', function () {
+
+        // Use the Clipboard API to copy the label text
+        const textToCopy = shortenedUrlLabel.textContent.trim();
+
+        navigator.clipboard.writeText(textToCopy).then(() => {
+            // Show the success feedback
+            showSuccess();
+
+            // Reset back to default after 2 seconds
+            setTimeout(() => {
+                resetToDefault();
+            }, 2000);
+        }).catch(err => {
+            console.error('Failed to copy text: ', err); 
+        });
+    });
+
+    const showSuccess = () => {
+        // Hide the copy icon and show the tick icon
+        buttonIconCopy.classList.add('hidden');
+        buttonIconTick.classList.remove('hidden');
+    };
+
+    const resetToDefault = () => {
+        // Reset the icons back to default
+        buttonIconTick.classList.add('hidden');
+        buttonIconCopy.classList.remove('hidden');
+    };
+});
+    </script>
 {% endblock content %}