Render toggle button after links

This commit is contained in:
Pavel Djundik 2018-07-11 14:58:55 +03:00 committed by Pavel Djundik
parent 5792bff49d
commit ebda927bb1
6 changed files with 12 additions and 20 deletions

View File

@ -126,6 +126,14 @@ export default {
mounted() {
const options = require("../js/options");
this.$set(this.link, "canDisplay", this.link.type !== "loading" && options.shouldOpenMessagePreview(this.link.type));
this.$nextTick(() => {
const escapedLink = this.link.link.replace(/["\\]/g, "\\$&");
this.$parent.$refs.text
.querySelector(`.toggle-preview[data-url="${escapedLink}"]`)
.removeAttribute("hidden");
});
},
methods: {
onPreviewReady() {

View File

@ -29,6 +29,7 @@
</span>
<span class="content">
<span
ref="text"
class="text"
v-html="$options.filters.parse(message.text, message.users)"/>

View File

@ -325,8 +325,7 @@ kbd {
#help .website-link::before,
#help .documentation-link::before,
#help .report-issue-link::before,
#chat .toggle-button {
#help .report-issue-link::before {
display: inline-block;
margin-right: 5px;

View File

@ -93,7 +93,8 @@ module.exports = function parse(text, users = []) {
// Wrap these potentially styled fragments with links and channel buttons
if (textPart.link) {
const escapedLink = Handlebars.Utils.escapeExpression(textPart.link);
return `<a href="${escapedLink}" target="_blank" rel="noopener">${fragments}</a>`;
return `<a href="${escapedLink}" target="_blank" rel="noopener">${fragments}</a>` +
`<button class="toggle-button toggle-preview" data-url="${escapedLink}" hidden></button>`;
} else if (textPart.channel) {
const escapedChannel = Handlebars.Utils.escapeExpression(textPart.channel);
return `<span class="inline-channel" role="button" tabindex="0" data-chan="${escapedChannel}">${fragments}</span>`;

View File

@ -111,10 +111,8 @@ $(window).on("resize", debounce(togglePreviewMoreButtonsIfNeeded, 150));
$("#chat").on("click", ".text .toggle-button", function() {
const self = $(this);
const container = self.closest(".chat");
const content = self.closest(".content")
.find(`.preview[data-url="${self.data("url")}"] .toggle-content`);
const bottom = container.isScrollBottom();
self.toggleClass("opened");
content.toggleClass("show");
@ -134,11 +132,6 @@ $("#chat").on("click", ".text .toggle-button", function() {
link: self.data("url"),
shown: isExpanded,
});
// If scrollbar was at the bottom before toggling the preview, keep it at the bottom
if (bottom) {
container.scrollBottom();
}
});
$("#chat").on("click", ".toggle-content .more", function() {

View File

@ -1,10 +0,0 @@
{{#preview}}
<button class="toggle-button toggle-preview {{#if shown}} opened{{/if}}"
data-url="{{link}}"
{{#equal type "image"}}
aria-label="Toggle image preview"
{{else}}
aria-label="Toggle website preview"
{{/equal}}
></button>
{{/preview}}