@saooti/octopus-sdk 37.0.5 → 37.0.7

package/src/components/misc/ClassicPopover.vue

@@ -0,0 +1,212 @@
+<template>
+  <div
+    v-show="show && !disable"
+    :id="'popover' + target"
+    ref="popover"
+    tabindex="0"
+    class="octopus-popover"
+    :class="onlyClick ? 'octopus-dropdown' : ''"
+    :style="positionInlineStyle"
+    @blur="clearDataBlur"
+  >
+    <div v-if="title" class="bg-secondary p-2">
+      {{ title }}
+    </div>
+    <div class="p-2">
+      <slot>{{ content }}</slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
+  name: "ClassicPopover",
+  props: {
+    content: { type: String, default: "" },
+    title: { type: String, default: "" },
+    target: { type: String, required: true },
+    disable: { type: Boolean, default: false },
+    onlyClick: { type: Boolean, default: false },
+    isFixed: { type: Boolean, default: false },
+    relativeClass: { type: String, default: undefined },
+    leftPos: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      show: false as boolean,
+      isClick: false as boolean,
+      posX: 0 as number,
+      posY: 0 as number,
+      targetElement: null as HTMLElement | null,
+    };
+  },
+  computed: {
+    popoverId(): string {
+      return "popover" + this.target;
+    },
+    positionInlineStyle(): string {
+      return `left: ${this.posX}px; top: ${this.posY}px;`;
+    },
+  },
+  mounted() {
+    this.init();
+  },
+  unmounted() {
+    this.removeListeners();
+  },
+  methods: {
+    init() {
+      this.targetElement = document.getElementById(this.target);
+      if (this.targetElement) {
+        if (!this.onlyClick) {
+          this.targetElement.addEventListener(
+            "mouseenter",
+            this.setPopoverData,
+          );
+          this.targetElement.addEventListener("mouseleave", this.clearData);
+        }
+        this.targetElement.addEventListener("click", this.setPopoverData);
+        this.targetElement.addEventListener("blur", this.clearDataBlur);
+      }
+    },
+    removeListeners() {
+      if (this.targetElement) {
+        if (!this.onlyClick) {
+          this.targetElement.removeEventListener(
+            "mouseenter",
+            this.setPopoverData,
+          );
+          this.targetElement.removeEventListener("mouseleave", this.clearData);
+        }
+        this.targetElement.removeEventListener("click", this.setPopoverData);
+        this.targetElement.addEventListener("blur", this.clearDataBlur);
+      }
+    },
+    setPopoverData(e: MouseEvent | PointerEvent) {
+      if (this.disable || !e || !e.target) {
+        return;
+      }
+      if ("click" === e.type) {
+        if (this.show && this.isClick) {
+          this.isClick = false;
+          this.clearData();
+          return;
+        }
+        this.isClick = true;
+      }
+      this.show = true;
+      let parentLeft = 0;
+      let parentRight = 0;
+      let parentTop = 0;
+      let parentScrollTop = 0;
+      if (this.relativeClass) {
+        const modalBody = document.getElementsByClassName(
+          this.relativeClass,
+        )[0];
+        if (undefined === modalBody) {
+          (this.$refs.popover as HTMLElement).style.display = "block";
+          this.posX = 0;
+          this.posY = 0;
+          return;
+        }
+        const modalBodyRect = modalBody.getBoundingClientRect();
+        parentLeft = modalBodyRect.left;
+        parentRight = modalBodyRect.right;
+        parentTop = modalBodyRect.top;
+        parentScrollTop = modalBody.scrollTop;
+      }
+      const rectElement = (e.target as HTMLElement).getBoundingClientRect();
+      (this.$refs.popover as HTMLElement).style.display = "block";
+      this.posX = this.leftPos
+        ? rectElement.right -
+          parentRight -
+          (this.$refs.popover as HTMLElement).clientWidth
+        : rectElement.left - parentLeft;
+      this.posY =
+        rectElement.bottom +
+        parentScrollTop -
+        parentTop +
+        (this.isFixed ? 0 : window.scrollY) +
+        5;
+    },
+    async clearDataBlur(e: FocusEvent) {
+      if (!e.relatedTarget) {
+        return this.clearClick();
+      }
+      const myElement = e.relatedTarget as HTMLElement;
+      if (this.popoverId === myElement.id) {
+        return;
+      }
+      const parent = this.$refs.popover as HTMLElement;
+      if (null === parent || !parent.contains(myElement)) {
+        return this.clearClick();
+      }
+      if (
+        null === myElement.classList ||
+        !myElement.classList.contains("octopus-dropdown-item")
+      ) {
+        return;
+      }
+      if (!(myElement as HTMLAnchorElement).href) {
+        return this.clearClick();
+      }
+      if ("true" === myElement.getAttribute("reallink")) {
+        myElement.click();
+      } else {
+        await this.$router.push((myElement as HTMLAnchorElement).pathname);
+      }
+      this.$nextTick(() => {
+        this.isClick = false;
+        this.clearData();
+      });
+    },
+    clearClick() {
+      this.isClick = false;
+      this.clearData();
+    },
+    clearData() {
+      if (this.isClick) {
+        return;
+      }
+      this.show = false;
+      this.posX = 0;
+      this.posY = 0;
+    },
+  },
+});
+</script>
+<style lang="scss">
+@import "@scss/_variables.scss";
+.octopus-popover {
+  background: white;
+  border: 1px solid #ccc;
+  border-radius: $octopus-borderradius;
+  position: absolute;
+  z-index: 9999;
+  &.octopus-dropdown {
+    min-width: 200px;
+    .octopus-dropdown-item {
+      display: flex;
+      justify-content: center;
+      color: rgb(29, 29, 29);
+      width: 100%;
+      padding: 0.25rem 1rem;
+      font-weight: 400;
+      text-decoration: none;
+      white-space: nowrap;
+      background-color: transparent;
+      border: 0;
+      &:hover {
+        background: rgb(243, 243, 243);
+      }
+    }
+    hr {
+      margin: 0.5rem 0;
+      overflow: hidden;
+      border-top: 1px solid #ccc;
+      opacity: 1;
+    }
+  }
+}
+</style>

package/src/components/misc/{Spinner.vue → ClassicSpinner.vue}

@@ -1,37 +1,36 @@
 <template>
-  <div
-    class="octopus-spinner"
-    :class="small?'small':''"
-  />
+  <div class="octopus-spinner" :class="small ? 'small' : ''" />
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent } from "vue";
 export default defineComponent({
-  name: "Spinner",
+  name: "ClassicSpinner",
   props: {
     small: { default: false, type: Boolean },
   },
-})
+});
 </script>
 <style lang="scss">
-.octopus-app .octopus-spinner{
+.octopus-app .octopus-spinner {
   display: inline-block;
-  width:2rem;
-  height:2rem;
+  width: 2rem;
+  height: 2rem;
   border-radius: 50%;
   animation: 0.75s linear infinite spinner-border;
   border: 2px solid currentcolor;
   border-right-color: transparent;
   flex-shrink: 0;
 
-  &.small{
-    width:1rem;
-    height:1rem;
+  &.small {
+    width: 1rem;
+    height: 1rem;
   }
 
   @keyframes spinner-border {
-    to { transform: rotate(360deg); }
+    to {
+      transform: rotate(360deg);
+    }
   }
 }
-</style>
+</style>

package/src/components/misc/ErrorMessage.vue

@@ -1,15 +1,7 @@
 <template>
-  <div
-    v-if="message && message.length"
-    class="d-flex"
-  >
-    <div
-      class="d-flex align-items-center bg-error-message p-2 rounded my-1"
-    >
-      <span
-        :title="$t('Warning')"
-        class="saooti-warning text-danger me-1"
-      />
+  <div v-if="message && message.length" class="d-flex">
+    <div class="d-flex align-items-center bg-error-message p-2 rounded my-1">
+      <span :title="$t('Warning')" class="saooti-warning text-danger me-1" />
       <div class="alert-text">
         {{ message }}
       </div>
@@ -17,20 +9,20 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent } from "vue";
 export default defineComponent({
-  name: 'ErrorMessage',
+  name: "ErrorMessage",
   props: {
-    message: { default: undefined, type: String},
+    message: { default: undefined, type: String },
   },
-})
+});
 </script>
 <style lang="scss">
-.octopus-app{
+.octopus-app {
   .bg-error-message {
     background-color: #ffd84a9c;
   }
-  .alert-text{
+  .alert-text {
     color: darkred;
   }
 }

package/src/components/misc/FooterSection.vue

@@ -0,0 +1,198 @@
+<template>
+  <div
+    id="footer"
+    ref="footer"
+    class="d-flex align-items-center justify-content-between border-top mt-auto"
+  >
+    <div v-if="!isPodcastmaker" class="d-flex flex-column px-1">
+      <div class="text-dark my-1 special-select-align-magic-trick">
+        &copy; Saooti 2019
+      </div>
+      <router-link
+        v-for="link in routerLinkSecondArray"
+        :key="link.routeName"
+        class="link-hover my-1 special-select-align-magic-trick"
+        :to="link.routeName"
+      >
+        {{ link.title }}
+      </router-link>
+      <ClassicSelect
+        v-model:textInit="language"
+        :display-label="false"
+        id-select="language-chooser-select"
+        :label="$t('Change locale')"
+        :transparent="true"
+        :options="[
+          { title: 'Deutsch', value: 'de' },
+          { title: 'English', value: 'en' },
+          { title: 'Español', value: 'es' },
+          { title: 'Français', value: 'fr' },
+          { title: 'Italiano', value: 'it' },
+          { title: 'Slovenščina', value: 'sl' },
+        ]"
+        class="mb-2"
+      />
+    </div>
+    <a
+      v-if="isPodcastmaker && isContactLink"
+      id="footer-contact"
+      class="link-hover"
+      :href="isContactLink"
+      rel="noopener"
+      target="_blank"
+      >{{ $t("Contact") }}</a
+    >
+    <div class="d-flex align-items-center">
+      <div class="hosted-by">
+        {{ $t("Hosted by") }}<span class="ms-1 me-1 text-primary">Saooti</span>
+      </div>
+
+      <AcpmImage v-if="isGarRole" />
+      <a
+        v-else
+        href="https://www.acpm.fr/L-ACPM/Certifications-et-Labels/Les-Podcasts"
+        rel="noopener"
+        target="_blank"
+        :title="$t('Octopus is ACPM Podcast accredited')"
+      >
+        <AcpmImage />
+      </a>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import cookies from "../mixins/cookies";
+import ClassicSelect from "../form/ClassicSelect.vue";
+import AcpmImage from "./AcpmImage.vue";
+import { state } from "../../stores/ParamSdkStore";
+import { loadLocaleMessages } from "@/i18n";
+import octopusApi from "@saooti/octopus-api";
+import { useFilterStore } from "@/stores/FilterStore";
+import { useGeneralStore } from "@/stores/GeneralStore";
+import { useAuthStore } from "@/stores/AuthStore";
+import { mapState, mapActions } from "pinia";
+import { Category } from "@/stores/class/general/category";
+import { RubriquageFilter } from "@/stores/class/rubrique/rubriquageFilter";
+import { defineComponent } from "vue";
+export default defineComponent({
+  name: "FooterSection",
+  components: {
+    ClassicSelect,
+    AcpmImage,
+  },
+
+  mixins: [cookies],
+  data() {
+    return {
+      language: this.$i18n.locale,
+    };
+  },
+  computed: {
+    ...mapState(useGeneralStore, ["storedCategories", "platformEducation"]),
+    ...mapState(useFilterStore, [
+      "filterRubrique",
+      "filterOrgaId",
+      "filterIab",
+    ]),
+    ...mapState(useAuthStore, ["isGarRole"]),
+    routerLinkSecondArray() {
+      const links = [
+        { title: this.$t("Contact"), routeName: "/main/pub/contact" },
+        { title: this.$t("Term of use"), routeName: "/main/pub/cgu" },
+      ];
+
+      if (!this.isGarRole) {
+        links.push({
+          title: this.$t("Used libraries"),
+          routeName: "/main/pub/libraries",
+        });
+      }
+      return links;
+    },
+    isPodcastmaker(): boolean {
+      return state.generalParameters.podcastmaker as boolean;
+    },
+    isContactLink(): string | undefined {
+      return state.footer.contactLink;
+    },
+    rubriqueQueryParam(): string | undefined {
+      if (this.filterRubrique?.length) {
+        return this.filterRubrique
+          .map(
+            (value: RubriquageFilter) =>
+              value.rubriquageId + ":" + value.rubriqueId,
+          )
+          .join();
+      }
+      return undefined;
+    },
+  },
+  watch: {
+    language() {
+      this.changeLanguage();
+    },
+  },
+  methods: {
+    ...mapActions(useGeneralStore, ["storedUpdateCategories"]),
+    ...mapActions(useFilterStore, ["filterUpdateIab"]),
+    getQueriesRouter(routeName: string) {
+      if (
+        "podcasts" !== routeName &&
+        "emissions" !== routeName &&
+        "home" !== routeName
+      ) {
+        return { productor: this.filterOrgaId };
+      }
+      return {
+        productor: this.filterOrgaId,
+        iabId: this.filterIab?.id,
+        rubriquesId: this.rubriqueQueryParam,
+      };
+    },
+    changeLanguage(): void {
+      this.setCookie("octopus-language", this.language);
+      loadLocaleMessages(this.$i18n, this.language, this.platformEducation);
+      octopusApi
+        .fetchDataWithParams<Array<Category>>(
+          0,
+          `iab/list${
+            state.octopusApi.organisationId
+              ? "/" + state.octopusApi.organisationId
+              : ""
+          }`,
+          { lang: this.$i18n.locale },
+        )
+        .then((data: Array<Category>) => {
+          this.storedUpdateCategories(data);
+          if (this.filterIab) {
+            const category = this.storedCategories.filter((c: Category) => {
+              return c.id === this.filterIab?.id;
+            });
+            if (category.length) {
+              this.filterUpdateIab(category[0]);
+            }
+          }
+        });
+    },
+  },
+});
+</script>
+
+<style lang="scss">
+.octopus-app {
+  #footer {
+    font-size: 0.6rem;
+    bottom: 0;
+    z-index: 10;
+    background: white;
+    padding: 0 2rem;
+    a {
+      color: #666;
+    }
+    .special-select-align-magic-trick {
+      margin-left: 0.16rem;
+    }
+  }
+}
+</style>