From 3feb827b16b187b38316cf2201e74399feb714e1 Mon Sep 17 00:00:00 2001 From: Andreas Nedbal Date: Mon, 16 Oct 2023 15:02:57 +0200 Subject: [PATCH] Add support for sharing dialog in inbox answer sharing --- .../stylesheets/components/_inbox-entry.scss | 6 +++ .../controllers/inbox_sharing_controller.ts | 4 +- .../controllers/share_controller.ts | 42 +++++++++++++++++++ .../features/inbox/entry/answer.ts | 5 +++ .../retrospring/initializers/stimulus.ts | 2 + app/views/inbox/_entry.html.haml | 3 ++ 6 files changed, 61 insertions(+), 1 deletion(-) create mode 100644 app/javascript/retrospring/controllers/share_controller.ts diff --git a/app/assets/stylesheets/components/_inbox-entry.scss b/app/assets/stylesheets/components/_inbox-entry.scss index a56875cd..b10ee20b 100644 --- a/app/assets/stylesheets/components/_inbox-entry.scss +++ b/app/assets/stylesheets/components/_inbox-entry.scss @@ -57,3 +57,9 @@ position: relative; } } + +body:not(.cap-web-share) { + [data-controller="share"] { + display: none; + } +} diff --git a/app/javascript/retrospring/controllers/inbox_sharing_controller.ts b/app/javascript/retrospring/controllers/inbox_sharing_controller.ts index 6d0218b1..d087d62d 100644 --- a/app/javascript/retrospring/controllers/inbox_sharing_controller.ts +++ b/app/javascript/retrospring/controllers/inbox_sharing_controller.ts @@ -1,12 +1,13 @@ import { Controller } from '@hotwired/stimulus'; export default class extends Controller { - static targets = ['twitter', 'tumblr', 'telegram', 'custom']; + static targets = ['twitter', 'tumblr', 'telegram', 'other', 'custom']; declare readonly twitterTarget: HTMLAnchorElement; declare readonly tumblrTarget: HTMLAnchorElement; declare readonly telegramTarget: HTMLAnchorElement; declare readonly customTarget: HTMLAnchorElement; + declare readonly otherTarget: HTMLButtonElement; declare readonly hasCustomTarget: boolean; static values = { @@ -22,6 +23,7 @@ export default class extends Controller { this.twitterTarget.addEventListener('click', () => this.close()); this.tumblrTarget.addEventListener('click', () => this.close()); this.telegramTarget.addEventListener('click', () => this.close()); + this.otherTarget.addEventListener('click', () => this.close()); if (this.hasCustomTarget) { this.customTarget.addEventListener('click', () => this.close()); diff --git a/app/javascript/retrospring/controllers/share_controller.ts b/app/javascript/retrospring/controllers/share_controller.ts new file mode 100644 index 00000000..e9e8d250 --- /dev/null +++ b/app/javascript/retrospring/controllers/share_controller.ts @@ -0,0 +1,42 @@ +import { Controller } from '@hotwired/stimulus'; + +export default class extends Controller { + static values = { + url: String, + text: String, + title: String + }; + + declare readonly urlValue: string; + declare readonly textValue: string; + declare readonly titleValue: string; + + share() { + let shareConfiguration = {}; + + if (this.urlValue.length >= 1) { + shareConfiguration = { + ...shareConfiguration, + ...{ url: this.urlValue } + }; + } + + if (this.textValue.length >= 1) { + shareConfiguration = { + ...shareConfiguration, + ...{ text: this.textValue } + }; + } + + if (this.titleValue.length >= 1) { + shareConfiguration = { + ...shareConfiguration, + ...{ title: this.titleValue } + }; + } + + navigator.share(shareConfiguration).then(() => { + this.element.dispatchEvent(new CustomEvent('retrospring:shared')); + }); + } +} diff --git a/app/javascript/retrospring/features/inbox/entry/answer.ts b/app/javascript/retrospring/features/inbox/entry/answer.ts index 93b0cefc..77440d17 100644 --- a/app/javascript/retrospring/features/inbox/entry/answer.ts +++ b/app/javascript/retrospring/features/inbox/entry/answer.ts @@ -34,6 +34,11 @@ export function answerEntryHandler(event: Event): void { if (sharing != null) { sharing.dataset.inboxSharingConfigValue = JSON.stringify(data.sharing); } + + const shareButton = inboxEntry.querySelector('[data-controller="share"]'); + if (shareButton != null) { + shareButton.dataset.shareTextValue = decodeURIComponent(data.sharing.custom).replaceAll('+', ' '); + } else { (inboxEntry as HTMLElement).remove(); } diff --git a/app/javascript/retrospring/initializers/stimulus.ts b/app/javascript/retrospring/initializers/stimulus.ts index aee44e36..79116e3e 100644 --- a/app/javascript/retrospring/initializers/stimulus.ts +++ b/app/javascript/retrospring/initializers/stimulus.ts @@ -13,6 +13,7 @@ import InboxSharingController from "retrospring/controllers/inbox_sharing_contro import ToastController from "retrospring/controllers/toast_controller"; import PwaBadgeController from "retrospring/controllers/pwa_badge_controller"; import NavigationController from "retrospring/controllers/navigation_controller"; +import ShareController from "retrospring/controllers/share_controller"; /** * This module sets up Stimulus and our controllers @@ -37,4 +38,5 @@ export default function (): void { window['Stimulus'].register('navigation', NavigationController); window['Stimulus'].register('theme', ThemeController); window['Stimulus'].register('toast', ToastController); + window['Stimulus'].register('share', ShareController); } diff --git a/app/views/inbox/_entry.html.haml b/app/views/inbox/_entry.html.haml index eb92ed7d..1d37c711 100644 --- a/app/views/inbox/_entry.html.haml +++ b/app/views/inbox/_entry.html.haml @@ -52,6 +52,9 @@ %a.btn.btn-primary{ href: "#", data: { inbox_sharing_target: "telegram" }, target: "_blank" } %i.fab.fa-telegram.fa-fw Telegram + %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") - if current_user.sharing_custom_url.present? %a.btn.btn-primary{ href: current_user.sharing_custom_url, data: { inbox_sharing_target: "custom" }, target: "_blank" } = current_user.display_sharing_custom_url