feat(app): complete dialog for share link and embed

HSF · Mar 28, 2021 · 50c2584 · 50c2584
1 parent b10bb7a
commit 50c2584
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 16 deletions.
diff --git a/packages/phoenix-event-display/src/managers/url-options-manager.ts b/packages/phoenix-event-display/src/managers/url-options-manager.ts
@@ -12,7 +12,7 @@ export const phoenixURLOptions = {
   type: '',
   config: '',
   hideWidgets: false,
-}
+};
 
 /**
  * A manager for managing options given through URL.

diff --git a/...ents/src/components/ui-menu/share-link/share-link-dialog/share-link-dialog.component.html b/...ents/src/components/ui-menu/share-link/share-link-dialog/share-link-dialog.component.html
@@ -1,7 +1,7 @@
 <div class="dialog">
   <h1 mat-dialog-title>Create shareable link</h1>
   <div mat-dialog-content class="dialog-content">
-    <h5>URL options</h5>
+    <h5 class="mb-2">URL options</h5>
     <div class="form-group">
       <label for="eventDataFile">Event data file (URL or path)</label>
       <input
@@ -40,6 +40,20 @@ <h5>URL options</h5>
         Hide all widgets
       </mat-checkbox>
     </div>
+    <h5 class="my-2">Share</h5>
+    <div class="share-box">
+      <span>{{ shareLink }}</span>
+      <div class="share-box-copy" (click)="copyText(shareLink, $event.target)">
+        COPY
+      </div>
+    </div>
+    <h5 class="my-2">Embed</h5>
+    <div class="share-box">
+      <span>{{ embedLink }}</span>
+      <div class="share-box-copy" (click)="copyText(embedLink, $event.target)">
+        COPY
+      </div>
+    </div>
   </div>
   <div mat-dialog-actions>
     <button mat-button (click)="onClose()" cdkFocusInitial>Close</button>

diff --git a/...ents/src/components/ui-menu/share-link/share-link-dialog/share-link-dialog.component.scss b/...ents/src/components/ui-menu/share-link/share-link-dialog/share-link-dialog.component.scss
@@ -0,0 +1,25 @@
+.share-box {
+  width: 30rem;
+  max-width: 100%;
+  position: relative;
+  background: var(--phoenix-background-color-tertiary);
+  border: 1px solid var(--phoenix-border);
+  border-radius: 0.5rem;
+  padding: 1.25rem;
+  word-wrap: break-word;
+
+  .share-box-copy {
+    position: absolute;
+    top: -1px;
+    right: -1px;
+    cursor: pointer;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+    border: 1px solid var(--phoenix-border);
+    border-radius: 0.5rem;
+
+    &:hover {
+      background: var(--phoenix-border);
+    }
+  }
+}
diff --git a/...onents/src/components/ui-menu/share-link/share-link-dialog/share-link-dialog.component.ts b/...onents/src/components/ui-menu/share-link/share-link-dialog/share-link-dialog.component.ts
@@ -9,38 +9,61 @@ import { phoenixURLOptions } from 'phoenix-event-display';
 })
 export class ShareLinkDialogComponent {
   baseLink: string;
-  shareableLink: string;
+  shareLink: string;
+  embedLink: string;
   urlOptions = Object.assign({}, phoenixURLOptions);
 
   constructor(private dialogRef: MatDialogRef<ShareLinkDialogComponent>) {
     const locationHref = window.location.href;
     const lastIndex =
       locationHref.lastIndexOf('?') === -1 ? 0 : locationHref.lastIndexOf('?');
     this.baseLink = locationHref.slice(0, lastIndex);
+    this.shareLink = this.baseLink;
+    this.embedLink = this.getEmbedLink();
   }
 
   onClose() {
     this.dialogRef.close();
   }
 
+  getEmbedLink() {
+    return `<iframe src="${this.shareLink}"></iframe>`;
+  }
+
   setOptionValue(option: string, value: string) {
     this.urlOptions[option] = value;
     this.onOptionsChange();
   }
 
   onOptionsChange() {
-    this.shareableLink =
-      this.baseLink +
-      '?' +
-      Object.getOwnPropertyNames(this.urlOptions)
-        .reduce((filteredOptions: string[], option: string) => {
-          if (this.urlOptions[option]) {
-            filteredOptions.push(`${option}=${this.urlOptions[option]}`);
-          }
-          return filteredOptions;
-        }, [])
-        .join('&');
-
-    console.log(this.shareableLink);
+    const urlParametersString = Object.getOwnPropertyNames(this.urlOptions)
+      .reduce((filteredOptions: string[], option: string) => {
+        if (this.urlOptions[option]) {
+          filteredOptions.push(
+            `${option}=${encodeURI(this.urlOptions[option])}`
+          );
+        }
+        return filteredOptions;
+      }, [])
+      .join('&');
+
+    this.shareLink =
+      this.baseLink + (urlParametersString ? '?' : '') + urlParametersString;
+    this.embedLink = this.getEmbedLink();
+  }
+
+  copyText(text: string, element: HTMLElement) {
+    const inputElement = document.createElement('input');
+    document.body.appendChild(inputElement);
+    inputElement.value = text;
+    inputElement.select();
+    document.execCommand('copy');
+    document.body.removeChild(inputElement);
+
+    // Set text on copying
+    element.innerText = 'COPIED';
+    setTimeout(() => {
+      element.innerText = 'COPY';
+    }, 2000);
   }
 }