@fullsession.io/fs-feedback-widget 1.7.2 → 1.7.4

package/package.json

@@ -1,32 +1,32 @@
-{
-  "name": "@fullsession.io/fs-feedback-widget",
-  "version": "1.7.2",
-  "scripts": {
-    "build": "rollup -c",
-    "dev": "rollup -c -w",
-    "start": "sirv public --no-clear",
-    "prepublish": "npm run build",
-    "prepublishOnly": "npm run build"
-  },
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^17.0.0",
-    "@rollup/plugin-node-resolve": "^11.0.0",
-    "rollup": "^2.3.4",
-    "rollup-plugin-css-only": "^3.1.0",
-    "rollup-plugin-livereload": "^2.0.0",
-    "rollup-plugin-svelte": "^7.0.0",
-    "rollup-plugin-terser": "^7.0.0",
-    "svelte": "^3.0.0"
-  },
-  "dependencies": {
-    "rollup-plugin-postcss": "^4.0.2",
-    "sirv-cli": "^2.0.2"
-  },
-  "files": [
-    "src",
-    "dist"
-  ],
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "unpkg": "dist/index.js"
+{
+  "name": "@fullsession.io/fs-feedback-widget",
+  "version": "1.7.4",
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "start": "sirv public --no-clear",
+    "prepublish": "npm run build",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^17.0.0",
+    "@rollup/plugin-node-resolve": "^11.0.0",
+    "rollup": "^2.3.4",
+    "rollup-plugin-css-only": "^3.1.0",
+    "rollup-plugin-livereload": "^2.0.0",
+    "rollup-plugin-svelte": "^7.0.0",
+    "rollup-plugin-terser": "^7.0.0",
+    "svelte": "^3.0.0"
+  },
+  "dependencies": {
+    "rollup-plugin-postcss": "^4.0.2",
+    "sirv-cli": "^2.0.2"
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "unpkg": "dist/index.js"
 }

package/src/App.svelte

@@ -1,246 +1,247 @@
-<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;
-  $: widgetDisplayMode = feedback.wgDisplayMode;
-  $: widgetType = feedback.wgType;
-  $: widgetLanguage = feedback.wgLanguage;
-  $: widgetAlternateColor = feedback.wgAlternateColor;
-  $: wgPosition = feedback.wgPosition;
-  $: widgetThanksMsg = feedback.wgThanksMsg;
-  $: document.documentElement.style.setProperty("--widgetColor", widgetColor);
-
-  let widgetTextColor = "";
-  let iconColor = "";
-  let widgetName = "Feedback";
-  $: if (widgetLanguage == "en") {
-    widgetName = "  Feedback";
-  } else if (widgetLanguage == "ar") {
-    widgetName = "رأي";
-  } else {
-    widgetName = "Rétroaction";
-  }
-
-  $: if (widgetAlternateColor === 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(wgPosition) == 0) {
-    wgPositionHorizintal = "center";
-    wgPositionVertical = "row-reverse";
-    widgetLeftSideBorder = 5;
-    widgetRightSideBorder = 0;
-    widgetMarginRight = 30;
-    widgetMarginLeft = 0;
-    inTransitionX = -100;
-    outTransitionX = 20;
-  } else if (Number(wgPosition) == 1) {
-    wgPositionHorizintal = "center";
-    wgPositionVertical = "row";
-    widgetLeftSideBorder = 0;
-    widgetRightSideBorder = 5;
-    widgetMarginRight = 0;
-    widgetMarginLeft = 30;
-    inTransitionX = 100;
-    outTransitionX = -20;
-  } else if (Number(wgPosition) == 2) {
-    wgPositionHorizintal = "flex-end";
-    wgPositionVertical = "row-reverse";
-    widgetLeftSideBorder = 5;
-    widgetMarginRight = 30;
-    widgetMarginLeft = 0;
-    inTransitionX = -100;
-    outTransitionX = 20;
-  } else if (Number(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, questionAnswer) => {
-    let widgetResponse;
-    if (widgetType === 0) {
-      widgetResponse = {
-        email: email,
-        comment: comment,
-        reaction: Number(reactionType),
-        type: widgetType,
-      };
-    } else {
-      widgetResponse = {
-        email: email,
-        questionAnswer: questionAnswer,
-        type: widgetType,
-      };
-    }
-
-      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
-  class={!buttonVisible && widgetDisplayMode == 1 ? "modal" : "side"}
-  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"
-      class:fsContModal={widgetDisplayMode === 1}
-      in:fly={{ x: inTransitionX, duration: 500 }}
-    >
-      <div class="fsCloseCont" on:click={closeWidget}>
-        <p id="fsCloseIcon">X</p>
-      </div>
-      <ReactionPage
-        closeHandler={closeOne}
-        bind:feedbackData={feedback}
-        bind:wgType={widgetType}
-      />
-    </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 class="thanks-txt">
-        {widgetThanksMsg}
-      </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;
+  $: widgetDisplayMode = feedback.wgDisplayMode;
+  $: widgetType = feedback.wgType;
+  $: widgetLanguage = feedback.wgLanguage;
+  $: widgetAlternateColor = feedback.wgAlternateColor;
+  $: wgPosition = feedback.wgPosition;
+  $: widgetThanksMsg = feedback.wgThanksMsg;
+  $: document.documentElement.style.setProperty("--widgetColor", widgetColor);
+
+  let widgetTextColor = "";
+  let iconColor = "";
+  let widgetName = "Feedback";
+  $: if (widgetLanguage == "en") {
+    widgetName = "  Feedback";
+  } else if (widgetLanguage == "ar") {
+    widgetName = "رأي";
+  } else {
+    widgetName = "Rétroaction";
+  }
+
+  $: if (widgetAlternateColor === 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(wgPosition) == 0) {
+    wgPositionHorizintal = "center";
+    wgPositionVertical = "row-reverse";
+    widgetLeftSideBorder = 5;
+    widgetRightSideBorder = 0;
+    widgetMarginRight = 30;
+    widgetMarginLeft = 0;
+    inTransitionX = -100;
+    outTransitionX = 20;
+  } else if (Number(wgPosition) == 1) {
+    wgPositionHorizintal = "center";
+    wgPositionVertical = "row";
+    widgetLeftSideBorder = 0;
+    widgetRightSideBorder = 5;
+    widgetMarginRight = 0;
+    widgetMarginLeft = 30;
+    inTransitionX = 100;
+    outTransitionX = -20;
+  } else if (Number(wgPosition) == 2) {
+    wgPositionHorizintal = "flex-end";
+    wgPositionVertical = "row-reverse";
+    widgetLeftSideBorder = 5;
+    widgetMarginRight = 30;
+    widgetMarginLeft = 0;
+    inTransitionX = -100;
+    outTransitionX = 20;
+  } else if (Number(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, questionAnswer) => {
+    let widgetResponse;
+    if (widgetType === 0) {
+      widgetResponse = {
+        email: email,
+        comment: comment,
+        reaction: Number(reactionType),
+        type: widgetType,
+      };
+    } else {
+      widgetResponse = {
+        email: email,
+        questionAnswer: questionAnswer,
+        type: widgetType,
+      };
+    }
+
+      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
+  class={!buttonVisible && widgetDisplayMode == 1 ? "modal" : "side"}
+  style="position: 10px"
+  dir="ltr"
+>
+  {#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"
+      class:fsContModal={widgetDisplayMode === 1}
+      in:fly={{ x: inTransitionX, duration: 500 }}
+    >
+      <div class="fsCloseCont" on:click={closeWidget}>
+        <p id="fsCloseIcon">X</p>
+      </div>
+      <ReactionPage
+        closeHandler={closeOne}
+        bind:feedbackData={feedback}
+        bind:wgType={widgetType}
+      />
+    </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 class="thanks-txt">
+        {widgetThanksMsg}
+      </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
+>