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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/bundle.css +329 -0
  2. package/dist/index.js +1 -1
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.mjs +1 -1
  5. package/dist/index.mjs.map +1 -1
  6. package/dist/publicextra.css +298 -0
  7. package/package.json +1 -1
  8. package/src/App.svelte +140 -114
  9. package/src/main.js +32 -32
  10. package/src/widgetPages/App.css +14 -14
  11. package/src/widgetPages/reactionPage.svelte +93 -76
  12. package/src/widgetPages/reactionpage.css +64 -32
package/src/main.js CHANGED
@@ -11,35 +11,35 @@ export function feedbackCreator(response) {
11
11
  });
12
12
  }
13
13
 
14
- // let widget ={id: 1,
15
- // wgStatus: 1,
16
- // wgName: "ask",
17
- // wgDescription: "test",
18
- // wgCrtDt: "2021-12-05 10:49:14",
19
- // wgResponses: null,
20
- // wgUpdTime: null,
21
- // SiteId: 98,
22
- // UserId: 262,
23
- // wgLanguage: "en",
24
- // wgPosition: "0",
25
- // wgAccentColor: "#51797b",
26
- // wgAlternateColor: true,
27
- // wgQuestion: "How would you rate your experience?" ,
28
- // wgUserScreenshot: 1,
29
- // wgEmailReqMsg: "We may wish to follow up. Enter your email if you're happy for us to contact you." ,
30
- // wgEmailReqActivation: 1,
31
- // wgAdditionalMsg: "Heads up! This is for feedback only. Need help? Contact us via our [link to Help Center].",
32
- // wgAdditionalMsgActivation: 1,
33
- // wgThanksMsg: "Thank you for sharing your feedback with us",
34
- // wgThanksMsgActivation: 1,
35
- // wgDesktop: 1,
36
- // wgPhone: 1,
37
- // wgTablet:1,
38
- // wgPages: [{"id":0,"name":"*"}],
39
- // wgWidgetToUsers: 0,
40
- // wgPercentage:100,
41
- // wgEmail: "abd@gmail.com",
42
- // wgWidgetToAllPages: 1,
43
- // wgReactionStyle: 0,
44
- // wgResponseViaEmail: 1}
45
- // feedbackCreator(widget);
14
+ let widget ={id: 1,
15
+ wgStatus: 1,
16
+ wgName: "ask",
17
+ wgDescription: "test",
18
+ wgCrtDt: "2021-12-05 10:49:14",
19
+ wgResponses: null,
20
+ wgUpdTime: null,
21
+ SiteId: 98,
22
+ UserId: 262,
23
+ wgLanguage: "en",
24
+ wgPosition: "0",
25
+ wgAccentColor: "#51797b",
26
+ wgAlternateColor: true,
27
+ wgQuestion: "How would you rate your experience?" ,
28
+ wgUserScreenshot: 1,
29
+ wgEmailReqMsg: "We may wish to follow up. Enter your email if you're happy for us to contact you." ,
30
+ wgEmailReqActivation: 1,
31
+ wgAdditionalMsg: "Heads up! This is for feedback only. Need help? Contact us via our [link to Help Center].",
32
+ wgAdditionalMsgActivation: 1,
33
+ wgThanksMsg: "Thank you for sharing your feedback with us",
34
+ wgThanksMsgActivation: 1,
35
+ wgDesktop: 1,
36
+ wgPhone: 1,
37
+ wgTablet:1,
38
+ wgPages: [{"id":0,"name":"*"}],
39
+ wgWidgetToUsers: 0,
40
+ wgPercentage:100,
41
+ wgEmail: "abd@gmail.com",
42
+ wgWidgetToAllPages: 1,
43
+ wgReactionStyle: 0,
44
+ wgResponseViaEmail: 1}
45
+ feedbackCreator(widget);
package/src/widgetPages/App.css CHANGED
@@ -1,4 +1,4 @@
1
- container{
1
+ fsContainer{
2
2
  width: 100%;
3
3
  display: flex;
4
4
  flex-direction: var(--wgPositionVertical);
@@ -9,8 +9,9 @@ container{
9
9
  align-items: var(--wgPositionHorizintal);
10
10
  padding: 0;
11
11
  z-index: 100000;
12
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
12
13
  }
13
- .widget {
14
+ .fsWidget {
14
15
  pointer-events: auto;
15
16
  background-color: var(--widgetColor);
16
17
  width: 34px;
@@ -27,12 +28,12 @@ container{
27
28
  cursor: pointer;
28
29
  margin-top: 5px;
29
30
  }
30
- #mainIcon {
31
+ #fsMainIcon {
31
32
  width: 60%;
32
33
  margin-left: 4%;
33
34
  cursor: pointer;
34
35
  }
35
- #feedbackTxt {
36
+ #fsFeedbackTxt {
36
37
  color: var(--widgetTextColor);
37
38
  font-size: 15px;
38
39
  writing-mode: vertical-lr;
@@ -40,12 +41,12 @@ container{
40
41
  cursor: pointer;
41
42
  font-size-adjust: 0.40;
42
43
  }
43
- .widget:hover {
44
+ .fsWidget:hover {
44
45
  width: 35px;
45
46
  -webkit-box-shadow: 0px 0px 35px 2px rgba(0, 0, 0, 0.24);
46
47
  box-shadow: 0px 0px 35px 2px rgba(0, 0, 0, 0.24);
47
48
  }
48
- .cont {
49
+ .fsCont {
49
50
  pointer-events: auto;
50
51
  width: 320px;
51
52
  height: fit-content;
@@ -55,7 +56,7 @@ container{
55
56
  -webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px;
56
57
  box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px;
57
58
  }
58
- .thanksMessageCont{
59
+ .fsThanksMessageCont{
59
60
  pointer-events: auto;
60
61
  width: 320px;
61
62
  height: 104px;
@@ -65,15 +66,14 @@ container{
65
66
  -webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px;
66
67
  box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px;
67
68
  }
68
- #closeIcon{
69
- font-size: 16px;
69
+ #fsCloseIcon{
70
+ font-size: 15px;
70
71
  color: #ffff;
71
72
  font-weight: 600;
72
- font-family: system-ui;
73
- cursor: pointer;
73
+ cursor: pointer;
74
74
 
75
75
  }
76
- .closeCont{
76
+ .fsCloseCont{
77
77
  pointer-events: auto;
78
78
  background-color: #4d5167;
79
79
  width: 27px;
@@ -91,8 +91,8 @@ container{
91
91
 
92
92
 
93
93
 
94
- @media (min-width: 640px) {
94
+ /* @media (min-width: 640px) {
95
95
  body {
96
96
  max-width: none;
97
97
  }
98
- }
98
+ } */
package/src/widgetPages/reactionPage.svelte CHANGED
@@ -3,6 +3,7 @@
3
3
  import Icons from "../Icons/reactionIcons.svelte";
4
4
  import "../widgetPages/reactionpage.css"
5
5
  export let feedbackData;
6
+ console.log("hiiih")
6
7
  $: widgetComponent = 1;
7
8
  let reactionNames = ["hate","dislike","neutral","like","love"];
8
9
  let changingReactionNames = reactionNames;
@@ -37,40 +38,50 @@
37
38
  export let closeHandlerBeforeFinishing = (email,comment,reactionType) => {};
38
39
 
39
40
 
40
- const commentButtonDisable = () =>{
41
+ // const commentButtonDisable = () =>{
41
42
 
42
- let input = document.querySelector(".textArea");
43
+ // let source = document.querySelector(".fsTextArea");
43
44
 
44
- checkTextAreaInterval = setInterval(() => {
45
- console.log(input.value)
46
- if (input.value=== "") {
45
+ // source.addEventListener('propertychange', commentHandler);
46
+
47
+
48
+ // }
49
+ const commentHandler = () => {
50
+ let input = document.querySelector(".fsTextArea");
51
+
52
+ if (input.value=== "") {
47
53
  buttonState = false; //button remains disabled
48
54
  } else {
49
55
  buttonState = true; //button is enabled
50
56
  }
51
- }, 500);
52
-
53
-
54
- }
57
+ comment = "";
58
+ comment = input.value;
59
+ console.log(input.value)
60
+ }
55
61
 
56
- const EmailButtonDisable = () =>{
62
+ // const EmailButtonDisable = () =>{
57
63
 
58
- let input = document.querySelector("#EmailTextArea");
64
+ // let source = document.querySelector("#fsEmailTextArea");
59
65
 
60
- checkEmailAreaInterval = setInterval(() => {
61
- console.log(input.value)
62
- if (!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(input.value)) || input.value ==="") {
66
+ // source.addEventListener('propertychange', emailHandler);
67
+
68
+
69
+ // }
70
+
71
+ const emailHandler = ()=> {
72
+ let input = document.querySelector("#fsEmailTextArea");
73
+
74
+ if (!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(input.value)) || input.value ==="") {
63
75
  buttonState = false; //button remains disabled
64
76
  } else {
65
77
  buttonState = true; //button is enabled
78
+ email = "";
79
+ email = document.getElementById("fsEmailTextArea").value;
66
80
  }
67
- email = "";
68
- email = document.getElementById("EmailTextArea").value;
69
-
70
- }, 500);
71
81
 
72
-
73
- }
82
+
83
+
84
+ }
74
85
 
75
86
 
76
87
  const changeStyle = (prevState) =>{
@@ -134,54 +145,60 @@
134
145
 
135
146
  const openEmailCont = (state) =>{
136
147
  clearInterval(checkTextAreaInterval);
148
+ document.querySelector(".fsTextArea").value="";
137
149
  buttonState = false
138
150
  widgetComponent = state;
139
- comment = document.getElementsByClassName("textArea")[0].value;
151
+
140
152
  }
141
153
 
142
-
154
+ const endEmailInterval =()=> {
155
+ console.log("444")
156
+ clearInterval(checkEmailAreaInterval);
157
+ document.querySelector("#fsEmailTextArea").value="";
158
+
159
+ }
143
160
 
144
161
  </script>
145
162
 
146
163
 
147
164
 
148
165
  {#if widgetComponent === 1}
149
- <div class="container">
150
- <div id="txt">{feedbackData.wgQuestion}</div>
151
- <div class="icons">
152
- <div class="iconTextCont" on:click={() =>openComment(2,1,"hate")}>
153
- <div class="reactionIcon">
166
+ <div class="fsReactionsContainer">
167
+ <div id="fsTxt">{feedbackData.wgQuestion}</div>
168
+ <div class="fsIcons">
169
+ <div class="fsIconTextCont" on:click={() =>openComment(2,1,"hate")}>
170
+ <div class="fsReactionIcon">
154
171
  <Icons bind:name={changingReactionNames[0]}/>
155
172
  </div>
156
173
 
157
- <p class="reactionText">Hate</p>
174
+ <p class="fsReactionText">Hate</p>
158
175
  </div>
159
176
 
160
- <div class="iconTextCont" on:click={() =>openComment(2,2,"dislike")}>
161
- <div class="reactionIcon">
177
+ <div class="fsIconTextCont" on:click={() =>openComment(2,2,"dislike")}>
178
+ <div class="fsReactionIcon">
162
179
  <Icons bind:name={changingReactionNames[1]} />
163
180
  </div>
164
181
 
165
- <p class="reactionText">Dislike</p>
182
+ <p class="fsReactionText">Dislike</p>
166
183
  </div>
167
- <div class="iconTextCont" on:click={() =>openComment(2,3,"neutral")}>
168
- <div class="reactionIcon">
184
+ <div class="fsIconTextCont" on:click={() =>openComment(2,3,"neutral")}>
185
+ <div class="fsReactionIcon">
169
186
  <Icons bind:name={changingReactionNames[2]} />
170
187
  </div>
171
188
 
172
- <p class="reactionText">Neutral</p>
189
+ <p class="fsReactionText">Neutral</p>
173
190
  </div>
174
- <div class="iconTextCont" on:click={() =>openComment(2,4,"like")}>
175
- <div class="reactionIcon">
191
+ <div class="fsIconTextCont" on:click={() =>openComment(2,4,"like")}>
192
+ <div class="fsReactionIcon">
176
193
  <Icons bind:name={changingReactionNames[3]} />
177
194
  </div>
178
- <p class="reactionText">Like</p>
195
+ <p class="fsReactionText">Like</p>
179
196
  </div>
180
- <div class="iconTextCont" on:click={() =>openComment(2,5,"love")}>
181
- <div class="reactionIcon">
197
+ <div class="fsIconTextCont" on:click={() =>openComment(2,5,"love")}>
198
+ <div class="fsReactionIcon">
182
199
  <Icons bind:name={changingReactionNames[4]} />
183
200
  </div>
184
- <p class="reactionText" >Love</p>
201
+ <p class="fsReactionText" >Love</p>
185
202
  </div>
186
203
  </div>
187
204
  <p id ="test"></p>
@@ -189,10 +206,10 @@
189
206
 
190
207
 
191
208
  {:else if widgetComponent === 2}
192
- <div class="commentContainer">
193
- <div class="icons-second">
194
- <div class="iconTextCont" on:click={() =>openComment(2,1,"hate")}>
195
- <div class="reactionIcon">
209
+ <div class="fsCommentContainer">
210
+ <div class="fsIcons-second">
211
+ <div class="fsIconTextCont" on:click={() =>openComment(2,1,"hate")}>
212
+ <div class="fsReactionIcon">
196
213
  {#if reactionState}
197
214
  <Icons bind:name={changingReactionNames[0]}/>
198
215
  {:else if reactionState==false}
@@ -200,11 +217,11 @@
200
217
  {/if}
201
218
  </div>
202
219
 
203
- <p class="reactionText" id="hateDiv">Hate</p>
220
+ <p class="fsReactionText" id="fsHateDiv">Hate</p>
204
221
  </div>
205
222
 
206
- <div class="iconTextCont" on:click={() =>openComment(2,2,"dislike")}>
207
- <div class="reactionIcon">
223
+ <div class="fsIconTextCont" on:click={() =>openComment(2,2,"dislike")}>
224
+ <div class="fsReactionIcon">
208
225
  {#if reactionState}
209
226
  <Icons bind:name={changingReactionNames[1]}/>
210
227
  {:else if reactionState==false}
@@ -212,10 +229,10 @@
212
229
  {/if}
213
230
  </div>
214
231
 
215
- <p class="reactionText" id="dislikeDiv">Dislike</p>
232
+ <p class="fsReactionText" id="fsDislikeDiv">Dislike</p>
216
233
  </div>
217
- <div class="iconTextCont" on:click={() =>openComment(2,3,"neutral")}>
218
- <div class="reactionIcon">
234
+ <div class="fsIconTextCont" on:click={() =>openComment(2,3,"neutral")}>
235
+ <div class="fsReactionIcon">
219
236
  {#if reactionState}
220
237
  <Icons bind:name={changingReactionNames[2]}/>
221
238
  {:else if reactionState==false}
@@ -223,65 +240,65 @@
223
240
  {/if}
224
241
  </div>
225
242
 
226
- <p class="reactionText" id="neutralDiv">Neutral</p>
243
+ <p class="fsReactionText" id="fsNeutralDiv">Neutral</p>
227
244
  </div>
228
- <div class="iconTextCont" on:click={() =>openComment(2,4,"like")}>
229
- <div class="reactionIcon">
245
+ <div class="fsIconTextCont" on:click={() =>openComment(2,4,"like")}>
246
+ <div class="fsReactionIcon">
230
247
  {#if reactionState}
231
248
  <Icons bind:name={changingReactionNames[3]}/>
232
249
  {:else if reactionState==false}
233
250
  <Icons bind:name={changingReactionNames[3]}/>
234
251
  {/if}
235
252
  </div>
236
- <p class="reactionText" id="likeDiv">Like</p>
253
+ <p class="fsReactionText" id="fsLikeDiv">Like</p>
237
254
  </div>
238
- <div class="iconTextCont">
239
- <div class="reactionIcon" on:click={() =>openComment(2,5,"love")}>
255
+ <div class="fsIconTextCont">
256
+ <div class="fsReactionIcon" on:click={() =>openComment(2,5,"love")}>
240
257
  {#if reactionState}
241
258
  <Icons bind:name={changingReactionNames[4]}/>
242
259
  {:else if reactionState==false}
243
260
  <Icons bind:name={changingReactionNames[4]}/>
244
261
  {/if}
245
262
  </div>
246
- <p class="reactionText" id="loveDiv">Love</p>
263
+ <p class="fsReactionText" id="fsLoveDiv">Love</p>
247
264
  </div>
248
265
  </div>
249
266
 
250
- <div class="textAreaCont" >
251
- <div class="pointerDiv" id="pointer" ></div>
252
- <textarea class="textArea" placeholder="Tell us your experience..." on:click={() => commentButtonDisable()}></textarea>
267
+ <div class="fsTextAreaCont" >
268
+ <div class="fsPointerDiv" id="fsPointer" ></div>
269
+ <textarea class="fsTextArea" placeholder="Tell us your experience..." on:keyup={() => commentHandler()}></textarea>
253
270
  </div>
254
271
 
255
- <div class="footer">
272
+ <div class="fsFooter">
256
273
  {#if buttonState == false}
257
- <button class="CommentButtonContDisable" disabled>
258
- <p class="CommentButtonTxtDisable">Send</p>
274
+ <button class="fsCommentButtonContDisable" disabled>
275
+ <p class="fsCommentButtonTxtDisable">Send</p>
259
276
  </button>
260
277
  {:else if buttonState == true}
261
- <button class="sendButtonContCommentComp" on:click={() => openEmailCont(3)} >
262
- <p class="SendButtonCommentComponent">Send</p>
278
+ <button class="fsSendButtonContCommentComp" on:click={() => openEmailCont(3)} >
279
+ <p class="fsSendButtonCommentComponent">Send</p>
263
280
  </button>
264
281
  {/if}
265
282
  </div>
266
283
  </div>
267
284
  {:else if widgetComponent === 3}
268
- <div class="emailContainer">
269
- <div id="emailText">
285
+ <div class="fsEmailContainer">
286
+ <div id="fsEmailText">
270
287
  {feedbackData.wgEmailReqMsg}
271
288
  </div>
272
- <div id="emailInputCont" on:click={() => EmailButtonDisable()}>
273
- <input type="text" id="EmailTextArea" placeholder="email@domain.com">
289
+ <div id="fsEmailInputCont">
290
+ <input type="text" id="fsEmailTextArea" placeholder="email@domain.com" on:keyup={() => emailHandler()}>
274
291
  </div>
275
- <div class="emailFooter">
276
- <p id="skipText" on:click={() => closeHandler(email,comment,reactionType)}><u>Skip</u></p>
292
+ <div class="fsEmailFooter">
293
+ <p id="fsSkipText" on:click={() => closeHandler(email,comment,reactionType)}><u>Skip</u></p>
277
294
  {#if buttonState == false}
278
- <button class="CommentButtonContDisable" disabled>
279
- <p class="CommentButtonTxtDisable">Send</p>
295
+ <button class="fsCommentButtonContDisable" disabled>
296
+ <p class="fsCommentButtonTxtDisable">Send</p>
280
297
  </button>
281
298
  {:else if buttonState == true}
282
- <button class="sendButtonContCommentComp" on:click={() => closeHandler(email,comment,reactionType)}>
283
- <p class="SendButtonCommentComponent" >Send</p>
284
- </button>
299
+ <button class="fsSendButtonContCommentComp" on:click={() => closeHandler(email,comment,reactionType)} on:click={()=>endEmailInterval() }>
300
+ <p class="fsSendButtonCommentComponent" >Send</p>
301
+ </button>
285
302
  {/if}
286
303
 
287
304
  </div>