feat: add code to copy, fix layout & enable transition

src/components/Project/Detail/ProjectHeader.vue

@@ -115,22 +115,44 @@
               aria-hidden="true"
             />
           </a>
+          <div
+            v-if="isProjectAdmin && !isSharedProject"
+            id="share-button"
+            class="ui dropdown button compact tiny-margin"
+            data-tooltip="Partager le projet"
+            data-position="bottom right"
+            data-variation="mini"
+            @click="toggleShareOptions"
+          >
+            <i
+              class="inverted grey share icon"
+              aria-hidden="true"
+            />
+            <div
+              :class="['menu left transition', {'visible': showShareOptions}]"
+              style="z-index: 9999"
+            >
+              <div
+                v-if="project.generate_share_link"
+                class="item"
+                @click="copyLink"
+              >
+                Copier le lien de partage        
+              </div>
+              <div
+                class="item"
+                @click="copyCode"
+              >
+                Copier le code du Web Component
+              </div>
+            </div>
+          </div>
         </div>
-
-        <button
-          v-if="isProjectAdmin && !isSharedProject && project.generate_share_link"
-          class="ui teal left labeled icon button share-button tiny-margin"
-          @click="copyLink"
-        >
-          <i
-            class="left icon share square"
-            aria-hidden="true"
-          />
-          Copier le lien de partage
-        </button>
-
-        <div v-if="confirmMsg">
-          <div class="ui positive tiny-margin message">
+        <Transition>
+          <div
+            v-if="confirmMsg"
+            class="ui positive tiny-margin message"
+          >
             <span>
               Le lien a été copié dans le presse-papier
             </span>
@@ -138,10 +160,10 @@
             <i
               class="close icon"
               aria-hidden="true"
-              @click="confirmMsg = ''"
+              @click="confirmMsg = false"
             />
           </div>
-        </div>
+        </Transition>
       </div>
 
       <div
@@ -189,6 +211,7 @@ export default {
     return {
       slug: this.$route.params.slug,
       confirmMsg: false,
+      showShareOptions: false,
     };
   },
 
@@ -225,6 +248,11 @@ export default {
   mounted() {
     let textarea = document.querySelector('textarea');
     new TextareaMarkdown(textarea);
+    window.addEventListener('mousedown', this.clickOutsideDropdown);
+  },
+
+  destroyed() {
+    window.removeEventListener('mousedown', this.clickOutsideDropdown);
   },
 
   methods: {
@@ -238,15 +266,50 @@ export default {
       return '?ver=' + crypto.getRandomValues(array); // Compliant for security-sensitive use cases
     },
 
+    toggleShareOptions() {
+      this.confirmMsg = false;
+      this.showShareOptions = !this.showShareOptions;
+    },
+
+    clickOutsideDropdown(e) {
+      // If the user click outside of the dropdown, close it
+      if (!e.target.closest('#share-button')) {
+        this.showShareOptions = false;
+      }
+    },
+
     copyLink() {
       const sharedLink = window.location.href.replace('projet', 'projet-partage');
       navigator.clipboard.writeText(sharedLink).then(()=> {
-        console.log('success');
         this.confirmMsg = true;
-      }, () => {
-        console.log('failed');
-      }
-      );
+        setTimeout(() => {
+          this.confirmMsg = false;
+        }, 15000);
+      }, (e) => console.error('Failed to copy link: ', e));
+    },
+
+    copyCode() {
+      // Including <script> directly within template literals cause the JavaScript parser to raise syntax errors.
+      // The only working workaround, but ugly, is to split and concatenate the <script> tag.
+      const webComponent = `
+      <!-- Pour modifier la police, ajoutez l'attribut "font" avec le nom de la police souhaitée (par exemple: font="'Roboto Condensed', Lato, 'Helvetica Neue'"). -->
+      <!-- Dans le cas où la police souhaitée ne serait pas déjà disponible dans la page affichant le web component, incluez également une balise <style> pour l'importer. -->
+      <style>@import url('https://fonts.googleapis.com/css?family=Roboto Condensed:400,700,400italic,700italic&subset=latin');</style>
+      <scr` + `ipt src="${this.configuration.VUE_APP_DJANGO_BASE}/geocontrib/static/wc/project-preview.js"></scr` + `ipt>
+      <project-preview
+        domain="${this.configuration.VUE_APP_DJANGO_BASE}"
+        project-slug="${this.project.slug}"
+        color="${this.configuration.VUE_APP_PRIMARY_COLOR}"
+        font="${this.configuration.VUE_APP_FONT_FAMILY}"
+        width=""
+      ></project-preview>`;
+
+      navigator.clipboard.writeText(webComponent).then(()=> {
+        this.confirmMsg = true;
+        setTimeout(() => {
+          this.confirmMsg = false;
+        }, 15000);
+      }, (e) => console.error('Failed to copy link: ', e));
     },
 
     sendOfflineFeatures() {
@@ -286,14 +349,13 @@ export default {
 <style lang="less" scoped>
 
 .project-header {
-
   .row .right-column {
     display: flex;
     flex-direction: column;
 
     .ui.buttons {
       justify-content: flex-end;
-      a.ui.button {
+      .ui.button {
         flex-grow: 0; /* avoid stretching buttons */
       }
     }
@@ -302,6 +364,36 @@ export default {
     margin: auto;
     text-align: center;
   }
+
+  .ui.dropdown > .left.menu {
+    display: block;
+    overflow: hidden;
+    opacity: 0;
+    max-height: 0;
+    &.transition {
+      transition: all .5s ease;
+    }
+    &.visible {
+      opacity: 1;
+      max-height: 6em;
+    }
+    .menu {
+      margin-right: 0 !important;
+      .item {
+        white-space: nowrap;
+      }
+    }
+  }
+
+  .v-enter-active,
+  .v-leave-active {
+    transition: opacity .5s ease;
+  }
+
+  .v-enter-from,
+  .v-leave-to {
+    opacity: 0;
+  }
 }
 
 #preview {