feat: improve social share texts

farscrl · Dec 4, 2023 · 061ef42 · 061ef42
1 parent 4ce56ba
commit 061ef42
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 6 deletions.
diff --git a/src/app/components/events/event-details/event-details.component.html b/src/app/components/events/event-details/event-details.component.html
@@ -177,7 +177,12 @@ <h1>{{ event.title }}</h1>
                             stroke="#3CBFA4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                     </svg>
                 </div>
-                <div class="share-icon link" (click)="copyLink()">
+                <div class="share-icon link" (click)="copyLink()"
+                     ngbTooltip="Copià il link"
+                     [autoClose]="false"
+                     triggers="manual"
+                     placement="bottom"
+                     #copiedLinkTooltip="ngbTooltip">
                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                         <path
                             d="M10 13C10.4295 13.5741 10.9774 14.0491 11.6066 14.3929C12.2357 14.7367 12.9315 14.9411 13.6467 14.9923C14.3618 15.0435 15.0796 14.9403 15.7513 14.6897C16.4231 14.4392 17.0331 14.047 17.54 13.54L20.54 10.54C21.4508 9.59695 21.9548 8.33394 21.9434 7.02296C21.932 5.71198 21.4061 4.45791 20.4791 3.53087C19.5521 2.60383 18.298 2.07799 16.987 2.0666C15.676 2.0552 14.413 2.55918 13.47 3.46997L11.75 5.17997"

diff --git a/src/app/components/events/event-details/event-details.component.ts b/src/app/components/events/event-details/event-details.component.ts
@@ -1,7 +1,8 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, ViewChild } from '@angular/core';
 import { EventsService } from '../../../shared/services/events.service';
 import { EventDto } from '../../../shared/data/event';
 import { DeviceDetectorService } from 'ngx-device-detector';
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
     selector: 'app-event-details',
@@ -13,6 +14,8 @@ export class EventDetailsComponent {
     @Input()
     event?: EventDto;
 
+    @ViewChild('copiedLinkTooltip') copiedLinkTooltip?: NgbTooltip;
+
     constructor(private eventsService: EventsService, private detectorService: DeviceDetectorService) {
     }
 
@@ -49,26 +52,77 @@ export class EventDetailsComponent {
 
     shareOnFacebook() {
         const url = this.completeUrl(window.location.href);
-        window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}`, '_blank');
+        const text = this.getEventDescriptionText(url);
+        window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}&t=${encodeURIComponent(text)}`, '_blank');
     }
 
     shareOnTwitter() {
         const url = this.completeUrl(window.location.href);
-        window.open(`https://twitter.com/intent/tweet?url=${url}`, '_blank');
+        const text = this.getEventDescriptionText(url, false);
+        window.open(`https://twitter.com/intent/tweet?url=${url}&text=${encodeURIComponent(text)}`, '_blank');
     }
 
     shareOnWhatsapp() {
         const url = this.completeUrl(window.location.href);
-        window.open(`https://wa.me/?text=${url}`, '_blank');
+        const text = this.getEventDescriptionText(url);
+        window.open(`https://wa.me/?text=${encodeURIComponent(text)}`, '_blank');
     }
 
     shareViaEmail() {
         const url = this.completeUrl(window.location.href);
-        window.open(`mailto:?body=${url}`, '_blank');
+        const subject = `[chalender.ch] ${this.event!.title}`;
+        const body = this.getEventDescriptionText(url);
+        console.log(body)
+        window.open(`mailto:?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`, "_blank");
     }
 
     copyLink() {
         const url = this.completeUrl(window.location.href);
         navigator.clipboard.writeText(url);
+        if (this.copiedLinkTooltip) {
+            this.copiedLinkTooltip.open();
+
+            setTimeout(() => {
+                this.copiedLinkTooltip?.close();
+            }, 3000);
+        }
+    }
+
+    private getEventDescriptionText(url: string, includeLink = true): string {
+        let returnValue = `${this.event!.title}
+${this.event!.location}
+${this.getOccurrencesText()}`;
+
+        if (includeLink) {
+            returnValue += `
+Detagls datti qua: ${url}`;
+        }
+
+        return returnValue;
+    }
+
+    private getOccurrencesText(): string {
+        let returnValue = "";
+        this.event?.occurrences.forEach(o => {
+            let date = "";
+            date += o.date + ", ";
+            if (o.isAllDay) {
+                date += "tuttadi";
+            } else {
+                date += o.start;
+                if (o.end) {
+                    date += " - " + o.end;
+                }
+            }
+
+            if (o.isCancelled) {
+                date += " (annullà)"
+            }
+
+            returnValue += date + "\n";
+        });
+
+        console.log(returnValue)
+        return returnValue;
     }
 }