@fullsession.io/fs-feedback-widget 1.16.0 → 1.18.0
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.
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/App.svelte +117 -34
- package/src/widgetPages/reactionPage.svelte +156 -98
- package/src/widgetPages/reactionpage.css +106 -2
package/package.json
CHANGED
package/src/App.svelte
CHANGED
|
@@ -18,7 +18,11 @@
|
|
|
18
18
|
$: widgetThanksComponentActivation = feedback.wgThanksMsgActivation;
|
|
19
19
|
$: widgetThanksMsg = feedback.wgThanksMsg;
|
|
20
20
|
$: WidgetTriggers = feedback.wgTriggers;
|
|
21
|
-
$:
|
|
21
|
+
$: widgetFontColor = feedback.wgFontColor || '#1513a0';
|
|
22
|
+
$: if (widgetContainerRef) {
|
|
23
|
+
widgetContainerRef.style.setProperty("--widgetColor", widgetColor);
|
|
24
|
+
widgetContainerRef.style.setProperty("--widgetFontColor", widgetFontColor);
|
|
25
|
+
}
|
|
22
26
|
$: transition = widgetDisplayMode === 1 ? scale : fly;
|
|
23
27
|
|
|
24
28
|
let widgetTextColor = "";
|
|
@@ -40,10 +44,12 @@
|
|
|
40
44
|
iconColor = "black";
|
|
41
45
|
}
|
|
42
46
|
|
|
43
|
-
$:
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
+
$: if (widgetContainerRef) {
|
|
48
|
+
widgetContainerRef.style.setProperty(
|
|
49
|
+
"--widgetTextColor",
|
|
50
|
+
widgetTextColor,
|
|
51
|
+
);
|
|
52
|
+
}
|
|
47
53
|
|
|
48
54
|
let wgPositionHorizintal = "";
|
|
49
55
|
let wgPositionVertical = "";
|
|
@@ -57,12 +63,35 @@
|
|
|
57
63
|
let inTransitionX = 0;
|
|
58
64
|
let outTransitionX = 0;
|
|
59
65
|
let positionState = "";
|
|
66
|
+
let thanksContainerRef;
|
|
67
|
+
let justOpenedThanks = false;
|
|
68
|
+
let widgetContainerRef; // reference to the widget container for scoped CSS variables
|
|
60
69
|
|
|
61
70
|
onMount(() => {
|
|
71
|
+
// Dispatch initial closed state
|
|
72
|
+
dispatchScreenEvent("closed");
|
|
73
|
+
|
|
62
74
|
if (widgetDisplayMode === 1 && WidgetTriggers.type !== 0) {
|
|
63
75
|
buttonVisible = false;
|
|
64
76
|
visible = true;
|
|
77
|
+
dispatchScreenEvent("initial");
|
|
65
78
|
}
|
|
79
|
+
|
|
80
|
+
// Add document click listener for side mode
|
|
81
|
+
const handleDocumentClick = (event) => {
|
|
82
|
+
if (thanksMessageVisible && widgetDisplayMode !== 1 && thanksContainerRef && !justOpenedThanks) {
|
|
83
|
+
// Check if click is outside the thanks message container
|
|
84
|
+
if (!thanksContainerRef.contains(event.target)) {
|
|
85
|
+
closeThanksMessage();
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
document.addEventListener('click', handleDocumentClick);
|
|
91
|
+
|
|
92
|
+
return () => {
|
|
93
|
+
document.removeEventListener('click', handleDocumentClick);
|
|
94
|
+
};
|
|
66
95
|
});
|
|
67
96
|
|
|
68
97
|
if (widgetPosition == "fixed") {
|
|
@@ -70,10 +99,12 @@
|
|
|
70
99
|
} else {
|
|
71
100
|
positionState = "absolute";
|
|
72
101
|
}
|
|
73
|
-
$:
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
102
|
+
$: if (widgetContainerRef) {
|
|
103
|
+
widgetContainerRef.style.setProperty(
|
|
104
|
+
"--positionState",
|
|
105
|
+
positionState,
|
|
106
|
+
);
|
|
107
|
+
}
|
|
77
108
|
$: if (Number(wgPosition) == 0) {
|
|
78
109
|
wgPositionHorizintal = "center";
|
|
79
110
|
wgPositionVertical = "row-reverse";
|
|
@@ -110,30 +141,32 @@
|
|
|
110
141
|
inTransitionX = 100;
|
|
111
142
|
outTransitionX = -20;
|
|
112
143
|
}
|
|
113
|
-
$:
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
144
|
+
$: if (widgetContainerRef) {
|
|
145
|
+
widgetContainerRef.style.setProperty(
|
|
146
|
+
"--wgPositionHorizintal",
|
|
147
|
+
wgPositionHorizintal,
|
|
148
|
+
);
|
|
149
|
+
widgetContainerRef.style.setProperty(
|
|
150
|
+
"--wgPositionVertical",
|
|
151
|
+
wgPositionVertical,
|
|
152
|
+
);
|
|
153
|
+
widgetContainerRef.style.setProperty(
|
|
154
|
+
"--widgetLeftSideBorder",
|
|
155
|
+
widgetLeftSideBorder + "px",
|
|
156
|
+
);
|
|
157
|
+
widgetContainerRef.style.setProperty(
|
|
158
|
+
"--widgetRightSideBorder",
|
|
159
|
+
widgetRightSideBorder + "px",
|
|
160
|
+
);
|
|
161
|
+
widgetContainerRef.style.setProperty(
|
|
162
|
+
"--widgetMarginRight",
|
|
163
|
+
widgetMarginRight + "px",
|
|
164
|
+
);
|
|
165
|
+
widgetContainerRef.style.setProperty(
|
|
166
|
+
"--widgetMarginLeft",
|
|
167
|
+
widgetMarginLeft + "px",
|
|
168
|
+
);
|
|
169
|
+
}
|
|
137
170
|
|
|
138
171
|
$: transitionInParams =
|
|
139
172
|
widgetDisplayMode === 1
|
|
@@ -148,6 +181,33 @@
|
|
|
148
181
|
let emailx = "";
|
|
149
182
|
let commentx = "";
|
|
150
183
|
let reactionTypex = "";
|
|
184
|
+
let currentWidgetComponent = 1;
|
|
185
|
+
|
|
186
|
+
// Dispatch screen change event
|
|
187
|
+
const dispatchScreenEvent = (screenType) => {
|
|
188
|
+
let screenEvent = new CustomEvent("fbEventScreenType", {
|
|
189
|
+
bubbles: false,
|
|
190
|
+
detail: {
|
|
191
|
+
id: widgetId,
|
|
192
|
+
screen: screenType,
|
|
193
|
+
},
|
|
194
|
+
});
|
|
195
|
+
window.dispatchEvent(screenEvent);
|
|
196
|
+
};
|
|
197
|
+
|
|
198
|
+
// Watch widgetComponent changes and dispatch appropriate screen events
|
|
199
|
+
$: if (visible && currentWidgetComponent) {
|
|
200
|
+
let screenType = "initial";
|
|
201
|
+
if (currentWidgetComponent === 1) {
|
|
202
|
+
screenType = "initial";
|
|
203
|
+
} else if (currentWidgetComponent === 2) {
|
|
204
|
+
screenType = "comment";
|
|
205
|
+
} else if (currentWidgetComponent === 3) {
|
|
206
|
+
screenType = "email";
|
|
207
|
+
}
|
|
208
|
+
dispatchScreenEvent(screenType);
|
|
209
|
+
}
|
|
210
|
+
|
|
151
211
|
const closeOne = (email, comment, reactionType, questionAnswer) => {
|
|
152
212
|
let widgetResponse;
|
|
153
213
|
if (widgetType === 0) {
|
|
@@ -208,9 +268,16 @@
|
|
|
208
268
|
visible = !visible;
|
|
209
269
|
if (widgetThanksComponentActivation) {
|
|
210
270
|
thanksMessageVisible = !thanksMessageVisible;
|
|
271
|
+
dispatchScreenEvent("thanks");
|
|
272
|
+
// Prevent immediate closing from document click listener
|
|
273
|
+
justOpenedThanks = true;
|
|
274
|
+
setTimeout(() => {
|
|
275
|
+
justOpenedThanks = false;
|
|
276
|
+
}, 100);
|
|
211
277
|
} else {
|
|
212
278
|
setTimeout(function () {
|
|
213
279
|
buttonVisible = !buttonVisible;
|
|
280
|
+
dispatchScreenEvent("closed");
|
|
214
281
|
}, 350);
|
|
215
282
|
}
|
|
216
283
|
};
|
|
@@ -219,6 +286,7 @@
|
|
|
219
286
|
thanksMessageVisible = !thanksMessageVisible;
|
|
220
287
|
setTimeout(function () {
|
|
221
288
|
buttonVisible = !buttonVisible;
|
|
289
|
+
dispatchScreenEvent("closed");
|
|
222
290
|
}, 350);
|
|
223
291
|
|
|
224
292
|
let doneEvent = new CustomEvent("fbEventDone", {
|
|
@@ -243,13 +311,26 @@
|
|
|
243
311
|
visible = !visible;
|
|
244
312
|
setTimeout(function () {
|
|
245
313
|
buttonVisible = !buttonVisible;
|
|
314
|
+
dispatchScreenEvent("closed");
|
|
246
315
|
}, 350);
|
|
247
316
|
};
|
|
317
|
+
|
|
318
|
+
const handleBackgroundClick = (event) => {
|
|
319
|
+
// Only handle if clicking on the background (not the widget itself)
|
|
320
|
+
if (event.target === event.currentTarget) {
|
|
321
|
+
if (thanksMessageVisible) {
|
|
322
|
+
// Close thank you message and dispatch done event
|
|
323
|
+
closeThanksMessage();
|
|
324
|
+
}
|
|
325
|
+
}
|
|
326
|
+
};
|
|
248
327
|
</script>
|
|
249
328
|
|
|
250
329
|
<fsContainer
|
|
330
|
+
bind:this={widgetContainerRef}
|
|
251
331
|
class={!buttonVisible && widgetDisplayMode == 1 ? "fs-feedback-modal" : "fs-side"}
|
|
252
332
|
dir="ltr"
|
|
333
|
+
on:click={handleBackgroundClick}
|
|
253
334
|
>
|
|
254
335
|
{#if buttonVisible}
|
|
255
336
|
<div class="fsWidget" on:click={openWidget}>
|
|
@@ -274,11 +355,13 @@
|
|
|
274
355
|
closeHandler={closeOne}
|
|
275
356
|
bind:feedbackData={feedback}
|
|
276
357
|
bind:wgType={widgetType}
|
|
358
|
+
bind:widgetComponent={currentWidgetComponent}
|
|
359
|
+
bind:containerRef={widgetContainerRef}
|
|
277
360
|
/>
|
|
278
361
|
</div>
|
|
279
362
|
{/if}
|
|
280
363
|
{#if thanksMessageVisible}
|
|
281
|
-
<div class="fsThanksMessageCont" out:transition={transitionOutParams}>
|
|
364
|
+
<div class="fsThanksMessageCont" out:transition={transitionOutParams} on:click|stopPropagation bind:this={thanksContainerRef}>
|
|
282
365
|
<div class="fsCloseCont" on:click={closeThanksMessage}>
|
|
283
366
|
<p id="fsCloseIcon">X</p>
|
|
284
367
|
</div>
|
|
@@ -5,7 +5,8 @@
|
|
|
5
5
|
|
|
6
6
|
export let feedbackData;
|
|
7
7
|
export let wgType;
|
|
8
|
-
|
|
8
|
+
export let widgetComponent = 1;
|
|
9
|
+
export let containerRef = null; // Container reference for scoped CSS variables
|
|
9
10
|
let reactionNames = ["hate", "dislike", "neutral", "like", "love"];
|
|
10
11
|
let changingReactionNames = reactionNames;
|
|
11
12
|
let reactionType = "";
|
|
@@ -26,33 +27,39 @@
|
|
|
26
27
|
$: widgetEmailReqMsg = feedbackData.wgEmailReqMsg;
|
|
27
28
|
$: widgetPlaceholder = feedbackData.wgFeedbackPlaceholder;
|
|
28
29
|
$: widgetEmotIconType = feedbackData.wgReactionStyle;
|
|
30
|
+
$: widgetFontColor = feedbackData.wgFontColor || '#1513a0';
|
|
29
31
|
|
|
30
32
|
// Set CSS custom properties only once on mount, then update individually as needed
|
|
31
33
|
// This avoids triggering multiple style recalculations on every reactive update
|
|
32
34
|
onMount(() => {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
35
|
+
if (containerRef) {
|
|
36
|
+
containerRef.style.setProperty("--pointerMargin", pointerMargin + "%");
|
|
37
|
+
containerRef.style.setProperty("--hateDisplay", hateDisplay);
|
|
38
|
+
containerRef.style.setProperty("--dislikeDisplay", dislikeDisplay);
|
|
39
|
+
containerRef.style.setProperty("--neutralDisplay", neutralDisplay);
|
|
40
|
+
containerRef.style.setProperty("--likeDisplay", likeDisplay);
|
|
41
|
+
containerRef.style.setProperty("--loveDisplay", loveDisplay);
|
|
42
|
+
containerRef.style.setProperty("--buttonColor", buttonColor);
|
|
43
|
+
containerRef.style.setProperty("--widgetFontColor", widgetFontColor);
|
|
44
|
+
}
|
|
41
45
|
});
|
|
42
46
|
|
|
43
47
|
// Update CSS properties only when specific values change
|
|
44
|
-
$: if (typeof window !== 'undefined') {
|
|
45
|
-
|
|
48
|
+
$: if (typeof window !== 'undefined' && containerRef) {
|
|
49
|
+
containerRef.style.setProperty("--pointerMargin", pointerMargin + "%");
|
|
50
|
+
}
|
|
51
|
+
$: if (typeof window !== 'undefined' && containerRef) {
|
|
52
|
+
containerRef.style.setProperty("--hateDisplay", hateDisplay);
|
|
53
|
+
containerRef.style.setProperty("--dislikeDisplay", dislikeDisplay);
|
|
54
|
+
containerRef.style.setProperty("--neutralDisplay", neutralDisplay);
|
|
55
|
+
containerRef.style.setProperty("--likeDisplay", likeDisplay);
|
|
56
|
+
containerRef.style.setProperty("--loveDisplay", loveDisplay);
|
|
46
57
|
}
|
|
47
|
-
$: if (typeof window !== 'undefined') {
|
|
48
|
-
|
|
49
|
-
document.documentElement.style.setProperty("--dislikeDisplay", dislikeDisplay);
|
|
50
|
-
document.documentElement.style.setProperty("--neutralDisplay", neutralDisplay);
|
|
51
|
-
document.documentElement.style.setProperty("--likeDisplay", likeDisplay);
|
|
52
|
-
document.documentElement.style.setProperty("--loveDisplay", loveDisplay);
|
|
58
|
+
$: if (typeof window !== 'undefined' && containerRef) {
|
|
59
|
+
containerRef.style.setProperty("--buttonColor", buttonColor);
|
|
53
60
|
}
|
|
54
|
-
$: if (typeof window !== 'undefined') {
|
|
55
|
-
|
|
61
|
+
$: if (typeof window !== 'undefined' && containerRef) {
|
|
62
|
+
containerRef.style.setProperty("--widgetFontColor", widgetFontColor);
|
|
56
63
|
}
|
|
57
64
|
|
|
58
65
|
let count = 0;
|
|
@@ -226,48 +233,75 @@
|
|
|
226
233
|
<div id="fsTxt">{widgetQuestion}</div>
|
|
227
234
|
{#if wgType === 0}
|
|
228
235
|
<div class="fsReactionsContainer">
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
236
|
+
{#if widgetEmotIconType == 3}
|
|
237
|
+
<!-- Number-based reactions -->
|
|
238
|
+
<div class="fsReactionNumbersContainer">
|
|
239
|
+
<div class="fsReactionNumbersCont">
|
|
240
|
+
<div class="fsReactionNumberBox" on:click={() => openComment(2, 1, "hate")}>
|
|
241
|
+
<div class="fsReactionNumber">1</div>
|
|
242
|
+
</div>
|
|
243
|
+
<div class="fsReactionNumberBox" on:click={() => openComment(2, 2, "dislike")}>
|
|
244
|
+
<div class="fsReactionNumber">2</div>
|
|
245
|
+
</div>
|
|
246
|
+
<div class="fsReactionNumberBox" on:click={() => openComment(2, 3, "neutral")}>
|
|
247
|
+
<div class="fsReactionNumber">3</div>
|
|
248
|
+
</div>
|
|
249
|
+
<div class="fsReactionNumberBox" on:click={() => openComment(2, 4, "like")}>
|
|
250
|
+
<div class="fsReactionNumber">4</div>
|
|
251
|
+
</div>
|
|
252
|
+
<div class="fsReactionNumberBox" on:click={() => openComment(2, 5, "love")}>
|
|
253
|
+
<div class="fsReactionNumber">5</div>
|
|
254
|
+
</div>
|
|
255
|
+
</div>
|
|
256
|
+
<div class="fsReactionNumbersFooter">
|
|
257
|
+
<div class="fsReactionNumbersText">Hate</div>
|
|
258
|
+
<div class="fsReactionNumbersText">Love</div>
|
|
233
259
|
</div>
|
|
234
|
-
|
|
235
|
-
<p class="fsReactionText" class:fs-icons3-text-2={widgetEmotIconType === "2"}>Hate</p>
|
|
236
260
|
</div>
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
on:click={() => openComment(2,
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
261
|
+
{:else}
|
|
262
|
+
<!-- Icon-based reactions -->
|
|
263
|
+
<div class="fsIcons">
|
|
264
|
+
<div class="fsIconTextCont" on:click={() => openComment(2, 1, "hate")}>
|
|
265
|
+
<div class="fsReactionIcon">
|
|
266
|
+
<Icons bind:name={changingReactionNames[0]} bind:emotIconType={widgetEmotIconType} />
|
|
267
|
+
</div>
|
|
268
|
+
<p class="fsReactionText" class:fs-icons3-text-2={widgetEmotIconType == 2}>Hate</p>
|
|
244
269
|
</div>
|
|
245
270
|
|
|
246
|
-
<
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
271
|
+
<div
|
|
272
|
+
class="fsIconTextCont"
|
|
273
|
+
on:click={() => openComment(2, 2, "dislike")}
|
|
274
|
+
>
|
|
275
|
+
<div class="fsReactionIcon">
|
|
276
|
+
<Icons bind:name={changingReactionNames[1]} bind:emotIconType={widgetEmotIconType} />
|
|
277
|
+
</div>
|
|
278
|
+
|
|
279
|
+
<p class="fsReactionText" class:fs-icons3-text={widgetEmotIconType == 2}>Dislike</p>
|
|
254
280
|
</div>
|
|
281
|
+
<div
|
|
282
|
+
class="fsIconTextCont"
|
|
283
|
+
on:click={() => openComment(2, 3, "neutral")}
|
|
284
|
+
>
|
|
285
|
+
<div class="fsReactionIcon">
|
|
286
|
+
<Icons bind:name={changingReactionNames[2]} bind:emotIconType={widgetEmotIconType} />
|
|
287
|
+
</div>
|
|
255
288
|
|
|
256
|
-
|
|
257
|
-
</div>
|
|
258
|
-
<div class="fsIconTextCont" on:click={() => openComment(2, 4, "like")}>
|
|
259
|
-
<div class="fsReactionIcon">
|
|
260
|
-
<Icons bind:name={changingReactionNames[3]} bind:emotIconType={widgetEmotIconType} />
|
|
289
|
+
<p class="fsReactionText">Neutral</p>
|
|
261
290
|
</div>
|
|
262
|
-
<
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
<
|
|
291
|
+
<div class="fsIconTextCont" on:click={() => openComment(2, 4, "like")}>
|
|
292
|
+
<div class="fsReactionIcon">
|
|
293
|
+
<Icons bind:name={changingReactionNames[3]} bind:emotIconType={widgetEmotIconType} />
|
|
294
|
+
</div>
|
|
295
|
+
<p class="fsReactionText" class:fs-icons3-text={widgetEmotIconType == 2}>Like</p>
|
|
296
|
+
</div>
|
|
297
|
+
<div class="fsIconTextCont" on:click={() => openComment(2, 5, "love")}>
|
|
298
|
+
<div class="fsReactionIcon">
|
|
299
|
+
<Icons bind:name={changingReactionNames[4]} bind:emotIconType={widgetEmotIconType} />
|
|
300
|
+
</div>
|
|
301
|
+
<p class="fsReactionText" class:fs-icons3-text-2={widgetEmotIconType == 2}>Love</p>
|
|
267
302
|
</div>
|
|
268
|
-
<p class="fsReactionText" class:fs-icons3-text-2={widgetEmotIconType === "2"}>Love</p>
|
|
269
303
|
</div>
|
|
270
|
-
|
|
304
|
+
{/if}
|
|
271
305
|
</div>
|
|
272
306
|
{:else if wgType === 1}
|
|
273
307
|
<div class="fsQuestionContainer">
|
|
@@ -313,62 +347,86 @@
|
|
|
313
347
|
{/if}
|
|
314
348
|
{:else if widgetComponent === 2 && wgType === 0}
|
|
315
349
|
<div class="fsCommentContainer">
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
{
|
|
350
|
+
{#if widgetEmotIconType == 3}
|
|
351
|
+
<!-- Number-based reactions -->
|
|
352
|
+
<div class="fsReactionNumbersContainer fsReactionNumbersContainer-qa-view">
|
|
353
|
+
<div class="fsReactionNumbersCont">
|
|
354
|
+
<div class="fsReactionNumberBox" on:click={() => openComment(2, 1, "hate")}>
|
|
355
|
+
<div class="fsReactionNumber">1</div>
|
|
356
|
+
</div>
|
|
357
|
+
<div class="fsReactionNumberBox" on:click={() => openComment(2, 2, "dislike")}>
|
|
358
|
+
<div class="fsReactionNumber">2</div>
|
|
359
|
+
</div>
|
|
360
|
+
<div class="fsReactionNumberBox" on:click={() => openComment(2, 3, "neutral")}>
|
|
361
|
+
<div class="fsReactionNumber">3</div>
|
|
362
|
+
</div>
|
|
363
|
+
<div class="fsReactionNumberBox" on:click={() => openComment(2, 4, "like")}>
|
|
364
|
+
<div class="fsReactionNumber">4</div>
|
|
365
|
+
</div>
|
|
366
|
+
<div class="fsReactionNumberBox" on:click={() => openComment(2, 5, "love")}>
|
|
367
|
+
<div class="fsReactionNumber">5</div>
|
|
368
|
+
</div>
|
|
324
369
|
</div>
|
|
325
|
-
|
|
326
|
-
<p class="fsReactionText" id="fsHateDiv" class:fs-icons3-text-2={widgetEmotIconType === "2"}>Hate</p>
|
|
327
370
|
</div>
|
|
371
|
+
{:else}
|
|
372
|
+
<!-- Icon-based reactions -->
|
|
373
|
+
<div class="fsIcons-second">
|
|
374
|
+
<div class="fsIconTextCont" on:click={() => openComment(2, 1, "hate")}>
|
|
375
|
+
<div class="fsReactionIcon">
|
|
376
|
+
{#if reactionState}
|
|
377
|
+
<Icons bind:name={changingReactionNames[0]} bind:emotIconType={widgetEmotIconType} />
|
|
378
|
+
{:else if reactionState == false}
|
|
379
|
+
<Icons bind:name={changingReactionNames[0]} bind:emotIconType={widgetEmotIconType} />
|
|
380
|
+
{/if}
|
|
381
|
+
</div>
|
|
328
382
|
|
|
329
|
-
|
|
330
|
-
<div class="fsReactionIcon">
|
|
331
|
-
{#if reactionState}
|
|
332
|
-
<Icons bind:name={changingReactionNames[1]} bind:emotIconType={widgetEmotIconType} />
|
|
333
|
-
{:else if reactionState == false}
|
|
334
|
-
<Icons bind:name={changingReactionNames[1]} bind:emotIconType={widgetEmotIconType} />
|
|
335
|
-
{/if}
|
|
383
|
+
<p class="fsReactionText" id="fsHateDiv" class:fs-icons3-text-2={widgetEmotIconType == 2}>Hate</p>
|
|
336
384
|
</div>
|
|
337
385
|
|
|
338
|
-
<
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
386
|
+
<div class="fsIconTextCont" on:click={() => openComment(2, 2, "dislike")}>
|
|
387
|
+
<div class="fsReactionIcon">
|
|
388
|
+
{#if reactionState}
|
|
389
|
+
<Icons bind:name={changingReactionNames[1]} bind:emotIconType={widgetEmotIconType} />
|
|
390
|
+
{:else if reactionState == false}
|
|
391
|
+
<Icons bind:name={changingReactionNames[1]} bind:emotIconType={widgetEmotIconType} />
|
|
392
|
+
{/if}
|
|
393
|
+
</div>
|
|
394
|
+
|
|
395
|
+
<p class="fsReactionText" id="fsDislikeDiv" class:fs-icons3-text={widgetEmotIconType == 2}>Dislike</p>
|
|
347
396
|
</div>
|
|
397
|
+
<div class="fsIconTextCont" on:click={() => openComment(2, 3, "neutral")}>
|
|
398
|
+
<div class="fsReactionIcon">
|
|
399
|
+
{#if reactionState}
|
|
400
|
+
<Icons bind:name={changingReactionNames[2]} bind:emotIconType={widgetEmotIconType} />
|
|
401
|
+
{:else if reactionState == false}
|
|
402
|
+
<Icons bind:name={changingReactionNames[2]} bind:emotIconType={widgetEmotIconType} />
|
|
403
|
+
{/if}
|
|
404
|
+
</div>
|
|
348
405
|
|
|
349
|
-
|
|
350
|
-
</div>
|
|
351
|
-
<div class="fsIconTextCont" on:click={() => openComment(2, 4, "like")}>
|
|
352
|
-
<div class="fsReactionIcon">
|
|
353
|
-
{#if reactionState}
|
|
354
|
-
<Icons bind:name={changingReactionNames[3]} bind:emotIconType={widgetEmotIconType} />
|
|
355
|
-
{:else if reactionState == false}
|
|
356
|
-
<Icons bind:name={changingReactionNames[3]} bind:emotIconType={widgetEmotIconType} />
|
|
357
|
-
{/if}
|
|
406
|
+
<p class="fsReactionText" id="fsNeutralDiv">Neutral</p>
|
|
358
407
|
</div>
|
|
359
|
-
<
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
{
|
|
408
|
+
<div class="fsIconTextCont" on:click={() => openComment(2, 4, "like")}>
|
|
409
|
+
<div class="fsReactionIcon">
|
|
410
|
+
{#if reactionState}
|
|
411
|
+
<Icons bind:name={changingReactionNames[3]} bind:emotIconType={widgetEmotIconType} />
|
|
412
|
+
{:else if reactionState == false}
|
|
413
|
+
<Icons bind:name={changingReactionNames[3]} bind:emotIconType={widgetEmotIconType} />
|
|
414
|
+
{/if}
|
|
415
|
+
</div>
|
|
416
|
+
<p class="fsReactionText" id="fsLikeDiv" class:fs-icons3-text={widgetEmotIconType == 2}>Like</p>
|
|
417
|
+
</div>
|
|
418
|
+
<div class="fsIconTextCont">
|
|
419
|
+
<div class="fsReactionIcon" on:click={() => openComment(2, 5, "love")}>
|
|
420
|
+
{#if reactionState}
|
|
421
|
+
<Icons bind:name={changingReactionNames[4]} bind:emotIconType={widgetEmotIconType} />
|
|
422
|
+
{:else if reactionState == false}
|
|
423
|
+
<Icons bind:name={changingReactionNames[4]} bind:emotIconType={widgetEmotIconType} />
|
|
424
|
+
{/if}
|
|
425
|
+
</div>
|
|
426
|
+
<p class="fsReactionText" id="fsLoveDiv" class:fs-icons3-text-2={widgetEmotIconType == 2}>Love</p>
|
|
368
427
|
</div>
|
|
369
|
-
<p class="fsReactionText" id="fsLoveDiv" class:fs-icons3-text-2={widgetEmotIconType === "2"}>Love</p>
|
|
370
428
|
</div>
|
|
371
|
-
|
|
429
|
+
{/if}
|
|
372
430
|
|
|
373
431
|
<div class={wgType === 0 ? "fsTextAreaCont" : "fsTextAreaCont-qa-view"}>
|
|
374
432
|
<div class="fsPointerDiv" id="fsPointer" />
|