Add support for sharing dialog in inbox answer sharing

This commit is contained in:
Andreas Nedbal 2023-10-16 15:02:57 +02:00 committed by Andreas Nedbal
parent 3bd45c8e96
commit 3feb827b16
6 changed files with 61 additions and 1 deletions

View File

@ -57,3 +57,9 @@
position: relative;
}
}
body:not(.cap-web-share) {
[data-controller="share"] {
display: none;
}
}

View File

@ -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());

View File

@ -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'));
});
}
}

View File

@ -34,6 +34,11 @@ export function answerEntryHandler(event: Event): void {
if (sharing != null) {
sharing.dataset.inboxSharingConfigValue = JSON.stringify(data.sharing);
}
const shareButton = inboxEntry.querySelector<HTMLButtonElement>('[data-controller="share"]');
if (shareButton != null) {
shareButton.dataset.shareTextValue = decodeURIComponent(data.sharing.custom).replaceAll('+', ' ');
}
else {
(inboxEntry as HTMLElement).remove();
}

View File

@ -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);
}

View File

@ -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