@saooti/octopus-sdk 30.0.19 → 30.0.23

package/README.md

@@ -516,4 +516,8 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
  * 30.0.16 Change Aria-Label in title
  * 30.0.17 Oups
  * 30.0.18 Responsive select
- * 30.0.19 Mise à jour Api
+ * 30.0.19 Mise à jour Api
+ * 30.0.20 Petit refacto commentaires
+ * 30.0.21 #10701 & #10698
+ * 30.0.22 Accessibilité
+ * 30.0.23 Css +  Accessibilité

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "30.0.19",
+  "version": "30.0.23",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -39,7 +39,7 @@
     "vue-router": "^4.0.12",
     "vue3-swatches": "^1.0.5",
     "vuex": "^4.0.2",
-    "webpack": "^5.62.1"
+    "webpack": "^5.66.0"
   },
   "devDependencies": {
     "@types/bootstrap": "^5.1.8",

package/src/assets/bootstrap-diff.scss

@@ -10,7 +10,7 @@
     .btn{
         font-size:.7rem;
         border-radius: 50px;
-        background: $octopus-light-secondary-color; 
+        background: $octopus-secondary-color; 
         transition: background .2s, border .2s, box-shadow .2s, color .2s;
         text-decoration: none !important;
         white-space: nowrap;
@@ -30,56 +30,33 @@
         // Button Primary
         &.btn-primary {
             background: $octopus-third-color;
-            background: -moz-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            background: -webkit-gradient(left top, right bottom, color-stop(0%, $octopus-third-color), color-stop(100%, $octopus-primary-color));
-            background: -webkit-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            background: -o-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            background: -ms-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            background: linear-gradient(135deg, $octopus-third-color 0%, $octopus-primary-color 100%);
+            background: -moz-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-linear-background 100%);
+            background: -webkit-gradient(left top, right bottom, color-stop(0%, $octopus-third-color), color-stop(100%, $octopus-primary-linear-background));
+            background: -webkit-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-linear-background 100%);
+            background: -o-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-linear-background 100%);
+            background: -ms-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-linear-background 100%);
+            background: linear-gradient(135deg, $octopus-third-color 0%, $octopus-primary-linear-background 100%);
             filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d91f', endColorstr='#50b685', GradientType=1 );
             border-radius: 50px;
             height: auto;
             border: 0;
-            color: white !important;
+            color: black !important;
             &:focus,
             &:hover {
             background:$octopus-third-color;
-            background: -moz-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            background: -webkit-gradient(left top, right bottom, color-stop(0%, $octopus-third-color), color-stop(100%, $octopus-primary-color));
-            background: -webkit-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            background: -o-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            background: -ms-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            background: linear-gradient(135deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d91f', endColorstr='#4fcf91', GradientType=1 );
-            border: 0;
-            }
-            &:active,
-            &.active {
-            background: darken($octopus-primary-color, 4%);
-            border-color: darken($octopus-primary-color, 7%);
-            }
-        }
-        &.btn-light{
-            color: $octopus-primary-color;
-            background: transparent;
-        }
-        &.btn-auth{
-            &:focus,
-            &:hover {
-            background:$octopus-third-color;
-            background: -moz-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            background: -webkit-gradient(left top, right bottom, color-stop(0%, $octopus-third-color), color-stop(100%, $octopus-primary-color));
-            background: -webkit-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            background: -o-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            background: -ms-linear-gradient(-45deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            background: linear-gradient(135deg, $octopus-third-color 0%, $octopus-primary-color 100%);
-            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d91f', endColorstr='#4fcf91', GradientType=1 );
-            border: 0;
+                background: -moz-linear-gradient(-45deg, darken($octopus-third-color,7%) 0%, darken($octopus-primary-linear-background, 7%) 100%);
+                background: -webkit-gradient(left top, right bottom, color-stop(0%, darken($octopus-third-color,7%)), color-stop(100%, darken($octopus-primary-linear-background, 7%)));
+                background: -webkit-linear-gradient(-45deg, darken($octopus-third-color,7%) 0%, darken($octopus-primary-linear-background, 7%) 100%);
+                background: -o-linear-gradient(-45deg, darken($octopus-third-color,7%) 0%, darken($octopus-primary-linear-background, 7%) 100%);
+                background: -ms-linear-gradient(-45deg, darken($octopus-third-color,7%) 0%, darken($octopus-primary-linear-background, 7%) 100%);
+                background: linear-gradient(135deg, darken($octopus-third-color,7%) 0%, darken($octopus-primary-linear-background, 7%) 100%);
+                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d91f', endColorstr='#4fcf91', GradientType=1 );
+                border: 0;
             }
             &:active,
             &.active {
-            background: darken($octopus-primary-color, 4%);
-            border-color: darken($octopus-primary-color, 7%);
+                background: darken($octopus-primary-linear-background, 4%);
+                border-color: darken($octopus-primary-linear-background, 7%);
             }
         }
         //Button disable halo after click
@@ -98,8 +75,12 @@
         }
     
         &.btn-link {
-            background: $octopus-secondary-color;
-            color: $octopus-primary-color;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: $octopus-primary-dark;
+            border: 2px solid $octopus-primary-dark;
+            color: white;
             font-weight: bold;
             margin: 2rem;
             width: fit-content;
@@ -108,39 +89,16 @@
             &:hover,
             &:active,
             &.active {
-            background: darken($octopus-secondary-color, 5%);
-            color: $octopus-primary-color;
+                background: transparent;
+                color: $octopus-primary-dark;
             }
             @media (max-width: 500px){
             margin: 0.3rem;
             }
         }
-    
-        &.btn-link-plus {
-            padding: 8px 16px;
-            font-size: 0.8rem;
-            border-radius: 50px;
-            background-color: #ddd;
-            color: #000;
-            box-shadow: none;
-            display: flex;
-            border: 1px solid transparent;
-            .saooti-plus{
-            line-height: 1.5 !important;
-            margin-left: 5px; 
-            }
-            &:focus,
-            &:hover,
-            &:active,
-            &.active {
-            background: $octopus-primary-color;
-            color: white;
-            border: 1px solid $octopus-primary-color;
-            }
-        }
-    
+
         &.btn-more{
-            background: $octopus-primary-color;
+            background: $octopus-primary-dark;
             color: $octopus-background;
             width: 2rem;
             height: 2rem;
@@ -163,8 +121,7 @@
             height: 5rem;
         }
     
-        &.admin-button,
-        &.btn-arrow  {
+        &.admin-button{
             padding: 0.3rem;
             height: 1.8rem;
             width: 1.8rem;
@@ -173,13 +130,6 @@
             align-items: center;
             justify-content: center;
         }
-        &.btn-arrow {
-            margin: 0.2rem;
-            background: $octopus-secondary-color;
-            &:hover {
-            background: $octopus-secondary-color;
-            }
-        }
     
     }
 
@@ -229,13 +179,9 @@
         }
     }
 
-    .custom-control-label {
-        //border: 1px solid #ddd;
-        border-radius: 5px;
-    }
     .dropdown-toggle-no-caret::after{
         display: none;
-      }    
+    }    
     .dropdown-menu {
         padding: 0.5rem;
     }

package/src/assets/form.scss

@@ -1,6 +1,9 @@
 .octopus-app{
 	.input-no-outline{
-	outline-width: 0 !important;
+		outline-width: 0 !important;
+	}
+	:-moz-focusring {
+		outline: 0px solid black;
 	}
 	.width-auto{
 	width: auto !important;
@@ -64,8 +67,8 @@
 				border-bottom: 0.1rem solid transparent;
 			}
 			.active{
-			border-bottom-color: $octopus-primary-color;
-			color: $octopus-primary-color;
+				border-bottom-color: $octopus-primary-dark;
+				color: $octopus-primary-dark;
 			}
 		}
 	}

package/src/assets/general.scss

@@ -8,7 +8,7 @@ body{
   font-family: Montserrat,sans-serif,Helvetica Neue;
   font-size: 0.8rem;
   overflow-x: hidden;
-  background: #fff;
+  background: #ebebeb;
   min-height: 100%;
   overscroll-behavior-y: contain;
 }
@@ -73,6 +73,12 @@ body{
   .secondary-bg{
     background: $octopus-background;
   }
+  .light-primary-bg{
+		background-color: $primaryColorTransparent !important;
+	}
+	.really-light-primary-bg{
+		background-color: $primaryColorReallyTransparent !important;
+	}
   .width-fit-content{
     width: fit-content !important;
   }
@@ -93,7 +99,7 @@ body{
   }
 
   .module-box{
-    background-color: $octopus-secondary-background;
+    background-color: white;
     padding: 1.3rem;
     margin: 0.5rem 0.5rem 0 0.5rem;
     border-radius: 1rem;
@@ -125,7 +131,7 @@ body{
     color: black !important;
   }
   a.link-hover.router-link-exact-active.router-link-active, a.link-hover:hover {
-    color: $octopus-primary-color !important;
+    color: $octopus-primary-dark !important;
   }
   .descriptionText{
     white-space: pre-wrap; 
@@ -158,6 +164,11 @@ body{
       display: none !important;
     }
   }
+  .hide-small-screen{
+		@media (max-width: 450px) {
+			display: none !important;
+		}
+	}
   .show-phone{
     display: none;
     @media (max-width: 960px) {

package/src/assets/share.scss

@@ -19,14 +19,6 @@
 			background: #f3f3f3;
 		}
 	}
-  .category-rubrique-item-plus {
-    display: flex;
-    height: 1.8rem;
-    width: 1.8rem;
-    align-items: center;
-    justify-content: center;
-    font-size: 0.5rem;
-  }
   .icon-caution {
       margin-right: 5px;
       margin-bottom: 2px;
@@ -153,42 +145,24 @@
       font-size: 0.6rem;
     }
   }
-  .comment-item-container {
-    .btn-comment-edit {
-      width: 32px;
-      height: 32px;
-      background: $octopus-secondary-color;
-      padding: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: $octopus-primary-color;
-      margin-right: 0.25rem;
-    }
-    .status-Pending {
-        background: #eb7d22;
-    }
-    .status-Invalid {
-        background: #d40303;
-    }
-    .status-Valid {
-        background: $octopus-primary-color;
-    }
-    .status-Valid, .status-Invalid, .status-Pending {
-        width: 14px;
-        height: 14px;
-        border-radius: 50%;
-    }
-    .icon-certified {
-        height: 15px;
-        margin-right: 0.5rem;
-    }
-    .collapsed > .when-opened,
-    :not(.collapsed) > .when-closed {
-        display: none !important;
-    }
+  .status-Pending {
+      background: #eb7d22;
+  }
+  .status-Invalid {
+      background: #d40303;
+  }
+  .status-Valid {
+      background: $octopus-primary-color;
+  }
+  .status-Valid, .status-Invalid, .status-Pending {
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+  }
+  .icon-certified {
+      height: 15px;
+      margin-right: 0.5rem;
   }
-
 
   .saooti-stitcher-logo,
   .saooti-google-podcasts,

package/src/components/display/aggregator/RssSection.vue

@@ -5,6 +5,4 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 export default defineComponent({})
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/display/categories/CategoryChooser.vue

@@ -255,6 +255,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/display/categories/CategoryFilter.vue

@@ -1,5 +1,8 @@
 <template>
-  <div v-if="isDisplay">
+  <div
+    v-if="isDisplay"
+    class="mt-3"
+  >
     <nav
       v-if="categoryFilter || rubriqueFilter.length"
       title="breadcrumb"
@@ -142,6 +145,4 @@ export default defineComponent({
     }
   }
 })
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/display/categories/CategoryList.vue

@@ -19,7 +19,7 @@
       class="dropdown btn-group"
     >
       <button
-        class="btn dropdown-toggle category-rubrique-item-plus dropdown-toggle-no-caret saooti-plus"
+        class="btn dropdown-toggle admin-button dropdown-toggle-no-caret saooti-plus"
         data-bs-toggle="dropdown"
         aria-expanded="false"
         :title="$t('See more')"
@@ -163,6 +163,7 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
+@import '../../../sass/_variables.scss';
 .category-list-container {
   display: inline-flex;
   justify-content: flex-start;
@@ -184,20 +185,8 @@ export default defineComponent({
   justify-content: center;
   white-space: nowrap;
   flex-shrink: 0;
-  .router-link-active {
-    background: #ddd !important;
+  .router-link-active,&:hover {
+    background: $octopus-secondary-color !important;
   }
-  &:hover {
-    background: #ddd !important;
-  }
-}
-
-.category-list .category-item-plus {
-  display: flex;
-  height: 1.5rem;
-  width: 1.5rem;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.5rem;
 }
 </style>

package/src/components/display/comments/AddCommentModal.vue

@@ -19,6 +19,7 @@
               class="form-input"
               type="text"
               :placeholder="$t('Your name')"
+              :class="{ 'border border-danger': name.length < 2 }"
             >
             <div
               v-if="sendError"
@@ -38,33 +39,20 @@
           </template>
         </div>
         <div class="modal-footer">
-          <template
-            v-if="!sending"
+          <button
+            class="btn m-1"
+            @click="closePopup"
           >
-            <button
-              class="btn btn-light m-1"
-              @click="closePopup"
-            >
-              {{ $t('Cancel') }}
-            </button>
-            <button
-              class="btn btn-primary m-1"
-              :disabled="name.length <= 2"
-              @click="recaptcha"
-            >
-              {{ $t('Validate') }}
-            </button>
-          </template>
-          <template
-            v-else
+            {{ $t('Close') }}
+          </button>
+          <button
+            v-if="!sending"
+            class="btn btn-primary m-1"
+            :disabled="name.length <= 2"
+            @click="validateName"
           >
-            <button
-              class="btn m-1"
-              @click="closePopup"
-            >
-              {{ $t('Close') }}
-            </button>
-          </template>
+            {{ $t('Validate') }}
+          </button>
         </div>
       </div>
     </div>
@@ -92,38 +80,38 @@ export default defineComponent({
   },
 
   computed: {
-    authenticated(): boolean {
-      return (state.generalParameters.authenticated as boolean);
-    },
     isCaptchaTest(): boolean {
       return (state.generalParameters.isCaptchaTest as boolean);
     },
   },
 
   mounted() {
-    const captcha = document.getElementsByClassName('grecaptcha-badge')[0];
-    if (captcha) {
-      (captcha as HTMLElement).style.display = 'block';
-    }
-    if (this.authenticated) {
-      this.name = (
-        (this.$store.state.profile.firstname || '') +
-        ' ' +
-        (this.$store.state.profile.lastname || '')
-      ).trim();
-      this.needVerify = false;
-    }
+    this.displayCaptcha('block');
+    this.initAuthenticatedName();
   },
 
   unmounted() {
-    const captcha = document.getElementsByClassName('grecaptcha-badge')[0];
-    if (captcha) {
-      (captcha as HTMLElement).style.display = 'none';
-    }
+    this.displayCaptcha('none');
   },
 
   methods: {
-    async recaptcha(): Promise<void> {
+    initAuthenticatedName():void{
+      if (state.generalParameters.authenticated) {
+        this.name = (
+          (this.$store.state.profile.firstname || '') +
+          ' ' +
+          (this.$store.state.profile.lastname || '')
+        ).trim();
+        this.needVerify = false;
+      }
+    },
+    displayCaptcha(displayStyle: string): void{
+      const captcha = document.getElementsByClassName('grecaptcha-badge')[0];
+      if (captcha) {
+        (captcha as HTMLElement).style.display = displayStyle;
+      }
+    },
+    async validateName(): Promise<void> {
       if (!this.needVerify || this.isCaptchaTest) {
         this.sendComment();
         return;
@@ -145,8 +133,7 @@ export default defineComponent({
       }
       this.sendComment();
     },
-    closePopup(event: { preventDefault: () => void }): void {
-      event.preventDefault();
+    closePopup(): void {
       this.$emit('close');
     },
     sendComment(): void {
@@ -155,6 +142,4 @@ export default defineComponent({
     },
   },
 })
-</script>
-
-<style lang="scss"></style>
+</script>

package/src/components/display/comments/CommentBasicView.vue

@@ -0,0 +1,96 @@
+<template>
+  <div>
+    <div class="d-flex small-text">
+      <b
+        v-if="recordingInLive && ('Live' === comment.phase || 'Prelive' === comment.phase)"
+        class="recording-bg me-1 text-light p-1"
+      >{{ $t('Live') }}</b>
+      <b
+        :id="'popover-comment' + comment.comId"
+        tabindex="-1"
+        :class="editRight || isValid? '':'text-danger'"
+        class="me-2"
+      >{{
+        comment.name
+      }}</b>
+      <Popover
+        v-if="!editRight && !isValid"
+        :target="'popover-comment' + comment.comId"
+      >
+        {{ $t('Comment waiting') }}
+      </Popover>
+      <img
+        v-if="comment.certified"
+        class="icon-certified"
+        src="/img/certified.png"
+        :data-selenium="'certified-icon-' + seleniumFormat(comment.name)"
+        :title="$t('Certified account')"
+      >
+      <div class="me-2">
+        {{ date }}
+      </div>
+      <span 
+        v-if="editRight" 
+        :class="'status-' + comment.status"
+        :data-selenium="'status-comment-' + seleniumFormat(comment.name)"
+      />
+    </div>
+    <!-- eslint-disable vue/no-v-html -->
+    <div v-html="urlify(contentDisplay)" />
+    <!-- eslint-enable -->
+    <a
+      v-if="comment.content.length > 300"
+      class="c-hand font-italic"
+      @click="summary = !summary"
+    >{{ readMore }}</a>
+  </div>
+</template>
+
+<script lang="ts">
+import { displayMethods, selenium } from '../../mixins/functions';
+import { CommentPodcast } from '@/store/class/general/comment';
+import moment from 'moment';
+import Popover from '../../misc/Popover.vue';
+import { defineComponent } from 'vue';
+export default defineComponent({
+  name: 'CommentBasicView',
+
+  components: {
+    Popover
+  },
+
+  mixins:[displayMethods, selenium],
+
+  props: {
+    comment: { default: ()=>({}), type: Object as ()=>CommentPodcast },
+    editRight: { default: false, type: Boolean},
+    recordingInLive: { default: false, type: Boolean},
+  },
+
+  data() {
+    return {
+      summary: true as boolean,
+    };
+  },
+  computed: {
+    isValid(): boolean{
+      return 'Valid'=== this.comment.status;
+    },
+    date(): string {
+      if (this.comment.date)
+        return moment(this.comment.date).format('D MMMM YYYY HH[h]mm');
+      return '';
+    },
+    readMore(): string {
+      if (this.summary) return this.$t('Read more').toString();
+      return this.$t('Read less').toString();
+    },
+    contentDisplay(): string {
+      if (!this.summary){return this.comment.content;}
+      if (!this.comment.content) return '';
+      if (this.comment.content.length <= 300) return this.comment.content;
+      return this.comment.content.substring(0, 300) + '...';
+    },
+  },
+})
+</script>