sij/env.esq
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Copy deep link when using Element client

Browse source 
Copying the link helps clients to retrieve the room the user originally tried to reach if they are going through the signup flow
This commit is contained in:
Germain 2022-11-28 10:13:16 +00:00
parent fde53099eb
commit 9c39e306fd
3 changed files with 51 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/open/ClientView.js
View file

@ -82,8 +82,8 @@ class InstallClientView extends TemplateView {
className: "copy", className: "copy",
title: "Copy instructions", title: "Copy instructions",
"aria-label": "Copy instructions", "aria-label": "Copy instructions",
onClick: evt => { onClick: async (evt) => {
if (copy(vm.copyString, copyButton.parentElement)) { if (await copy(vm.copyString, copyButton.parentElement)) {
copyButton.className = "tick"; copyButton.className = "tick";
setTimeout(() => { setTimeout(() => {
copyButton.className = "copy"; copyButton.className = "copy";

49
src/open/ClientViewModel.js
View file

@ -16,7 +16,7 @@ limitations under the License.
import {isWebPlatform, isDesktopPlatform, Platform} from "../Platform.js"; import {isWebPlatform, isDesktopPlatform, Platform} from "../Platform.js";
import {ViewModel} from "../utils/ViewModel.js"; import {ViewModel} from "../utils/ViewModel.js";
import {IdentifierKind} from "../Link.js"; import { copy } from "../utils/copy.js";
function getMatchingPlatforms(client, supportedPlatforms) { function getMatchingPlatforms(client, supportedPlatforms) {
const clientPlatforms = client.platforms; const clientPlatforms = client.platforms;
@ -51,32 +51,37 @@ export class ClientViewModel extends ViewModel {
this._showOpen = this.openActions.length && !this._clientCanIntercept; this._showOpen = this.openActions.length && !this._clientCanIntercept;
} }
_onDeepLinkClicked = async () => {
await copy(this.proposedDeepLink);
this._pickClient(this._client);
this.preferences.setClient(this._client.id, this._proposedPlatform);
// only show install screen if we tried to open a native deeplink
if (this._showOpen && this._proposedPlatform === this._nativePlatform) {
this._showOpen = false;
this.emitChange();
}
}
// these are only shown in the open stage // these are only shown in the open stage
_createOpenActions() { _createOpenActions() {
const hasPreferredWebInstance = this.hasPreferredWebInstance; const hasPreferredWebInstance = this.hasPreferredWebInstance;
let deepLinkLabel = "Continue"; this.deepLinkLabel = "Continue";
if (hasPreferredWebInstance) { if (hasPreferredWebInstance) {
if (this._proposedPlatform === this._nativePlatform) { if (this._proposedPlatform === this._nativePlatform) {
deepLinkLabel = "Open in app"; this.deepLinkLabel = "Open in app";
} else { } else {
deepLinkLabel = `Open on ${this._client.getPreferredWebInstance(this._link)}`; this.deepLinkLabel = `Open on ${this._client.getPreferredWebInstance(this._link)}`;
} }
} }
const actions = []; const actions = [];
const proposedDeepLink = this._client.getDeepLink(this._proposedPlatform, this._link); this.proposedDeepLink = this._client.getDeepLink(this._proposedPlatform, this._link);
if (proposedDeepLink) { if (this.proposedDeepLink) {
actions.push({ actions.push({
label: deepLinkLabel, label: this.deepLinkLabel,
url: proposedDeepLink, url: this.proposedDeepLink,
primary: true, primary: true,
activated: () => { activated: async () => {
this._pickClient(this._client); this._onDeepLinkClicked();
this.preferences.setClient(this._client.id, this._proposedPlatform);
// only show install screen if we tried to open a native deeplink
if (this._showOpen && this._proposedPlatform === this._nativePlatform) {
this._showOpen = false;
this.emitChange();
}
}, },
}); });
} }
@ -105,6 +110,18 @@ export class ClientViewModel extends ViewModel {
activated: () => this.preferences.setClient(this._client.id, this._nativePlatform), activated: () => this.preferences.setClient(this._client.id, this._nativePlatform),
}; };
}); });
if (!this._webPlatform && this.proposedDeepLink) {
actions.push({
label: this.deepLinkLabel,
url: this.proposedDeepLink,
primary: true,
activated: async () => {
this._onDeepLinkClicked();
},
})
}
actions.push(...nativeActions); actions.push(...nativeActions);
} }
if (this._webPlatform) { if (this._webPlatform) {

25
src/utils/copy.js
View file

@ -1,5 +1,5 @@
/* /*
Copyright 2020 The Matrix.org Foundation C.I.C. Copyright 2020 - 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.
@ -22,14 +22,21 @@ function selectNode(node) {
selection.addRange(range); selection.addRange(range);
} }
export function copy(text, parent) { export async function copy(text, parent) {
const span = document.createElement("span"); if ("clipboard" in navigator) {
span.innerText = text; const type = "text/plain";
parent.appendChild(span); const blob = new Blob([text], { type });
selectNode(span); const data = [new ClipboardItem({ [type]: blob })];
const result = document.execCommand("copy"); return navigator.clipboard.write(data);
parent.removeChild(span); } else {
return result; const span = document.createElement("span");
span.innerText = text;
parent.appendChild(span);
selectNode(span);
const result = document.execCommand("copy");
parent.removeChild(span);
return result;
}
} }
export function copyButton(t, getCopyText, label, classNames) { export function copyButton(t, getCopyText, label, classNames) {