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

package/src/App.svelte

@@ -1,233 +1,233 @@
-<script>
-  import MainIcon from "./Icons/mainIcon.svelte";
-  import ReactionPage from "./widgetPages/reactionPage.svelte";
-  export let feedback;
-  export let widgetPosition;
-  import { fly } from "svelte/transition";
-  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";
-  }
-
-  if (feedback.wgAlternateColor === true) {
-    widgetTextColor = "white";
-    iconColor = "white";
-  } else {
-    widgetTextColor = "black";
-    iconColor = "black";
-  }
-
-  $: document.documentElement.style.setProperty(
-    "--widgetTextColor",
-    widgetTextColor
-  );
-
-  let wgPositionHorizintal = "";
-  let wgPositionVertical = "";
-  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 positionState= "";
-  
-
-  if( widgetPosition == 'fixed'){
-    positionState = "fixed"
-  } else{
-    positionState = "absolute"
-  }
-  $: document.documentElement.style.setProperty(
-    "--positionState",
-    positionState
-  );
-  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;
-    widgetMarginRight = 0;
-    widgetMarginLeft = 30;
-    inTransitionX = 100;
-    outTransitionX = -20;
-  }
-  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;
-    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"
-  );
-  
-
-  let userClosedWidget = 0;
-  let emailx = "";
-  let commentx = "";
-  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,
-    });
-    window.dispatchEvent(event);
-    openThanksMessage();
-  };
-
-  // const closeBeforeFinsihing = (email, comment, reactionType) => {
-  //   emailx = email;
-  //   commentx = comment;
-  //   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);
-  //   }
-  // };
-
-  const openThanksMessage = () => {
-    visible = !visible;
-    thanksMessageVisible = !thanksMessageVisible;
-  };
-
-  const closeThanksMessage = () => {
-    thanksMessageVisible = !thanksMessageVisible;
-    setTimeout(function () {
-      buttonVisible = !buttonVisible;
-    }, 350);
-  };
-
-  const openWidget = () => {
-    visible = !visible;
-    buttonVisible = !buttonVisible;
-  };
-
-  const closeWidget = () => {
-    userClosedWidget = 1;
-    if (reactionTypex != 0) {
-      closeBeforeFinsihing(emailx, commentx, reactionTypex);
-    }
-    visible = !visible;
-    setTimeout(function () {
-      buttonVisible = !buttonVisible;
-    }, 350);
-  };
-
-</script>
-<fsContainer style="position: 10px">
-  {#if buttonVisible}
-    <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="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}
-        
-      />
-    </div>
-  {/if}
-  {#if thanksMessageVisible}
-    <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%;
-    padding-bottom: 8%;"
-      >
-        {feedback.wgThanksMsg}
-      </div>
-    </div>
-  {/if}
-</fsContainer>
-
-
+<script>
+  import MainIcon from "./Icons/mainIcon.svelte";
+  import ReactionPage from "./widgetPages/reactionPage.svelte";
+  export let feedback;
+  export let widgetPosition;
+  import { fly } from "svelte/transition";
+  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";
+  }
+
+  if (feedback.wgAlternateColor === true) {
+    widgetTextColor = "white";
+    iconColor = "white";
+  } else {
+    widgetTextColor = "black";
+    iconColor = "black";
+  }
+
+  $: document.documentElement.style.setProperty(
+    "--widgetTextColor",
+    widgetTextColor
+  );
+
+  let wgPositionHorizintal = "";
+  let wgPositionVertical = "";
+  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 positionState= "";
+  
+
+  if( widgetPosition == 'fixed'){
+    positionState = "fixed"
+  } else{
+    positionState = "absolute"
+  }
+  $: document.documentElement.style.setProperty(
+    "--positionState",
+    positionState
+  );
+  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;
+    widgetMarginRight = 0;
+    widgetMarginLeft = 30;
+    inTransitionX = 100;
+    outTransitionX = -20;
+  }
+  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;
+    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"
+  );
+  
+
+  let userClosedWidget = 0;
+  let emailx = "";
+  let commentx = "";
+  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,
+    });
+    window.dispatchEvent(event);
+    openThanksMessage();
+  };
+
+  // const closeBeforeFinsihing = (email, comment, reactionType) => {
+  //   emailx = email;
+  //   commentx = comment;
+  //   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);
+  //   }
+  // };
+
+  const openThanksMessage = () => {
+    visible = !visible;
+    thanksMessageVisible = !thanksMessageVisible;
+  };
+
+  const closeThanksMessage = () => {
+    thanksMessageVisible = !thanksMessageVisible;
+    setTimeout(function () {
+      buttonVisible = !buttonVisible;
+    }, 350);
+  };
+
+  const openWidget = () => {
+    visible = !visible;
+    buttonVisible = !buttonVisible;
+  };
+
+  const closeWidget = () => {
+    userClosedWidget = 1;
+    if (reactionTypex != 0) {
+      closeBeforeFinsihing(emailx, commentx, reactionTypex);
+    }
+    visible = !visible;
+    setTimeout(function () {
+      buttonVisible = !buttonVisible;
+    }, 350);
+  };
+
+</script>
+<fsContainer style="position: 10px">
+  {#if buttonVisible}
+    <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="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}
+        
+      />
+    </div>
+  {/if}
+  {#if thanksMessageVisible}
+    <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%;
+    padding-bottom: 8%;"
+      >
+        {feedback.wgThanksMsg}
+      </div>
+    </div>
+  {/if}
+</fsContainer>
+
+

package/src/Icons/mainIcon.svelte

@@ -1,25 +1,25 @@
-<script>
-  export let fill = "";
-</script>
-<svg
-  fill={fill}
-  
-
-  version="1.1"
-  id="Layer_1"
-  xmlns="http://www.w3.org/2000/svg"
-  xmlns:xlink="http://www.w3.org/1999/xlink"
-  x="0px"
-  y="0px"
-  viewBox="0 0 458 458"
-  style="enable-background:new 0 0 458 458;"
-  xml:space="preserve"
-  ><g
-    ><g
-      ><path
-        d="M428,41.534H30c-16.569,0-30,13.431-30,30v252c0,16.568,13.432,30,30,30h132.1l43.942,52.243 c5.7,6.777,14.103,10.69,22.959,10.69c8.856,0,17.258-3.912,22.959-10.69l43.942-52.243H428c16.568,0,30-13.432,30-30v-252 C458,54.965,444.568,41.534,428,41.534z M323.916,281.534H82.854c-8.284,0-15-6.716-15-15s6.716-15,15-15h241.062 c8.284,0,15,6.716,15,15S332.2,281.534,323.916,281.534z M67.854,198.755c0-8.284,6.716-15,15-15h185.103c8.284,0,15,6.716,15,15 s-6.716,15-15,15H82.854C74.57,213.755,67.854,207.039,67.854,198.755z M375.146,145.974H82.854c-8.284,0-15-6.716-15-15 s6.716-15,15-15h292.291c8.284,0,15,6.716,15,15C390.146,139.258,383.43,145.974,375.146,145.974z"
-      /></g
-    ></g
-  ><g /><g /><g /><g /><g /><g /><g /><g /><g /><g /><g /><g /><g /><g /><g
-  /></svg
->
+<script>
+  export let fill = "";
+</script>
+<svg
+  fill={fill}
+  
+
+  version="1.1"
+  id="Layer_1"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  x="0px"
+  y="0px"
+  viewBox="0 0 458 458"
+  style="enable-background:new 0 0 458 458;"
+  xml:space="preserve"
+  ><g
+    ><g
+      ><path
+        d="M428,41.534H30c-16.569,0-30,13.431-30,30v252c0,16.568,13.432,30,30,30h132.1l43.942,52.243 c5.7,6.777,14.103,10.69,22.959,10.69c8.856,0,17.258-3.912,22.959-10.69l43.942-52.243H428c16.568,0,30-13.432,30-30v-252 C458,54.965,444.568,41.534,428,41.534z M323.916,281.534H82.854c-8.284,0-15-6.716-15-15s6.716-15,15-15h241.062 c8.284,0,15,6.716,15,15S332.2,281.534,323.916,281.534z M67.854,198.755c0-8.284,6.716-15,15-15h185.103c8.284,0,15,6.716,15,15 s-6.716,15-15,15H82.854C74.57,213.755,67.854,207.039,67.854,198.755z M375.146,145.974H82.854c-8.284,0-15-6.716-15-15 s6.716-15,15-15h292.291c8.284,0,15,6.716,15,15C390.146,139.258,383.43,145.974,375.146,145.974z"
+      /></g
+    ></g
+  ><g /><g /><g /><g /><g /><g /><g /><g /><g /><g /><g /><g /><g /><g /><g
+  /></svg
+>