@saooti/octopus-sdk 40.1.21 → 40.2.0

package/src/components/display/sharing/ShareNewsletter.vue

@@ -0,0 +1,205 @@
+<template>
+  <div class="d-flex flex-column align-items-center">
+    <div class="d-flex flex-grow-1">
+      <div class="d-flex flex-column flex-shrink-0 me-3">
+        <h2 class="mb-3">
+          {{ $t("Configure your Newsletter tile") }}
+        </h2>
+        <div
+          v-for="colors in arrayColors"
+          :key="colors.mainText"
+          class="d-flex align-items-center mb-3"
+        >
+          <VSwatches
+            v-model="colors.color"
+            class="c-hand me-2"
+            show-fallback
+            fallback-input-type="color"
+            colors="text-advanced"
+            popover-to="right"
+            :data-color="colors.color"
+          />
+          <div class="d-flex flex-column">
+            <div class="fw-bold">{{ colors.mainText }}</div>
+            <div v-if="colors.secondText" class="description-text">
+              {{ colors.secondText }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- eslint-disable vue/no-v-html -->
+      <div class="border p-3" v-html="newsletterHtml" />
+      <!-- eslint-enable -->
+    </div>
+    <ClassicCopyButton
+      :text="$t('Copy code')"
+      :text-after-copy="$t('Code copied!')"
+      :data-to-copy="newsletterHtml"
+    />
+    <div>{{ $t("And paste it in your newsletter") }}</div>
+  </div>
+</template>
+
+<script lang="ts">
+import ClassicCopyButton from "../../form/ClassicCopyButton.vue";
+import { VSwatches } from "vue3-swatches";
+import "vue3-swatches/dist/style.css";
+import { Podcast } from "@/stores/class/general/podcast";
+import { defineComponent } from "vue";
+import { useSaveFetchStore } from "../../../stores/SaveFetchStore";
+import { useAuthStore } from "../../../stores/AuthStore";
+import { mapState, mapActions } from "pinia";
+import { Emission } from "@/stores/class/general/emission";
+import { Playlist } from "@/stores/class/general/playlist";
+export default defineComponent({
+  name: "SahreNewsletter",
+
+  components: {
+    ClassicCopyButton,
+    VSwatches,
+  },
+
+  props: {
+    podcast: { default: undefined, type: Object as () => Podcast },
+    emission: { default: undefined, type: Object as () => Emission },
+    playlist: { default: undefined, type: Object as () => Playlist },
+  },
+
+  emits: ["close"],
+
+  data() {
+    return {
+      arrayColors: [
+        {
+          color: "#40a372",
+          mainText: this.$t("Choose main color"),
+          secondText: this.$t("Newsletter elements"),
+        },
+        { color: "#000000", mainText: this.$t("Choose text color") },
+        { color: "#FFFFFF", mainText: this.$t("Choose background color") },
+      ],
+      shareUrl: window.location.href,
+    };
+  },
+  computed: {
+    ...mapState(useAuthStore, ["authOrgaId"]),
+    newsletterInfo() {
+      if (this.podcast) {
+        return {
+          imageUrl: `${this.podcast.imageUrl}" alt="${this.$t(
+            "Episode name image",
+            { name: this.podcast.title },
+          )}`,
+          title: this.podcast.title,
+          description: this.podcast.description ?? "",
+          shareText: this.$t("Listen this episode"),
+          emissionHtml: `<tr><td style="padding:5px 0;">
+          <div style="display:flex; margin-top:5px;">
+          <div style="font-size:16px; color:${
+            this.arrayColors[1].color
+          }; margin-right:5px;text-wrap: nowrap;">${this.$t("Emission")} :</div>
+          <a href="${this.shareUrl}" style="font-size: 16px;color: ${
+            this.arrayColors[0].color
+          };overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">${
+            this.podcast.emission.name
+          }</a>
+          </div></td></tr>`,
+          articleHtml:
+            !this.podcast?.article || 0 === this.podcast.article?.length
+              ? ``
+              : `<tr><td style="padding:5px 0;">
+          <div style="display:flex;">
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M7 17h7v-2H7zm0-4h10v-2H7zm0-4h10V7H7zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm0-2h14V5H5zM5 5v14z"/></svg>
+          <a href="${this.podcast.article}" style="color: ${
+            this.arrayColors[1].color
+          };margin-top:2px">${this.$t("See associated article")}</a>
+          </div></td></tr>
+          `,
+          colorTitle: `color:${this.arrayColors[1].color};`,
+        };
+      }
+      if (this.emission) {
+        return {
+          imageUrl: `${this.emission.imageUrl}" alt="${this.$t(
+            "Emission image",
+          )}`,
+          title: this.emission.name,
+          description: this.emission.description ?? "",
+          shareText: this.$t("Listen to all episodes"),
+          emissionHtml: ``,
+          articleHtml: ``,
+          colorTitle: `color:${this.arrayColors[0].color};`,
+        };
+      }
+      return {
+        imageUrl: `${this.playlist?.imageUrl}" alt="${this.$t(
+          "Playlist image",
+        )}`,
+        title: this.playlist?.title,
+        description: this.playlist?.description ?? "",
+        shareText: this.$t("Listen to all episodes"),
+        emissionHtml: ``,
+        articleHtml: ``,
+        colorTitle: `color:${this.arrayColors[0].color};`,
+      };
+    },
+    newsletterHtml(): string {
+      return `<table style="background:${this.arrayColors[2].color};color:${
+        this.arrayColors[1].color
+      };table-layout: fixed;width:100%;font-size: 14px;">
+<tr>
+<td valign="top" width="30%" rowspan="7" style="padding-right:5px;"><img width="100%" src="${
+        this.newsletterInfo.imageUrl
+      }" style="border-radius: 4px;"></td>
+<td valign="top" width="70%" style="padding:5px 0;"><div style="margin-top:5px;font-size: 20px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight:bold;${
+        this.newsletterInfo.colorTitle
+      }">${this.newsletterInfo.title}</div></td>
+</tr>${this.newsletterInfo.emissionHtml}
+<tr><td style="padding:5px 0;"><div style="overflow: hidden;display: -webkit-box;-webkit-line-clamp: 6;-webkit-box-orient: vertical;word-break: break-word;">${
+        this.newsletterInfo.description
+      }</div></td></tr>
+<tr><td valign="top" style="padding:5px 0;"><a href="${
+        this.shareUrl
+      }" style="color: ${this.arrayColors[0].color};">${this.$t(
+        "See more",
+      )}</a></td></tr>
+<tr>${this.newsletterInfo.articleHtml}
+<td width="1" style="padding:5px 0;"><a href="${
+        this.shareUrl
+      }" style="font-size: 18px;color: ${
+        this.arrayColors[0].color
+      };text-decoration: none; display:flex;"><svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path fill="currentColor" d="m9.5 16.5l7-4.5l-7-4.5zM12 22q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22"/></svg><div style="margin-top: 15px; color:${
+        this.arrayColors[1].color
+      };">${this.newsletterInfo.shareText}</div></a></td>
+</tr>
+</table>
+`;
+    },
+  },
+  created() {
+    this.initData();
+  },
+  methods: {
+    ...mapActions(useSaveFetchStore, ["getOrgaAttributes"]),
+    async initData(): Promise<void> {
+      const orgaId = this.authOrgaId;
+      if (!orgaId?.length) {
+        return;
+      }
+      const attributes = await this.getOrgaAttributes(orgaId ?? "");
+      if (
+        Object.hasOwn(attributes, "podcastmakerUrl") &&
+        (attributes.podcastmakerUrl as string | undefined | null)?.length
+      ) {
+        this.shareUrl =
+          attributes.podcastmakerUrl +
+          window.location.pathname +
+          window.location.search;
+      }
+      if (Object.hasOwn(attributes, "COLOR")) {
+        this.arrayColors[0].color = attributes.COLOR as string;
+      }
+    },
+  },
+});
+</script>

package/src/components/display/sharing/ShareSocialsButtons.vue

@@ -0,0 +1,110 @@
+<template>
+  <section v-if="!isLoading && !isGarRole && (authOrgaId || !noSharing)" id="share-buttons-podcast-section" class="module-box">
+    <h3 class="mb-2">
+      {{ $t("Share in one click") }}
+    </h3>
+    <div class="d-flex align-items-center">
+      <template v-for="button in arrayShareButtons" :key="button.title">
+        <a
+          v-if="button.condition"
+          rel="noreferrer noopener"
+          target="_blank"
+          :href="button.url"
+          class="btn share-btn mb-2 text-dark me-2"
+          :title="$t('New window', {text: button.title})"
+        >
+          <component :is="button.icon" :size="34" />
+        </a>
+      </template>
+      <slot name="additional-buttons"/>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import XIcon from "../../icons/XIcon.vue";
+import BlueSkyIcon from "../../icons/BlueSkyIcon.vue";
+import WhatsappIcon from "vue-material-design-icons/Whatsapp.vue";
+import LinkedinIcon from "vue-material-design-icons/Linkedin.vue";
+import FacebookIcon from "vue-material-design-icons/Facebook.vue";
+import { useSaveFetchStore } from "../../../stores/SaveFetchStore";
+import { mapActions, mapState } from "pinia";
+import { useAuthStore } from "../../../stores/AuthStore";
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  components: {
+    FacebookIcon,
+    LinkedinIcon,
+    WhatsappIcon,
+    XIcon,
+    BlueSkyIcon
+  },
+  props: {
+    organisationId: { default: undefined, type: String },
+  },
+  data() {
+    return {
+      noSharing: true as boolean,
+      isLoading: true as boolean,
+    };
+  },
+  computed: {
+    ...mapState(useAuthStore, [
+      "isGarRole",
+      "authOrgaId"
+    ]),
+    arrayShareButtons() {
+      return [
+        {
+          title: "Facebook",
+          icon: "FacebookIcon",
+          url: `https://www.facebook.com/sharer/sharer.php?u=${this.urlPage}`,
+          condition: true,
+        },
+        {
+          title: "X",
+          icon: "XIcon",
+          url: `https://twitter.com/intent/tweet?text=${this.urlPage}`,
+          condition: true,
+        },
+        {
+          title: "Linkedin",
+          icon: "LinkedinIcon",
+          url: `https://www.linkedin.com/sharing/share-offsite/?url=${this.urlPage}`,
+          condition: true,
+        },
+        {
+          title: "Bluesky",
+          icon: "BlueSkyIcon",
+          url: `https://bsky.app/intent/compose?text=${this.urlPage}`,
+          condition: true,
+        },
+        {
+          title: "Whatsapp",
+          icon: "WhatsappIcon",
+          url: `whatsapp://send?text=${this.urlPage}`,
+          condition: window.matchMedia("(hover: none)").matches,
+        },
+      ];
+    },
+    urlPage(): string {
+      return window.location.href;
+    },
+  },
+  created() {
+    this.initShareButtons();
+  },
+  methods: {
+    ...mapActions(useSaveFetchStore, ["getOrgaAttributes"]),
+    async initShareButtons() {
+      if (!this.organisationId) {
+        return;
+      }
+      const attributes = await this.getOrgaAttributes(this.organisationId);
+      this.noSharing = "true" === attributes.noSharing;
+      this.isLoading = false;
+    },
+  },
+});
+</script>

package/src/components/display/sharing/SubscribeButtons.vue

@@ -116,6 +116,8 @@ export default defineComponent({
     return {
       hiddenLinks: [] as Array<Link>,
       lastWindowWidth: 420 as number,
+      exclusive: false as boolean,
+      notExclusive: false as boolean,
     };
   },
   computed: {

package/src/components/form/ClassicCopyButton.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <button
+      :class="classBtn"
+      @click="onCopyCode(afterCopy)"
+    >
+      {{ textDisplayed }}
+    </button>
+    <SnackBar 
+      v-if="lazyLoadingSnackbar" 
+      ref="snackbar" 
+      position="bottom-left"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import SnackBar from "../misc/SnackBar.vue";
+import displayHelper from "../../helper/displayHelper";
+import { defineComponent } from "vue";
+export default defineComponent({
+  name: "ClassicCopyButton",
+
+  components: {
+    SnackBar,
+  },
+
+  props: {
+    text: { default: undefined, type: String },
+    textAfterCopy: { default: undefined, type: String },
+    dataToCopy: { default: undefined, type: String },
+    snackbarText: { default: undefined, type: String },
+    classBtn: { default: "btn btn-primary w-fit-content my-3", type: String },
+  },
+  data() {
+    return {
+      hasBeenCopied: false as boolean,
+      lazyLoadingSnackbar: false as boolean,
+    };
+  },
+  computed:{
+    textDisplayed(){
+      return this.hasBeenCopied ? this.textAfterCopy : this.text;
+    }
+  },
+  methods: {
+    onCopyCode(callback: () => void){
+      displayHelper.onCopyCode(this.dataToCopy??"", callback);
+    },
+    afterCopy(): void {
+      this.hasBeenCopied = true;
+      if (!this.lazyLoadingSnackbar) {
+        this.lazyLoadingSnackbar = true;
+        setTimeout(() => {
+          this.afterCopy();
+        }, 500);
+      } else {
+        (this.$refs.snackbar as InstanceType<typeof SnackBar>).open(
+          this.snackbarText ?? this.$t("Data in clipboard"),
+        );
+      }
+    },
+  },
+});
+</script>

package/src/components/misc/ClassicNav.vue

@@ -89,11 +89,13 @@ export default defineComponent({
     border-bottom: solid 1px var(--octopus-border-default);
     background-color: var(--octopus-background);
   }
+  .octopus-nav.light  .octopus-tab-content{
+    border-top: solid 1px var(--octopus-border-default);
+  }
 
 
   .octopus-nav.light .octopus-nav-item {
     border: 0;
-    flex-grow: 0;
   }
 
   .octopus-nav-link {
@@ -122,10 +124,13 @@ export default defineComponent({
   }
 
   .octopus-nav.light .octopus-nav-link {
-    border-top: 0 !important;
-    border-right: 0 !important;
-    border-left: 0 !important;
     font-weight: bold;
+    background:var(--octopus-border-default);
+    &.active{
+      border-bottom-color: var(--octopus-primary);
+      background: transparent;
+      color: var(--octopus-primary);
+    }
   }
 
 

package/src/components/misc/ClassicPopover.vue

@@ -245,7 +245,7 @@ export default defineComponent({
         return;
       }
       //Exception timepicker in popover
-      var result = Array.from(e?.target?.classList ?? []).findIndex((val) => { return val.startsWith("dp__");});
+      const result = Array.from(e?.target?.classList ?? []).findIndex((val) => { return val.startsWith("dp__");});
       if (-1!==result) {
         return;
       }

package/src/components/misc/modal/ClipboardModal.vue

@@ -8,9 +8,12 @@
       <p class="d-flex justify-content-between align-items-center">
         {{ $t("Rss feed:") }}
         <span id="LINK">{{ link }}</span>
-        <button class="btn btn-primary" @click="onCopyCode(link, afterCopy)">
-          {{ $t("Copy") }}
-        </button>
+        <ClassicCopyButton
+          :text="$t('Copy')"
+          :text-after-copy="$t('Copied!')"
+          :data-to-copy="link"
+          :snackbar-text="$t('Link in clipboard')"
+        />
       </p>
       <RssSection
         v-if="emission && undefined !== authOrgaId"
@@ -21,9 +24,9 @@
 </template>
 
 <script lang="ts">
+import ClassicCopyButton from "../../form/ClassicCopyButton.vue";
 import ClassicModal from "../modal/ClassicModal.vue";
 import { Emission } from "@/stores/class/general/emission";
-import displayHelper from "../../../helper/displayHelper";
 import { defineComponent, defineAsyncComponent } from "vue";
 import { useAuthStore } from "../../../stores/AuthStore";
 import { mapState } from "pinia";
@@ -35,25 +38,20 @@ export default defineComponent({
   components: {
     RssSection,
     ClassicModal,
+    ClassicCopyButton
   },
   props: {
     link: { default: "", type: String },
     emission: { default: undefined, type: Object as () => Emission },
   },
-  emits: ["close", "copy"],
+  emits: ["close"],
   computed: {
     ...mapState(useAuthStore, ["authOrgaId"]),
   },
   methods: {
-    onCopyCode(link: string, callback: () => void){
-      displayHelper.onCopyCode(link, callback);
-    },
     closePopup(): void {
       this.$emit("close");
     },
-    afterCopy(): void {
-      this.$emit("copy");
-    },
   },
 });
 </script>