yelda-webchat 1.1.8 → 1.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yelda-webchat",
-  "version": "1.1.8",
+  "version": "1.1.9",
   "description": "Website Chat Plugin",
   "main": "./dist/js/yeldaWebchatInjector.min.js",
   "license": "MIT",

package/src/css/yeldaWebchatInjector.css

@@ -2,8 +2,34 @@
 
 
 .yelda_assistant_img {
-  opacity: 0.93;
   cursor: pointer;
+  opacity: 1;
+  height: auto;
+  transition-property: opacity, height;
+  transition-duration: 1s, 1ms;
+  transition-delay: 1.2s, 1.2s;
+  animation-name: appear;
+  animation-duration: 0.8s;
+  animation-delay: 1s;
+  animation-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000);
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+  opacity: 0;
+  overflow: hidden;
+}
+
+.yelda_container.y_active .yelda_assistant_img{
+  opacity:0 ;
+  height: 0;
+  transition-property: opacity, height;
+  transition-duration: 1ms, 1ms;
+  transition-delay: 0, 0;
+  animation: none;
+}
+
+.yelda_assistant_img.activated{
+  transition-delay: 1s;
+  /*animation-delay: 0s;*/
 }
 
 .yelda_assistant_img.default {
@@ -33,15 +59,6 @@
 }
 
 .yelda_assistant_img.default i{
-  font-size: 32px !important;
-}
-
-.yelda_assistant_img:hover{
-  animation-name: fonta;
-  animation-duration: 300ms;
-  opacity: 1;
-}
-.yelda_assistant_img.default:hover i{
   height: 60px;
   width: 60px;
   line-height: 65px;
@@ -52,6 +69,9 @@
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
   'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   font-weight: normal;
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: flex-end;
 }
 
 .yelda_container.inner {
@@ -60,11 +80,6 @@
   top: 80px;
 }
 
-@keyframes fonta {
-  from {font-size:32px;}
-  to {font-size:35px;}
-}
-
 #web_chat_frame{
   height: 100% !important;
   width: 100% !important;
@@ -79,12 +94,15 @@
 
 .yelda_iframe_container {
   width: 430px;
-  height: calc(100vh - 170px);
+  height: 0;
   max-height: 600px;
-  transition-duration: 1s;
-  margin: 0px 20px 0 0px;
+  margin: 0;
   overflow: hidden;
+  transition-property: opacity, transform, height;
+  transition-duration: 1s, 1s, 1ms;
+  transition-delay: 0s, 0s, 1s;
   opacity: 0;
+  transform: translateY(20px);
 }
 
 .yelda_iframe_container:not(.voiceFirstUI) {
@@ -92,9 +110,13 @@
   border-radius: 6px;
 }
 
-.yelda_iframe_container.y_active{
+.y_active .yelda_iframe_container{
+  height: calc(100vh - 170px);
+  transition-property: opacity, transform, height;
+  transition-duration: 1s, 1s, 1ms;
+  transition-delay: 0s, 0s, 0s;
   opacity: 1 !important;
-  margin-bottom: 20px !important;
+  transform: translateY(0);
 }
 
 .lg-backdrop {
@@ -132,62 +154,86 @@
     border-radius: 0;
     margin: 0 !important;
     padding: 0;
-    transition-duration: 0s;
   }
 
   .yelda_iframe_container.inner {
     width: 100%;
     box-shadow: 0 5px 32px rgba(0,0,0,.16);
     border-radius: 6px;
-    transition-duration: 1s;
     margin: 0px 20px 0 0px;
     overflow: hidden;
   }
 }
 /** CSS for assistant bubble text */
 #yelda_assistant_bubble_text {
-  animation: 1s ease-out 0s 1 fadeAndSlideInFromRight;
-  position: absolute;
-  padding: 7px 10px;
+  animation-name: fadeAndSlideInFromRight;
+  animation-duration: 1s;
+  animation-delay: 2s;
+  animation-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000);
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+  padding: 7px 10px 6px;
   border-radius: 8px;
-  box-shadow: #00000030 0px 2px 8px 0px;
+  box-shadow: #00000030 0 2px 8px 0;
   background-color: white;
   cursor: pointer;
   right: 0;
   bottom: 76px;
   max-width: 300px;
-  width: calc(66vw);
   text-align: left;
   font-size: 14px;
   font-weight: normal;
+  display: inline-block;
+  margin-bottom: 10px;
+}
+#yelda_assistant_bubble_text.y_notification{
+  animation-delay: 0s;
 }
 
 #yelda_assistant_bubble_text.hidden {
   display: none;
 }
 
+.y_active #yelda_assistant_bubble_text{
+  display: none;
+}
+
 /* Close button for bubble text */
 .bubbleCloseButton {
-  position: relative;
-  top: -17px;
-  left: 95%;
+  position: absolute;
   color: white;
   background: grey;
-  border-radius: 50%;
-  padding: 1px 4px;
-  font-size: 16px;
-  visibility: hidden; /* Don't show the close button by default */
+  border-radius: 68%;
+  padding: 0;
+  font-size: 20px;
+  width: 27px;
+  height: 27px;
+  line-height: 22px;
+  text-align: center;
+  right: -14px;
+  top: -17px;
+  text-decoration: none !important;
+  transition: all 0.15s ease-in;
+  transform: scale(0.7);
+  opacity:0; /* Don't show the close button by default */
+}
+
+a.bubbleCloseButton:hover {
+  color: white;
+  background: #5a5a5a;
 }
 
 /* Show the close button on mouse hover */
 #yelda_assistant_bubble_text:hover .bubbleCloseButton {
-  visibility: visible;
+  opacity:1;
+  transform: scale(1);
 }
 
 /* Show the close button always on mobile screen */
 @media only screen and (max-width: 768px) {
   .bubbleCloseButton {
-    visibility: visible !important;
+    opacity: 1;
+    transform: none;
   }
 }
 
@@ -202,3 +248,15 @@
     opacity: 1;
   }
 }
+
+
+@keyframes appear {
+  from {
+    transform: scale(0.5);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}

package/src/js/yeldaWebchatInjector.js

@@ -83,8 +83,9 @@ class YeldaChat {
   /**
    * Create an assistantBubbleText component and add it to webChatContainer element
    * @param {String} text - default null
+   * @param {String} cssClass - default ''
    */
-  addAssistantBubbleText(text = null) {
+  addAssistantBubbleText(text = null, cssClass = '') {
     text = text || this.webchatSettings && this.webchatSettings.bubbleText
     if (!this.webChatContainer || !text) {
       return
@@ -95,6 +96,7 @@ class YeldaChat {
     // create assistantBubbleText element and set the text
     this.assistantBubbleText = document.createElement('span')
     this.assistantBubbleText.setAttribute('id', 'yelda_assistant_bubble_text')
+    this.assistantBubbleText.setAttribute('class', cssClass)
     this.assistantBubbleText.innerText = text
     this.addCloseButtonForBubbleText()
 
@@ -277,6 +279,43 @@ class YeldaChat {
     return url
   }
 
+  /**
+   * Add 'y_active' class to the webChatContainer if required
+   *
+   * To control the opacity of the iframe container (.yelda_iframe_container) and the assistant image (.yelda_assistant_img),
+    * We add and remove the "y_active" CSS class to the webChatContainer (.yelda_container) which is always visible
+    * By default
+    * - yelda_iframe_container is hidden (opacity: 0;)
+    * - assistant image is visible (opacity: 1 for yelda_assistant_img)
+    *
+    * When we add the class "y_active" to  (webChatContainer)
+    * - yelda_iframe_container is now visible (.y_active .yelda_iframe_container => opacity: 1)
+    * - the assistant image is hidden (.yelda_container.y_active .yelda_assistant_img => opacity: 0
+    *
+    * @param {Boolean} data.shouldBeOpened
+    * @param {Boolean} data.isStartBtn
+    * @param {Boolean} data.canBeClosed
+    */
+  initWebChatContainerYActiveClass(data) {
+      // should be opened on load OR has a start button
+      const shoulBeOpened = data.shouldBeOpened || data.isStartBtn
+
+      // cannot be closed (canBeClosed explicitly set to false)
+      const cantBeClosed = data.hasOwnProperty('canBeClosed') && !data.canBeClosed
+
+      /**
+       * If we are sure that the webchat should be opened from the creation and displayed all the time
+       * we add the y_active class to webChatContainer at the creation
+       *
+       * Otherwise yelda_assistant_img click event management will take care of showing and hiding the webchat
+       * - closeChat() remove "y_active" from the yelda container
+       * - openChat() add y_active" to the yelda container
+       */
+     if (shoulBeOpened && cantBeClosed) {
+       this.webChatContainer.classList.add('y_active')
+     }
+  }
+
   /**
    * Create iframeContainer and it's child webchat iframe, and add it to webChatContainer
    * @param {String} url webchat url
@@ -303,24 +342,7 @@ class YeldaChat {
         classList += ' inner'
       }
 
-      /**
-       * add CSS class which controls the opacity of the frame container if the iframe:
-       * - should be opened on load OR has a start button
-       * - cannot be closed (canBeClosed explicitly set to false)
-       *
-       * If we are sure that the webchat should be opened and displayed all the time, we can add the y_active class right away
-       * Otherwise,
-       */
-      if ((data.shouldBeOpened || data.isStartBtn) && data.hasOwnProperty('canBeClosed') && !data.canBeClosed) {
-        classList += ' y_active'
-      } else {
-        /**
-         * If the iframe can be closed, hide it by default
-         * yelda_assistant_img click event management will take care of showing and hiding the webchat
-         * And if it should be opened, the webchat will trigger the 'openChat' event on its own
-         */
-        this.iframeContainer.style.cssText = 'display: none;'
-      }
+      this.initWebChatContainerYActiveClass(data)
 
       this.iframeContainer.setAttribute('class', classList)
       this.webChatContainer.appendChild(this.iframeContainer)
@@ -469,7 +491,7 @@ class YeldaChat {
       break
       case config.FRAME_EVENT_TYPES.RECEIVED.ADD_MINIMAL_NOTIFICATION_TEXT:
         if (!this.configurationData.hasOwnProperty('canBeClosed') || this.configurationData.canBeClosed) {
-          this.addAssistantBubbleText(eventData.text)
+          this.addAssistantBubbleText(eventData.text, 'y_notification')
         }
       break;
     }
@@ -528,15 +550,11 @@ class YeldaChat {
    * Close the webchat window
    */
   closeChat() {
-    const assistantImgElement = document.getElementById('yelda_assistant_img')
-    if (assistantImgElement !== null) {
-      assistantImgElement.style.display = 'inline-block'
-    }
-
-    const yeldaIframeContainerElement = document.getElementById('yelda_iframe_container')
-    if (yeldaIframeContainerElement !== null) {
-      yeldaIframeContainerElement.classList.remove('y_active')
-      yeldaIframeContainerElement.style.display = 'none'
+    // Closing the webchat = remove the y_active class on #yelda_container
+    // Hiding the iframe + showing back the bubble + animation  => All is done in CSS
+    const yeldaContainerElement = document.getElementById('yelda_container')
+    if (yeldaContainerElement !== null) {
+      yeldaContainerElement.classList.remove('y_active')
     }
   }
 
@@ -544,18 +562,21 @@ class YeldaChat {
    * Open the webchat window
    */
   openChat() {
+    // Adding the class "activated" allows the CSS to change the transition/animation after the first opening
     const assistantImgElement = document.getElementById('yelda_assistant_img')
     if (assistantImgElement !== null) {
-      assistantImgElement.style.display = 'none'
+      assistantImgElement.classList.add('activated')
     }
 
-    const yeldaIframeContainerElement = document.getElementById('yelda_iframe_container')
-    if (yeldaIframeContainerElement !== null) {
-      yeldaIframeContainerElement.style.display = 'block'
-      yeldaIframeContainerElement.classList.add('y_active')
+    // Opening the webchat = adding the y_active class on #yelda_container
+    // Showing the iframe + hiding bubble + hiding minimal notification + animation => All is done in CSS
+    const yeldaContainerElement = document.getElementById('yelda_container')
+    if (yeldaContainerElement !== null) {
+      yeldaContainerElement.classList.add('y_active')
     }
 
-    // hide the assistant bubble text while opening the webchat window
+    // Hide the assistant bubble text while opening the webchat window
+    // Note :  bubble text container is also hidden in CSS
     if (this.assistantBubbleText) {
       this.assistantBubbleText = null
     }