copyUrl

Author: jiyuujin

apps/web/app/pages/namecard/[id]/share.vue

@@ -17,6 +17,15 @@ if (!attendee) {
 
 const currentLocale = useLocaleCurrent().locale
 
+function copyUrl() {
+  const element = document.createElement('input')
+  element.value = `https://vuefes.jp/2024/namecard/${id}/share`
+  document.body.appendChild(element)
+  element.select()
+  document.execCommand('copy')
+  document.body.removeChild(element)
+}
+
 const officialSiteUrl = computed(() => {
   return currentLocale.value === 'ja' ? linkUrl : `${linkUrl}/en`
 })
@@ -73,7 +82,12 @@ useHead({
         />
       </li>
       <li>
-        <VFIcon color="vue-blue" name="external" :can-hover="false" />
+        <div class="copycode">
+          <VFCssResetButton @click="copyUrl">
+            <VFIcon color="vue-blue" name="external" :can-hover="false" />
+          </VFCssResetButton>
+          <span>コピーしました！</span>
+        </div>
       </li>
     </ul>
   </div>
@@ -118,4 +132,25 @@ useHead({
   padding: 0;
   margin: 0;
 }
+.copycode {
+  position: relative;
+  display: inline-block;
+}
+.copycode span {
+  opacity: 0; 
+  position: absolute;
+  top: 0px;
+  right: -5px;
+  color: #fff;
+  background: rgba(0, 0, 0, 0.5);
+  padding: 2px 5px;
+  transform: translate(100%);
+}
+.copycode button:focus + span {
+  animation: fade-out 2s ease-in;
+}
+@keyframes fade-out {
+  0% { visibility: visible; opacity: 1; }
+  100% { visibility: hidden; opacity: 0; }
+}
 </style>

apps/web/app/pages/sessions/[id]/share.vue

@@ -22,6 +22,15 @@ if (!speakerData[0].detail_page_id) {
 
 const currentLocale = useLocaleCurrent().locale
 
+function copyUrl() {
+  const element = document.createElement('input')
+  element.value = `https://vuefes.jp/2024/namecard/${id}/share`
+  document.body.appendChild(element)
+  element.select()
+  document.execCommand('copy')
+  document.body.removeChild(element)
+}
+
 useHead({
   titleTemplate: (titleChunk) => `${conferenceTitle}`,
   meta: [
@@ -81,7 +90,12 @@ useHead({
         />
       </li>
       <li>
-        <VFIcon color="vue-blue" name="external" :can-hover="false" />
+        <div class="copycode">
+          <VFCssResetButton @click="copyUrl">
+            <VFIcon color="vue-blue" name="external" :can-hover="false" />
+          </VFCssResetButton>
+          <span>コピーしました！</span>
+        </div>
       </li>
     </ul>
   </div>
@@ -126,4 +140,25 @@ useHead({
   padding: 0;
   margin: 0;
 }
+.copycode {
+  position: relative;
+  display: inline-block;
+}
+.copycode span {
+  opacity: 0; 
+  position: absolute;
+  top: 0px;
+  right: -5px;
+  color: #fff;
+  background: rgba(0, 0, 0, 0.5);
+  padding: 2px 5px;
+  transform: translate(100%);
+}
+.copycode button:focus + span {
+  animation: fade-out 2s ease-in;
+}
+@keyframes fade-out {
+  0% { visibility: visible; opacity: 1; }
+  100% { visibility: hidden; opacity: 0; }
+}
 </style>

apps/web/app/pages/sponsors/[id]/share.vue

@@ -22,6 +22,15 @@ if (!sponsorData[0].detail_page_id) {
 
 const currentLocale = useLocaleCurrent().locale
 
+function copyUrl() {
+  const element = document.createElement('input')
+  element.value = `https://vuefes.jp/2024/namecard/${id}/share`
+  document.body.appendChild(element)
+  element.select()
+  document.execCommand('copy')
+  document.body.removeChild(element)
+}
+
 useHead({
   titleTemplate: (titleChunk) => `${conferenceTitle}`,
   meta: [
@@ -81,7 +90,12 @@ useHead({
         />
       </li>
       <li>
-        <VFIcon color="vue-blue" name="external" :can-hover="false" />
+        <div class="copycode">
+          <VFCssResetButton @click="copyUrl">
+            <VFIcon color="vue-blue" name="external" :can-hover="false" />
+          </VFCssResetButton>
+          <span>コピーしました！</span>
+        </div>
       </li>
     </ul>
   </div>
@@ -126,4 +140,25 @@ useHead({
   padding: 0;
   margin: 0;
 }
+.copycode {
+  position: relative;
+  display: inline-block;
+}
+.copycode span {
+  opacity: 0; 
+  position: absolute;
+  top: 0px;
+  right: -5px;
+  color: #fff;
+  background: rgba(0, 0, 0, 0.5);
+  padding: 2px 5px;
+  transform: translate(100%);
+}
+.copycode button:focus + span {
+  animation: fade-out 8s ease-in;
+}
+@keyframes fade-out {
+  0% { visibility: visible; opacity: 1; }
+  100% { visibility: hidden; opacity: 0; }
+}
 </style>