@fullsession.io/fs-feedback-widget 1.0.1

package/src/widgetPages/reactionPage.svelte

@@ -0,0 +1,466 @@
+<script>
+  import Icons from "../Icons/reactionIcons.svelte";
+
+  export let feedbackData;
+  $: widgetComponent = 1;
+  let reactionNames = ["hate","dislike","neutral","like","love"];
+  let changingReactionNames = reactionNames;
+  let reactionType = 0;
+  let reactionName = "test";
+  let reactionState = true;
+  $:pointerMargin = 10;
+  $:hateDisplay = 'none'
+  $:dislikeDisplay = 'none'
+  $:neutralDisplay = 'none'
+  $:likeDisplay = 'none'
+  $:loveDisplay = 'none';
+  $:buttonColor = feedbackData.wgAccentColor;
+  $: document.documentElement.style.setProperty('--pointerMargin', pointerMargin + '%')
+  $: document.documentElement.style.setProperty('--hateDisplay', hateDisplay)
+  $: document.documentElement.style.setProperty('--dislikeDisplay', dislikeDisplay)
+  $: document.documentElement.style.setProperty('--neutralDisplay', neutralDisplay)
+  $: document.documentElement.style.setProperty('--likeDisplay', likeDisplay)
+  $: document.documentElement.style.setProperty('--loveDisplay', loveDisplay)
+  $: document.documentElement.style.setProperty('--buttonColor', buttonColor)
+
+
+  
+  let count = 0;
+  $: buttonState = false;
+  let checkTextAreaInterval;
+  let checkEmailAreaInterval;
+
+  export let closeHandler = () => {};
+  
+
+  const commentButtonDisable = () =>{
+    
+    let input = document.querySelector(".textArea");
+    
+    checkTextAreaInterval = setInterval(() => {
+      console.log(input.value)
+      if (input.value=== "") {
+        buttonState = false; //button remains disabled
+      } else {
+        buttonState = true; //button is enabled
+      }
+    }, 500);
+      
+   
+  }
+
+  const EmailButtonDisable = () =>{
+    
+    let input = document.querySelector("#EmailTextArea");
+    
+    checkEmailAreaInterval = setInterval(() => {
+      console.log(input.value)
+      if (!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(input.value)) || input.value ==="") {
+        buttonState = false; //button remains disabled
+      } else {
+        buttonState = true; //button is enabled
+      }
+    }, 500);
+      
+   
+  }
+  
+
+  const changeStyle = (prevState) =>{
+   
+    if(prevState == "hate"){
+      hateDisplay = "none"
+    } else if(prevState == "dislike"){
+      dislikeDisplay = "none"
+    } else if(prevState == "neutral"){
+      neutralDisplay = "none"
+    } else if(prevState == "like"){
+      likeDisplay = "none"
+    } else if(prevState == "love"){
+      loveDisplay = "none"
+    }
+  }
+
+  
+  const openComment = (state,rating,name) => {
+    let prevName = reactionName
+    reactionName = name
+    console.log(name)
+
+    widgetComponent = state;
+    reactionType = rating;
+    changingReactionNames = ["unSelectedHate","unSelectedDislike","unSelectedNeutral","unSelectedLike","unSelectedLove"];
+
+    if(count >0){
+      changeStyle(prevName)
+    }
+    // changeStyle(prevName,reactionName)
+    count++;
+    if(rating == 1){
+      
+      pointerMargin = 11
+      hateDisplay = "block"
+      changingReactionNames[0] = reactionNames[0]
+      reactionState = !reactionState;
+    } else if(rating == 2){
+      changingReactionNames[1] = reactionNames[1]
+      pointerMargin = 30;
+      dislikeDisplay = "block"
+      reactionState = !reactionState;
+    } else if(rating == 3){
+      changingReactionNames[2] = reactionNames[2]
+      pointerMargin = 49
+      neutralDisplay = "block"
+      reactionState = !reactionState;
+    } else if(rating == 4){
+      changingReactionNames[3] = reactionNames[3]
+      pointerMargin = 68
+      likeDisplay = "block"
+      reactionState = !reactionState;
+    } else if(rating == 5){
+      changingReactionNames[4] = reactionNames[4]
+      pointerMargin = 87
+      loveDisplay = "block"
+      reactionState = !reactionState;
+    }
+  };
+
+  const openEmailCont  = (state) =>{
+    clearInterval(checkTextAreaInterval);
+    buttonState = false
+    widgetComponent = state;
+  }
+
+  
+
+</script>
+
+
+{#if widgetComponent === 1}
+<div class="container">
+  <div id="txt">{feedbackData.wgQuestion}</div>
+  <div class="icons">
+    <div class="iconTextCont" on:click={() =>openComment(2,1,"hate")}>
+      <div class="reactionIcon">
+        <Icons bind:name={changingReactionNames[0]}/>
+      </div>
+
+      <p class="reactionText">Hate</p>
+    </div>
+
+    <div class="iconTextCont" on:click={() =>openComment(2,2,"dislike")}>
+      <div class="reactionIcon">
+        <Icons bind:name={changingReactionNames[1]} />
+      </div>
+
+      <p class="reactionText">Dislike</p>
+    </div>
+    <div class="iconTextCont" on:click={() =>openComment(2,3,"neutral")}>
+      <div class="reactionIcon">
+        <Icons bind:name={changingReactionNames[2]} />
+      </div>
+
+      <p class="reactionText">Neutral</p>
+    </div>
+    <div class="iconTextCont" on:click={() =>openComment(2,4,"like")}>
+      <div class="reactionIcon">
+        <Icons bind:name={changingReactionNames[3]} />
+      </div>
+      <p class="reactionText">Like</p>
+    </div>
+    <div class="iconTextCont" on:click={() =>openComment(2,5,"love")}>
+      <div class="reactionIcon">
+        <Icons bind:name={changingReactionNames[4]} />
+      </div>
+      <p class="reactionText" >Love</p>
+    </div>
+  </div>
+  <p id ="test"></p>
+</div>
+
+
+{:else if widgetComponent === 2}
+        <div class="commentContainer">
+            <div class="icons-second">
+                <div class="iconTextCont"  on:click={() =>openComment(2,1,"hate")}>
+                  <div class="reactionIcon">
+                    {#if reactionState}
+                    <Icons bind:name={changingReactionNames[0]}/>
+                    {:else if reactionState==false}
+                    <Icons bind:name={changingReactionNames[0]}/>
+                    {/if}
+                  </div>
+            
+                  <p class="reactionText" id="hateDiv">Hate</p>
+                </div>
+            
+                <div class="iconTextCont"  on:click={() =>openComment(2,2,"dislike")}>
+                  <div class="reactionIcon">
+                    {#if reactionState}
+                    <Icons bind:name={changingReactionNames[1]}/>
+                    {:else if reactionState==false}
+                    <Icons bind:name={changingReactionNames[1]}/>
+                    {/if}
+                  </div>
+            
+                  <p class="reactionText" id="dislikeDiv">Dislike</p>
+                </div>
+                <div class="iconTextCont"  on:click={() =>openComment(2,3,"neutral")}>
+                  <div class="reactionIcon">
+                    {#if reactionState}
+                    <Icons bind:name={changingReactionNames[2]}/>
+                    {:else if reactionState==false}
+                    <Icons bind:name={changingReactionNames[2]}/>
+                    {/if}
+                  </div>
+            
+                  <p class="reactionText" id="neutralDiv">Neutral</p>
+                </div>
+                <div class="iconTextCont"  on:click={() =>openComment(2,4,"like")}>
+                  <div class="reactionIcon">
+                    {#if reactionState}
+                    <Icons bind:name={changingReactionNames[3]}/>
+                    {:else if reactionState==false}
+                    <Icons bind:name={changingReactionNames[3]}/>
+                    {/if}
+                  </div>
+                  <p class="reactionText" id="likeDiv">Like</p>
+                </div>
+                <div class="iconTextCont">
+                  <div class="reactionIcon"  on:click={() =>openComment(2,5,"love")}>
+                    {#if reactionState}
+                    <Icons bind:name={changingReactionNames[4]}/>
+                    {:else if reactionState==false}
+                    <Icons bind:name={changingReactionNames[4]}/>
+                    {/if}
+                  </div>
+                  <p class="reactionText" id="loveDiv">Love</p>
+                </div>
+              </div>
+
+              <div class="textAreaCont" >
+                  <div class="pointerDiv" id="pointer" ></div>
+                  <textarea class="textArea" placeholder="Tell us your experience..." on:click={() => commentButtonDisable()}></textarea>
+              </div>
+
+              <div class="footer">
+                {#if buttonState == false}
+                <button  class="CommentButtonContDisable"  disabled>
+                    <p class="CommentButtonTxtDisable">Send</p>
+                </button>
+                {:else if buttonState == true}
+                <button  class="sendButtonContCommentComp" on:click={() => openEmailCont(3)} >
+                  <p class="SendButtonCommentComponent">Send</p>
+                </button>
+                {/if}
+              </div>
+        </div>
+{:else if widgetComponent === 3}
+<div class="emailContainer">
+  <div id="emailText">
+    {feedbackData.wgEmailReqMsg}
+  </div>
+  <div id="emailInputCont" on:click={() => EmailButtonDisable()}>
+    <input type="text" id="EmailTextArea" placeholder="email@domain.com">
+  </div>
+  <div class="emailFooter">
+    <p id="skipText" on:click={() => closeHandler()}><u>Skip</u></p>
+    {#if buttonState == false}
+    <button class="CommentButtonContDisable" disabled>
+        <p class="CommentButtonTxtDisable">Send</p>
+    </button>
+    {:else if buttonState == true}
+    <button class="sendButtonContCommentComp" on:click={() => closeHandler()}>
+      <p class="SendButtonCommentComponent" >Send</p>
+  </button>
+  {/if}
+    
+  </div>
+</div>
+{/if}
+
+
+<style>
+  .container {
+    display: flex;
+    flex-direction: column;
+    height: 190px;
+  }
+  .icons {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    margin-top: 11%;
+  }
+  #txt {
+    font-size: 17px;
+    display: flex;
+    text-align: center;
+    margin-top: 5%;
+    width: 61%;
+    margin-left: 19%;
+  }
+
+  .iconTextCont {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 22px;
+  }
+
+  .reactionText {
+    font-size: 9px;
+    display: none;
+  }
+  .iconTextCont:hover{
+    cursor: pointer;
+  }
+  .reactionIcon:hover + .reactionText {
+    display: block;
+    opacity: 0.8;
+  }
+
+  .commentContainer{
+    display: flex;
+    flex-direction: column;
+    height: 291px;
+  }
+  .textAreaCont{
+      width: 100%;
+      height: 140px;
+      background-color: #eaeaeb;
+      margin-top: 17%;
+  }
+  .textArea{
+    border: 0px;
+    width: 85%;
+    height: 120px;
+    background-color: #eaeaeb;
+    margin-left: 6%;
+    outline: none;
+    margin-top: 4%;
+    resize: none;
+
+  }
+  .SendButtonCommentComponent{
+      color: #ffff;
+      font-size: 12px;
+      text-align: center;
+      margin-top: 1px;
+      
+  }
+  .sendButtonContCommentComp{
+      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;
+    
+  }
+  
+.CommentButtonContDisable{
+  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;
+}
+.CommentButtonTxtDisable{
+      color: black;
+      font-size: 12px;
+      text-align: center;
+      margin-top: 2px;
+}
+  .footer{
+      display: flex;
+      justify-content: flex-end;
+  }
+
+  .icons-second{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    margin-top: 6%;
+  }
+  .pointerDiv{
+    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);
+
+
+  }
+  #hateDiv{
+    display: var(--hateDisplay);
+  }
+  #dislikeDiv{
+    display: var(--dislikeDisplay);
+  }
+  #neutralDiv{
+    display: var(--neutralDisplay);
+  }
+  #likeDiv{
+    display: var(--likeDisplay);
+  }
+  #loveDiv{
+    display: var(--loveDisplay);
+  }
+  .emailContainer{
+    display: flex;
+    flex-direction: column;
+    height: 220px;
+  }
+  #emailInputCont{
+    width: 100%;
+    height: 46px;
+    background-color: #eaeaeb;
+    display: flex;
+    /* align-items: center; */
+    justify-content: center;
+    margin-top: 10%;
+
+  }
+  #EmailTextArea{
+    text-align: center;
+    border: 0px;
+    background-color: #eaeaeb;
+    margin-top:3%;
+    outline: none;
+  }
+ #emailText{
+    width: 80%;
+    text-align: center;
+    margin-left: 11%;
+    margin-top: 8%;
+    line-height: 1.29;
+    font-size: 17px;
+ }
+ .emailFooter{
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: row;
+ }
+ #skipText{
+  color: #908f8f;
+    cursor: pointer;
+    font-size: 13px;
+    margin-top: 6%;
+    margin-right: 4%;
+    letter-spacing: normal;
+
+ }
+ #skipText:hover{
+   color: #666666;
+ }
+</style>