@fullsession.io/fs-feedback-widget 1.5.10 → 1.6.1

package/src/widgetPages/reactionPage.svelte

@@ -1,305 +1,305 @@
-
-<script>
-  import Icons from "../Icons/reactionIcons.svelte";
-  import "../widgetPages/reactionpage.css"
-  export let feedbackData;
-  $: widgetComponent = 1;
-  let reactionNames = ["hate","dislike","neutral","like","love"];
-  let changingReactionNames = reactionNames;
-  let reactionType = "";
-  let comment=""
-  let email =""
-  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 = (email,comment,reactionType) => {};
-  export let closeHandlerBeforeFinishing = (email,comment,reactionType) => {};
-
-
-  // const commentButtonDisable = () =>{
-    
-  //   let source = document.querySelector(".fsTextArea");
-    
-  //   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
-      }
-  comment = "";
-  comment = input.value;
-}
-
-  // const EmailButtonDisable = () =>{
-    
-  //   let source = document.querySelector("#fsEmailTextArea");
-    
-  //   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 = document.getElementById("fsEmailTextArea").value;
-      }
-      
-
-    
-}
-  
-
-  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
-
-    widgetComponent = state;
-    reactionType = String(rating);
-    changingReactionNames = ["unSelectedHate","unSelectedDislike","unSelectedNeutral","unSelectedLike","unSelectedLove"];
-    closeHandlerBeforeFinishing(email,comment,reactionType)
-    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);
-    document.querySelector(".fsTextArea").value="";
-    buttonState = false
-    widgetComponent = state;
-    
-  }
-
-  const endEmailInterval =()=> {
-    clearInterval(checkEmailAreaInterval);
-    document.querySelector("#fsEmailTextArea").value="";
-
-	}
-
-</script>
-
-
-
-{#if widgetComponent === 1}
-<div class="fsReactionsContainer">
-  <div id="fsTxt">{feedbackData.wgQuestion}</div>
-  <div class="fsIcons">
-    <div class="fsIconTextCont" on:click={() =>openComment(2,1,"hate")}>
-      <div class="fsReactionIcon">
-        <Icons bind:name={changingReactionNames[0]}/>
-      </div>
-
-      <p class="fsReactionText">Hate</p>
-    </div>
-
-    <div class="fsIconTextCont" on:click={() =>openComment(2,2,"dislike")}>
-      <div class="fsReactionIcon">
-        <Icons bind:name={changingReactionNames[1]} />
-      </div>
-
-      <p class="fsReactionText">Dislike</p>
-    </div>
-    <div class="fsIconTextCont" on:click={() =>openComment(2,3,"neutral")}>
-      <div class="fsReactionIcon">
-        <Icons bind:name={changingReactionNames[2]} />
-      </div>
-
-      <p class="fsReactionText">Neutral</p>
-    </div>
-    <div class="fsIconTextCont" on:click={() =>openComment(2,4,"like")}>
-      <div class="fsReactionIcon">
-        <Icons bind:name={changingReactionNames[3]} />
-      </div>
-      <p class="fsReactionText">Like</p>
-    </div>
-    <div class="fsIconTextCont" on:click={() =>openComment(2,5,"love")}>
-      <div class="fsReactionIcon">
-        <Icons bind:name={changingReactionNames[4]} />
-      </div>
-      <p class="fsReactionText" >Love</p>
-    </div>
-  </div>
-  <p id ="test"></p>
-</div>
-
-
-{:else if widgetComponent === 2}
-        <div class="fsCommentContainer">
-            <div class="fsIcons-second">
-                <div class="fsIconTextCont"  on:click={() =>openComment(2,1,"hate")}>
-                  <div class="fsReactionIcon">
-                    {#if reactionState}
-                    <Icons bind:name={changingReactionNames[0]}/>
-                    {:else if reactionState==false}
-                    <Icons bind:name={changingReactionNames[0]}/>
-                    {/if}
-                  </div>
-            
-                  <p class="fsReactionText" id="fsHateDiv">Hate</p>
-                </div>
-            
-                <div class="fsIconTextCont"  on:click={() =>openComment(2,2,"dislike")}>
-                  <div class="fsReactionIcon">
-                    {#if reactionState}
-                    <Icons bind:name={changingReactionNames[1]}/>
-                    {:else if reactionState==false}
-                    <Icons bind:name={changingReactionNames[1]}/>
-                    {/if}
-                  </div>
-            
-                  <p class="fsReactionText" id="fsDislikeDiv">Dislike</p>
-                </div>
-                <div class="fsIconTextCont"  on:click={() =>openComment(2,3,"neutral")}>
-                  <div class="fsReactionIcon">
-                    {#if reactionState}
-                    <Icons bind:name={changingReactionNames[2]}/>
-                    {:else if reactionState==false}
-                    <Icons bind:name={changingReactionNames[2]}/>
-                    {/if}
-                  </div>
-            
-                  <p class="fsReactionText" id="fsNeutralDiv">Neutral</p>
-                </div>
-                <div class="fsIconTextCont"  on:click={() =>openComment(2,4,"like")}>
-                  <div class="fsReactionIcon">
-                    {#if reactionState}
-                    <Icons bind:name={changingReactionNames[3]}/>
-                    {:else if reactionState==false}
-                    <Icons bind:name={changingReactionNames[3]}/>
-                    {/if}
-                  </div>
-                  <p class="fsReactionText" id="fsLikeDiv">Like</p>
-                </div>
-                <div class="fsIconTextCont">
-                  <div class="fsReactionIcon"  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="fsReactionText" id="fsLoveDiv">Love</p>
-                </div>
-              </div>
-
-              <div class="fsTextAreaCont" >
-                  <div class="fsPointerDiv" id="fsPointer" ></div>
-                  <textarea class="fsTextArea" placeholder="Tell us your experience..."  on:keyup={() => commentHandler()}></textarea>
-              </div>
-
-              <div class="fsFooter">
-                {#if buttonState == false}
-                <button  class="fsCommentButtonContDisable"  disabled>
-                    <p class="fsCommentButtonTxtDisable">Send</p>
-                </button>
-                {:else if buttonState == true}
-                <button  class="fsSendButtonContCommentComp" on:click={() => openEmailCont(3)} >
-                  <p class="fsSendButtonCommentComponent">Send</p>
-                </button>
-                {/if}
-              </div>
-        </div>
-{:else if widgetComponent === 3}
-<div class="fsEmailContainer">
-  <div id="fsEmailText">
-    {feedbackData.wgEmailReqMsg}
-  </div>
-  <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>
-    {#if buttonState == false}
-    <button class="fsCommentButtonContDisable" disabled>
-        <p class="fsCommentButtonTxtDisable">Send</p>
-    </button>
-    {:else if buttonState == true}
-    <button class="fsSendButtonContCommentComp" on:click={() => closeHandler(email,comment,reactionType)} on:click={()=>endEmailInterval() }>
-      <p class="fsSendButtonCommentComponent" >Send</p>
-    </button>
-  {/if}
-    
-  </div>
-</div>
-{/if}
-
-
-
+
+<script>
+  import Icons from "../Icons/reactionIcons.svelte";
+  import "../widgetPages/reactionpage.css"
+  export let feedbackData;
+  $: widgetComponent = 1;
+  let reactionNames = ["hate","dislike","neutral","like","love"];
+  let changingReactionNames = reactionNames;
+  let reactionType = "";
+  let comment=""
+  let email =""
+  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 = (email,comment,reactionType) => {};
+  export let closeHandlerBeforeFinishing = (email,comment,reactionType) => {};
+
+
+  // const commentButtonDisable = () =>{
+    
+  //   let source = document.querySelector(".fsTextArea");
+    
+  //   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
+      }
+  comment = "";
+  comment = input.value;
+}
+
+  // const EmailButtonDisable = () =>{
+    
+  //   let source = document.querySelector("#fsEmailTextArea");
+    
+  //   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 = document.getElementById("fsEmailTextArea").value;
+      }
+      
+
+    
+}
+  
+
+  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
+
+    widgetComponent = state;
+    reactionType = String(rating);
+    changingReactionNames = ["unSelectedHate","unSelectedDislike","unSelectedNeutral","unSelectedLike","unSelectedLove"];
+    closeHandlerBeforeFinishing(email,comment,reactionType)
+    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);
+    document.querySelector(".fsTextArea").value="";
+    buttonState = false
+    widgetComponent = state;
+    
+  }
+
+  const endEmailInterval =()=> {
+    clearInterval(checkEmailAreaInterval);
+    document.querySelector("#fsEmailTextArea").value="";
+
+	}
+
+</script>
+
+
+
+{#if widgetComponent === 1}
+<div class="fsReactionsContainer">
+  <div id="fsTxt">{feedbackData.wgQuestion}</div>
+  <div class="fsIcons">
+    <div class="fsIconTextCont" on:click={() =>openComment(2,1,"hate")}>
+      <div class="fsReactionIcon">
+        <Icons bind:name={changingReactionNames[0]}/>
+      </div>
+
+      <p class="fsReactionText">Hate</p>
+    </div>
+
+    <div class="fsIconTextCont" on:click={() =>openComment(2,2,"dislike")}>
+      <div class="fsReactionIcon">
+        <Icons bind:name={changingReactionNames[1]} />
+      </div>
+
+      <p class="fsReactionText">Dislike</p>
+    </div>
+    <div class="fsIconTextCont" on:click={() =>openComment(2,3,"neutral")}>
+      <div class="fsReactionIcon">
+        <Icons bind:name={changingReactionNames[2]} />
+      </div>
+
+      <p class="fsReactionText">Neutral</p>
+    </div>
+    <div class="fsIconTextCont" on:click={() =>openComment(2,4,"like")}>
+      <div class="fsReactionIcon">
+        <Icons bind:name={changingReactionNames[3]} />
+      </div>
+      <p class="fsReactionText">Like</p>
+    </div>
+    <div class="fsIconTextCont" on:click={() =>openComment(2,5,"love")}>
+      <div class="fsReactionIcon">
+        <Icons bind:name={changingReactionNames[4]} />
+      </div>
+      <p class="fsReactionText" >Love</p>
+    </div>
+  </div>
+  <p id ="test"></p>
+</div>
+
+
+{:else if widgetComponent === 2}
+        <div class="fsCommentContainer">
+            <div class="fsIcons-second">
+                <div class="fsIconTextCont"  on:click={() =>openComment(2,1,"hate")}>
+                  <div class="fsReactionIcon">
+                    {#if reactionState}
+                    <Icons bind:name={changingReactionNames[0]}/>
+                    {:else if reactionState==false}
+                    <Icons bind:name={changingReactionNames[0]}/>
+                    {/if}
+                  </div>
+            
+                  <p class="fsReactionText" id="fsHateDiv">Hate</p>
+                </div>
+            
+                <div class="fsIconTextCont"  on:click={() =>openComment(2,2,"dislike")}>
+                  <div class="fsReactionIcon">
+                    {#if reactionState}
+                    <Icons bind:name={changingReactionNames[1]}/>
+                    {:else if reactionState==false}
+                    <Icons bind:name={changingReactionNames[1]}/>
+                    {/if}
+                  </div>
+            
+                  <p class="fsReactionText" id="fsDislikeDiv">Dislike</p>
+                </div>
+                <div class="fsIconTextCont"  on:click={() =>openComment(2,3,"neutral")}>
+                  <div class="fsReactionIcon">
+                    {#if reactionState}
+                    <Icons bind:name={changingReactionNames[2]}/>
+                    {:else if reactionState==false}
+                    <Icons bind:name={changingReactionNames[2]}/>
+                    {/if}
+                  </div>
+            
+                  <p class="fsReactionText" id="fsNeutralDiv">Neutral</p>
+                </div>
+                <div class="fsIconTextCont"  on:click={() =>openComment(2,4,"like")}>
+                  <div class="fsReactionIcon">
+                    {#if reactionState}
+                    <Icons bind:name={changingReactionNames[3]}/>
+                    {:else if reactionState==false}
+                    <Icons bind:name={changingReactionNames[3]}/>
+                    {/if}
+                  </div>
+                  <p class="fsReactionText" id="fsLikeDiv">Like</p>
+                </div>
+                <div class="fsIconTextCont">
+                  <div class="fsReactionIcon"  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="fsReactionText" id="fsLoveDiv">Love</p>
+                </div>
+              </div>
+
+              <div class="fsTextAreaCont" >
+                  <div class="fsPointerDiv" id="fsPointer" ></div>
+                  <textarea class="fsTextArea" placeholder="Tell us your experience..."  on:keyup={() => commentHandler()}></textarea>
+              </div>
+
+              <div class="fsFooter">
+                {#if buttonState == false}
+                <fs-button  class="fsCommentButtonContDisable" >
+                    <p class="fsCommentButtonTxtDisable">Send</p>
+                </fs-button>
+                {:else if buttonState == true}
+                <fs-button  class="fsSendButtonContCommentComp" on:click={() => openEmailCont(3)} >
+                  <p class="fsSendButtonCommentComponent">Send</p>
+                </fs-button>
+                {/if}
+              </div>
+        </div>
+{:else if widgetComponent === 3}
+<div class="fsEmailContainer">
+  <div id="fsEmailText">
+    {feedbackData.wgEmailReqMsg}
+  </div>
+  <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>
+    {#if buttonState == false}
+    <fs-button class="fsCommentButtonContDisable" >
+        <p class="fsCommentButtonTxtDisable">Send</p>
+    </fs-button>
+    {:else if buttonState == true}
+    <fs-button class="fsSendButtonContCommentComp" on:click={() => closeHandler(email,comment,reactionType)} on:click={()=>endEmailInterval() }>
+      <p class="fsSendButtonCommentComponent" >Send</p>
+    </fs-button>
+  {/if}
+    
+  </div>
+</div>
+{/if}
+
+
+