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

add copy invite button to text clients

Browse source
This commit is contained in:
Bruno Windels 2020-12-04 18:28:40 +01:00
parent 7333fba6a1
commit f42820e4ba
6 changed files with 66 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/create/CreateLinkView.js
View file

@ -16,31 +16,7 @@ limitations under the License.
import {TemplateView} from "../utils/TemplateView.js";
import {PreviewView} from "../preview/PreviewView.js";
function selectNode(node) {
let selection = window.getSelection();
selection.removeAllRanges();
let range = document.createRange();
range.selectNode(node);
selection.addRange(range);
}
function copyButton(t, copyNode, label, classNames) {
return t.button({className: `${classNames} icon copy`, onClick: evt => {
const button = evt.target;
selectNode(copyNode);
if (document.execCommand("copy")) {
button.innerText = "Copied!";
button.classList.remove("copy");
button.classList.add("tick");
setTimeout(() => {
button.classList.remove("tick");
button.classList.add("copy");
button.innerText = label;
}, 2000);
}
}}, label);
}
import {copyButton} from "../utils/copy.js";
export class CreateLinkView extends TemplateView {
render(t, vm) {
@ -53,7 +29,7 @@ export class CreateLinkView extends TemplateView {
t.mapView(vm => vm.previewViewModel, childVM => childVM ? new PreviewView(childVM) : null),
t.div({className: {hidden: vm => !vm.linkUrl}}, [
t.h2(link),
t.div(copyButton(t, link, "Copy link", "fullwidth primary")),
t.div(copyButton(t, () => vm.linkUrl, "Copy link", "fullwidth primary")),
t.div(t.button({className: "secondary fullwidth", onClick: () => this._clear()}, "Or create another link")),
]),
t.form({action: "#", onSubmit: evt => this._onSubmit(evt), className: {hidden: vm => vm.linkUrl}}, [

13
src/open/ClientView.js
View file

@ -15,6 +15,8 @@ limitations under the License.
*/
import {TemplateView} from "../utils/TemplateView.js";
import {copyButton} from "../utils/copy.js";
import {text} from "../utils/html.js";
function formatPlatforms(platforms) {
return platforms.reduce((str, p, i, all) => {
@ -60,17 +62,14 @@ class OpenClientView extends TemplateView {
}
class InstallClientView extends TemplateView {
copyToClipboard() {
}
render(t, vm) {
const children = [];
if (vm.textInstructions) {
const copy = t.button({className: "primary", onClick: evt => this.copyToClipboard(evt)}, "Copy");
children.push(t.p([vm.textInstructions, copy]));
children.push(t.p({}, vm.textInstructions));
if (vm.copyString) {
children.push(t.p(copyButton(t, () => vm.copyString, "Copy invite", "fullwidth primary")));
}
}
const actions = t.div({className: "actions"}, vm.actions.map(a => {

19
src/open/ClientViewModel.js
View file

@ -16,6 +16,7 @@ limitations under the License.
import {isWebPlatform, isDesktopPlatform, Platform} from "../Platform.js";
import {ViewModel} from "../utils/ViewModel.js";
import {IdentifierKind} from "../Link.js";
export class ClientViewModel extends ViewModel {
constructor(options) {
@ -102,6 +103,10 @@ export class ClientViewModel extends ViewModel {
return this._client.getLinkInstructions(this._proposedPlatform, this._link);
}
get copyString() {
return this._client.getCopyString(this._proposedPlatform, this._link);
}
get showDeepLinkInInstall() {
return this._clientCanIntercept && this.deepLink;
}
@ -137,17 +142,3 @@ export class ClientViewModel extends ViewModel {
}
}
}
/*
if (this._preferredClient.getLinkSupport(this.preferences.platform, this._link)) {
const deepLink = this._preferredClient.getDeepLink(this.preferences.platform, this._link);
this.openLink(deepLink);
const protocol = new URL(deepLink).protocol;
const isWebProtocol = protocol === "http:" || protocol === "https:";
if (!isWebProtocol) {
this.missingClientViewModel = new ClientViewModel(this.childOptions({client: this._preferredClient, link: this._link}));
}
} else {
this.acceptInstructions = this._preferredClient.getLinkInstructions(this.preferences.platform, this._link);
}
*/

1
src/open/clients/Element.js
View file

@ -70,6 +70,7 @@ export class Element {
}
getLinkInstructions(platform, link) {}
getCopyString(platform, link) {}
getName(platform) {
if (platform === Platform.DesktopWeb || platform === Platform.MobileWeb) {

7
src/open/clients/Weechat.js
View file

@ -39,5 +39,12 @@ export class Weechat {
}
}
getCopyString(platform, link) {
switch (link.kind) {
case LinkKind.User: return `/invite ${link.identifier}`;
case LinkKind.Room: return `/join ${link.identifier}`;
}
}
getInstallLinks(platform) {}
}

45
src/utils/copy.js Normal file
View file

@ -0,0 +1,45 @@
/*
Copyright 2020 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
function selectNode(node) {
const selection = window.getSelection();
selection.removeAllRanges();
const range = document.createRange();
range.selectNode(node);
selection.addRange(range);
}
export function copyButton(t, getCopyText, label, classNames) {
return t.button({className: `${classNames} icon copy`, onClick: evt => {
const button = evt.target;
const text = getCopyText();
const span = document.createElement("span");
span.innerText = text;
button.parentElement.appendChild(span);
selectNode(span);
if (document.execCommand("copy")) {
button.innerText = "Copied!";
button.classList.remove("copy");
button.classList.add("tick");
setTimeout(() => {
button.classList.remove("tick");
button.classList.add("copy");
button.innerText = label;
}, 2000);
}
span.parentElement.removeChild(span);
}}, label);
}