Skip to content

Commit 61b91f1

Browse files
antoine92190antoine92190
committed
(props) add auto-scroll behaviour
1 parent 199aaa2 commit 61b91f1

File tree

3 files changed

+85
-34
lines changed

3 files changed

+85
-34
lines changed

‎README.md

Lines changed: 42 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -226,6 +226,7 @@ fetchMessages({ room, options }) {
226226
| `menu-actions`(9) | Array | - | `[]` |
227227
| `message-actions`(10) | Array | - | (10) |
228228
| `templates-text`(11) | Array | - | `null` |
229+
| `auto-scroll`(12) | Object | - | `{ send: { new: true, newAfterScrollUp: true }, receive: { new: true, newAfterScrollUp: false } }` |
229230
| `show-search` | Boolean | - | `true` |
230231
| `show-add-room` | Boolean | - | `true` |
231232
| `show-send-icon` | Boolean | - | `true` |
@@ -235,22 +236,22 @@ fetchMessages({ room, options }) {
235236
| `audio-sample-rate` | Number | - | `44100` |
236237
| `show-emojis` | Boolean | - | `true` |
237238
| `show-reaction-emojis` | Boolean | - | `true` |
238-
| `show-new-messages-divider`(12) | Boolean | - | `true` |
239-
| `show-footer`(13) | Boolean | - | `true` |
240-
| `text-messages`(14) | Object | - | `null` |
241-
| `text-formatting`(15) | Object | - | ` {disabled: false, italic: '_', bold: '*', strike: '~', underline: '°', multilineCode: '```', inlineCode: ' `'}` |
242-
| `link-options`(16) | Object | - | `{ disabled: false, target: '_blank', rel: null }` |
243-
| `room-info-enabled` (17) | Boolean | - | `false` |
244-
| `textarea-action-enabled`(18) | Boolean | - | `false` |
239+
| `show-new-messages-divider`(13) | Boolean | - | `true` |
240+
| `show-footer`(14) | Boolean | - | `true` |
241+
| `text-messages`(15) | Object | - | `null` |
242+
| `text-formatting`(16) | Object | - | ` {disabled: false, italic: '_', bold: '*', strike: '~', underline: '°', multilineCode: '```', inlineCode: ' `'}` |
243+
| `link-options`(17) | Object | - | `{ disabled: false, target: '_blank', rel: null }` |
244+
| `room-info-enabled` (18) | Boolean | - | `false` |
245+
| `textarea-action-enabled`(19) | Boolean | - | `false` |
245246
| `user-tags-enabled` | Boolean | - | `true` |
246247
| `emojis-suggestion-enabled` | Boolean | - | `true` |
247248
| `media-preview-enabled` | Boolean | - | `true` |
248-
| `responsive-breakpoint`(19) | Number | - | `900` |
249-
| `single-room`(20) | Boolean | - | `false` |
250-
| `scroll-distance`(21) | Number | - | `60` |
251-
| `theme`(22) | Sring | - | `light` |
252-
| `accepted-files`(23) | String | - | `*` |
253-
| `styles`(24) | Object | - | (23) |
249+
| `responsive-breakpoint`(20) | Number | - | `900` |
250+
| `single-room`(21) | Boolean | - | `false` |
251+
| `scroll-distance`(22) | Number | - | `60` |
252+
| `theme`(23) | Sring | - | `light` |
253+
| `accepted-files`(24) | String | - | `*` |
254+
| `styles`(25) | Object | - | (23) |
254255

255256
**(1)** `current-user-id` is required to display UI and trigger actions according to the user using the chat (ex: messages position on the right, etc.)
256257

@@ -353,11 +354,26 @@ templatesText="[
353354
]"
354355
```
355356

356-
**(12)** `show-new-messages-divider` can be used to show/hide the blue line divider between seen and unseen messages.
357+
**(12)** `auto-scroll` can be used to change the auto scroll behaviour when sending/receiving a message. Ex:
357358

358-
**(13)** `show-footer` can be used to hide the room footer. For example to prevent users to send any message or media.
359+
```javascript
360+
auto-scroll="{
361+
send: {
362+
new: true, // will scroll down after sending a message
363+
newAfterScrollUp: false // will not scroll down after sending a message when scrolled up
364+
},
365+
receive: {
366+
new: false, // will not scroll down when receiving a message
367+
newAfterScrollUp: true // will scroll down when receiving a message when scrolled up
368+
}
369+
}"
370+
```
371+
372+
**(13)** `show-new-messages-divider` can be used to show/hide the blue line divider between seen and unseen messages.
373+
374+
**(14)** `show-footer` can be used to hide the room footer. For example to prevent users to send any message or media.
359375

360-
**(14)** `text-messages` can be used to replace default i18n texts. Ex:
376+
**(15)** `text-messages` can be used to replace default i18n texts. Ex:
361377

362378
```javascript
363379
text-messages="{
@@ -375,7 +391,7 @@ text-messages="{
375391
}"
376392
```
377393

378-
**(15)** `text-formatting` can be used to add text formatting. Bold, italic, strikethrough, underline, inline code and multiline code formatting are currently available and can be used in conjonction.
394+
**(16)** `text-formatting` can be used to add text formatting. Bold, italic, strikethrough, underline, inline code and multiline code formatting are currently available and can be used in conjonction.
379395

380396
- You can disable text formatting by passing the prop `:text-formatting="{disabled: true}"`.
381397
- You can change markdown characters, for example: `:text-formatting="{italic: '^'}"`
@@ -406,31 +422,31 @@ This is
406422
multiline code
407423
```
408424

409-
**(16)** `link-options` can be used to disable url links in messages, or change urls target. Ex:
425+
**(17)** `link-options` can be used to disable url links in messages, or change urls target. Ex:
410426

411427
```javascript
412428
:link-options="{ disabled: true, target: '_self', rel: null }"
413429
```
414430

415-
**(17)** `room-info-enabled` can be used to trigger an event after clicking the room header component.<br>
431+
**(18)** `room-info-enabled` can be used to trigger an event after clicking the room header component.<br>
416432
You can then use the [room-info](#events-api) event to call your own action after clicking the header.
417433

418-
**(18)** `textarea-action-enabled` can be used to add an extra icon on the right of the textarea<br>
434+
**(19)** `textarea-action-enabled` can be used to add an extra icon on the right of the textarea<br>
419435
You can then use the [textarea-action-handler](#events-api) event to call your own action after clicking the icon.
420436

421-
**(19)** `responsive-breakpoint` can be used to collapse the rooms list on the left when then viewport size goes below the specified width.
437+
**(20)** `responsive-breakpoint` can be used to collapse the rooms list on the left when then viewport size goes below the specified width.
422438

423-
**(20)** `single-room` can be used if you never want to show the rooms list on the left. You still need to pass the `rooms` prop as an array with a single element.
439+
**(21)** `single-room` can be used if you never want to show the rooms list on the left. You still need to pass the `rooms` prop as an array with a single element.
424440

425-
**(21)** `scroll-distance` can be used to change the number of pixels before `fetchMessages` event is triggered when scrolling up to load more messages, or `fetchMoreRooms` event is triggered when scrolling down to load more rooms.
441+
**(22)** `scroll-distance` can be used to change the number of pixels before `fetchMessages` event is triggered when scrolling up to load more messages, or `fetchMoreRooms` event is triggered when scrolling down to load more rooms.
426442

427-
**(22)** `theme` can be used to change the chat theme. Currently, only `light` and `dark` are available.
443+
**(23)** `theme` can be used to change the chat theme. Currently, only `light` and `dark` are available.
428444

429-
**(23)** `accepted-files` can be used to set specifics file types allowed in chat. By default, all file types are allowed: `"*"`.
445+
**(24)** `accepted-files` can be used to set specifics file types allowed in chat. By default, all file types are allowed: `"*"`.
430446

431447
Example: set `"accepted-files="image/png, image/jpeg, application/pdf"` to allow `JPG` `PNG` and `PDF` files only
432448

433-
**(24)** `styles` can be used to customize your own theme. You can find the full list [here](src/themes/index.js)
449+
**(25)** `styles` can be used to customize your own theme. You can find the full list [here](src/themes/index.js)
434450

435451
```javascript
436452
styles="{

‎src/lib/ChatWindow.vue

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
:messages-loaded="messagesLoaded"
3939
:menu-actions="menuActions"
4040
:message-actions="messageActions"
41+
:auto-scroll="autoScroll"
4142
:show-send-icon="showSendIcon"
4243
:show-files="showFiles"
4344
:show-audio="showAudio"
@@ -138,6 +139,21 @@ export default {
138139
{ name: 'deleteMessage', title: 'Delete Message', onlyMe: true }
139140
]
140141
},
142+
autoScroll: {
143+
type: Object,
144+
default: () => {
145+
return {
146+
send: {
147+
new: true,
148+
newAfterScrollUp: true
149+
},
150+
receive: {
151+
new: true,
152+
newAfterScrollUp: false
153+
}
154+
}
155+
}
156+
},
141157
showSearch: { type: Boolean, default: true },
142158
showAddRoom: { type: Boolean, default: true },
143159
showSendIcon: { type: Boolean, default: true },

‎src/lib/Room/Room.vue

Lines changed: 27 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -368,6 +368,7 @@ export default {
368368
messagesLoaded: { type: Boolean, required: true },
369369
menuActions: { type: Array, required: true },
370370
messageActions: { type: Array, required: true },
371+
autoScroll: { type: Object, required: true },
371372
showSendIcon: { type: Boolean, required: true },
372373
showFiles: { type: Boolean, required: true },
373374
showAudio: { type: Boolean, required: true },
@@ -704,16 +705,34 @@ export default {
704705
const autoScrollOffset = ref.offsetHeight + 60
705706
706707
setTimeout(() => {
707-
if (
708-
this.getBottomScroll(this.$refs.scrollContainer) < autoScrollOffset
709-
) {
710-
this.scrollToBottom()
708+
const scrolledUp =
709+
this.getBottomScroll(this.$refs.scrollContainer) > autoScrollOffset
710+
711+
if (message.senderId === this.currentUserId) {
712+
if (scrolledUp) {
713+
if (this.autoScroll.send.newAfterScrollUp) {
714+
this.scrollToBottom()
715+
}
716+
} else {
717+
if (this.autoScroll.send.new) {
718+
this.scrollToBottom()
719+
}
720+
}
711721
} else {
712-
if (message.senderId === this.currentUserId) {
713-
this.scrollToBottom()
722+
if (scrolledUp) {
723+
if (this.autoScroll.receive.newAfterScrollUp) {
724+
this.scrollToBottom()
725+
} else {
726+
this.scrollIcon = true
727+
this.scrollMessagesCount++
728+
}
714729
} else {
715-
this.scrollIcon = true
716-
this.scrollMessagesCount++
730+
if (this.autoScroll.receive.new) {
731+
this.scrollToBottom()
732+
} else {
733+
this.scrollIcon = true
734+
this.scrollMessagesCount++
735+
}
717736
}
718737
}
719738
})

0 commit comments

Comments
 (0)