@fullsession.io/fs-feedback-widget 1.3.9 → 1.4.0

package/dist/publicextra.css

@@ -0,0 +1,298 @@
+fsContainer{
+    width: 100%;
+    display: flex;
+    flex-direction: var(--wgPositionVertical);
+    position: fixed;
+    top: 0; right: 0; bottom: 0; left: 0;
+	height: 100%;
+  pointer-events: none;
+  align-items: var(--wgPositionHorizintal);
+  padding: 0;
+  z-index: 100000;
+  }
+  .fsWidget {
+    pointer-events: auto;
+    background-color: var(--widgetColor);
+    width: 34px;
+    height: 112px;
+    border-top-left-radius:var(--widgetLeftSideBorder) ;
+    border-bottom-left-radius: var(--widgetLeftSideBorder);
+    border-top-right-radius: var(--widgetRightSideBorder) ;
+    border-bottom-right-radius: var(--widgetRightSideBorder);
+    box-shadow: 0.2px 0.2px 0.2px rgb(133, 130, 130);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-evenly;
+    cursor: pointer;
+    margin-top: 5px;
+  }
+  #fsMainIcon {
+    width: 60%;
+    margin-left: 4%;
+    cursor: pointer;
+  }
+  #fsFeedbackTxt {
+    color: var(--widgetTextColor);
+    font-size: 15px;
+    writing-mode: vertical-lr;
+    transform: rotate(180deg);
+    cursor: pointer;
+    font-size-adjust: 0.40;
+  }
+  .fsWidget:hover {
+    width: 35px;
+    -webkit-box-shadow: 0px 0px 35px 2px rgba(0, 0, 0, 0.24);
+    box-shadow: 0px 0px 35px 2px rgba(0, 0, 0, 0.24);
+  }
+  .fsCont {
+    pointer-events: auto;
+    width: 320px;
+    height: fit-content;
+    background-color: rgb(255, 255, 255);
+ 	margin-right: var(--widgetMarginRight);
+   margin-left: var(--widgetMarginLeft);
+	-webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px; 
+	box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px;
+  }
+  .fsThanksMessageCont{
+    pointer-events: auto;
+    width: 320px;
+    height: 104px;
+    background-color: rgb(255, 255, 255);
+ 	margin-right: var(--widgetMarginRight);
+   margin-left: var(--widgetMarginLeft);
+	-webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px; 
+	box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px;
+  }
+  #fsCloseIcon{
+	  font-size: 15px;
+	  color: #ffff;
+	  font-weight: 600;
+	  font-family: system-ui;
+  	cursor: pointer;
+	  
+  }
+  .fsCloseCont{
+    pointer-events: auto;
+	  background-color: #4d5167;
+	  width: 27px;
+    height: 27px;
+	border-radius: 50%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin-top: -15px;
+    margin-left: 85%;
+	cursor: pointer;
+	}
+
+  
+  
+ 
+
+  /* @media (min-width: 640px) {
+    body {
+      max-width: none;
+    }
+  } */.fsReactionsContainer {
+    pointer-events: auto;
+    display: flex;
+    flex-direction: column;
+    height: 190px;
+  }
+  .fsIcons {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    margin-top: 11%;
+  }
+  #fsTxt {
+    font-size: 17px;
+    display: flex;
+    text-align: center;
+    margin-top: 5%;
+    width: 61%;
+    margin-left: 19%;
+  }
+
+  .fsIconTextCont {
+    pointer-events: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 22px;
+  }
+
+  .fsReactionText {
+    font-size: 12px;
+    display: none;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    margin-top: 0px;
+    
+  }
+  .fsIconTextCont:hover{
+    pointer-events: auto;
+    cursor: pointer;
+  }
+  .fsReactionIcon:hover + .fsReactionText {
+    display: block;
+    opacity: 0.8;
+  }
+
+  .fsCommentContainer{
+    pointer-events: auto;
+    display: flex;
+    flex-direction: column;
+    height: 291px;
+    pointer-events: auto;
+  }
+  .fsTextAreaCont{
+    pointer-events: auto;
+      width: 100%;
+      height: 140px;
+      background-color: #eaeaeb;
+      margin-top: 17%;
+  }
+  .fsTextArea{
+    border: 0px;
+    width: 85%;
+    height: 120px;
+    background-color: #eaeaeb;
+    margin-left: 6%;
+    outline: none;
+    margin-top: 4%;
+    resize: none;
+
+  }
+  .fsSendButtonCommentComponent{
+    pointer-events: auto;
+      color: #ffff;
+      font-size: 12px;
+      text-align: center;
+      margin-top: 7px;
+      
+  }
+  .fsSendButtonContCommentComp{
+    pointer-events: auto;
+      background-color: var(--buttonColor);
+      width: 50px;
+      height: 29px;
+      box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 3px 0px;
+      border-radius: 3px;
+      margin-top: 13px;
+    margin-right: 11px;
+    cursor: pointer;
+    border: 0px;
+    
+  }
+  
+.fsCommentButtonContDisable{
+    pointer-events: auto;
+  background-color: #cccccc;
+      width: 50px;
+      height: 29px;
+      box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 3px 0px;
+      border-radius: 3px;
+      margin-top: 13px;
+    margin-right: 11px;
+    cursor:not-allowed;
+    border: 0px;
+}
+.fsCommentButtonTxtDisable{
+    pointer-events: auto;
+      color: black;
+      font-size: 12px;
+      text-align: center;
+      margin-top: 7px;
+}
+  .fsFooter{
+    pointer-events: auto;
+      display: flex;
+      justify-content: flex-end;
+  }
+
+  .fsIcons-second{
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    margin-top: 6%;
+  }
+  .fsPointerDiv{
+    width: 0;
+    height: 0;
+    border-left: 3px solid transparent;
+    margin-top: -8px;
+    border-right: 5px solid transparent;
+    border-bottom: 8px solid #eaeaeb;
+    margin-left: var(--pointerMargin);
+
+
+  }
+  #fsHateDiv{
+    display: var(--hateDisplay);
+  }
+  #fsDislikeDiv{
+    display: var(--dislikeDisplay);
+  }
+  #fsNeutralDiv{
+    display: var(--neutralDisplay);
+  }
+  #fsLikeDiv{
+    display: var(--likeDisplay);
+  }
+  #fsLoveDiv{
+    display: var(--loveDisplay);
+  }
+  .fsEmailContainer{
+    pointer-events: auto;
+    display: flex;
+    flex-direction: column;
+    height: 220px;
+  }
+  #fsEmailInputCont{
+    pointer-events: auto;
+    pointer-events: auto;
+    width: 100%;
+    height: 46px;
+    background-color: #eaeaeb;
+    display: flex;
+    /* align-items: center; */
+    justify-content: center;
+    margin-top: 10%;
+
+  }
+  #fsEmailTextArea{
+    pointer-events: auto;
+    text-align: center;
+    border: 0px;
+    background-color: #eaeaeb;
+    outline: none;
+  }
+ #fsEmailText{
+    width: 80%;
+    text-align: center;
+    margin-left: 11%;
+    margin-top: 8%;
+    line-height: 1.29;
+    font-size: 17px;
+ }
+ .fsEmailFooter{
+    pointer-events: auto;
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: row;
+ }
+ #fsSkipText{
+  color: #908f8f;
+    cursor: pointer;
+    font-size: 13px;
+    margin-top: 6%;
+    margin-right: 4%;
+    letter-spacing: normal;
+
+ }
+ #fsSkipText:hover{
+   color: #666666;
+ }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fullsession.io/fs-feedback-widget",
-  "version": "1.3.9",
+  "version": "1.4.0",
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",

package/src/widgetPages/App.css

@@ -1,14 +1,15 @@
 fsContainer{
-    width: 100%;
-    display: flex;
-    flex-direction: var(--wgPositionVertical);
-    position: fixed;
-    top: 0; right: 0; bottom: 0; left: 0;
+   width: 100%;
+  display: flex;
+  flex-direction: var(--wgPositionVertical);
+  position: fixed;
+  top: 0; right: 0; bottom: 0; left: 0;
 	height: 100%;
   pointer-events: none;
   align-items: var(--wgPositionHorizintal);
   padding: 0;
   z-index: 100000;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }
   .fsWidget {
     pointer-events: auto;
@@ -69,7 +70,6 @@ fsContainer{
 	  font-size: 15px;
 	  color: #ffff;
 	  font-weight: 600;
-	  font-family: system-ui;
   	cursor: pointer;
 	  
   }

package/src/widgetPages/reactionPage.svelte

@@ -38,40 +38,50 @@
   export let closeHandlerBeforeFinishing = (email,comment,reactionType) => {};
 
 
-  const commentButtonDisable = () =>{
+  // const commentButtonDisable = () =>{
     
-    let input = document.querySelector(".fsTextArea");
+  //   let source = document.querySelector(".fsTextArea");
     
-    checkTextAreaInterval = setInterval(() => {
-      console.log(input.value)
-      if (input.value=== "") {
+  //   source.addEventListener('propertychange', commentHandler);
+      
+   
+  // }
+  const commentHandler = () => {
+    let input = document.querySelector(".fsTextArea");
+
+  if (input.value=== "") {
         buttonState = false; //button remains disabled
       } else {
         buttonState = true; //button is enabled
       }
-    }, 500);
-      
-   
-  }
+  comment = "";
+  comment = input.value;
+  console.log(input.value)
+}
 
-  const EmailButtonDisable = () =>{
+  // const EmailButtonDisable = () =>{
     
-    let input = document.querySelector("#fsEmailTextArea");
+  //   let source = document.querySelector("#fsEmailTextArea");
     
-    checkEmailAreaInterval = setInterval(() => {
-      console.log(input.value)
-      if (!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(input.value)) || input.value ==="") {
+  //   source.addEventListener('propertychange', emailHandler);
+
+
+  // }
+
+  const emailHandler = ()=> {
+    let input = document.querySelector("#fsEmailTextArea");
+
+    if (!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(input.value)) || input.value ==="") {
         buttonState = false; //button remains disabled
       } else {
         buttonState = true; //button is enabled
-      }
-      email = "";
+        email = "";
       email = document.getElementById("fsEmailTextArea").value;
-
-    }, 500);
+      }
       
-   
-  }
+
+    
+}
   
 
   const changeStyle = (prevState) =>{
@@ -138,7 +148,7 @@
     document.querySelector(".fsTextArea").value="";
     buttonState = false
     widgetComponent = state;
-    comment = document.getElementsByClassName("fsTextArea")[0].value;
+    
   }
 
   const endEmailInterval =()=> {
@@ -256,7 +266,7 @@
 
               <div class="fsTextAreaCont" >
                   <div class="fsPointerDiv" id="fsPointer" ></div>
-                  <textarea class="fsTextArea" placeholder="Tell us your experience..." on:click={() => commentButtonDisable()}></textarea>
+                  <textarea class="fsTextArea" placeholder="Tell us your experience..."  on:keyup={() => commentHandler()}></textarea>
               </div>
 
               <div class="fsFooter">
@@ -276,8 +286,8 @@
   <div id="fsEmailText">
     {feedbackData.wgEmailReqMsg}
   </div>
-  <div id="fsEmailInputCont" on:click={() => EmailButtonDisable()}>
-    <input type="text" id="fsEmailTextArea" placeholder="email@domain.com">
+  <div id="fsEmailInputCont">
+    <input type="text" id="fsEmailTextArea" placeholder="email@domain.com" on:keyup={() => emailHandler()}>
   </div>
   <div class="fsEmailFooter">
     <p id="fsSkipText" on:click={() => closeHandler(email,comment,reactionType)}><u>Skip</u></p>

package/src/widgetPages/reactionpage.css

@@ -3,6 +3,7 @@
     display: flex;
     flex-direction: column;
     height: 190px;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }
   .fsIcons {
     display: flex;
@@ -25,17 +26,20 @@
     flex-direction: column;
     align-items: center;
     height: 22px;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }
 
   .fsReactionText {
     font-size: 12px;
     display: none;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    margin-top: 0px;
     
   }
   .fsIconTextCont:hover{
     pointer-events: auto;
     cursor: pointer;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }
   .fsReactionIcon:hover + .fsReactionText {
     display: block;
@@ -48,6 +52,7 @@
     flex-direction: column;
     height: 291px;
     pointer-events: auto;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }
   .fsTextAreaCont{
     pointer-events: auto;
@@ -55,6 +60,8 @@
       height: 140px;
       background-color: #eaeaeb;
       margin-top: 17%;
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
   }
   .fsTextArea{
     border: 0px;
@@ -65,6 +72,7 @@
     outline: none;
     margin-top: 4%;
     resize: none;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
   }
   .fsSendButtonCommentComponent{
@@ -73,7 +81,8 @@
       font-size: 12px;
       text-align: center;
       margin-top: 7px;
-      
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
   }
   .fsSendButtonContCommentComp{
     pointer-events: auto;
@@ -86,7 +95,8 @@
     margin-right: 11px;
     cursor: pointer;
     border: 0px;
-    
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
   }
   
 .fsCommentButtonContDisable{
@@ -100,6 +110,8 @@
     margin-right: 11px;
     cursor:not-allowed;
     border: 0px;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
 }
 .fsCommentButtonTxtDisable{
     pointer-events: auto;
@@ -107,11 +119,15 @@
       font-size: 12px;
       text-align: center;
       margin-top: 7px;
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
 }
   .fsFooter{
     pointer-events: auto;
       display: flex;
       justify-content: flex-end;
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
   }
 
   .fsIcons-second{
@@ -120,6 +136,8 @@
     flex-direction: row;
     justify-content: space-evenly;
     margin-top: 6%;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
   }
   .fsPointerDiv{
     width: 0;
@@ -152,6 +170,8 @@
     display: flex;
     flex-direction: column;
     height: 220px;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
   }
   #fsEmailInputCont{
     pointer-events: auto;
@@ -163,6 +183,8 @@
     /* align-items: center; */
     justify-content: center;
     margin-top: 10%;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
 
   }
   #fsEmailTextArea{
@@ -171,6 +193,8 @@
     border: 0px;
     background-color: #eaeaeb;
     outline: none;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
   }
  #fsEmailText{
     width: 80%;
@@ -179,12 +203,16 @@
     margin-top: 8%;
     line-height: 1.29;
     font-size: 17px;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
  }
  .fsEmailFooter{
     pointer-events: auto;
   display: flex;
   justify-content: flex-end;
   flex-direction: row;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
  }
  #fsSkipText{
   color: #908f8f;
@@ -193,8 +221,12 @@
     margin-top: 6%;
     margin-right: 4%;
     letter-spacing: normal;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
 
  }
  #fsSkipText:hover{
    color: #666666;
+   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
  }