@fullsession.io/fs-feedback-widget 1.3.3 → 1.3.6

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.3",
+  "version": "1.3.6",
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",

package/src/App.svelte

@@ -1,194 +1,220 @@
 <script>
   import MainIcon from "./Icons/mainIcon.svelte";
-  import ReactionPage  from "./widgetPages/reactionPage.svelte"
+  import ReactionPage from "./widgetPages/reactionPage.svelte";
   export let feedback;
   console.log(feedback);
   import { fly } from "svelte/transition";
-  import "../src/widgetPages/App.css"
-  $:widgetColor = feedback.wgAccentColor;
-  $:document.documentElement.style.setProperty('--widgetColor', widgetColor);
-  let widgetTextColor="";
+  import "../src/widgetPages/App.css";
+  $: widgetColor = feedback.wgAccentColor;
+  $: document.documentElement.style.setProperty("--widgetColor", widgetColor);
+  let widgetTextColor = "";
   let iconColor = "";
-  let widgetName="Feedback"
-  if(feedback.wgLanguage == "en"){
-    widgetName = "  Feedback"
-  } else if(feedback.wgLanguage == "ar"){
-    widgetName = "رأي"
-  } else{
-    widgetName = "Rétroaction"
+  let widgetName = "Feedback";
+  if (feedback.wgLanguage == "en") {
+    widgetName = "  Feedback";
+  } else if (feedback.wgLanguage == "ar") {
+    widgetName = "رأي";
+  } else {
+    widgetName = "Rétroaction";
   }
 
-  if(feedback.wgAlternateColor === true){
+  if (feedback.wgAlternateColor === true) {
     widgetTextColor = "white";
-    iconColor = "white"
-  } else{
+    iconColor = "white";
+  } else {
     widgetTextColor = "black";
-    iconColor ="black"
+    iconColor = "black";
   }
 
-  $:document.documentElement.style.setProperty('--widgetTextColor', widgetTextColor);
+  $: document.documentElement.style.setProperty(
+    "--widgetTextColor",
+    widgetTextColor
+  );
 
-  let wgPositionHorizintal="";
+  let wgPositionHorizintal = "";
   let wgPositionVertical = "";
-  let widgetLeftSideBorder=0;
-  let widgetRightSideBorder=0;
+  let widgetLeftSideBorder = 0;
+  let widgetRightSideBorder = 0;
   let widgetMarginRight = 0;
   let widgetMarginLeft = 0;
   let visible = false;
   let buttonVisible = true;
   let thanksMessageVisible = false;
-  let  inTransitionX = 0;
-  let  outTransitionX = 0;
+  let inTransitionX = 0;
+  let outTransitionX = 0;
 
-  if(Number(feedback.wgPosition) == 0){
-    wgPositionHorizintal = "center"
-    wgPositionVertical = "row-reverse"
-    widgetLeftSideBorder =5;
-    widgetRightSideBorder=0;
+  if (Number(feedback.wgPosition) == 0) {
+    wgPositionHorizintal = "center";
+    wgPositionVertical = "row-reverse";
+    widgetLeftSideBorder = 5;
+    widgetRightSideBorder = 0;
     widgetMarginRight = 30;
     widgetMarginLeft = 0;
     inTransitionX = -100;
     outTransitionX = 20;
   }
-  if(Number(feedback.wgPosition) == 1){
-    wgPositionHorizintal = "center"
-    wgPositionVertical = "row"
-    widgetLeftSideBorder =0;
-    widgetRightSideBorder=5;
+  if (Number(feedback.wgPosition) == 1) {
+    wgPositionHorizintal = "center";
+    wgPositionVertical = "row";
+    widgetLeftSideBorder = 0;
+    widgetRightSideBorder = 5;
     widgetMarginRight = 0;
     widgetMarginLeft = 30;
     inTransitionX = 100;
     outTransitionX = -20;
   }
-  if(Number(feedback.wgPosition) == 2){
-    wgPositionHorizintal = "flex-end"
-    wgPositionVertical = "row-reverse"
-    widgetLeftSideBorder =5;
-    widgetMarginRight = 30
+  if (Number(feedback.wgPosition) == 2) {
+    wgPositionHorizintal = "flex-end";
+    wgPositionVertical = "row-reverse";
+    widgetLeftSideBorder = 5;
+    widgetMarginRight = 30;
     widgetMarginLeft = 0;
     inTransitionX = -100;
     outTransitionX = 20;
   }
-  if(Number(feedback.wgPosition) == 3){
-    wgPositionHorizintal = "flex-end"
-    wgPositionVertical = "row"
-    widgetLeftSideBorder =0;
-    widgetRightSideBorder=5;
+  if (Number(feedback.wgPosition) == 3) {
+    wgPositionHorizintal = "flex-end";
+    wgPositionVertical = "row";
+    widgetLeftSideBorder = 0;
+    widgetRightSideBorder = 5;
     widgetMarginRight = 0;
     widgetMarginLeft = 30;
     inTransitionX = 100;
     outTransitionX = -20;
   }
-  $: document.documentElement.style.setProperty('--wgPositionHorizintal', wgPositionHorizintal)
-  $: document.documentElement.style.setProperty('--wgPositionVertical', wgPositionVertical)
-  $: document.documentElement.style.setProperty('--widgetLeftSideBorder', widgetLeftSideBorder + 'px')
-  $: document.documentElement.style.setProperty('--widgetRightSideBorder', widgetRightSideBorder + 'px')
-  $: document.documentElement.style.setProperty('--widgetMarginRight', widgetMarginRight + 'px')
-  $: document.documentElement.style.setProperty('--widgetMarginLeft', widgetMarginLeft + 'px')
+  $: document.documentElement.style.setProperty(
+    "--wgPositionHorizintal",
+    wgPositionHorizintal
+  );
+  $: document.documentElement.style.setProperty(
+    "--wgPositionVertical",
+    wgPositionVertical
+  );
+  $: document.documentElement.style.setProperty(
+    "--widgetLeftSideBorder",
+    widgetLeftSideBorder + "px"
+  );
+  $: document.documentElement.style.setProperty(
+    "--widgetRightSideBorder",
+    widgetRightSideBorder + "px"
+  );
+  $: document.documentElement.style.setProperty(
+    "--widgetMarginRight",
+    widgetMarginRight + "px"
+  );
+  $: document.documentElement.style.setProperty(
+    "--widgetMarginLeft",
+    widgetMarginLeft + "px"
+  );
 
   let userClosedWidget = 0;
   let emailx = "";
   let commentx = "";
-  let reactionTypex ="";
-  const closeOne = (email,comment,reactionType) => {
-    let widgetResponse={
-      email:email,
-      comment:comment,
-      reaction:reactionType
-    }
+  let reactionTypex = "";
+  const closeOne = (email, comment, reactionType) => {
+    let widgetResponse = {
+      email: email,
+      comment: comment,
+      reaction: Number(reactionType),
+    };
 
-    
     let event = new CustomEvent("fbEvent", {
-        bubbles: false,
-        detail: widgetResponse,
-      });
+      bubbles: false,
+      detail: widgetResponse,
+    });
     window.dispatchEvent(event);
-  console.log(widgetResponse);
-  openThanksMessage()};
+    console.log(widgetResponse);
+    openThanksMessage();
+  };
 
-  const closeBeforeFinsihing = (email,comment,reactionType) => {
+  const closeBeforeFinsihing = (email, comment, reactionType) => {
     emailx = email;
     commentx = comment;
-    reactionTypex = reactionType 
-    let widgetResponse={
-      email:email,
-      comment:comment,
-      reaction:reactionType
-    }
-
-    if(userClosedWidget == 1){
-    let event = new CustomEvent("fbEvent", {
+    reactionTypex = Number(reactionType);
+    let widgetResponse = {
+      email: email,
+      comment: comment,
+      reaction: reactionType,
+    };
+    if (userClosedWidget == 1) {
+      console.log("hi", widgetResponse);
+      let event = new CustomEvent("fbEvent", {
         bubbles: false,
         detail: widgetResponse,
       });
-    window.dispatchEvent(event);
-  console.log(widgetResponse);
+      window.dispatchEvent(event);
+      console.log(widgetResponse);
     }
- };
-  
-  
+  };
 
   const openThanksMessage = () => {
     visible = !visible;
     thanksMessageVisible = !thanksMessageVisible;
-	
-  }
+  };
+
   const closeThanksMessage = () => {
     thanksMessageVisible = !thanksMessageVisible;
-    setTimeout(function(){ 
-	buttonVisible = !buttonVisible;
-},350);
-  }
-  
+    setTimeout(function () {
+      buttonVisible = !buttonVisible;
+    }, 350);
+  };
+
   const openWidget = () => {
     visible = !visible;
-	buttonVisible = !buttonVisible;
+    buttonVisible = !buttonVisible;
   };
+
   const closeWidget = () => {
     userClosedWidget = 1;
-    closeBeforeFinsihing(emailx,commentx,reactionTypex);
+    if (reactionTypex != 0) {
+      closeBeforeFinsihing(emailx, commentx, reactionTypex);
+    }
     visible = !visible;
-	setTimeout(function(){ 
-	buttonVisible = !buttonVisible;
-},350);
+    setTimeout(function () {
+      buttonVisible = !buttonVisible;
+    }, 350);
   };
-</script>
 
+</script>
 
-<container>
-	
+<fsContainer>
   {#if buttonVisible}
-    <div class="widget" on:click={openWidget}>
-      <div id="feedbackTxt">{widgetName}</div>
-      <div id="mainIcon">
-        <MainIcon bind:fill={iconColor}/>
+    <div class="fsWidget" on:click={openWidget}>
+      <div id="fsFeedbackTxt">{widgetName}</div>
+      <div id="fsMainIcon">
+        <MainIcon bind:fill={iconColor} />
       </div>
     </div>
   {/if}
 
   {#if visible}
-    <div
-      
-      class="cont"
-      in:fly="{{ x: inTransitionX, duration: 500 }}" 
-    >
-      <div class="closeCont" on:click={closeWidget}>
-		<p id="closeIcon">X</p>
-	  </div>
-      <ReactionPage closeHandler={closeOne} bind:feedbackData={feedback} closeHandlerBeforeFinishing={closeBeforeFinsihing}/>
-	  
+    <div class="fsCont" in:fly={{ x: inTransitionX, duration: 500 }}>
+      <div class="fsCloseCont" on:click={closeWidget}>
+        <p id="fsCloseIcon">X</p>
+      </div>
+      <ReactionPage
+        closeHandler={closeOne}
+        bind:feedbackData={feedback}
+        closeHandlerBeforeFinishing={closeBeforeFinsihing}
+      />
     </div>
   {/if}
   {#if thanksMessageVisible}
-  <div class ="thanksMessageCont" out:fly="{{ x: outTransitionX, duration: 300 }}">
-    <div class="closeCont" on:click={closeThanksMessage}>
-      <p id="closeIcon">X</p>
-    </div>
-    <div style="    width: 61%;
+    <div
+      class="fsThanksMessageCont"
+      out:fly={{ x: outTransitionX, duration: 300 }}
+    >
+      <div class="fsCloseCont" on:click={closeThanksMessage}>
+        <p id="fsCloseIcon">X</p>
+      </div>
+      <div
+        style="    width: 61%;
     text-align: center;
     margin-top: 7%;
-    margin-left: 20%;">{feedback.wgThanksMsg}</div>
-  </div>
+    margin-left: 20%;"
+      >
+        {feedback.wgThanksMsg}
+      </div>
+    </div>
   {/if}
-  </container>
-
+</fsContainer>