Add back share popup and use navigator.share when available

Also handle better svg resources

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Event/ShareEventModal.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title">{{ $t("Share this event") }}</p>
+    </header>
+
+    <section class="modal-card-body is-flex" v-if="event">
+      <div class="container has-text-centered">
+        <small class="maximumNumberOfPlacesWarning" v-if="!eventCapacityOK">
+          {{ $t("All the places have already been taken") }}
+        </small>
+        <div>
+          <!--                  <b-icon icon="mastodon" size="is-large" type="is-primary" />-->
+
+          <a :href="twitterShareUrl" target="_blank" rel="nofollow noopener"
+            ><b-icon icon="twitter" size="is-large" type="is-primary"
+          /></a>
+          <a :href="facebookShareUrl" target="_blank" rel="nofollow noopener"
+            ><b-icon icon="facebook" size="is-large" type="is-primary"
+          /></a>
+          <a :href="linkedInShareUrl" target="_blank" rel="nofollow noopener"
+            ><b-icon icon="linkedin" size="is-large" type="is-primary"
+          /></a>
+          <a :href="diasporaShareUrl" class="diaspora" target="_blank" rel="nofollow noopener">
+            <span data-v-5e15e80a="" class="icon has-text-primary is-large">
+              <DiasporaLogo alt="diaspora-logo" />
+            </span>
+          </a>
+          <a :href="emailShareUrl" target="_blank" rel="nofollow noopener"
+            ><b-icon icon="email" size="is-large" type="is-primary"
+          /></a>
+          <!--     TODO: mailto: links are not used anymore, we should provide a popup to redact a message instead    -->
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { IEvent } from "../../types/event.model";
+// @ts-ignore
+import DiasporaLogo from "../../assets/diaspora-icon.svg";
+
+@Component({
+  components: {
+    DiasporaLogo,
+  },
+})
+export default class ShareEventModal extends Vue {
+  @Prop({ type: Object, required: true }) event!: IEvent;
+  @Prop({ type: Boolean, required: false, default: true }) eventCapacityOK!: boolean;
+  get twitterShareUrl(): string {
+    return `https://twitter.com/intent/tweet?url=${encodeURIComponent(this.event.url)}&text=${
+      this.event.title
+    }`;
+  }
+
+  get facebookShareUrl(): string {
+    return `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(this.event.url)}`;
+  }
+
+  get linkedInShareUrl(): string {
+    return `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(
+      this.event.url
+    )}&title=${this.event.title}`;
+  }
+
+  get emailShareUrl(): string {
+    return `mailto:?to=&body=${this.event.url}${encodeURIComponent(
+      "\n\n"
+      // @ts-ignore
+    )}${ShareEventModal.textDescription}&subject=${this.event.title}`;
+  }
+
+  get diasporaShareUrl(): string {
+    return `https://share.diasporafoundation.org/?title=${encodeURIComponent(
+      this.event.title
+    )}&url=${encodeURIComponent(this.event.url)}`;
+  }
+
+  static get textDescription(): string {
+    const meta = document.querySelector("meta[property='og:description']");
+    if (!meta) return "";
+    const desc = meta.getAttribute("content") || "";
+    return desc.substring(0, 1000);
+  }
+}
+</script>
+<style lang="scss" scoped>
+.diaspora span svg {
+  height: 2rem;
+  width: 2rem;
+}
+</style>

js/src/components/Logo.vue

@@ -1,5 +1,4 @@
 <template>
-  <!-- <img src="../assets/mobilizon_logo.svg" alt="Mobilizon" :class="{ invert: invert }" height="40" /> -->
   <MobilizonLogo />
 </template>
 
@@ -7,7 +6,7 @@
 import { Component, Prop, Vue } from "vue-property-decorator";
 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
 // @ts-ignore
-import MobilizonLogo from "../assets/mobilizon_logo.svg";
+import MobilizonLogo from "../assets/mobilizon_logo.svg?inline";
 @Component({
   components: {
     MobilizonLogo,

js/src/components/Participation/ParticipationWithAccount.vue

@@ -2,8 +2,8 @@
   <section class="section container hero is-fullheight">
     <div class="hero-body">
       <div class="container">
-        <div class="columns">
-          <div class="column">
+        <div class="columns is-vcentered">
+          <div class="column has-text-centered">
             <b-button
               type="is-primary"
               size="is-medium"

js/src/views/Event/Event.vue

@@ -256,11 +256,11 @@
                     aria-role="menuitem"
                     v-if="actorIsOrganizer || event.draft"
                   />
-                  <b-dropdown-item has-link aria-role="listitem">
-                    <a href="#share_section">
+                  <b-dropdown-item aria-role="listitem" v-if="!event.draft" @click="triggerShare()">
+                    <span>
                       {{ $t("Share this event") }}
                       <b-icon icon="share" />
-                    </a>
+                    </span>
                   </b-dropdown-item>
                   <b-dropdown-item
                     aria-role="listitem"
@@ -416,6 +416,9 @@
             @close="$refs.reportModal.close()"
           />
         </b-modal>
+        <b-modal :active.sync="isShareModalActive" has-modal-card ref="shareModal">
+          <share-event-modal :event="event" :eventCapacityOK="eventCapacityOK" />
+        </b-modal>
         <b-modal :active.sync="isJoinModalActive" has-modal-card ref="participationModal">
           <identity-picker v-model="identity">
             <template v-slot:footer>
@@ -550,9 +553,11 @@ import PopoverActorCard from "../../components/Account/PopoverActorCard.vue";
     Tag,
     ActorCard,
     PopoverActorCard,
-    // tslint:disable:space-in-parens
     "map-leaflet": () => import(/* webpackChunkName: "map" */ "../../components/Map.vue"),
-    // tslint:enable
+    ShareEventModal: () =>
+      import(
+        /* webpackChunkName: "shareEventModal" */ "../../components/Event/ShareEventModal.vue"
+      ),
   },
   apollo: {
     event: {
@@ -631,6 +636,8 @@ export default class Event extends EventMixin {
 
   isReportModalActive = false;
 
+  isShareModalActive = false;
+
   isJoinModalActive = false;
 
   isJoinConfirmationModalActive = false;
@@ -908,6 +915,25 @@ export default class Event extends EventMixin {
     document.body.removeChild(link);
   }
 
+  triggerShare() {
+    // @ts-ignore-start
+    if (navigator.share) {
+      navigator
+        // @ts-ignore
+        .share({
+          title: this.event.title,
+          text: Event.textDescription,
+          url: this.event.url,
+        })
+        .then(() => console.log("Successful share"))
+        .catch((error: any) => console.log("Error sharing", error));
+    } else {
+      this.isShareModalActive = true;
+      // send popup
+    }
+    // @ts-ignore-end
+  }
+
   async handleErrors(errors: GraphQLError[]) {
     if (
       errors[0].message.includes("not found") ||
@@ -937,34 +963,6 @@ export default class Event extends EventMixin {
       : this.event.beginsOn;
   }
 
-  get twitterShareUrl(): string {
-    return `https://twitter.com/intent/tweet?url=${encodeURIComponent(this.event.url)}&text=${
-      this.event.title
-    }`;
-  }
-
-  get facebookShareUrl(): string {
-    return `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(this.event.url)}`;
-  }
-
-  get linkedInShareUrl(): string {
-    return `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(
-      this.event.url
-    )}&title=${this.event.title}`;
-  }
-
-  get emailShareUrl(): string {
-    return `mailto:?to=&body=${this.event.url}${encodeURIComponent("\n\n")}${
-      Event.textDescription
-    }&subject=${this.event.title}`;
-  }
-
-  get diasporaShareUrl(): string {
-    return `https://share.diasporafoundation.org/?title=${encodeURIComponent(
-      this.event.title
-    )}&url=${encodeURIComponent(this.event.url)}`;
-  }
-
   static get textDescription(): string {
     const meta = document.querySelector("meta[property='og:description']");
     if (!meta) return "";