diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-live-pane.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-live-pane.hbs index 622bd77a61..d12f7fa535 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-live-pane.hbs +++ b/plugins/chat/assets/javascripts/discourse/components/chat-live-pane.hbs @@ -73,10 +73,7 @@ @setReplyTo={{action "setReplyTo"}} @replyMessageClicked={{action "replyMessageClicked"}} @editButtonClicked={{action "editButtonClicked"}} - @selectingMessages={{this.livePaneReactor.selectingMessages}} - @onStartSelectingMessages={{this.onStartSelectingMessages}} - @onSelectMessage={{this.onSelectMessageOld}} - @bulkSelectMessages={{this.bulkSelectMessages}} + @selectingMessages={{this.livePanel.selectingMessages}} @fullPage={{this.fullPage}} @afterReactionAdded={{action "reStickScrollIfNeeded"}} @isHovered={{eq message.id this.hoveredMessageId}} @@ -119,12 +116,12 @@ {{/if}} -{{#if this.livePaneReactor.selectingMessages}} +{{#if this.livePanel.selectingMessages}} {{else}} {{#if (or this.chatChannel.isDraft this.chatChannel.isFollowing)}} diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-live-pane.js b/plugins/chat/assets/javascripts/discourse/components/chat-live-pane.js index c0d7226309..e7dc69f853 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-live-pane.js +++ b/plugins/chat/assets/javascripts/discourse/components/chat-live-pane.js @@ -2,7 +2,7 @@ import isElementInViewport from "discourse/lib/is-element-in-viewport"; import { cloneJSON } from "discourse-common/lib/object"; import ChatMessage from "discourse/plugins/chat/discourse/models/chat-message"; import ChatMessageActions from "discourse/plugins/chat/discourse/lib/chat-message-actions"; -import ChatLivePaneReactor from "discourse/plugins/chat/discourse/lib/chat-live-pane-reactor"; +import ChatLivePanel from "discourse/plugins/chat/discourse/lib/chat-live-panel"; import Component from "@ember/component"; import discourseComputed, { afterRender, @@ -50,7 +50,6 @@ export default Component.extend({ allPastMessagesLoaded: false, sendingLoading: false, - selectingMessages: false, stickyScroll: true, stickyScrollTimer: null, showChatQuoteSuccess: false, @@ -68,6 +67,9 @@ export default Component.extend({ targetMessageId: null, hasNewMessages: null, + livePanel: null, + messageActionsHandler: null, + chat: service(), chatChannelsManager: service(), router: service(), @@ -111,8 +113,8 @@ export default Component.extend({ // works the same in threads + live pane, however // reactions could be different? replies will be different // for sure... - this.livePaneReactor = new ChatLivePaneReactor(); - this.messageActionsHandler = new ChatMessageActions(this.livePaneReactor); + this.livePanel = new ChatLivePanel(); + this.messageActionsHandler = new ChatMessageActions(this.livePanel); }, didInsertElement() { @@ -207,7 +209,7 @@ export default Component.extend({ // too or ideally just move messages onto the channel @observes("messages") onMessagesChange() { - this.livePaneReactor.messages = this.messages; + this.livePanel.messages = this.messages; }, @discourseComputed("chatChannel.isDirectMessageChannel") @@ -1174,8 +1176,7 @@ export default Component.extend({ this.messageLookup = {}; this.set("allPastMessagesLoaded", false); this.set("registeredChatChannelId", null); - this.set("selectingMessages", false); - this.livePaneReactor.selectingMessages = false; + this.livePanel.cancelSelecting(); }, _resetAfterSend() { @@ -1260,48 +1261,11 @@ export default Component.extend({ return document.querySelector("#chat-progress-bar-container"); }, - @action - onStartSelectingMessages(message) { - this.lastSelectedMessage = message; - this.set("selectingMessages", true); - }, - - @action - cancelSelecting() { - this.livePaneReactor.selectingMessages = false; - this.set("selectingMessages", false); - this.messages.setEach("selected", false); - }, - - @action - onSelectMessageOld(message) { - this.lastSelectedMessage = message; - }, - @action navigateToIndex() { this.router.transitionTo("chat.index"); }, - @action - bulkSelectMessages(message, checked) { - const lastSelectedIndex = this._findIndexOfMessage( - this.lastSelectedMessage - ); - const newlySelectedIndex = this._findIndexOfMessage(message); - const sortedIndices = [lastSelectedIndex, newlySelectedIndex].sort( - (a, b) => a - b - ); - - for (let i = sortedIndices[0]; i <= sortedIndices[1]; i++) { - this.messages[i].set("selected", checked); - } - }, - - _findIndexOfMessage(message) { - return this.messages.findIndex((m) => m.id === message.id); - }, - @action onCloseFullScreen() { this.chatStateManager.prefersDrawer(); diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-message-actions-mobile.js b/plugins/chat/assets/javascripts/discourse/components/chat-message-actions-mobile.js index 35e34b45a8..2d1e8fd117 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-message-actions-mobile.js +++ b/plugins/chat/assets/javascripts/discourse/components/chat-message-actions-mobile.js @@ -32,6 +32,16 @@ export default Component.extend({ @action actAndCloseMenu(fnId) { + if (fnId === "copyLinkToMessage") { + this.messageActionsHandler.copyLink(this.message); + return this.onCloseMenu(); + } + + if (fnId === "selectMessage") { + this.messageActionsHandler.selectMessage(this.message, true); + return this.onCloseMenu(); + } + this.messageActions[fnId]?.(); this.onCloseMenu(); }, diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-message.js b/plugins/chat/assets/javascripts/discourse/components/chat-message.js index ffa133edb2..2f3143c07f 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-message.js +++ b/plugins/chat/assets/javascripts/discourse/components/chat-message.js @@ -3,13 +3,11 @@ import { openBookmarkModal } from "discourse/controllers/bookmark"; import { isTesting } from "discourse-common/config/environment"; import Component from "@glimmer/component"; import I18n from "I18n"; -import getURL from "discourse-common/lib/get-url"; import optionalService from "discourse/lib/optional-service"; import { bind } from "discourse-common/utils/decorators"; import EmberObject, { action } from "@ember/object"; import { ajax } from "discourse/lib/ajax"; import { cancel, schedule } from "@ember/runloop"; -import { clipboardCopy } from "discourse/lib/utilities"; import { inject as service } from "@ember/service"; import { popupAjaxError } from "discourse/lib/ajax-error"; import discourseLater from "discourse-common/lib/later"; @@ -246,7 +244,6 @@ export default class ChatMessage extends Component { return { reply: this.reply, react: this.react, - copyLinkToMessage: this.copyLinkToMessage, edit: this.edit, selectMessage: this.selectMessage, flag: this.flag, @@ -764,30 +761,6 @@ export default class ChatMessage extends Component { ); } - @action - copyLinkToMessage() { - if (!this.messageContainer) { - return; - } - - this.messageContainer - .querySelector(".link-to-message-btn") - ?.classList?.add("copied"); - - const { protocol, host } = window.location; - let url = getURL( - `/chat/c/-/${this.args.message.chat_channel_id}/${this.args.message.id}` - ); - url = url.indexOf("/") === 0 ? protocol + "//" + host + url : url; - clipboardCopy(url); - - discourseLater(() => { - this.messageContainer - ?.querySelector(".link-to-message-btn") - ?.classList?.remove("copied"); - }, 250); - } - get emojiReactions() { const favorites = this.cachedFavoritesReactions; diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-thread.js b/plugins/chat/assets/javascripts/discourse/components/chat-thread.js index 1c07f0c538..f5b408cadd 100644 --- a/plugins/chat/assets/javascripts/discourse/components/chat-thread.js +++ b/plugins/chat/assets/javascripts/discourse/components/chat-thread.js @@ -1,13 +1,25 @@ import Component from "@glimmer/component"; import I18n from "I18n"; import { inject as service } from "@ember/service"; +import ChatMessageActions from "discourse/plugins/chat/discourse/lib/chat-message-actions"; +import ChatThreadLivePanel from "discourse/plugins/chat/discourse/lib/chat-thread-live-panel"; -export default class ChatThreadPanel extends Component { +export default class ChatThread extends Component { @service siteSettings; @service currentUser; @service chat; @service router; + livePanel = null; + messageActionsHandler = null; + + constructor() { + super(...arguments); + + this.livePanel = new ChatThreadLivePanel(); + this.messageActionsHandler = new ChatMessageActions(this.livePanel); + } + get thread() { return this.chat.activeChannel.activeThread; } diff --git a/plugins/chat/assets/javascripts/discourse/lib/chat-live-pane-reactor.js b/plugins/chat/assets/javascripts/discourse/lib/chat-live-panel.js similarity index 64% rename from plugins/chat/assets/javascripts/discourse/lib/chat-live-pane-reactor.js rename to plugins/chat/assets/javascripts/discourse/lib/chat-live-panel.js index f840d35275..fc84321556 100644 --- a/plugins/chat/assets/javascripts/discourse/lib/chat-live-pane-reactor.js +++ b/plugins/chat/assets/javascripts/discourse/lib/chat-live-panel.js @@ -1,7 +1,8 @@ import { tracked } from "@glimmer/tracking"; +import { action } from "@ember/object"; import { TrackedArray } from "@ember-compat/tracked-built-ins"; -export default class ChatLivePaneReactor { +export default class ChatLivePanel { @tracked messages = new TrackedArray(); @tracked selectingMessages; @@ -12,6 +13,13 @@ export default class ChatLivePaneReactor { this.selectingMessages = true; } + @action + cancelSelecting() { + this.selectingMessages = false; + this.lastSelectedMessage = null; + this.messages.setEach("selected", false); + } + get selectedMessageIds() { return this.messages.filterBy("selected").mapBy("id"); } diff --git a/plugins/chat/assets/javascripts/discourse/lib/chat-message-actions.js b/plugins/chat/assets/javascripts/discourse/lib/chat-message-actions.js index ac2ac4286e..2d6583b240 100644 --- a/plugins/chat/assets/javascripts/discourse/lib/chat-message-actions.js +++ b/plugins/chat/assets/javascripts/discourse/lib/chat-message-actions.js @@ -2,16 +2,16 @@ import getURL from "discourse-common/lib/get-url"; import { clipboardCopy } from "discourse/lib/utilities"; export default class ChatMessageActions { - contextualPanel = null; + livePanel = null; - constructor(contextualPanel) { + constructor(livePanel) { // now its parent "context" or "scope" needs to // be put into the selection mode...we could probably // just store a reference to this parent on init? // // so in live pane and thread panel we would do new - // ChatMessageActions(this) and call this.contextualPanel.XX - this.contextualPanel = contextualPanel; + // ChatMessageActions(this) and call this.livePanel.XX + this.livePanel = livePanel; } copyLink(message) { @@ -27,12 +27,12 @@ export default class ChatMessageActions { // naming for all the parent panel stuff should be // the same with on- prefix, e.g. onSelectMessage, // onDeleteMessage etc. - this.contextualPanel.onSelectMessage(message); + this.livePanel.onSelectMessage(message); } bulkSelectMessages(message, checked) { const lastSelectedIndex = this.#findIndexOfMessage( - this.contextualPanel.lastSelectedMessage + this.livePanel.lastSelectedMessage ); const newlySelectedIndex = this.#findIndexOfMessage(message); const sortedIndices = [lastSelectedIndex, newlySelectedIndex].sort( @@ -40,11 +40,11 @@ export default class ChatMessageActions { ); for (let i = sortedIndices[0]; i <= sortedIndices[1]; i++) { - this.messages[i].set("selected", checked); + this.livePanel.messages[i].set("selected", checked); } } #findIndexOfMessage(message) { - return this.messages.findIndex((m) => m.id === message.id); + return this.livePanel.messages.findIndex((m) => m.id === message.id); } } diff --git a/plugins/chat/assets/javascripts/discourse/lib/chat-thread-live-panel.js b/plugins/chat/assets/javascripts/discourse/lib/chat-thread-live-panel.js new file mode 100644 index 0000000000..af1d73108e --- /dev/null +++ b/plugins/chat/assets/javascripts/discourse/lib/chat-thread-live-panel.js @@ -0,0 +1,3 @@ +import ChatLivePanel from "./chat-live-panel"; + +export default class ChatThreadLivePanel extends ChatLivePanel {}