@saooti/octopus-sdk 37.0.5 → 37.0.7

package/src/components/misc/Accordion.vue

@@ -1,78 +0,0 @@
-<template>
-  <div
-    class="octopus-accordion my-2"
-  >
-    <button
-      :id="'accordion-'+idComposer"
-      class="btn-transparent bg-white w-100 p-2 text-start d-flex align-items-center"
-      :class="isOpen?'really-light-primary-bg':''"
-      @click="isOpen=!isOpen"
-    >
-      <span
-        v-if="icon"
-        class="img-accordion text-primary"
-        :class="icon"
-      />
-      <img
-        v-if="imageUrl"
-        width="30"
-        height="30"
-        class="img-accordion"
-        :src="imageUrl"
-        :alt="title"
-      >
-      <span class="flex-grow-1">{{ title }}</span>
-      <span :class="isOpen?'saooti-up': 'saooti-down'" />
-    </button>
-    <div
-      v-show="isOpen"
-      class="body p-2"
-    >
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-export default defineComponent({
-  name: "Accordion",
-	props: {
-    title: { default: '', type: String },
-    idComposer: { default: '', type: String },
-    icon:{default: undefined, type: String },
-    imageUrl:{default: undefined, type: String },
-  },
-	emits:['open'],
-  data () {
-    return {
-			isOpen: false as boolean,
-    }
-  },
-  watch:{
-    isOpen(){
-      this.$emit('open');
-    }
-  }
-});
-</script>
-<style lang="scss">
-.octopus-accordion{
-	border: 1px solid #ccc;
-  >button{
-    height: 50px;
-  }
-  .img-accordion {
-    width: 30px;
-    height: 30px;
-    margin-right: 1rem;
-    font-size: 20px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  .body{
-    border-top: 1px solid #ccc;
-  }
-}
-</style>

package/src/components/misc/Footer.vue

@@ -1,165 +0,0 @@
-<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 align-items-center px-1"
-    >
-      <div class="text-dark me-2">
-        &copy; Saooti 2019
-      </div>
-      <router-link
-        v-for="link in routerLinkSecondArray" 
-        :key="link.routeName"
-        class="link-hover me-2"
-        :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'}]"
-      />
-    </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>
-      <a
-        href="https://www.acpm.fr/L-ACPM/Certifications-et-Labels/Les-Podcasts"
-        rel="noopener"
-        target="_blank"
-        :title="$t('Octopus is ACPM Podcast accredited')"
-      >
-        <img
-          width="44"
-          height="44"
-          class="acpm_image"
-          src="/img/ACPM.webp"
-          :title="$t('Octopus is ACPM Podcast accredited')"
-          :alt="$t('Octopus is ACPM Podcast accredited')"
-        >
-      </a>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import cookies from '../mixins/cookies';
-import ClassicSelect from '../form/ClassicSelect.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 { 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: 'Footer',
-  components: {
-    ClassicSelect
-  },
-
-  mixins:[cookies],
-  data() {
-    return {
-      language: this.$i18n.locale,
-    };
-  },
-  computed: {
-    ...mapState(useGeneralStore, ['storedCategories', 'platformEducation']),
-    ...mapState(useFilterStore, ['filterRubrique', 'filterOrgaId', 'filterIab']),
-    routerLinkSecondArray(){
-      return [
-        {title : this.$t('Contact'), routeName: '/main/pub/contact'},
-        {title : this.$t('Term of use'), routeName: '/main/pub/cgu'},
-        {title : this.$t('Used libraries'), routeName: "/main/pub/libraries"}]
-    },
-    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;
-    .acpm_image {
-      width: 44px;
-      height: 44px;
-    }
-    a{
-      color: #666;
-    }
-  }
-}
-</style>

package/src/components/misc/Nav.vue

@@ -1,119 +0,0 @@
-<template>
-  <ul
-    class="octopus-nav"
-    :class="light?'light':''"
-  >
-    <li
-      v-for="index in tabNumber"
-      v-show="hasSlot(index-1)"
-      :key="index-1"
-      class="octopus-nav-item"
-    >
-      <div
-        class="octopus-nav-link"
-        :class="activeTab === (index-1)? 'active':''"
-        @click="$emit('update:activeTab',(index-1))"
-      >
-        <slot :name="(index-1)" />
-      </div>
-    </li>
-  </ul>
-  <div :class="transparent? 'd-flex flex-grow-1':'octopus-tab-content'">
-    <div
-      v-for="index in tabNumber"
-      v-show="hasSlot('tab'+(index-1))"
-      :key="index-1"
-      class="octopus-tab-pane"
-      :class="activeTab === (index-1)? 'active':''"
-    >
-      <slot
-        :name="'tab'+(index-1)"
-        :is-active="activeTab === (index-1)"
-      />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-export default defineComponent({
-  name: 'Nav',
-  props: {
-    tabNumber: { default: 0, type: Number},
-    activeTab: { default: 0, type: Number},
-    transparent:{ default: false, type: Boolean},
-    light: { default: false, type: Boolean},
-  },
-  emits:['update:activeTab'],
-  methods:{
-    hasSlot(name = 'default') {
-      return !!this.$slots[ name ];
-    }
-  }
-})
-</script>
-
-<style lang="scss">
-@import '@scss/_variables.scss';
-.octopus-app{
-  .octopus-nav{
-    display: flex;
-    flex-wrap: wrap;
-    padding-left: 0;
-    margin-bottom: 0;
-    margin-top: 0;
-    list-style: none;
-    border-bottom: 0.05rem solid #ddd;
-    &.light{
-      border: 0;
-    }
-  }
-  .octopus-nav-item{
-    border-right: solid 1px rgb(222,226,230);
-    border-left: solid 1px rgb(222,226,230);
-    border-top: solid 1px rgb(222,226,230);
-    border-top-left-radius: 0.25rem;
-    border-top-right-radius: 0.25rem;
-    cursor: pointer;
-    flex-grow: 1;
-    text-align: center;
-  }
-  .octopus-nav.light .octopus-nav-item{
-    border: 0;
-    flex-grow: 0;
-  }
-  .octopus-nav-link{
-    display: block;
-    padding: 0.5rem 1rem;
-    text-decoration: none;
-    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
-    border: 0.1rem solid transparent;
-    &:hover,&.active{
-      border-color: #dee2e6;
-      border-bottom-color: $octopus-primary-color;
-      color: $octopus-primary-color;
-    }
-  }
-  .octopus-nav.light .octopus-nav-link{
-    border-top: 0 !important;
-    border-right: 0 !important;
-    border-left: 0 !important;
-    font-weight: bold;
-  }
-  .octopus-tab-content{
-    border-right: solid 1px rgb(222,226,230);
-    border-left: solid 1px rgb(222,226,230);
-    border-bottom: solid 1px rgb(222,226,230);
-    background-color: #f8fafc;
-  }
-  .octopus-tab-pane{
-    display: none;
-    &.active{
-      display: flex;
-      justify-content: space-between;
-      padding: 0.5rem;
-      flex-grow: 1;
-    }
-  }
-}
-</style>

package/src/components/misc/Popover.vue

@@ -1,193 +0,0 @@
-<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: 'Popover',
-	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>