diff --git a/app/javascript/retrospring/controllers/clipboard_controller.ts b/app/javascript/retrospring/controllers/clipboard_controller.ts index 23bfc46c..59afaf46 100644 --- a/app/javascript/retrospring/controllers/clipboard_controller.ts +++ b/app/javascript/retrospring/controllers/clipboard_controller.ts @@ -14,6 +14,7 @@ export default class extends Controller { try { await navigator.clipboard.writeText(this.copyValue); showNotification(I18n.translate("frontend.clipboard_copy.success")); + this.element.dispatchEvent(new CustomEvent('retrospring:copied')); } catch (error) { console.log(error); showErrorNotification(I18n.translate("frontend.clipboard_copy.error")); diff --git a/app/javascript/retrospring/controllers/inbox_sharing_controller.ts b/app/javascript/retrospring/controllers/inbox_sharing_controller.ts index dcc7b44f..fe52c0f1 100644 --- a/app/javascript/retrospring/controllers/inbox_sharing_controller.ts +++ b/app/javascript/retrospring/controllers/inbox_sharing_controller.ts @@ -1,13 +1,14 @@ import { Controller } from '@hotwired/stimulus'; export default class extends Controller { - static targets = ['twitter', 'tumblr', 'telegram', 'other', 'custom']; + static targets = ['twitter', 'tumblr', 'telegram', 'other', 'custom', 'clipboard']; declare readonly twitterTarget: HTMLAnchorElement; declare readonly tumblrTarget: HTMLAnchorElement; declare readonly telegramTarget: HTMLAnchorElement; declare readonly customTarget: HTMLAnchorElement; declare readonly otherTarget: HTMLButtonElement; + declare readonly clipboardTarget: HTMLButtonElement; declare readonly hasCustomTarget: boolean; static values = { @@ -24,6 +25,7 @@ export default class extends Controller { this.tumblrTarget.addEventListener('click', () => this.close()); this.telegramTarget.addEventListener('click', () => this.close()); this.otherTarget.addEventListener('click', () => this.closeAfterShare()); + this.clipboardTarget.addEventListener('click', () => this.closeAfterCopyToClipboard()); if (this.hasCustomTarget) { this.customTarget.addEventListener('click', () => this.close()); @@ -54,4 +56,8 @@ export default class extends Controller { closeAfterShare(): void { this.otherTarget.addEventListener('retrospring:shared', () => this.close()); } + + closeAfterCopyToClipboard(): void { + this.clipboardTarget.addEventListener('retrospring:copied', () => this.close()); + } } diff --git a/app/javascript/retrospring/features/inbox/entry/answer.ts b/app/javascript/retrospring/features/inbox/entry/answer.ts index b5a142ab..312527c8 100644 --- a/app/javascript/retrospring/features/inbox/entry/answer.ts +++ b/app/javascript/retrospring/features/inbox/entry/answer.ts @@ -31,11 +31,16 @@ export function answerEntryHandler(event: Event): void { showNotification(data.message); const shareButton = inboxEntry.querySelector('[data-controller="share"]'); + const clipboardCopyButton = inboxEntry.querySelector('[data-action="clipboard#copy"]') if (shareButton != null) { shareButton.dataset.shareUrlValue = data.sharing.url; shareButton.dataset.shareTextValue = data.sharing.text; } + if (clipboardCopyButton != null){ + clipboardCopyButton.dataset.clipboardCopyValue = `${data.sharing.text} ${data.sharing.url}`; + } + const sharing = inboxEntry.querySelector('.inbox-entry__sharing'); if (sharing != null) { sharing.dataset.inboxSharingConfigValue = JSON.stringify(data.sharing); diff --git a/app/views/inbox/_entry.html.haml b/app/views/inbox/_entry.html.haml index 8e15a7a7..c310b7cd 100644 --- a/app/views/inbox/_entry.html.haml +++ b/app/views/inbox/_entry.html.haml @@ -30,6 +30,9 @@ %a.btn.btn-primary{ href: "#", data: { inbox_sharing_target: "telegram" }, target: "_blank" } %i.fab.fa-telegram.fa-fw Telegram + %a.btn.btn-primary{ data: { controller: :clipboard, action: "clipboard#copy", inbox_sharing_target: "clipboard" }} + %i.fa.fa-fw.fa-solid.fa-copy + = t("actions.share.copy") %button.btn.btn-primary{ data: { controller: "share", action: "share#share", inbox_sharing_target: "other" } } %i.fa.fa-fw.fa-share-alt = t("actions.share.other")