@fullsession.io/fs-feedback-widget 1.0.1 → 1.0.2

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 (13) hide show
  1. package/README.md +109 -109
  2. package/dist/bundle.css +1 -1
  3. package/dist/index.js +1 -1
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +1 -1
  6. package/dist/index.mjs.map +1 -1
  7. package/lib/index.js +1 -1
  8. package/package.json +31 -31
  9. package/src/App.svelte +234 -223
  10. package/src/Icons/mainIcon.svelte +25 -25
  11. package/src/Icons/reactionIcons.svelte +134 -134
  12. package/src/main.js +45 -45
  13. package/src/widgetPages/reactionPage.svelte +466 -466
package/src/App.svelte CHANGED
@@ -1,223 +1,234 @@
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>
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
+ let inTransitionX = 0;
30
+ let outTransitionX = 0;
31
+
32
+ if(feedback.wgPosition == 0){
33
+ wgPositionHorizintal = "center"
34
+ wgPositionVertical = "row-reverse"
35
+ widgetLeftSideBorder =5;
36
+ widgetRightSideBorder=0;
37
+ widgetMarginRight = 30;
38
+ widgetMarginLeft = 0;
39
+ inTransitionX = -100;
40
+ outTransitionX = 20;
41
+ }
42
+ if(feedback.wgPosition == 1){
43
+ wgPositionHorizintal = "center"
44
+ wgPositionVertical = "row"
45
+ widgetLeftSideBorder =0;
46
+ widgetRightSideBorder=5;
47
+ widgetMarginRight = 0;
48
+ widgetMarginLeft = 30;
49
+ inTransitionX = 100;
50
+ outTransitionX = -20;
51
+ }
52
+ if(feedback.wgPosition == 2){
53
+ wgPositionHorizintal = "flex-end"
54
+ wgPositionVertical = "row-reverse"
55
+ widgetLeftSideBorder =5;
56
+ widgetMarginRight = 30
57
+ widgetMarginLeft = 0;
58
+ inTransitionX = -100;
59
+ outTransitionX = 20;
60
+ }
61
+ if(feedback.wgPosition == 3){
62
+ wgPositionHorizintal = "flex-end"
63
+ wgPositionVertical = "row"
64
+ widgetLeftSideBorder =0;
65
+ widgetRightSideBorder=5;
66
+ widgetMarginRight = 0;
67
+ widgetMarginLeft = 30;
68
+ inTransitionX = 100;
69
+ outTransitionX = -20;
70
+ }
71
+ $: document.documentElement.style.setProperty('--wgPositionHorizintal', wgPositionHorizintal)
72
+ $: document.documentElement.style.setProperty('--wgPositionVertical', wgPositionVertical)
73
+ $: document.documentElement.style.setProperty('--widgetLeftSideBorder', widgetLeftSideBorder + 'px')
74
+ $: document.documentElement.style.setProperty('--widgetRightSideBorder', widgetRightSideBorder + 'px')
75
+ $: document.documentElement.style.setProperty('--widgetMarginRight', widgetMarginRight + 'px')
76
+ $: document.documentElement.style.setProperty('--widgetMarginLeft', widgetMarginLeft + 'px')
77
+
78
+ const closeOne = () => (openThanksMessage());
79
+
80
+ const openThanksMessage = () => {
81
+ visible = !visible;
82
+ thanksMessageVisible = !thanksMessageVisible;
83
+
84
+ }
85
+ const closeThanksMessage = () => {
86
+ thanksMessageVisible = !thanksMessageVisible;
87
+ setTimeout(function(){
88
+ buttonVisible = !buttonVisible;
89
+ },350);
90
+ }
91
+
92
+ const openWidget = () => {
93
+ visible = !visible;
94
+ buttonVisible = !buttonVisible;
95
+ };
96
+ const closeWidget = () => {
97
+ visible = !visible;
98
+ setTimeout(function(){
99
+ buttonVisible = !buttonVisible;
100
+ },350);
101
+ };
102
+ </script>
103
+
104
+ <body>
105
+
106
+ {#if buttonVisible}
107
+ <div class="widget" on:click={openWidget}>
108
+ <div id="feedbackTxt">Feedback</div>
109
+ <div id="mainIcon">
110
+ <MainIcon bind:fill={iconColor}/>
111
+ </div>
112
+ </div>
113
+ {/if}
114
+
115
+ {#if visible}
116
+ <div
117
+
118
+ class="cont"
119
+ in:fly="{{ x: inTransitionX, duration: 500 }}"
120
+ >
121
+ <div class="closeCont" on:click={closeWidget}>
122
+ <p id="closeIcon">X</p>
123
+ </div>
124
+ <ReactionPage closeHandler={closeOne} bind:feedbackData={feedback}/>
125
+
126
+ </div>
127
+ {/if}
128
+ {#if thanksMessageVisible}
129
+ <div class ="thanksMessageCont" out:fly="{{ x: outTransitionX, duration: 300 }}">
130
+ <div class="closeCont" on:click={closeThanksMessage}>
131
+ <p id="closeIcon">X</p>
132
+ </div>
133
+ <div style=" width: 61%;
134
+ text-align: center;
135
+ margin-top: 7%;
136
+ margin-left: 20%;">{feedback.wgThanksMsg}</div>
137
+ </div>
138
+ {/if}
139
+ </body>
140
+
141
+ <style>
142
+ body{
143
+ width: 100%;
144
+ display: flex;
145
+ flex-direction: var(--wgPositionVertical);
146
+ position: absolute;
147
+ top: 0; right: 0; bottom: 0; left: 0;
148
+ background-color: #ebeef9;
149
+ height: 100%;
150
+ align-items: var(--wgPositionHorizintal);
151
+ padding: 0;
152
+ }
153
+ .widget {
154
+ background-color: var(--widgetColor);
155
+ width: 34px;
156
+ height: 112px;
157
+ border-top-left-radius:var(--widgetLeftSideBorder) ;
158
+ border-bottom-left-radius: var(--widgetLeftSideBorder);
159
+ border-top-right-radius: var(--widgetRightSideBorder) ;
160
+ border-bottom-right-radius: var(--widgetRightSideBorder);
161
+ box-shadow: 0.2px 0.2px 0.2px rgb(133, 130, 130);
162
+ display: flex;
163
+ flex-direction: column;
164
+ align-items: center;
165
+ justify-content: space-evenly;
166
+ cursor: pointer;
167
+ margin-top: 5px;
168
+ }
169
+ #mainIcon {
170
+ width: 60%;
171
+ margin-left: 4%;
172
+ cursor: pointer;
173
+ }
174
+ #feedbackTxt {
175
+ color: var(--widgetTextColor);
176
+ font-size: 13px;
177
+ writing-mode: vertical-lr;
178
+ transform: rotate(180deg);
179
+ cursor: pointer;
180
+ }
181
+ .widget:hover {
182
+ width: 35px;
183
+ -webkit-box-shadow: 0px 0px 35px 2px rgba(0, 0, 0, 0.24);
184
+ box-shadow: 0px 0px 35px 2px rgba(0, 0, 0, 0.24);
185
+ }
186
+ .cont {
187
+ width: 320px;
188
+ height: fit-content;
189
+ background-color: rgb(255, 255, 255);
190
+ margin-right: var(--widgetMarginRight);
191
+ margin-left: var(--widgetMarginLeft);
192
+ -webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px;
193
+ box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px;
194
+ }
195
+ .thanksMessageCont{
196
+ width: 320px;
197
+ height: 104px;
198
+ background-color: rgb(255, 255, 255);
199
+ margin-right: var(--widgetMarginRight);
200
+ margin-left: var(--widgetMarginLeft);
201
+ -webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px;
202
+ box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 100px 0px;
203
+ }
204
+ #closeIcon{
205
+ font-size: 16px;
206
+ color: #ffff;
207
+ font-weight: 600;
208
+ font-family: system-ui;
209
+ cursor: pointer;
210
+
211
+ }
212
+ .closeCont{
213
+ background-color: #4d5167;
214
+ width: 27px;
215
+ height: 27px;
216
+ border-radius: 50%;
217
+ display: flex;
218
+ justify-content: center;
219
+ align-items: center;
220
+ margin-top: -15px;
221
+ margin-left: 85%;
222
+ cursor: pointer;
223
+ }
224
+
225
+
226
+
227
+
228
+
229
+ @media (min-width: 640px) {
230
+ body {
231
+ max-width: none;
232
+ }
233
+ }
234
+ </style>
package/src/Icons/mainIcon.svelte CHANGED
@@ -1,25 +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
- >
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
+ >