Merge pull request #136 from CodeForPhilly/09h8oh-codex/add-copy-to-clipboard-button-for-favorites

Add copy favorites button under sort

Author: ZacharyLeahan

src/components/Explorer.vue

@@ -310,14 +310,25 @@
                   v-model="sort"
                   @close="toggleSort"
                 />
-              </div>
             </div>
           </div>
-          <form
-            v-if="!favorites"
-            class="filters"
-            id="form"
-            @submit.prevent="submit"
+        </div>
+        <div v-if="favorites" class="copy-clipboard" aria-live="polite">
+          <button 
+            class="primary primary-bar copy-button" 
+            :class="{ 'copied': isCopied }" 
+            @click="copyFavorites"
+            :disabled="isCopied"
+          >
+            <span v-if="isCopied">✓ Copied!</span>
+            <span v-else>Copy to Clipboard</span>
+          </button>
+        </div>
+        <form
+          v-if="!favorites"
+          class="filters"
+          id="form"
+          @submit.prevent="submit"
           >
             <div class="inner-controls">
               <div class="search-mobile-box">
@@ -873,6 +884,7 @@ export default {
       question: 0,
       questionDetails,
       twoUpIndex,
+      isCopied: false,
     };
   },
   computed: {
@@ -1474,6 +1486,94 @@ export default {
         this.results = this.results.filter((result) => result._id !== _id);
       }
     },
+    copyFavorites() {
+      // Create HTML version with italicized scientific names
+      const htmlLines = this.results.map(
+        (p) => `<li>${p["Common Name"]} (<i>${p["Scientific Name"]}</i>)</li>` 
+      );
+      const htmlContent = `<ul>
+${htmlLines.join("\n")}
+</ul>`;
+      
+      // Plain text version as fallback (without HTML formatting)
+      const plainTextLines = this.results.map(
+        (p) => `• ${p["Common Name"]} (${p["Scientific Name"]})` 
+      );
+      const plainText = plainTextLines.join("\n");
+      
+      // Set copied state for button feedback
+      this.isCopied = true;
+      
+      // First try to copy with HTML formatting using document.execCommand
+      let copySuccessful = false;
+      
+      // Only try HTML approach if execCommand is available
+      if (document.execCommand) {
+        try {
+          // Create a temporary div to hold our HTML content
+          const tempDiv = document.createElement('div');
+          tempDiv.innerHTML = htmlContent;
+          tempDiv.style.position = 'absolute';
+          tempDiv.style.left = '-9999px';
+          document.body.appendChild(tempDiv);
+          
+          // Select the content
+          const range = document.createRange();
+          range.selectNode(tempDiv);
+          const selection = window.getSelection();
+          selection.removeAllRanges();
+          selection.addRange(range);
+          
+          // Execute copy command
+          copySuccessful = document.execCommand('copy');
+          
+          // Clean up
+          selection.removeAllRanges();
+          document.body.removeChild(tempDiv);
+        } catch (err) {
+          console.error("Failed to copy with HTML formatting", err);
+          copySuccessful = false;
+        }
+      }
+      
+      // If HTML copy failed, try clipboard API with plain text
+      if (!copySuccessful && navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(plainText).catch((err) => {
+          console.error("Failed to copy with clipboard API", err);
+          this.isCopied = false;
+        });
+      } 
+      // Last resort: try plain text with execCommand if everything else failed
+      else if (!copySuccessful) {
+        try {
+          const textarea = document.createElement("textarea");
+          textarea.value = plainText;
+          textarea.style.position = 'absolute';
+          textarea.style.left = '-9999px';
+          document.body.appendChild(textarea);
+          textarea.select();
+          
+          copySuccessful = document.execCommand("copy");
+          if (!copySuccessful) {
+            console.error("Failed to copy with execCommand");
+            this.isCopied = false;
+          }
+        } catch (err) {
+          console.error("Failed to copy favorites", err);
+          this.isCopied = false;
+        } finally {
+          const textareaElement = document.querySelector('textarea[style*="position: absolute"]');
+          if (textareaElement && document.body.contains(textareaElement)) {
+            document.body.removeChild(textareaElement);
+          }
+        }
+      }
+      
+      // Reset button after 2 seconds
+      setTimeout(() => {
+        this.isCopied = false;
+      }, 2000);
+    },
     renderFavorite(_id) {
       return this.$store.state.favorites.has(_id)
         ? "favorite"
@@ -1649,6 +1749,13 @@ button.text {
   margin-bottom: 16px;
 }
 
+.copy-clipboard {
+  max-width: 350px;
+  margin: auto;
+  margin-bottom: 16px;
+}
+
+
 button.favorites {
   width: 100%;
   display: block;
@@ -1658,12 +1765,51 @@ button.favorites {
   margin-right: 24px;
 }
 
-button.favorites[disabled] {
+button.favorites[disabled], button.copy-button[disabled] {
   opacity: 0.5;
+  cursor: not-allowed;
 }
 
-button.favorites .favorites-label {
-  display: none;
+.copy-button {
+  transition: all 0.3s ease;
+  position: relative;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.copy-button:active {
+  transform: translateY(2px);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+}
+
+.copy-button.copied {
+  background-color: #38a169 !important;
+  transition: all 0.3s ease;
+  animation: pulse 0.5s ease-in-out;
+}
+
+@keyframes pulse {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+  100% { transform: scale(1); }
+}
+
+.copy-button span {
+  transition: opacity 0.2s ease;
+}
+
+@media (hover: hover) {
+  .copy-button:hover:not([disabled]) {
+    background-color: #c85d25;
+    transform: translateY(1px);
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
+  }
+}
+
+.copy-clipboard {
+  position: relative;
+  margin-top: 10px;
+  display: flex;
+  justify-content: center;
 }
 
 .list-button {