New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Refactor link previews #1276
Refactor link previews #1276
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -37,7 +37,7 @@ import jQuery from "jquery"; | |
lastStick = Date.now(); | ||
this.scrollTop = this.scrollHeight; | ||
}) | ||
.on("msg.sticky", keepToBottom) | ||
.on("keepToBottom.sticky", keepToBottom) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'm definitely missing something here, why does this need to be changed? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Gotta trigger "keep to bottom" logic, but can't call the already used |
||
.scrollBottom(); | ||
|
||
return self; | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -35,7 +35,8 @@ socket.on("msg", function(data) { | |
.trigger("msg", [ | ||
target, | ||
data | ||
]); | ||
]) | ||
.trigger("keepToBottom"); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Does this mean that anytime a message is received, the channel is jumped to the bottom automatically? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Testing this, it doesn't seem so. But then I'm not 100% why this is for. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Because There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Okay, this goes along with the rename from msg to keepToBottom and I missed that. |
||
|
||
var lastVisible = container.find("div:visible").last(); | ||
if (data.msg.self | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
"use strict"; | ||
|
||
const $ = require("jquery"); | ||
const socket = require("../socket"); | ||
const templates = require("../../views"); | ||
const options = require("../options"); | ||
|
||
socket.on("msg:preview", function(data) { | ||
data.preview.shown = options.shouldOpenMessagePreview(data.preview.type); | ||
|
||
const msg = $("#msg-" + data.id); | ||
const container = msg.parent(".messages"); | ||
const bottom = container.isScrollBottom(); | ||
|
||
msg.find(".text").append(templates.msg_preview({preview: data.preview})); | ||
|
||
if (data.preview.shown && bottom) { | ||
handleImageInPreview(msg.find(".toggle-content"), container); | ||
} | ||
|
||
container.trigger("keepToBottom"); | ||
}); | ||
|
||
$("#chat").on("click", ".toggle-button", function() { | ||
const self = $(this); | ||
const container = self.closest(".messages"); | ||
const content = self.parent().next(".toggle-content"); | ||
const bottom = container.isScrollBottom(); | ||
|
||
if (bottom && !content.hasClass("show")) { | ||
handleImageInPreview(content, container); | ||
} | ||
|
||
content.toggleClass("show"); | ||
|
||
// If scrollbar was at the bottom before toggling the preview, keep it at the bottom | ||
if (bottom) { | ||
container.scrollBottom(); | ||
} | ||
}); | ||
|
||
function handleImageInPreview(content, container) { | ||
const img = content.find("img"); | ||
|
||
// Trigger scroll logic after the image loads | ||
if (img.length && !img.width()) { | ||
img.on("load", function() { | ||
container.trigger("keepToBottom"); | ||
}); | ||
} | ||
} |
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
{{#preview}} | ||
<div> | ||
<button class="toggle-button" aria-label="Toggle prefetched media"></button> | ||
</div> | ||
<a href="{{link}}" target="_blank" rel="noopener" class="toggle-content toggle-type-{{type}}{{#if shown}} show{{/if}}"> | ||
{{#equal type "image"}} | ||
<img src="{{link}}"> | ||
{{else}} | ||
{{#if thumb}} | ||
<img src="{{thumb}}" class="thumb"> | ||
{{/if}} | ||
<div class="head">{{head}}</div> | ||
<div class="body"> | ||
{{body}} | ||
</div> | ||
{{/equal}} | ||
</a> | ||
{{/preview}} |
This file was deleted.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Probably for another PR, but I'd love to change this to a right (closed) / down (opened) caret...