@pocketping/widget 1.12.0 → 1.12.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/dist/index.cjs +69 -23
- package/dist/index.js +69 -23
- package/dist/pocketping.min.global.js +49 -39
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -218,24 +218,28 @@ function styles(options) {
|
|
|
218
218
|
left: 20px;
|
|
219
219
|
}
|
|
220
220
|
|
|
221
|
+
/* Mobile: fullscreen widget to prevent scroll issues */
|
|
221
222
|
@media (max-width: 480px) {
|
|
222
223
|
.pp-window {
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
224
|
+
position: fixed;
|
|
225
|
+
top: 0;
|
|
226
|
+
left: 0;
|
|
227
|
+
right: 0;
|
|
228
|
+
bottom: 0;
|
|
229
|
+
width: 100%;
|
|
230
|
+
height: 100%;
|
|
231
|
+
max-height: 100%;
|
|
232
|
+
max-height: 100dvh;
|
|
233
|
+
min-height: 100%;
|
|
234
|
+
min-height: 100dvh;
|
|
235
|
+
border-radius: 0;
|
|
236
|
+
overflow: hidden;
|
|
237
|
+
touch-action: none; /* Prevent page scroll behind widget */
|
|
232
238
|
}
|
|
233
239
|
|
|
234
|
-
/*
|
|
235
|
-
.pp-window
|
|
236
|
-
max-
|
|
237
|
-
max-height: calc(50svh - 20px);
|
|
238
|
-
bottom: 10px;
|
|
240
|
+
/* Prevent any horizontal scroll */
|
|
241
|
+
.pp-window * {
|
|
242
|
+
max-width: 100%;
|
|
239
243
|
}
|
|
240
244
|
}
|
|
241
245
|
|
|
@@ -319,6 +323,7 @@ function styles(options) {
|
|
|
319
323
|
.pp-messages {
|
|
320
324
|
flex: 1;
|
|
321
325
|
overflow-y: auto;
|
|
326
|
+
overflow-x: hidden;
|
|
322
327
|
padding: 16px 12px;
|
|
323
328
|
display: flex;
|
|
324
329
|
flex-direction: column;
|
|
@@ -330,6 +335,7 @@ function styles(options) {
|
|
|
330
335
|
background-image: ${chatBgImage};
|
|
331
336
|
background-size: ${chatBgSize};
|
|
332
337
|
background-position: center;
|
|
338
|
+
touch-action: pan-y; /* Only allow vertical scrolling */
|
|
333
339
|
}
|
|
334
340
|
|
|
335
341
|
.pp-welcome {
|
|
@@ -368,8 +374,9 @@ function styles(options) {
|
|
|
368
374
|
position: relative;
|
|
369
375
|
display: flex;
|
|
370
376
|
align-items: stretch;
|
|
371
|
-
overflow:
|
|
372
|
-
touch-action: pan-y;
|
|
377
|
+
overflow: hidden; /* Prevent horizontal overflow */
|
|
378
|
+
touch-action: pan-y; /* Only vertical scroll */
|
|
379
|
+
max-width: 100%;
|
|
373
380
|
}
|
|
374
381
|
|
|
375
382
|
.pp-swipe-left {
|
|
@@ -504,11 +511,14 @@ function styles(options) {
|
|
|
504
511
|
}
|
|
505
512
|
|
|
506
513
|
/* Add spacing between different senders */
|
|
507
|
-
.pp-message-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
514
|
+
.pp-message-swipe-container + .pp-message-swipe-container {
|
|
515
|
+
margin-top: 4px;
|
|
516
|
+
}
|
|
517
|
+
|
|
518
|
+
/* More spacing when sender changes (visitor <-> operator/ai) */
|
|
519
|
+
.pp-swipe-left + .pp-swipe-right,
|
|
520
|
+
.pp-swipe-right + .pp-swipe-left {
|
|
521
|
+
margin-top: 16px;
|
|
512
522
|
}
|
|
513
523
|
|
|
514
524
|
.pp-message-content {
|
|
@@ -2051,6 +2061,35 @@ function ChatWidget({ client: client2, config: initialConfig }) {
|
|
|
2051
2061
|
setUnreadCount(0);
|
|
2052
2062
|
}
|
|
2053
2063
|
}, [isOpen]);
|
|
2064
|
+
(0, import_hooks2.useEffect)(() => {
|
|
2065
|
+
const isMobile = window.innerWidth <= 480;
|
|
2066
|
+
if (isOpen && isMobile) {
|
|
2067
|
+
const scrollY = window.scrollY;
|
|
2068
|
+
const originalStyles = {
|
|
2069
|
+
overflow: document.body.style.overflow,
|
|
2070
|
+
position: document.body.style.position,
|
|
2071
|
+
top: document.body.style.top,
|
|
2072
|
+
left: document.body.style.left,
|
|
2073
|
+
right: document.body.style.right,
|
|
2074
|
+
width: document.body.style.width
|
|
2075
|
+
};
|
|
2076
|
+
document.body.style.overflow = "hidden";
|
|
2077
|
+
document.body.style.position = "fixed";
|
|
2078
|
+
document.body.style.top = `-${scrollY}px`;
|
|
2079
|
+
document.body.style.left = "0";
|
|
2080
|
+
document.body.style.right = "0";
|
|
2081
|
+
document.body.style.width = "100%";
|
|
2082
|
+
return () => {
|
|
2083
|
+
document.body.style.overflow = originalStyles.overflow;
|
|
2084
|
+
document.body.style.position = originalStyles.position;
|
|
2085
|
+
document.body.style.top = originalStyles.top;
|
|
2086
|
+
document.body.style.left = originalStyles.left;
|
|
2087
|
+
document.body.style.right = originalStyles.right;
|
|
2088
|
+
document.body.style.width = originalStyles.width;
|
|
2089
|
+
window.scrollTo(0, scrollY);
|
|
2090
|
+
};
|
|
2091
|
+
}
|
|
2092
|
+
}, [isOpen]);
|
|
2054
2093
|
(0, import_hooks2.useEffect)(() => {
|
|
2055
2094
|
if (!isOpen && messages.length > 0) {
|
|
2056
2095
|
const unread = messages.filter(
|
|
@@ -2249,9 +2288,16 @@ function ChatWidget({ client: client2, config: initialConfig }) {
|
|
|
2249
2288
|
const touch = e.touches[0];
|
|
2250
2289
|
const deltaX = touch.clientX - touchStartRef.current.x;
|
|
2251
2290
|
const deltaY = touch.clientY - touchStartRef.current.y;
|
|
2252
|
-
if (Math.abs(deltaY) > Math.abs(deltaX))
|
|
2291
|
+
if (Math.abs(deltaY) > 10 || Math.abs(deltaX) < 15) {
|
|
2292
|
+
if (swipedMessageId === message.id && swipeOffset !== 0) {
|
|
2293
|
+
setSwipeOffset(0);
|
|
2294
|
+
setSwipedMessageId(null);
|
|
2295
|
+
}
|
|
2296
|
+
return;
|
|
2297
|
+
}
|
|
2298
|
+
e.preventDefault();
|
|
2253
2299
|
if (deltaX < 0) {
|
|
2254
|
-
const offset = Math.max(deltaX, -
|
|
2300
|
+
const offset = Math.max(deltaX, -80);
|
|
2255
2301
|
setSwipeOffset(offset);
|
|
2256
2302
|
setSwipedMessageId(message.id);
|
|
2257
2303
|
}
|
package/dist/index.js
CHANGED
|
@@ -177,24 +177,28 @@ function styles(options) {
|
|
|
177
177
|
left: 20px;
|
|
178
178
|
}
|
|
179
179
|
|
|
180
|
+
/* Mobile: fullscreen widget to prevent scroll issues */
|
|
180
181
|
@media (max-width: 480px) {
|
|
181
182
|
.pp-window {
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
183
|
+
position: fixed;
|
|
184
|
+
top: 0;
|
|
185
|
+
left: 0;
|
|
186
|
+
right: 0;
|
|
187
|
+
bottom: 0;
|
|
188
|
+
width: 100%;
|
|
189
|
+
height: 100%;
|
|
190
|
+
max-height: 100%;
|
|
191
|
+
max-height: 100dvh;
|
|
192
|
+
min-height: 100%;
|
|
193
|
+
min-height: 100dvh;
|
|
194
|
+
border-radius: 0;
|
|
195
|
+
overflow: hidden;
|
|
196
|
+
touch-action: none; /* Prevent page scroll behind widget */
|
|
191
197
|
}
|
|
192
198
|
|
|
193
|
-
/*
|
|
194
|
-
.pp-window
|
|
195
|
-
max-
|
|
196
|
-
max-height: calc(50svh - 20px);
|
|
197
|
-
bottom: 10px;
|
|
199
|
+
/* Prevent any horizontal scroll */
|
|
200
|
+
.pp-window * {
|
|
201
|
+
max-width: 100%;
|
|
198
202
|
}
|
|
199
203
|
}
|
|
200
204
|
|
|
@@ -278,6 +282,7 @@ function styles(options) {
|
|
|
278
282
|
.pp-messages {
|
|
279
283
|
flex: 1;
|
|
280
284
|
overflow-y: auto;
|
|
285
|
+
overflow-x: hidden;
|
|
281
286
|
padding: 16px 12px;
|
|
282
287
|
display: flex;
|
|
283
288
|
flex-direction: column;
|
|
@@ -289,6 +294,7 @@ function styles(options) {
|
|
|
289
294
|
background-image: ${chatBgImage};
|
|
290
295
|
background-size: ${chatBgSize};
|
|
291
296
|
background-position: center;
|
|
297
|
+
touch-action: pan-y; /* Only allow vertical scrolling */
|
|
292
298
|
}
|
|
293
299
|
|
|
294
300
|
.pp-welcome {
|
|
@@ -327,8 +333,9 @@ function styles(options) {
|
|
|
327
333
|
position: relative;
|
|
328
334
|
display: flex;
|
|
329
335
|
align-items: stretch;
|
|
330
|
-
overflow:
|
|
331
|
-
touch-action: pan-y;
|
|
336
|
+
overflow: hidden; /* Prevent horizontal overflow */
|
|
337
|
+
touch-action: pan-y; /* Only vertical scroll */
|
|
338
|
+
max-width: 100%;
|
|
332
339
|
}
|
|
333
340
|
|
|
334
341
|
.pp-swipe-left {
|
|
@@ -463,11 +470,14 @@ function styles(options) {
|
|
|
463
470
|
}
|
|
464
471
|
|
|
465
472
|
/* Add spacing between different senders */
|
|
466
|
-
.pp-message-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
473
|
+
.pp-message-swipe-container + .pp-message-swipe-container {
|
|
474
|
+
margin-top: 4px;
|
|
475
|
+
}
|
|
476
|
+
|
|
477
|
+
/* More spacing when sender changes (visitor <-> operator/ai) */
|
|
478
|
+
.pp-swipe-left + .pp-swipe-right,
|
|
479
|
+
.pp-swipe-right + .pp-swipe-left {
|
|
480
|
+
margin-top: 16px;
|
|
471
481
|
}
|
|
472
482
|
|
|
473
483
|
.pp-message-content {
|
|
@@ -2010,6 +2020,35 @@ function ChatWidget({ client: client2, config: initialConfig }) {
|
|
|
2010
2020
|
setUnreadCount(0);
|
|
2011
2021
|
}
|
|
2012
2022
|
}, [isOpen]);
|
|
2023
|
+
useEffect2(() => {
|
|
2024
|
+
const isMobile = window.innerWidth <= 480;
|
|
2025
|
+
if (isOpen && isMobile) {
|
|
2026
|
+
const scrollY = window.scrollY;
|
|
2027
|
+
const originalStyles = {
|
|
2028
|
+
overflow: document.body.style.overflow,
|
|
2029
|
+
position: document.body.style.position,
|
|
2030
|
+
top: document.body.style.top,
|
|
2031
|
+
left: document.body.style.left,
|
|
2032
|
+
right: document.body.style.right,
|
|
2033
|
+
width: document.body.style.width
|
|
2034
|
+
};
|
|
2035
|
+
document.body.style.overflow = "hidden";
|
|
2036
|
+
document.body.style.position = "fixed";
|
|
2037
|
+
document.body.style.top = `-${scrollY}px`;
|
|
2038
|
+
document.body.style.left = "0";
|
|
2039
|
+
document.body.style.right = "0";
|
|
2040
|
+
document.body.style.width = "100%";
|
|
2041
|
+
return () => {
|
|
2042
|
+
document.body.style.overflow = originalStyles.overflow;
|
|
2043
|
+
document.body.style.position = originalStyles.position;
|
|
2044
|
+
document.body.style.top = originalStyles.top;
|
|
2045
|
+
document.body.style.left = originalStyles.left;
|
|
2046
|
+
document.body.style.right = originalStyles.right;
|
|
2047
|
+
document.body.style.width = originalStyles.width;
|
|
2048
|
+
window.scrollTo(0, scrollY);
|
|
2049
|
+
};
|
|
2050
|
+
}
|
|
2051
|
+
}, [isOpen]);
|
|
2013
2052
|
useEffect2(() => {
|
|
2014
2053
|
if (!isOpen && messages.length > 0) {
|
|
2015
2054
|
const unread = messages.filter(
|
|
@@ -2208,9 +2247,16 @@ function ChatWidget({ client: client2, config: initialConfig }) {
|
|
|
2208
2247
|
const touch = e.touches[0];
|
|
2209
2248
|
const deltaX = touch.clientX - touchStartRef.current.x;
|
|
2210
2249
|
const deltaY = touch.clientY - touchStartRef.current.y;
|
|
2211
|
-
if (Math.abs(deltaY) > Math.abs(deltaX))
|
|
2250
|
+
if (Math.abs(deltaY) > 10 || Math.abs(deltaX) < 15) {
|
|
2251
|
+
if (swipedMessageId === message.id && swipeOffset !== 0) {
|
|
2252
|
+
setSwipeOffset(0);
|
|
2253
|
+
setSwipedMessageId(null);
|
|
2254
|
+
}
|
|
2255
|
+
return;
|
|
2256
|
+
}
|
|
2257
|
+
e.preventDefault();
|
|
2212
2258
|
if (deltaX < 0) {
|
|
2213
|
-
const offset = Math.max(deltaX, -
|
|
2259
|
+
const offset = Math.max(deltaX, -80);
|
|
2214
2260
|
setSwipeOffset(offset);
|
|
2215
2261
|
setSwipedMessageId(message.id);
|
|
2216
2262
|
}
|