@fullsession.io/fs-feedback-widget 1.0.1
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/README.md +109 -0
- package/dist/bundle.css +1 -0
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +2 -0
- package/dist/index.mjs.map +1 -0
- package/lib/index.js +2 -0
- package/package.json +31 -0
- package/src/App.svelte +223 -0
- package/src/Icons/mainIcon.svelte +25 -0
- package/src/Icons/reactionIcons.svelte +135 -0
- package/src/main.js +45 -0
- package/src/widgetPages/reactionPage.svelte +466 -0
package/package.json
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@fullsession.io/fs-feedback-widget",
|
|
3
|
+
"version": "1.0.1",
|
|
4
|
+
"scripts": {
|
|
5
|
+
"build": "rollup -c",
|
|
6
|
+
"dev": "rollup -c -w",
|
|
7
|
+
"start": "sirv public --no-clear",
|
|
8
|
+
"prepublish": "npm run build",
|
|
9
|
+
"prepublishOnly": "npm run build"
|
|
10
|
+
},
|
|
11
|
+
"devDependencies": {
|
|
12
|
+
"@rollup/plugin-commonjs": "^17.0.0",
|
|
13
|
+
"@rollup/plugin-node-resolve": "^11.0.0",
|
|
14
|
+
"rollup": "^2.3.4",
|
|
15
|
+
"rollup-plugin-css-only": "^3.1.0",
|
|
16
|
+
"rollup-plugin-livereload": "^2.0.0",
|
|
17
|
+
"rollup-plugin-svelte": "^7.0.0",
|
|
18
|
+
"rollup-plugin-terser": "^7.0.0",
|
|
19
|
+
"svelte": "^3.0.0"
|
|
20
|
+
},
|
|
21
|
+
"dependencies": {
|
|
22
|
+
"sirv-cli": "^2.0.2"
|
|
23
|
+
},
|
|
24
|
+
"files": [
|
|
25
|
+
"src",
|
|
26
|
+
"dist"
|
|
27
|
+
],
|
|
28
|
+
"main": "lib/index.js",
|
|
29
|
+
"module": "dist/index.mjs",
|
|
30
|
+
"unpkg": "dist/index.js"
|
|
31
|
+
}
|
package/src/App.svelte
ADDED
|
@@ -0,0 +1,223 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import MainIcon from "./Icons/mainIcon.svelte";
|
|
3
|
+
import ReactionPage from "./widgetPages/reactionPage.svelte"
|
|
4
|
+
export let feedback;
|
|
5
|
+
import { fly } from "svelte/transition";
|
|
6
|
+
|
|
7
|
+
$:widgetColor = feedback.wgAccentColor;
|
|
8
|
+
$:document.documentElement.style.setProperty('--widgetColor', widgetColor);
|
|
9
|
+
let widgetTextColor="";
|
|
10
|
+
let iconColor = "";
|
|
11
|
+
if(feedback.wgAlternateColor === 1){
|
|
12
|
+
widgetTextColor = "white";
|
|
13
|
+
iconColor = "white"
|
|
14
|
+
} else{
|
|
15
|
+
widgetTextColor = "black";
|
|
16
|
+
iconColor ="black"
|
|
17
|
+
}
|
|
18
|
+
$:document.documentElement.style.setProperty('--widgetTextColor', widgetTextColor);
|
|
19
|
+
|
|
20
|
+
let wgPositionHorizintal="";
|
|
21
|
+
let wgPositionVertical = "";
|
|
22
|
+
let widgetLeftSideBorder=0;
|
|
23
|
+
let widgetRightSideBorder=0;
|
|
24
|
+
let widgetMarginRight = 0;
|
|
25
|
+
let widgetMarginLeft = 0;
|
|
26
|
+
let visible = false;
|
|
27
|
+
let buttonVisible = true;
|
|
28
|
+
let thanksMessageVisible = false;
|
|
29
|
+
|
|
30
|
+
if(feedback.wgPosition == 0){
|
|
31
|
+
wgPositionHorizintal = "center"
|
|
32
|
+
wgPositionVertical = "row-reverse"
|
|
33
|
+
widgetLeftSideBorder =5;
|
|
34
|
+
widgetRightSideBorder=0;
|
|
35
|
+
widgetMarginRight = 30;
|
|
36
|
+
widgetMarginLeft = 0;
|
|
37
|
+
}
|
|
38
|
+
if(feedback.wgPosition == 1){
|
|
39
|
+
wgPositionHorizintal = "center"
|
|
40
|
+
wgPositionVertical = "row"
|
|
41
|
+
widgetLeftSideBorder =0;
|
|
42
|
+
widgetRightSideBorder=5;
|
|
43
|
+
widgetMarginRight = 0;
|
|
44
|
+
widgetMarginLeft = 30;
|
|
45
|
+
}
|
|
46
|
+
if(feedback.wgPosition == 2){
|
|
47
|
+
wgPositionHorizintal = "flex-end"
|
|
48
|
+
wgPositionVertical = "row-reverse"
|
|
49
|
+
widgetLeftSideBorder =5;
|
|
50
|
+
widgetMarginRight = 30
|
|
51
|
+
widgetMarginLeft = 0;
|
|
52
|
+
}
|
|
53
|
+
if(feedback.wgPosition == 3){
|
|
54
|
+
wgPositionHorizintal = "flex-end"
|
|
55
|
+
wgPositionVertical = "row"
|
|
56
|
+
widgetLeftSideBorder =0;
|
|
57
|
+
widgetRightSideBorder=5;
|
|
58
|
+
widgetMarginRight = 0;
|
|
59
|
+
widgetMarginLeft = 30;
|
|
60
|
+
}
|
|
61
|
+
$: document.documentElement.style.setProperty('--wgPositionHorizintal', wgPositionHorizintal)
|
|
62
|
+
$: document.documentElement.style.setProperty('--wgPositionVertical', wgPositionVertical)
|
|
63
|
+
$: document.documentElement.style.setProperty('--widgetLeftSideBorder', widgetLeftSideBorder + 'px')
|
|
64
|
+
$: document.documentElement.style.setProperty('--widgetRightSideBorder', widgetRightSideBorder + 'px')
|
|
65
|
+
$: document.documentElement.style.setProperty('--widgetMarginRight', widgetMarginRight + 'px')
|
|
66
|
+
$: document.documentElement.style.setProperty('--widgetMarginLeft', widgetMarginLeft + 'px')
|
|
67
|
+
|
|
68
|
+
const closeOne = () => (openThanksMessage());
|
|
69
|
+
|
|
70
|
+
const openThanksMessage = () => {
|
|
71
|
+
visible = !visible;
|
|
72
|
+
thanksMessageVisible = !thanksMessageVisible;
|
|
73
|
+
|
|
74
|
+
}
|
|
75
|
+
const closeThanksMessage = () => {
|
|
76
|
+
thanksMessageVisible = !thanksMessageVisible;
|
|
77
|
+
setTimeout(function(){
|
|
78
|
+
buttonVisible = !buttonVisible;
|
|
79
|
+
},350);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
const openWidget = () => {
|
|
83
|
+
visible = !visible;
|
|
84
|
+
buttonVisible = !buttonVisible;
|
|
85
|
+
};
|
|
86
|
+
const closeWidget = () => {
|
|
87
|
+
visible = !visible;
|
|
88
|
+
setTimeout(function(){
|
|
89
|
+
buttonVisible = !buttonVisible;
|
|
90
|
+
},350);
|
|
91
|
+
};
|
|
92
|
+
</script>
|
|
93
|
+
|
|
94
|
+
<body>
|
|
95
|
+
|
|
96
|
+
{#if buttonVisible}
|
|
97
|
+
<div class="widget" on:click={openWidget}>
|
|
98
|
+
<div id="feedbackTxt">Feedback</div>
|
|
99
|
+
<div id="mainIcon">
|
|
100
|
+
<MainIcon bind:fill={iconColor}/>
|
|
101
|
+
</div>
|
|
102
|
+
</div>
|
|
103
|
+
{/if}
|
|
104
|
+
|
|
105
|
+
{#if visible}
|
|
106
|
+
<div
|
|
107
|
+
|
|
108
|
+
class="cont"
|
|
109
|
+
in:fly="{{ x: -100, duration: 1200 }}" out:fly="{{ x: 20, duration: 300 }}"
|
|
110
|
+
>
|
|
111
|
+
<div class="closeCont" on:click={closeWidget}>
|
|
112
|
+
<p id="closeIcon">X</p>
|
|
113
|
+
</div>
|
|
114
|
+
<ReactionPage closeHandler={closeOne} bind:feedbackData={feedback}/>
|
|
115
|
+
|
|
116
|
+
</div>
|
|
117
|
+
{/if}
|
|
118
|
+
{#if thanksMessageVisible}
|
|
119
|
+
<div class ="thanksMessageCont" out:fly="{{ x: 0, duration: 300 }}">
|
|
120
|
+
<div class="closeCont" on:click={closeThanksMessage}>
|
|
121
|
+
<p id="closeIcon">X</p>
|
|
122
|
+
</div>
|
|
123
|
+
<div style=" width: 61%;
|
|
124
|
+
text-align: center;
|
|
125
|
+
margin-top: 7%;
|
|
126
|
+
margin-left: 20%;">{feedback.wgThanksMsg}</div>
|
|
127
|
+
</div>
|
|
128
|
+
{/if}
|
|
129
|
+
</body>
|
|
130
|
+
|
|
131
|
+
<style>
|
|
132
|
+
body{
|
|
133
|
+
width: 100%;
|
|
134
|
+
display: flex;
|
|
135
|
+
flex-direction: var(--wgPositionVertical);
|
|
136
|
+
position: absolute;
|
|
137
|
+
top: 0; right: 0; bottom: 0; left: 0;
|
|
138
|
+
background-color: #ebeef9;
|
|
139
|
+
height: 100%;
|
|
140
|
+
align-items: var(--wgPositionHorizintal);
|
|
141
|
+
padding: 0;
|
|
142
|
+
}
|
|
143
|
+
.widget {
|
|
144
|
+
background-color: var(--widgetColor);
|
|
145
|
+
width: 34px;
|
|
146
|
+
height: 112px;
|
|
147
|
+
border-top-left-radius:var(--widgetLeftSideBorder) ;
|
|
148
|
+
border-bottom-left-radius: var(--widgetLeftSideBorder);
|
|
149
|
+
border-top-right-radius: var(--widgetRightSideBorder) ;
|
|
150
|
+
border-bottom-right-radius: var(--widgetRightSideBorder);
|
|
151
|
+
box-shadow: 0.2px 0.2px 0.2px rgb(133, 130, 130);
|
|
152
|
+
display: flex;
|
|
153
|
+
flex-direction: column;
|
|
154
|
+
align-items: center;
|
|
155
|
+
justify-content: space-evenly;
|
|
156
|
+
cursor: pointer;
|
|
157
|
+
}
|
|
158
|
+
#mainIcon {
|
|
159
|
+
width: 60%;
|
|
160
|
+
margin-left: 4%;
|
|
161
|
+
cursor: pointer;
|
|
162
|
+
}
|
|
163
|
+
#feedbackTxt {
|
|
164
|
+
color: var(--widgetTextColor);
|
|
165
|
+
font-size: 13px;
|
|
166
|
+
writing-mode: vertical-lr;
|
|
167
|
+
transform: rotate(180deg);
|
|
168
|
+
cursor: pointer;
|
|
169
|
+
}
|
|
170
|
+
.widget:hover {
|
|
171
|
+
width: 35px;
|
|
172
|
+
-webkit-box-shadow: 0px 0px 35px 2px rgba(0, 0, 0, 0.24);
|
|
173
|
+
box-shadow: 0px 0px 35px 2px rgba(0, 0, 0, 0.24);
|
|
174
|
+
}
|
|
175
|
+
.cont {
|
|
176
|
+
width: 320px;
|
|
177
|
+
height: fit-content;
|
|
178
|
+
background-color: rgb(255, 255, 255);
|
|
179
|
+
margin-right: var(--widgetMarginRight);
|
|
180
|
+
margin-left: var(--widgetMarginLeft);
|
|
181
|
+
-webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px;
|
|
182
|
+
box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px;
|
|
183
|
+
}
|
|
184
|
+
.thanksMessageCont{
|
|
185
|
+
width: 320px;
|
|
186
|
+
height: 104px;
|
|
187
|
+
background-color: rgb(255, 255, 255);
|
|
188
|
+
margin-right: var(--widgetMarginRight);
|
|
189
|
+
margin-left: var(--widgetMarginLeft);
|
|
190
|
+
-webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px;
|
|
191
|
+
box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px;
|
|
192
|
+
}
|
|
193
|
+
#closeIcon{
|
|
194
|
+
font-size: 16px;
|
|
195
|
+
color: #ffff;
|
|
196
|
+
font-weight: 600;
|
|
197
|
+
font-family: system-ui;
|
|
198
|
+
cursor: pointer;
|
|
199
|
+
|
|
200
|
+
}
|
|
201
|
+
.closeCont{
|
|
202
|
+
background-color: #4d5167;
|
|
203
|
+
width: 27px;
|
|
204
|
+
height: 27px;
|
|
205
|
+
border-radius: 50%;
|
|
206
|
+
display: flex;
|
|
207
|
+
justify-content: center;
|
|
208
|
+
align-items: center;
|
|
209
|
+
margin-top: -15px;
|
|
210
|
+
margin-left: 85%;
|
|
211
|
+
cursor: pointer;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
|
|
215
|
+
|
|
216
|
+
|
|
217
|
+
|
|
218
|
+
@media (min-width: 640px) {
|
|
219
|
+
main {
|
|
220
|
+
max-width: none;
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
</style>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
export let fill = "";
|
|
3
|
+
</script>
|
|
4
|
+
<svg
|
|
5
|
+
fill={fill}
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
version="1.1"
|
|
9
|
+
id="Layer_1"
|
|
10
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
11
|
+
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
12
|
+
x="0px"
|
|
13
|
+
y="0px"
|
|
14
|
+
viewBox="0 0 458 458"
|
|
15
|
+
style="enable-background:new 0 0 458 458;"
|
|
16
|
+
xml:space="preserve"
|
|
17
|
+
><g
|
|
18
|
+
><g
|
|
19
|
+
><path
|
|
20
|
+
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"
|
|
21
|
+
/></g
|
|
22
|
+
></g
|
|
23
|
+
><g /><g /><g /><g /><g /><g /><g /><g /><g /><g /><g /><g /><g /><g /><g
|
|
24
|
+
/></svg
|
|
25
|
+
>
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
export let name;
|
|
3
|
+
export let focusable = false;
|
|
4
|
+
export let width = "40px";
|
|
5
|
+
export let height = "40px";
|
|
6
|
+
let icons = [
|
|
7
|
+
{
|
|
8
|
+
box: 50,
|
|
9
|
+
name: "love",
|
|
10
|
+
svg: `
|
|
11
|
+
<g transform="translate(.48)" fill-rule="nonzero" fill="none">
|
|
12
|
+
<rect fill="#EF7C54" width="50" height="50" rx="13.28"/>
|
|
13
|
+
<circle fill="#3B3735" cx="7.241" cy="27.929" r="3.107"/>
|
|
14
|
+
<circle fill="#3B3735" cx="42.759" cy="27.929" r="3.107"/>
|
|
15
|
+
<path d="M31.236 28.764a2.245 2.245 0 0 1 2.002 3.246 9.086 9.086 0 0 1-8.234 4.779 9.104 9.104 0 0 1-8.242-4.779 2.245 2.245 0 0 1 2.002-3.246h12.472zM12.185 22.089a11.515 11.515 0 0 1-.766-.696c-1.036-1.062-2.29-2.803-1.741-4.352.392-1.21 1.81-1.567 2.95-1.488a4.743 4.743 0 0 1 1.793.487c.233.107.46.226.68.357a.33.33 0 0 0 .504-.261 3.046 3.046 0 0 1 1.358-2.611 2.385 2.385 0 0 1 2.906.635c1.21 1.314 1.088 3.133.584 4.726a20.017 20.017 0 0 1-1.34 3.255 8.12 8.12 0 0 1-.975 1.688c-.749.87-1.846.636-2.777.218a13.838 13.838 0 0 1-3.176-1.958zM37.807 22.089c.267-.218.523-.45.766-.696 1.035-1.062 2.289-2.803 1.74-4.352-.391-1.21-1.819-1.567-2.959-1.488a4.787 4.787 0 0 0-1.793.487 7.424 7.424 0 0 0-.678.357.33.33 0 0 1-.505-.261 3.046 3.046 0 0 0-1.358-2.611 2.385 2.385 0 0 0-2.907.635c-1.21 1.314-1.088 3.133-.583 4.726.35 1.122.799 2.211 1.34 3.255.256.6.584 1.167.975 1.688.749.87 1.854.636 2.776.218a13.838 13.838 0 0 0 3.186-1.958z" fill="#3B3735"/>
|
|
16
|
+
</g>
|
|
17
|
+
`
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
box: 50,
|
|
21
|
+
name: "unSelectedLove",
|
|
22
|
+
svg: `
|
|
23
|
+
<g transform="translate(.48)" fill-rule="nonzero" fill="none">
|
|
24
|
+
<rect fill="rgb(223 223 223)" width="50" height="50" rx="13.28"/>
|
|
25
|
+
<circle fill="#3B3735" cx="7.241" cy="27.929" r="3.107"/>
|
|
26
|
+
<circle fill="#3B3735" cx="42.759" cy="27.929" r="3.107"/>
|
|
27
|
+
<path d="M31.236 28.764a2.245 2.245 0 0 1 2.002 3.246 9.086 9.086 0 0 1-8.234 4.779 9.104 9.104 0 0 1-8.242-4.779 2.245 2.245 0 0 1 2.002-3.246h12.472zM12.185 22.089a11.515 11.515 0 0 1-.766-.696c-1.036-1.062-2.29-2.803-1.741-4.352.392-1.21 1.81-1.567 2.95-1.488a4.743 4.743 0 0 1 1.793.487c.233.107.46.226.68.357a.33.33 0 0 0 .504-.261 3.046 3.046 0 0 1 1.358-2.611 2.385 2.385 0 0 1 2.906.635c1.21 1.314 1.088 3.133.584 4.726a20.017 20.017 0 0 1-1.34 3.255 8.12 8.12 0 0 1-.975 1.688c-.749.87-1.846.636-2.777.218a13.838 13.838 0 0 1-3.176-1.958zM37.807 22.089c.267-.218.523-.45.766-.696 1.035-1.062 2.289-2.803 1.74-4.352-.391-1.21-1.819-1.567-2.959-1.488a4.787 4.787 0 0 0-1.793.487 7.424 7.424 0 0 0-.678.357.33.33 0 0 1-.505-.261 3.046 3.046 0 0 0-1.358-2.611 2.385 2.385 0 0 0-2.907.635c-1.21 1.314-1.088 3.133-.583 4.726.35 1.122.799 2.211 1.34 3.255.256.6.584 1.167.975 1.688.749.87 1.854.636 2.776.218a13.838 13.838 0 0 0 3.186-1.958z" fill="#3B3735"/>
|
|
28
|
+
</g>
|
|
29
|
+
`
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
box: 50,
|
|
33
|
+
name: "like",
|
|
34
|
+
svg: `
|
|
35
|
+
<g transform="translate(.86)" fill-rule="nonzero" fill="none">
|
|
36
|
+
<rect fill="#FDC537" width="50" height="50" rx="13.12"/>
|
|
37
|
+
<ellipse fill="#3B3735" cx="14.156" cy="19.803" rx="2.167" ry="3.656"/>
|
|
38
|
+
<ellipse fill="#3B3735" cx="35.844" cy="19.803" rx="2.167" ry="3.656"/>
|
|
39
|
+
<path d="M32.444 28.1a2.643 2.643 0 0 1 2.37 3.824 10.738 10.738 0 0 1-9.69 5.629 10.738 10.738 0 0 1-9.69-5.63 2.643 2.643 0 0 1 2.36-3.822h14.65z" fill="#3B3735"/>
|
|
40
|
+
</g>
|
|
41
|
+
`
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
box: 50,
|
|
45
|
+
name: "unSelectedLike",
|
|
46
|
+
svg: `
|
|
47
|
+
<g transform="translate(.86)" fill-rule="nonzero" fill="none">
|
|
48
|
+
<rect fill="rgb(223 223 223)" width="50" height="50" rx="13.12"/>
|
|
49
|
+
<ellipse fill="#3B3735" cx="14.156" cy="19.803" rx="2.167" ry="3.656"/>
|
|
50
|
+
<ellipse fill="#3B3735" cx="35.844" cy="19.803" rx="2.167" ry="3.656"/>
|
|
51
|
+
<path d="M32.444 28.1a2.643 2.643 0 0 1 2.37 3.824 10.738 10.738 0 0 1-9.69 5.629 10.738 10.738 0 0 1-9.69-5.63 2.643 2.643 0 0 1 2.36-3.822h14.65z" fill="#3B3735"/>
|
|
52
|
+
</g>
|
|
53
|
+
`
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
box: 50,
|
|
57
|
+
name: "neutral",
|
|
58
|
+
svg: `
|
|
59
|
+
<g transform="translate(.24)" fill-rule="nonzero" fill="gray">
|
|
60
|
+
<rect fill="#F59F45" width="50" height="50" rx="12.63"/>
|
|
61
|
+
<circle fill="#3B3735" cx="15.169" cy="21.459" r="2.81"/>
|
|
62
|
+
<circle fill="#3B3735" cx="34.831" cy="21.459" r="2.81"/>
|
|
63
|
+
<path d="M40.847 31.351H9.135a.67.67 0 1 1 0-1.33h31.712a.67.67 0 1 1 0 1.33z" fill="#3B3735"/>
|
|
64
|
+
</g>
|
|
65
|
+
`
|
|
66
|
+
}
|
|
67
|
+
,
|
|
68
|
+
{
|
|
69
|
+
box: 50,
|
|
70
|
+
name: "unSelectedNeutral",
|
|
71
|
+
svg: `
|
|
72
|
+
<g transform="translate(.24)" fill-rule="nonzero" fill="gray">
|
|
73
|
+
<rect fill="rgb(223 223 223)" width="50" height="50" rx="12.63"/>
|
|
74
|
+
<circle fill="#3B3735" cx="15.169" cy="21.459" r="2.81"/>
|
|
75
|
+
<circle fill="#3B3735" cx="34.831" cy="21.459" r="2.81"/>
|
|
76
|
+
<path d="M40.847 31.351H9.135a.67.67 0 1 1 0-1.33h31.712a.67.67 0 1 1 0 1.33z" fill="#3B3735"/>
|
|
77
|
+
</g>
|
|
78
|
+
`
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
box: 50,
|
|
82
|
+
name: "dislike",
|
|
83
|
+
svg: `
|
|
84
|
+
<g transform="translate(.62)" fill-rule="nonzero" fill="none">
|
|
85
|
+
<rect fill="#FEDCAB" width="50" height="50" rx="13.12"/>
|
|
86
|
+
<path d="M33.333 34.743a1.762 1.762 0 0 0 1.718-2.211c-1.119-4.158-5.285-7.241-10.324-7.241s-9.206 3.083-10.324 7.24a1.762 1.762 0 0 0 1.718 2.212l6.536-.881a15.178 15.178 0 0 1 3.946 0l6.73.88z" fill="#3B3735"/>
|
|
87
|
+
<circle fill="#3B3735" cx="15.169" cy="18.076" r="2.81"/>
|
|
88
|
+
<circle fill="#3B3735" cx="34.831" cy="18.076" r="2.81"/>
|
|
89
|
+
</g>`
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
box: 50,
|
|
93
|
+
name: "unSelectedDislike",
|
|
94
|
+
svg: `
|
|
95
|
+
<g transform="translate(.62)" fill-rule="nonzero" fill="none">
|
|
96
|
+
<rect fill="rgb(223 223 223)" width="50" height="50" rx="13.12"/>
|
|
97
|
+
<path d="M33.333 34.743a1.762 1.762 0 0 0 1.718-2.211c-1.119-4.158-5.285-7.241-10.324-7.241s-9.206 3.083-10.324 7.24a1.762 1.762 0 0 0 1.718 2.212l6.536-.881a15.178 15.178 0 0 1 3.946 0l6.73.88z" fill="#3B3735"/>
|
|
98
|
+
<circle fill="#3B3735" cx="15.169" cy="18.076" r="2.81"/>
|
|
99
|
+
<circle fill="#3B3735" cx="34.831" cy="18.076" r="2.81"/>
|
|
100
|
+
</g>`
|
|
101
|
+
},
|
|
102
|
+
|
|
103
|
+
{
|
|
104
|
+
box: 50,
|
|
105
|
+
name: "hate",
|
|
106
|
+
svg: `
|
|
107
|
+
<g fill-rule="nonzero" fill="none">
|
|
108
|
+
<rect fill="#FEDCAB" width="50" height="50" rx="13.44"/>
|
|
109
|
+
<path d="M20.218 23.865a1.144 1.144 0 0 1-.86-.336l-6.114-6.106a1.155 1.155 0 1 1 1.634-1.634l6.106 6.115a1.152 1.152 0 0 1-.809 1.96h.043z" fill="#3B3735"/>
|
|
110
|
+
<path d="M14.104 23.865a1.152 1.152 0 0 1-.817-1.961l6.114-6.115a1.152 1.152 0 0 1 1.626 1.634L14.92 23.53a1.161 1.161 0 0 1-.817.336zM36.352 23.865c-.303 0-.594-.121-.808-.336l-6.115-6.106a1.155 1.155 0 1 1 1.634-1.634l6.106 6.115a1.152 1.152 0 0 1-.817 1.96z" fill="#3B3735"/>
|
|
111
|
+
<path d="M30.246 23.865a1.152 1.152 0 0 1-.86-1.961l6.115-6.115a1.152 1.152 0 0 1 1.625 1.634L31.02 23.53a1.161 1.161 0 0 1-.774.336zM35.604 34.546a6.02 6.02 0 0 1-3.389-1.376c-1.083-.783-1.96-1.075-2.339-.783-.157.15-.296.317-.413.5-.221.34-.484.652-.782.928-1.29 1.092-3.07.791-4.3.146a11.937 11.937 0 0 1-1.299-.86 8.11 8.11 0 0 0-1.35-.808 3.44 3.44 0 0 0-3.363.447l-.387.335c-.417.416-.906.75-1.444.99-1.815.722-3.337-.38-4.558-1.256a6.416 6.416 0 0 0-1.952-1.127 2.116 2.116 0 0 0-2.383 1.307 1.152 1.152 0 0 1-2.193-.696 4.386 4.386 0 0 1 5.16-2.838 8.505 8.505 0 0 1 2.71 1.505c1.169.86 1.78 1.212 2.356.989.281-.146.537-.338.756-.568l.508-.43a5.745 5.745 0 0 1 5.676-.757c.607.285 1.183.631 1.72 1.032.345.245.704.469 1.075.671.585.31 1.367.456 1.72.138a2.58 2.58 0 0 0 .395-.49 4.3 4.3 0 0 1 .86-1.015c.86-.68 2.512-1.11 5.092.757 1.109.808 1.978 1.109 2.373.86.153-.135.289-.288.404-.456.112-.138.215-.267.336-.396a4.807 4.807 0 0 1 7.869 1.72 1.152 1.152 0 1 1-2.202.68 2.52 2.52 0 0 0-3.956-.86l-.232.283c-.242.343-.532.65-.86.912a2.83 2.83 0 0 1-1.608.516z" fill="#3B3735"/>
|
|
112
|
+
</g>`
|
|
113
|
+
}
|
|
114
|
+
,
|
|
115
|
+
|
|
116
|
+
{
|
|
117
|
+
box: 50,
|
|
118
|
+
name: "unSelectedHate",
|
|
119
|
+
svg: `
|
|
120
|
+
<g fill-rule="nonzero" fill="none">
|
|
121
|
+
<rect fill="rgb(223 223 223)" width="50" height="50" rx="13.44"/>
|
|
122
|
+
<path d="M20.218 23.865a1.144 1.144 0 0 1-.86-.336l-6.114-6.106a1.155 1.155 0 1 1 1.634-1.634l6.106 6.115a1.152 1.152 0 0 1-.809 1.96h.043z" fill="#3B3735"/>
|
|
123
|
+
<path d="M14.104 23.865a1.152 1.152 0 0 1-.817-1.961l6.114-6.115a1.152 1.152 0 0 1 1.626 1.634L14.92 23.53a1.161 1.161 0 0 1-.817.336zM36.352 23.865c-.303 0-.594-.121-.808-.336l-6.115-6.106a1.155 1.155 0 1 1 1.634-1.634l6.106 6.115a1.152 1.152 0 0 1-.817 1.96z" fill="#3B3735"/>
|
|
124
|
+
<path d="M30.246 23.865a1.152 1.152 0 0 1-.86-1.961l6.115-6.115a1.152 1.152 0 0 1 1.625 1.634L31.02 23.53a1.161 1.161 0 0 1-.774.336zM35.604 34.546a6.02 6.02 0 0 1-3.389-1.376c-1.083-.783-1.96-1.075-2.339-.783-.157.15-.296.317-.413.5-.221.34-.484.652-.782.928-1.29 1.092-3.07.791-4.3.146a11.937 11.937 0 0 1-1.299-.86 8.11 8.11 0 0 0-1.35-.808 3.44 3.44 0 0 0-3.363.447l-.387.335c-.417.416-.906.75-1.444.99-1.815.722-3.337-.38-4.558-1.256a6.416 6.416 0 0 0-1.952-1.127 2.116 2.116 0 0 0-2.383 1.307 1.152 1.152 0 0 1-2.193-.696 4.386 4.386 0 0 1 5.16-2.838 8.505 8.505 0 0 1 2.71 1.505c1.169.86 1.78 1.212 2.356.989.281-.146.537-.338.756-.568l.508-.43a5.745 5.745 0 0 1 5.676-.757c.607.285 1.183.631 1.72 1.032.345.245.704.469 1.075.671.585.31 1.367.456 1.72.138a2.58 2.58 0 0 0 .395-.49 4.3 4.3 0 0 1 .86-1.015c.86-.68 2.512-1.11 5.092.757 1.109.808 1.978 1.109 2.373.86.153-.135.289-.288.404-.456.112-.138.215-.267.336-.396a4.807 4.807 0 0 1 7.869 1.72 1.152 1.152 0 1 1-2.202.68 2.52 2.52 0 0 0-3.956-.86l-.232.283c-.242.343-.532.65-.86.912a2.83 2.83 0 0 1-1.608.516z" fill="#3B3735"/>
|
|
125
|
+
</g>`
|
|
126
|
+
}
|
|
127
|
+
];
|
|
128
|
+
let displayIcon = icons.find((e) => e.name === name);
|
|
129
|
+
</script>
|
|
130
|
+
<svg
|
|
131
|
+
class={$$props.class}
|
|
132
|
+
{focusable}
|
|
133
|
+
{width}
|
|
134
|
+
{height}
|
|
135
|
+
viewBox="0 0 {displayIcon.box} {displayIcon.box-1}">{@html displayIcon.svg}</svg>
|
package/src/main.js
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import App from './App.svelte';
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
export function feedbackCreator(response) {
|
|
6
|
+
new App({
|
|
7
|
+
target: document.body,
|
|
8
|
+
props: {
|
|
9
|
+
feedback: response
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
}
|
|
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: 1,
|
|
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);
|