@saooti/octopus-sdk 37.0.13 → 37.0.15

package/index.ts

@@ -80,6 +80,7 @@ import imageProxy from "./src/components/mixins/imageProxy.ts";
 import orgaFilter from "./src/components/mixins/organisationFilter.ts";
 import initSDK from "./src/components/mixins/init.ts";
 import tagOfMixins from "./src/components/mixins/tagOfMixins.ts";
+import resizePhone from "./src/components/mixins/resizePhone.ts";
 
 export {
     selenium,
@@ -88,5 +89,6 @@ export {
     imageProxy,
     orgaFilter,
     initSDK,
-    tagOfMixins
+    tagOfMixins,
+    resizePhone
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "37.0.13",
+  "version": "37.0.15",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",

package/src/assets/share.scss

@@ -100,7 +100,7 @@
     flex-wrap: nowrap;
     justify-content: space-between;
     @media (max-width: 960px) {
-      overflow-y: scroll;
+      overflow-y: auto;
       -webkit-overflow-scrolling: touch;
       scroll-behavior: smooth;
       padding-bottom: 1rem;

package/src/components/display/emission/EmissionInlineList.vue

@@ -64,6 +64,7 @@ import { Rubrique } from "@/stores/class/rubrique/rubrique";
 import { defineComponent } from "vue";
 import { AxiosError } from "axios";
 import imageProxy from "../../mixins/imageProxy";
+import resizePhone  from "../../mixins/resizePhone";
 import { Rubriquage } from "@/stores/class/rubrique/rubriquage";
 export default defineComponent({
   name: "EmissionInlineList",
@@ -73,7 +74,7 @@ export default defineComponent({
     ClassicLoading,
   },
 
-  mixins: [handle403, imageProxy],
+  mixins: [handle403, imageProxy, resizePhone],
 
   props: {
     organisationId: { default: undefined, type: String },
@@ -98,6 +99,8 @@ export default defineComponent({
       direction: 1 as number,
       alignLeft: false as boolean,
       rubriques: undefined as Array<Rubrique> | undefined,
+      isPhone: false as boolean,
+      windowWidth: 0 as number
     };
   },
 
@@ -129,18 +132,23 @@ export default defineComponent({
     sizeItem() {
       this.handleResize();
     },
-  },
-
-  created() {
-    window.addEventListener("resize", this.handleResize);
-  },
-
-  unmounted() {
-    window.removeEventListener("resize", this.handleResize);
+    windowWidth(){
+      if (!this.$el) return;
+      if (this.overflowScroll) {
+        this.size = 20;
+        return;
+      }
+      if (window.innerWidth <= PHONE_WIDTH) {
+        this.size = 10;
+        return;
+      }
+      const width = (this.$el as HTMLElement).offsetWidth;
+      const sixteen = domHelper.convertRemToPixels(this.itemSize + 0.7);
+      this.size = Math.floor(width / sixteen);
+    }
   },
 
   mounted() {
-    this.handleResize();
     this.fetchNext();
     if (this.displayRubriquage) {
       this.fetchRubriques();
@@ -200,20 +208,6 @@ export default defineComponent({
       }
       this.index += 1;
     },
-    handleResize(): void {
-      if (!this.$el) return;
-      if (this.overflowScroll) {
-        this.size = 20;
-        return;
-      }
-      if (window.innerWidth <= PHONE_WIDTH) {
-        this.size = 10;
-        return;
-      }
-      const width = (this.$el as HTMLElement).offsetWidth;
-      const sixteen = domHelper.convertRemToPixels(this.itemSize + 0.7);
-      this.size = Math.floor(width / sixteen);
-    },
     reset(): void {
       this.loading = true;
       this.loaded = true;

package/src/components/display/list/ListPaginate.vue

@@ -55,6 +55,7 @@ import ClassicLoading from "../../form/ClassicLoading.vue";
 import { state } from "../../../stores/ParamSdkStore";
 import PaginateParams from "./PaginateParams.vue";
 import PaginateSection from "./PaginateSection.vue";
+import resizePhone from "../../mixins/resizePhone";
 import { defineComponent } from "vue";
 export default defineComponent({
   name: "ListPaginate",
@@ -63,6 +64,7 @@ export default defineComponent({
     PaginateParams,
     ClassicLoading,
   },
+  mixins: [resizePhone],
   props: {
     first: { default: 0, type: Number },
     rowsPerPage: { default: 30, type: Number },
@@ -79,16 +81,14 @@ export default defineComponent({
   emits: ["update:first", "update:rowsPerPage", "update:isMobile"],
   data() {
     return {
-      windowWidth: window.innerWidth,
+      isPhone: false as boolean,
+      windowWidth: 0 as number
     };
   },
   computed: {
     buttonPlus(): boolean {
       return state.generalParameters.buttonPlus as boolean;
     },
-    isPhone() {
-      return 960 >= this.windowWidth;
-    },
     rangeSize() {
       if (this.windowWidth > 1600) {
         return 3;
@@ -104,18 +104,7 @@ export default defineComponent({
       },
     },
   },
-  mounted() {
-    this.$nextTick(() => {
-      window.addEventListener("resize", this.onResize);
-    });
-  },
-  beforeUnmount() {
-    window.removeEventListener("resize", this.onResize);
-  },
   methods: {
-    onResize() {
-      this.windowWidth = window.innerWidth;
-    },
     fetchMore() {
       this.$emit("update:first", this.first + this.rowsPerPage);
     },

package/src/components/display/list/SwiperList.vue

@@ -1,15 +1,25 @@
 <template>
-  <swiper
-    :slides-per-view="numberItem"
-    :space-between="0"
-    :loop="listObject.length >= numberItem"
-    :navigation="true"
-    :modules="modules"
-  >
-    <swiper-slide v-for="(obj, index) in listObject" :key="obj">
-      <slot name="octopusSlide" :option="obj" :index="index" />
-    </swiper-slide>
-  </swiper>
+  <div class="position-relative">
+    <template v-if="!isPhone">
+      <button class="btn-transparent swiper-button-prev" v-show="isLoop" @click="slidePrevButton()"></button>
+      <swiper
+        :slides-per-view="numberItem"
+        :space-between="0"
+        :loop="isLoop"
+        :navigation="true"
+        :modules="modules"
+      >
+        <swiper-slide v-for="(obj, index) in listObject" :key="obj">
+          <slot name="octopusSlide" :option="obj" :index="index" />
+        </swiper-slide>
+      </swiper>
+    </template>
+    <div class="element-list-inline" v-else>
+      <div v-for="(obj, index) in listObject" :key="obj">
+        <slot name="octopusSlide" :option="obj" :index="index" />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -19,6 +29,7 @@ import { Swiper, SwiperSlide } from "swiper/vue";
 import { Navigation } from "swiper/modules";
 import "swiper/css";
 import "swiper/css/navigation";
+import resizePhone from "../../mixins/resizePhone";
 import { defineComponent } from "vue";
 export default defineComponent({
   name: "SwiperList",
@@ -27,6 +38,7 @@ export default defineComponent({
     Swiper,
     SwiperSlide,
   },
+  mixins:[resizePhone],
 
   props: {
     listObject: { default: () => [], type: Array as () => Array<unknown> },
@@ -37,6 +49,8 @@ export default defineComponent({
     return {
       modules: [Navigation],
       numberItem: 5 as number,
+      isPhone: false as boolean,
+      windowWidth: 0 as number
     };
   },
   computed: {
@@ -44,31 +58,29 @@ export default defineComponent({
       if (this.sizeItemOverload) {
         return this.sizeItemOverload;
       }
-      if (window.innerWidth <= 450) {
+      if (this.windowWidth <= 450) {
         return 12.5;
       }
       return state.generalParameters.podcastItem
         ? state.generalParameters.podcastItem
         : 13.5;
     },
+    isLoop():boolean{
+      return this.listObject.length >= this.numberItem;
+    },
   },
-
-  created() {
-    window.addEventListener("resize", this.handleResize);
-  },
-  unmounted() {
-    window.removeEventListener("resize", this.handleResize);
-  },
-
-  mounted() {
-    this.handleResize();
-  },
-  methods: {
-    handleResize(): void {
+  watch:{
+    windowWidth(){
       if (!this.$el) return;
       const width = (this.$el as HTMLElement).offsetWidth - 95;
       const sixteen = domHelper.convertRemToPixels(this.sizeItem + 0.5);
       this.numberItem = Math.max(1, Math.floor(width / sixteen));
+    }
+  },
+
+  methods: {
+    slidePrevButton(){
+      this.$el.querySelector(".swiper").swiper.slidePrev();
     },
   },
 });
@@ -91,23 +103,14 @@ export default defineComponent({
   right: 0;
 }
 .swiper-button-prev {
-  left: 0;
-}
-/* .swiper-slide-active{
-  padding-left:27px;
-  @media (max-width: 550px) {
-    padding-left:0;
-  }
+  left: -35px;
 }
-.swiper-slide-next{
-  padding-right:27px;
-} */
 .swiper-button-lock {
   display: flex;
 }
 .swiper-slide {
   display: flex;
-  justify-content: center;
+  /* justify-content: center; */
   align-items: center;
 }
 </style>

package/src/components/display/playlist/PodcastPlaylistInlineList.vue

@@ -61,6 +61,7 @@ const PHONE_WIDTH = 960;
 import { state } from "../../../stores/ParamSdkStore";
 import { Podcast } from "@/stores/class/general/podcast";
 import { Playlist } from "@/stores/class/general/playlist";
+import resizePhone from "../../mixins/resizePhone";
 import { defineComponent } from "vue";
 export default defineComponent({
   name: "PodcastPlaylistInlineList",
@@ -69,6 +70,7 @@ export default defineComponent({
     PodcastItem,
     ClassicLoading,
   },
+  mixins: [resizePhone],
 
   props: {
     playlistId: { default: undefined, type: Number },
@@ -85,6 +87,8 @@ export default defineComponent({
       allPodcasts: [] as Array<Podcast>,
       direction: 1 as number,
       alignLeft: false as boolean,
+      isPhone: false as boolean,
+      windowWidth: 0 as number
     };
   },
   computed: {
@@ -120,18 +124,23 @@ export default defineComponent({
       this.reset();
       this.fetchContent();
     },
-  },
-
-  created() {
-    window.addEventListener("resize", this.handleResize);
-  },
-
-  unmounted() {
-    window.removeEventListener("resize", this.handleResize);
+    windowWidth(){
+      if (!this.$el) return;
+      if (this.overflowScroll) {
+        this.size = 20;
+        return;
+      }
+      if (this.windowWidth <= PHONE_WIDTH) {
+        this.size = 10;
+        return;
+      }
+      const width = (this.$el as HTMLElement).offsetWidth;
+      const sixteen = domHelper.convertRemToPixels(this.sizeItem + 0.8);
+      this.size = Math.floor(width / sixteen);
+    }
   },
 
   mounted() {
-    this.handleResize();
     this.fetchContent();
   },
   methods: {
@@ -175,20 +184,6 @@ export default defineComponent({
       if (!this.nextAvailable) return;
       this.index += 1;
     },
-    handleResize(): void {
-      if (!this.$el) return;
-      if (this.overflowScroll) {
-        this.size = 20;
-        return;
-      }
-      if (window.innerWidth <= PHONE_WIDTH) {
-        this.size = 10;
-        return;
-      }
-      const width = (this.$el as HTMLElement).offsetWidth;
-      const sixteen = domHelper.convertRemToPixels(this.sizeItem + 0.7);
-      this.size = Math.floor(width / sixteen);
-    },
     reset(): void {
       this.index = 0;
       this.first = 0;

package/src/components/display/podcasts/PodcastInlineListClassic.vue

@@ -58,6 +58,7 @@ import { mapState } from "pinia";
 import { state } from "../../../stores/ParamSdkStore";
 import { Podcast } from "@/stores/class/general/podcast";
 import imageProxy from "../../mixins/imageProxy";
+import resizePhone from "../../mixins/resizePhone";
 import { defineComponent } from "vue";
 export default defineComponent({
   name: "PodcastInlineListClassic",
@@ -67,7 +68,7 @@ export default defineComponent({
     ClassicLoading,
     PodcastInlineListTemplate,
   },
-  mixins: [imageProxy],
+  mixins: [imageProxy, resizePhone],
   props: {
     organisationId: { default: () => [], type: Array as () => Array<string> },
     emissionId: { default: undefined, type: Number },
@@ -97,6 +98,8 @@ export default defineComponent({
       allPodcasts: [] as Array<Podcast>,
       direction: 1 as number,
       alignLeft: false as boolean,
+      isPhone: false as boolean,
+      windowWidth: 0 as number
     };
   },
   computed: {
@@ -139,6 +142,20 @@ export default defineComponent({
       this.reset();
       this.fetchNext();
     },
+    windowWidth(){
+      if (!this.$el) return;
+      if (this.overflowScroll) {
+        this.size = 20;
+        return;
+      }
+      if (this.windowWidth <= PHONE_WIDTH) {
+        this.size = 10;
+        return;
+      }
+      const width = (this.$el as HTMLElement).offsetWidth;
+      const sixteen = domHelper.convertRemToPixels(this.sizeItem + 0.8);
+      this.size = Math.floor(width / sixteen);
+    }
   },
 
   created() {
@@ -148,15 +165,9 @@ export default defineComponent({
     if (undefined !== this.isArrow) {
       this.$emit("update:isArrow", true);
     }
-    window.addEventListener("resize", this.handleResize);
-  },
-
-  unmounted() {
-    window.removeEventListener("resize", this.handleResize);
   },
 
   mounted() {
-    this.handleResize();
     this.fetchNext();
   },
   methods: {
@@ -248,20 +259,7 @@ export default defineComponent({
       }
       this.index += 1;
     },
-    handleResize(): void {
-      if (!this.$el) return;
-      if (this.overflowScroll) {
-        this.size = 20;
-        return;
-      }
-      if (window.innerWidth <= PHONE_WIDTH) {
-        this.size = 10;
-        return;
-      }
-      const width = (this.$el as HTMLElement).offsetWidth;
-      const sixteen = domHelper.convertRemToPixels(this.sizeItem + 0.8);
-      this.size = Math.floor(width / sixteen);
-    },
+
     sortPopular(): void {
       if (this.popularSort) return;
       this.popularSort = true;

package/src/components/mixins/resizePhone.ts

@@ -0,0 +1,23 @@
+
+import { defineComponent } from 'vue';
+export default defineComponent({
+  data() {
+    return {
+      isPhone: false as boolean,
+      windowWidth: 0 as number
+    };
+  },
+  created() {
+    window.addEventListener('resize', this.handleResize);
+    this.handleResize();
+  },
+  unmounted() {
+    window.removeEventListener('resize', this.handleResize);
+  },
+  methods: {
+    handleResize(): void {
+      this.windowWidth= window.innerWidth;
+      this.isPhone =this.windowWidth < 960;
+    },
+  },
+});