@saooti/octopus-sdk 33.1.3 → 33.2.1

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

@@ -1,118 +1,95 @@
 <template>
-  <div
-    id="accordionParameters"
-    class="accordion mt-3"
+  <Accordion
+    class="mt-3"
+    :title="$t('player parameters')"
+    id-composer="playerParameters"
   >
-    <div class="accordion-item">
-      <h2
-        id="labelPlayerParameter"
-        class="accordion-header mb-0"
+    <div
+      v-if="choseNumberEpisode"
+      class="d-flex flex-column flex-grow-1"
+    >
+      <div
+        v-if="displayChoiceAllEpisodes"
+        class="d-flex align-items-center flex-wrap mt-1"
       >
-        <button
-          class="accordion-button collapsed"
-          type="button"
-          data-bs-toggle="collapse"
-          data-bs-target="#playerParameters"
-          aria-expanded="false"
-          aria-controls="playerParameters"
+        <input
+          v-model="episodeNumbers"
+          class="form-check-input"
+          type="radio"
+          name="episodeNumbers"
+          value="all"
         >
-          {{ $t('player parameters') }}
-        </button>
-      </h2>
+        <span class="flex-shrink-0">{{ $t('Show every episode') }}</span>
+      </div>
       <div
-        id="playerParameters"
-        class="accordion-collapse collapse"
-        titleledby="labelPlayerParameter"
-        data-bs-parent="#accordionParameters"
+        class="d-flex align-items-center flex-wrap"
+        :class="displayChoiceAllEpisodes ? '' : 'mt-3'"
       >
-        <div class="accordion-body">
-          <div
-            v-if="choseNumberEpisode"
-            class="d-flex flex-column flex-grow-1"
-          >
-            <div
-              v-if="displayChoiceAllEpisodes"
-              class="d-flex align-items-center flex-wrap mt-1"
-            >
-              <input
-                v-model="episodeNumbers"
-                class="form-check-input"
-                type="radio"
-                name="episodeNumbers"
-                value="all"
-              >
-              <span class="flex-shrink-0">{{ $t('Show every episode') }}</span>
-            </div>
-            <div
-              class="d-flex align-items-center flex-wrap"
-              :class="displayChoiceAllEpisodes ? '' : 'mt-3'"
-            >
-              <input
-                v-if="displayChoiceAllEpisodes"
-                v-model="episodeNumbers"
-                class="form-check-input"
-                type="radio"
-                name="episodeNumbers"
-                value="number"
-              >
-              <span class="flex-shrink-0">{{ $t('Show') }}</span>
-              <input
-                id="number-input"
-                v-model="iFrameNumber"
-                type="number"
-                min="1"
-                max="50"
-                class="input-share-player  text-center m-2"
-              >
-              <label
-                for="number-input"
-                :title="$t('Number of player podcasts')"
-              />
-              <span class="flex-shrink-0">{{ $t('Last podcasts') }}</span>
-            </div>
-            <ClassicCheckbox
-              v-model:textInit="proceedReading"
-              id-checkbox="proceed-reading-checkbox"
-              :label="$t('Proceed reading')"
-            />
-            <ClassicCheckbox
-              v-model:textInit="isVisibleTemp"
-              id-checkbox="is-visible-checkbox"
-              :label="$t('Podcasts still available')"
-            />
-          </div>
-          <div
-            v-if="displayArticleParam"
-            class="d-flex flex-column flex-grow-1"
-          >
-            <ClassicCheckbox
-              v-model:textInit="displayArticle"
-              id-checkbox="display-article-checkbox"
-              :label="$t('Display associated article')"
-            />
-          </div>
-          <div 
-            v-if="displayTranscriptParam"
-            class="d-flex flex-column flex-grow-1"
-          >
-            <ClassicCheckbox
-              v-model:textInit="displayTranscript"
-              id-checkbox="display-transcript-checkbox"
-              :label="$t('If the transcript is available, show it')"
-            />
-          </div>
-        </div>
+        <input
+          v-if="displayChoiceAllEpisodes"
+          v-model="episodeNumbers"
+          class="form-check-input"
+          type="radio"
+          name="episodeNumbers"
+          value="number"
+        >
+        <span class="flex-shrink-0">{{ $t('Show') }}</span>
+        <input
+          id="number-input"
+          v-model="iFrameNumber"
+          type="number"
+          min="1"
+          max="50"
+          class="input-share-player  text-center m-2"
+        >
+        <label
+          for="number-input"
+          :title="$t('Number of player podcasts')"
+        />
+        <span class="flex-shrink-0">{{ $t('Last podcasts') }}</span>
       </div>
+      <ClassicCheckbox
+        v-model:textInit="proceedReading"
+        id-checkbox="proceed-reading-checkbox"
+        :label="$t('Proceed reading')"
+      />
+      <ClassicCheckbox
+        v-model:textInit="isVisibleTemp"
+        id-checkbox="is-visible-checkbox"
+        :label="$t('Podcasts still available')"
+      />
+    </div>
+    <div
+      v-if="displayArticleParam"
+      class="d-flex flex-column flex-grow-1"
+    >
+      <ClassicCheckbox
+        v-model:textInit="displayArticle"
+        id-checkbox="display-article-checkbox"
+        :label="$t('Display associated article')"
+      />
+    </div>
+    <div 
+      v-if="displayTranscriptParam"
+      class="d-flex flex-column flex-grow-1"
+    >
+      <ClassicCheckbox
+        v-model:textInit="displayTranscript"
+        id-checkbox="display-transcript-checkbox"
+        :label="$t('If the transcript is available, show it')"
+      />
     </div>
-  </div>
+  </Accordion>
 </template>
 
 <script lang="ts">
 import ClassicCheckbox from '../../form/ClassicCheckbox.vue';
+import Accordion from '../../misc/Accordion.vue';
 import { defineComponent } from 'vue'
 export default defineComponent({
   components:{
     ClassicCheckbox,
+    Accordion
   },
   props: {
     isVisible: { default: false, type: Boolean},

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

@@ -13,15 +13,13 @@
           role="button"
           tabindex="0"
           class="saooti-help ms-2 align-items-start"
-          :title="$t('Help')"
         />
         <Popover
           v-if="authenticated"
           target="popover-share-help"
-          placement="right"
-        >
-          {{ $t('Share this page without edit and share blocks') }}
-        </Popover>
+          :title="$t('Help')"
+          :content="$t('Share this page without edit and share blocks')"
+        />
       </div>
       <div class="d-flex align-items-center">
         <ShareButtonsIntern

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

@@ -20,7 +20,7 @@
       :class="getClass(button.className)"
       :title="button.title"
     >
-      <div :class="button.icon"/>
+      <div :class="button.icon" />
     </a>
   </template>
   <a

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

@@ -3,15 +3,16 @@
     <h3>{{ $t('Distribute') }}</h3>
     <p class="sharing-distribution-container">
       {{ $t('Rss feed:') }}
-      <div class="primary-darker hide-small-screen text-break">{{ rss }}</div>
-      <input
-        type="button"
-        :value="$t('Copy')"
-        class="btn btn-primary"
-        :title="$t('Copy')"
-        @click="onCopyCode(rss, afterCopy)"
-      >
-    </p>
+    </p><div class="text-primary hide-small-screen text-break">
+      {{ rss }}
+    </div>
+    <input
+      type="button"
+      :value="$t('Copy')"
+      class="btn btn-primary"
+      :title="$t('Copy')"
+      @click="onCopyCode(rss, afterCopy)"
+    >
     <RssSection
       v-if="emission"
       :emission="emission"
@@ -23,7 +24,7 @@
         :to="platform.url"
         class="text-dark"
       >
-        <span :class="platform.icon"></span>{{ platform.title }}
+        <span :class="platform.icon" />{{ platform.title }}
       </router-link>
     </div>
     <Snackbar

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

@@ -317,6 +317,9 @@ export default defineComponent({
 <style lang="scss">
 @import '@scss/_variables.scss';
 .octopus-app{
+  iframe{
+    border:0;
+  }
   .sticker {
     align-self: center;
     background: $octopus-primary-color;

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

@@ -18,7 +18,7 @@
         :href="sub.url"
         :title="sub.title"
       >
-        <span :class="sub.icon"></span>
+        <span :class="sub.icon" />
       </a>
     </template>
   </div>

package/src/components/form/ClassicCheckbox.vue

@@ -1,20 +1,25 @@
 <template>
-  <div
-    class="form-check"
-    :class="isSwitch?'form-switch':''"
-  >
-    <input
-      :id="idCheckbox"
-      v-model="textValue"
-      type="checkbox"
-      class="form-check-input"
-      :disabled="isDisabled"
-      :title="displayLabel?'':label"
-      :data-selenium="selenium"
-      @click="emitClickAction"
+  <div class="d-flex octopus-form-item">
+    <div
+      :class="isSwitch?'octopus-form-switch me-2':''"
     >
+      <input
+        :id="idCheckbox"
+        v-model="textValue"
+        type="checkbox"
+        :disabled="isDisabled"
+        :title="displayLabel?'':label"
+        :data-selenium="selenium"
+        @click="emitClickAction"
+      >
+      <span
+        v-if="isSwitch"
+        class="slider"
+        @click="textValue=!textValue;emitClickAction"
+      />
+    </div>
     <label
-      class="form-check-label"
+      class="c-hand"
       :class="displayLabel? '': 'd-none'"
       :for="idCheckbox"
     >{{ label }}</label>
@@ -64,3 +69,57 @@ export default defineComponent({
   }
 });
 </script>
+
+<style lang="scss">
+@import '@scss/_variables.scss';
+.octopus-app{
+  input[type="checkbox"] {
+    accent-color: $octopus-primary-color;
+    cursor: pointer;
+    margin-right: 5px;
+  }
+  .octopus-form-switch{
+    position: relative;
+    display: inline-block;
+    width: 2rem;
+    height: 1rem;
+    input{
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+    .slider{
+      position: absolute;
+      cursor: pointer;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: #ccc;
+      transition: .4s;
+      border-radius: 1rem;
+    }
+    .slider:before {
+      position: absolute;
+      content: "";
+      height: 0.8rem;
+      width: 0.8rem;
+      left: 2px;
+      bottom: 2px;
+      background-color: white;
+      transition: .4s;
+      border-radius: 50%;
+    }
+    input:checked + .slider {
+      background-color: $octopus-primary-color;
+    }
+    input:focus + .slider {
+      box-shadow: 0 0 1px $octopus-primary-color;
+    }
+    input:checked + .slider:before {
+      transform: translateX(1rem);
+    }
+
+  }
+}
+</style>

package/src/components/form/ClassicLoading.vue

@@ -3,7 +3,7 @@
     v-if="loadingText"
     class="d-flex align-items-center justify-content-center"
   >
-    <div class="spinner-border me-3 flex-shrink-0" />
+    <Spinner class="me-3" />
     <div class="h3 mt-2">
       {{ loadingText }}
     </div>
@@ -17,9 +17,13 @@
 </template>
 
 <script lang="ts">
+import Spinner from '../misc/Spinner.vue';
 import { defineComponent } from 'vue';
 export default defineComponent({
   name: "ClassicLoading",
+  components:{
+    Spinner
+  },
   props: {
     loadingText: { default: undefined, type: String},
     errorText: { default: undefined, type: String},

package/src/components/form/ClassicRadio.vue

@@ -6,20 +6,19 @@
     <div
       v-for="option in options"
       :key="option.title"
-      class="form-check"
+      class="octopus-form-item"
       :class="isColumn? '':'me-2'"
     >
       <input
         :id="idRadio + option.value"
         v-model="textValue"
-        class="form-check-input"
         type="radio"
         :name="idRadio"
         :value="option.value"
         :disabled="isDisabled"
       >
       <label
-        class="form-check-label"
+        class="c-hand"
         :for="idRadio + option.value"
       >{{
         option.title
@@ -64,3 +63,13 @@ export default defineComponent({
   }
 });
 </script>
+<style lang="scss">
+@import '@scss/_variables.scss';
+.octopus-app{
+  input[type="radio"] {
+    accent-color: $octopus-primary-color;
+    cursor: pointer;
+    margin-right: 5px;
+  }
+}
+</style>

package/src/components/form/ClassicSelect.vue

@@ -9,7 +9,7 @@
       :id="idSelect"
       v-model="textValue"
       :disabled="isDisabled"
-      class="c-hand"
+      class="c-hand w-100"
       :style="getFontFamily"
     >
       <option
@@ -68,11 +68,4 @@ export default defineComponent({
     },
   },
 });
-</script>
-<style lang="scss">
-.octopus-app{
-  .classic-select select{
-    width: inherit;
-  }
-}
-</style>
+</script>

package/src/components/misc/Accordion.vue

@@ -0,0 +1,76 @@
+<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"
+        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/ErrorMessage.vue

@@ -8,7 +8,8 @@
     >
       <span
         :title="$t('Warning')"
-        class="saooti-warning text-danger me-1"/>
+        class="saooti-warning text-danger me-1"
+      />
       <div class="alert-text">
         {{ message }}
       </div>