@hellotext/hellotext 2.4.3 → 2.4.4

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 (5) hide show
  1. package/dist/hellotext.js +1 -1
  2. package/lib/controllers/webchat_controller.cjs +24 -0
  3. package/lib/controllers/webchat_controller.js +24 -0
  4. package/package.json +1 -1
  5. package/src/controllers/webchat_controller.js +36 -0
package/lib/controllers/webchat_controller.cjs CHANGED
@@ -35,6 +35,10 @@ const MESSAGE_TIMESTAMP_FORMAT_OPTIONS = {
35
35
  hour: 'numeric',
36
36
  minute: '2-digit'
37
37
  };
38
+ const SCROLL_ISOLATION_EVENT_OPTIONS = {
39
+ capture: true,
40
+ passive: true
41
+ };
38
42
  let _default = /*#__PURE__*/function (_Controller) {
39
43
  _inherits(_default, _Controller);
40
44
  var _super = _createSuper(_default);
@@ -82,7 +86,10 @@ let _default = /*#__PURE__*/function (_Controller) {
82
86
  this.webChatChannel.onMessage(this.onMessageReceived);
83
87
  this.webChatChannel.onTypingStart(this.onTypingStart);
84
88
  this.webChatChannel.onReaction(this.onMessageReaction);
89
+ this.setupMessagesContainerScrollIsolation();
85
90
  this.messagesContainerTarget.addEventListener('scroll', this.onScroll);
91
+ this.messagesContainerTarget.addEventListener('wheel', this.stopHostScrollPropagation, SCROLL_ISOLATION_EVENT_OPTIONS);
92
+ this.messagesContainerTarget.addEventListener('touchmove', this.stopHostScrollPropagation, SCROLL_ISOLATION_EVENT_OPTIONS);
86
93
  if (this.shouldOpenOnMount) {
87
94
  this.openValue = true;
88
95
  }
@@ -101,6 +108,8 @@ let _default = /*#__PURE__*/function (_Controller) {
101
108
  this.teardownOpeningSequence();
102
109
  this.broadcastChannel.removeEventListener('message', this.onOutboundMessageSent);
103
110
  this.messagesContainerTarget.removeEventListener('scroll', this.onScroll);
111
+ this.messagesContainerTarget.removeEventListener('wheel', this.stopHostScrollPropagation, SCROLL_ISOLATION_EVENT_OPTIONS);
112
+ this.messagesContainerTarget.removeEventListener('touchmove', this.stopHostScrollPropagation, SCROLL_ISOLATION_EVENT_OPTIONS);
104
113
  window.removeEventListener('keydown', this.closePopoverOnEscape, true);
105
114
 
106
115
  // Clean up typing indicator timeouts
@@ -109,6 +118,21 @@ let _default = /*#__PURE__*/function (_Controller) {
109
118
  this.floatingUICleanup();
110
119
  _get(_getPrototypeOf(_default.prototype), "disconnect", this).call(this);
111
120
  }
121
+ }, {
122
+ key: "setupMessagesContainerScrollIsolation",
123
+ value: function setupMessagesContainerScrollIsolation() {
124
+ this.messagesContainerTarget.style.overscrollBehavior = 'contain';
125
+ this.messagesContainerTarget.style.webkitOverflowScrolling = 'touch';
126
+ this.messagesContainerTarget.style.touchAction = 'pan-y';
127
+ this.messagesContainerTarget.setAttribute('data-lenis-prevent', '');
128
+ this.messagesContainerTarget.setAttribute('data-lenis-prevent-wheel', '');
129
+ this.messagesContainerTarget.setAttribute('data-lenis-prevent-touch', '');
130
+ }
131
+ }, {
132
+ key: "stopHostScrollPropagation",
133
+ value: function stopHostScrollPropagation(event) {
134
+ event.stopPropagation();
135
+ }
112
136
  }, {
113
137
  key: "onTypingStart",
114
138
  value: function onTypingStart() {
package/lib/controllers/webchat_controller.js CHANGED
@@ -33,6 +33,10 @@ var MESSAGE_TIMESTAMP_FORMAT_OPTIONS = {
33
33
  hour: 'numeric',
34
34
  minute: '2-digit'
35
35
  };
36
+ var SCROLL_ISOLATION_EVENT_OPTIONS = {
37
+ capture: true,
38
+ passive: true
39
+ };
36
40
  var _default = /*#__PURE__*/function (_Controller) {
37
41
  _inherits(_default, _Controller);
38
42
  var _super = _createSuper(_default);
@@ -80,7 +84,10 @@ var _default = /*#__PURE__*/function (_Controller) {
80
84
  this.webChatChannel.onMessage(this.onMessageReceived);
81
85
  this.webChatChannel.onTypingStart(this.onTypingStart);
82
86
  this.webChatChannel.onReaction(this.onMessageReaction);
87
+ this.setupMessagesContainerScrollIsolation();
83
88
  this.messagesContainerTarget.addEventListener('scroll', this.onScroll);
89
+ this.messagesContainerTarget.addEventListener('wheel', this.stopHostScrollPropagation, SCROLL_ISOLATION_EVENT_OPTIONS);
90
+ this.messagesContainerTarget.addEventListener('touchmove', this.stopHostScrollPropagation, SCROLL_ISOLATION_EVENT_OPTIONS);
84
91
  if (this.shouldOpenOnMount) {
85
92
  this.openValue = true;
86
93
  }
@@ -99,6 +106,8 @@ var _default = /*#__PURE__*/function (_Controller) {
99
106
  this.teardownOpeningSequence();
100
107
  this.broadcastChannel.removeEventListener('message', this.onOutboundMessageSent);
101
108
  this.messagesContainerTarget.removeEventListener('scroll', this.onScroll);
109
+ this.messagesContainerTarget.removeEventListener('wheel', this.stopHostScrollPropagation, SCROLL_ISOLATION_EVENT_OPTIONS);
110
+ this.messagesContainerTarget.removeEventListener('touchmove', this.stopHostScrollPropagation, SCROLL_ISOLATION_EVENT_OPTIONS);
102
111
  window.removeEventListener('keydown', this.closePopoverOnEscape, true);
103
112
 
104
113
  // Clean up typing indicator timeouts
@@ -107,6 +116,21 @@ var _default = /*#__PURE__*/function (_Controller) {
107
116
  this.floatingUICleanup();
108
117
  _get(_getPrototypeOf(_default.prototype), "disconnect", this).call(this);
109
118
  }
119
+ }, {
120
+ key: "setupMessagesContainerScrollIsolation",
121
+ value: function setupMessagesContainerScrollIsolation() {
122
+ this.messagesContainerTarget.style.overscrollBehavior = 'contain';
123
+ this.messagesContainerTarget.style.webkitOverflowScrolling = 'touch';
124
+ this.messagesContainerTarget.style.touchAction = 'pan-y';
125
+ this.messagesContainerTarget.setAttribute('data-lenis-prevent', '');
126
+ this.messagesContainerTarget.setAttribute('data-lenis-prevent-wheel', '');
127
+ this.messagesContainerTarget.setAttribute('data-lenis-prevent-touch', '');
128
+ }
129
+ }, {
130
+ key: "stopHostScrollPropagation",
131
+ value: function stopHostScrollPropagation(event) {
132
+ event.stopPropagation();
133
+ }
110
134
  }, {
111
135
  key: "onTypingStart",
112
136
  value: function onTypingStart() {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hellotext/hellotext",
3
- "version": "2.4.3",
3
+ "version": "2.4.4",
4
4
  "description": "Hellotext JavaScript Client",
5
5
  "source": "src/index.js",
6
6
  "main": "lib/index.cjs",
package/src/controllers/webchat_controller.js CHANGED
@@ -18,6 +18,7 @@ const MESSAGE_TIMESTAMP_FORMAT_OPTIONS = {
18
18
  hour: 'numeric',
19
19
  minute: '2-digit',
20
20
  }
21
+ const SCROLL_ISOLATION_EVENT_OPTIONS = { capture: true, passive: true }
21
22
 
22
23
  export default class extends Controller {
23
24
  static messageTimestampFormatters = {}
@@ -122,7 +123,18 @@ export default class extends Controller {
122
123
 
123
124
  this.webChatChannel.onReaction(this.onMessageReaction)
124
125
 
126
+ this.setupMessagesContainerScrollIsolation()
125
127
  this.messagesContainerTarget.addEventListener('scroll', this.onScroll)
128
+ this.messagesContainerTarget.addEventListener(
129
+ 'wheel',
130
+ this.stopHostScrollPropagation,
131
+ SCROLL_ISOLATION_EVENT_OPTIONS,
132
+ )
133
+ this.messagesContainerTarget.addEventListener(
134
+ 'touchmove',
135
+ this.stopHostScrollPropagation,
136
+ SCROLL_ISOLATION_EVENT_OPTIONS,
137
+ )
126
138
 
127
139
  if (this.shouldOpenOnMount) {
128
140
  this.openValue = true
@@ -144,6 +156,16 @@ export default class extends Controller {
144
156
 
145
157
  this.broadcastChannel.removeEventListener('message', this.onOutboundMessageSent)
146
158
  this.messagesContainerTarget.removeEventListener('scroll', this.onScroll)
159
+ this.messagesContainerTarget.removeEventListener(
160
+ 'wheel',
161
+ this.stopHostScrollPropagation,
162
+ SCROLL_ISOLATION_EVENT_OPTIONS,
163
+ )
164
+ this.messagesContainerTarget.removeEventListener(
165
+ 'touchmove',
166
+ this.stopHostScrollPropagation,
167
+ SCROLL_ISOLATION_EVENT_OPTIONS,
168
+ )
147
169
  window.removeEventListener('keydown', this.closePopoverOnEscape, true)
148
170
 
149
171
  // Clean up typing indicator timeouts
@@ -155,6 +177,20 @@ export default class extends Controller {
155
177
  super.disconnect()
156
178
  }
157
179
 
180
+ setupMessagesContainerScrollIsolation() {
181
+ this.messagesContainerTarget.style.overscrollBehavior = 'contain'
182
+ this.messagesContainerTarget.style.webkitOverflowScrolling = 'touch'
183
+ this.messagesContainerTarget.style.touchAction = 'pan-y'
184
+
185
+ this.messagesContainerTarget.setAttribute('data-lenis-prevent', '')
186
+ this.messagesContainerTarget.setAttribute('data-lenis-prevent-wheel', '')
187
+ this.messagesContainerTarget.setAttribute('data-lenis-prevent-touch', '')
188
+ }
189
+
190
+ stopHostScrollPropagation(event) {
191
+ event.stopPropagation()
192
+ }
193
+
158
194
  onTypingStart() {
159
195
  if (this.typingIndicatorVisible) {
160
196
  return this.resetTypingIndicatorTimer()