Merge remote-tracking branch 'MTRNord/etherpad_widget'

This commit is contained in:
Travis Ralston 2017-12-09 15:52:34 -07:00
commit 1be87b51b4
10 changed files with 275 additions and 3 deletions

View File

@ -0,0 +1,7 @@
# All this configuration does is make "Etherpad Widget" available in the UI
type: "widget"
integrationType: "etherpad"
enabled: true
name: "Etherpad"
about: "Etherpad is a collaborative text editor. With this widget you can embed Etherpad directly in to your Matrix chat rooms so that you can securely collaborate on documents."
avatar: "img/avatars/etherpad.png"

View File

@ -29,6 +29,7 @@ import { ToggleFullscreenDirective } from "./shared/toggle-fullscreen.directive"
import { FullscreenButtonComponent } from "./fullscreen-button/fullscreen-button.component";
import { YoutubeWidgetConfigComponent } from "./configs/widget/youtube/youtube-config.component";
import { TwitchWidgetConfigComponent } from "./configs/widget/twitch/twitch-config.component";
import { EtherpadWidgetConfigComponent } from "./configs/widget/etherpad/etherpad-config.component";
import { VideoWidgetWrapperComponent } from "./widget_wrappers/video/video.component";
@NgModule({
@ -60,6 +61,7 @@ import { VideoWidgetWrapperComponent } from "./widget_wrappers/video/video.compo
FullscreenButtonComponent,
YoutubeWidgetConfigComponent,
TwitchWidgetConfigComponent,
EtherpadWidgetConfigComponent,
VideoWidgetWrapperComponent,
// Vendor
@ -80,7 +82,8 @@ import { VideoWidgetWrapperComponent } from "./widget_wrappers/video/video.compo
IrcConfigComponent,
CustomWidgetConfigComponent,
YoutubeWidgetConfigComponent,
TwitchWidgetConfigComponent
TwitchWidgetConfigComponent,
EtherpadWidgetConfigComponent,
]
})
export class AppModule {

View File

@ -0,0 +1,118 @@
<div class="config-wrapper">
<img src="/img/close.svg" (click)="dialog.close()" class="close-icon">
<div class="config-header">
<img src="/img/avatars/etherpad.png">
<h4>Configure Etherpad widgets</h4>
</div>
<div class="config-content" *ngIf="isLoading">
<div class="row">
<div class="col-md-12">
<p><i class="fa fa-circle-notch fa-spin"></i> Loading widgets...</p>
</div>
</div>
</div>
<div class="config-content" *ngIf="!isLoading">
<form (submit)="validateAndAddWidget()" novalidate name="addForm">
<div class="row">
<div class="col" style="margin-bottom: 12px;">
<div class="form-group row">
<label for="padNameInput" class="col col-form-label">Etherpad Name</label>
<div class="col">
<input type="text" class="form-control" id="padNameInput"
placeholder="Pad Name"
[(ngModel)]="newWidgetUrl" name="newWidgetUrl"
[disabled]="isUpdating">
</div>
</div>
<div class="form-group row">
<div class="form-check col">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" [(ngModel)]="useCustomServer" name="useCustomServer">
Use Custom Etherpad Server
</label>
</div>
</div>
<div class="form-group row" *ngIf="useCustomServer">
<label for="padServerInput" class="col col-form-label">Etherpad Custom Server</label>
<div class="col">
<input type="text" class="form-control" id="padServerInput"
placeholder="https://demo.riot.im/etherpad/p/"
[(ngModel)]="newEtherpadServerUrl" name="newEtherpadServerUrl"
[disabled]="isUpdating">
</div>
</div>
<div class="form-group row">
<label for="padURL" class="col col-form-label">Etherpad URL</label>
<div class="col">
<input type="text" class="form-control" id="padURL" [value]="getPadURL()" readonly>
</div>
</div>
<button type="submit" class="btn btn-success" [disabled]="isUpdating">
<i class="fa fa-plus-circle"></i> Add Widget
</button>
</div>
<div class="w-100"></div>
<div class="col removable widget-item" *ngFor="let widget of widgets trackById">
{{ widget.name || widget.url }} <span class="text-muted" *ngIf="widget.ownerId">(added by {{ widget.ownerId }})</span>
<button type="button" class="btn btn-outline-info btn-sm" (click)="editWidget(widget)"
style="margin-top: -5px;" [disabled]="isUpdating">
<i class="fa fa-pencil"></i> Edit Widget
</button>
<button type="button" class="btn btn-sm btn-outline-danger" (click)="removeWidget(widget)"
style="margin-top: -5px;" [disabled]="isUpdating">
<i class="fa fa-times"></i> Remove Widget
</button>
<div class="col" *ngIf="isWidgetToggled(widget)" style="margin-top: 12px;">
<div class="form-group row">
<div class="form-check col">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" [(ngModel)]="editUseCustomServer" name="widget-useCustomServer-{{widget.id}}">
Use Custom Etherpad Server
</label>
</div>
</div>
<div class="row">
<div class="form-group col">
<label for="widget-name-{{widget.id}}">Widget Name</label>
<input type="text" class="form-control" id="widget-name-{{widget.id}}"
placeholder="Etherpad Widget"
[(ngModel)]="widget.newName" name="widget-name-{{widget.id}}"
[disabled]="isUpdating">
</div>
<div class="form-group col">
<label for="widget-padName-{{widget.id}}">Etherpad Name</label>
<input type="text" class="form-control" id="widget-padName-{{widget.id}}"
placeholder="Etherpad Name"
[(ngModel)]="widget.data.newPadName" name="widget-padName-{{widget.id}}"
[disabled]="isUpdating">
</div>
<div class="form-group col" *ngIf="editUseCustomServer">
<label for="widget-padServer-{{widget.id}}">Etherpad Server URL</label>
<input type="text" class="form-control"
placeholder="Etherpad Server URL"
[(ngModel)]="widget.data.newPadServer" name="widget-padServer-{{widget.id}}"
[disabled]="isUpdating">
</div>
</div>
<div class="form-group row">
<label for="padURL" class="col col-form-label">Etherpad URL</label>
<div class="col">
<input type="text" class="form-control" id="padURL" [value]="getPadURL(widget)" readonly>
</div>
</div>
<div class="row">
<div class="btn-group">
<button type="button" class="btn btn-primary btn-sm" (click)="validateAndSaveWidget(widget)">
Save
</button>
<button type="button" class="btn btn-outline btn-sm" (click)="toggleWidget(widget)">
Cancel
</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>

View File

@ -0,0 +1,4 @@
// component styles are encapsulated and only applied to their components
.widget-item {
margin-top: 3px;
}

View File

@ -0,0 +1,124 @@
import { Component } from "@angular/core";
import { ModalComponent, DialogRef } from "ngx-modialog";
import { WidgetComponent } from "../widget.component";
import { ScalarService } from "../../../shared/scalar.service";
import { ConfigModalContext } from "../../../integration/integration.component";
import { ToasterService } from "angular2-toaster";
import { Widget, WIDGET_DIM_ETHERPAD, WIDGET_SCALAR_ETHERPAD } from "../../../shared/models/widget";
@Component({
selector: "my-etherpadwidget-config",
templateUrl: "etherpad-config.component.html",
styleUrls: ["etherpad-config.component.scss", "./../../config.component.scss"],
})
export class EtherpadWidgetConfigComponent extends WidgetComponent implements ModalComponent<ConfigModalContext> {
public newEtherpadServerUrl: string = "";
public useCustomServer = false;
public editUseCustomServer = false;
constructor(public dialog: DialogRef<ConfigModalContext>,
toaster: ToasterService,
scalarService: ScalarService,
window: Window) {
super(
toaster,
scalarService,
dialog.context.roomId,
window,
WIDGET_DIM_ETHERPAD,
WIDGET_SCALAR_ETHERPAD,
dialog.context.integrationId,
"Etherpad Widget",
"generic", // wrapper
"etherpad" // scalar wrapper
);
}
getPadURL(widget?: Widget): string {
let url: string;
if (widget) {
if (this.editUseCustomServer) {
url = widget.data.newPadServer + this.roomId + "_" + widget.data.newPadName;
} else {
url = "https://demo.riot.im/etherpad/p/" + this.roomId + "_" + widget.data.newPadName;
}
} else {
if (this.useCustomServer) {
url = this.newEtherpadServerUrl + this.roomId + "_" + this.newWidgetUrl;
} else {
url = "https://demo.riot.im/etherpad/p/" + this.roomId + "_" + this.newWidgetUrl;
}
}
return url;
}
private checkPadURL(url: string, widget?: Widget): boolean {
if (widget) {
if (this.editUseCustomServer) {
return Boolean(url === widget.data.newPadServer);
} else {
return Boolean(url === "https://demo.riot.im/etherpad/p/");
}
} else {
if (this.useCustomServer) {
return Boolean(url === this.newEtherpadServerUrl);
} else {
return Boolean(url === "https://demo.riot.im/etherpad/p/");
}
}
}
public validateAndAddWidget() {
const url = this.getPadURL() + "?userName=$matrix_user_id";
if (this.checkPadURL(url)) {
this.toaster.pop("warning", "Please enter a Pad Name");
return;
}
const originalUrl = this.roomId + "_" + this.newWidgetUrl;
this.newWidgetUrl = url;
if (this.useCustomServer) {
this.addWidget({padName: originalUrl, padSuffix: originalUrl, padServer: this.newEtherpadServerUrl});
} else {
this.addWidget({padName: originalUrl, padSuffix: originalUrl, padServer: "https://demo.riot.im/etherpad/p/"});
}
}
public validateAndSaveWidget(widget: Widget) {
const url = this.getPadURL(widget) + "?userName=$matrix_user_id";
if (this.checkPadURL(url, widget)) {
this.toaster.pop("warning", "Please enter a Pad Name");
return;
}
if (!widget.data) widget.data = {};
widget.newUrl = url;
widget.data.padName = widget.data.newPadName;
widget.data.padSuffix = this.roomId + "_" + widget.data.newPadName;
if (this.editUseCustomServer) {
widget.data.padServer = widget.data.newPadServer;
} else {
widget.data.padServer = "https://demo.riot.im/etherpad/p/"
}
delete widget.data.newPadServer;
delete widget.data.newPadName;
this.saveWidget(widget);
}
editWidget(widget: Widget) {
widget.data.newPadName = widget.data.padName;
widget.data.newPadServer = widget.data.padServer;
if (widget.data.newPadServer !== "https://demo.riot.im/etherpad/p/") {
this.editUseCustomServer = true
}
super.editWidget(widget);
}
}

View File

@ -88,7 +88,16 @@ export class WidgetComponent {
}
private wrapUrl(url: string): string {
return this.wrapperUrl + encodeURIComponent(url);
let encodedURL = this.wrapperUrl + encodeURIComponent(url);
//don't URL encode $vars of the widget Spec
//TODO do the same with vars from the data object
encodedURL = encodedURL.replace(encodeURIComponent("$matrix_user_id"), "$matrix_user_id");
encodedURL = encodedURL.replace(encodeURIComponent("$matrix_room_id"), "$matrix_room_id");
encodedURL = encodedURL.replace(encodeURIComponent("$matrix_display_name"), "$matrix_display_name");
encodedURL = encodedURL.replace(encodeURIComponent("$matrix_avatar_url"), "$matrix_avatar_url");
return encodedURL;
}
private setWidgetUrl(widget: Widget) {

View File

@ -6,7 +6,7 @@ import { ToasterService } from "angular2-toaster";
import { Integration } from "../shared/models/integration";
import { IntegrationService } from "../shared/integration.service";
import * as _ from "lodash";
import { WIDGET_DIM_CUSTOM, WIDGET_DIM_YOUTUBE, WIDGET_DIM_TWITCH } from "../shared/models/widget";
import { WIDGET_DIM_CUSTOM, WIDGET_DIM_YOUTUBE, WIDGET_DIM_TWITCH, WIDGET_DIM_ETHERPAD } from "../shared/models/widget";
import { IntegrationComponent } from "../integration/integration.component";
@Component({
@ -79,6 +79,9 @@ export class RiotComponent {
} else if (this.requestedScreen === "type_" + WIDGET_DIM_TWITCH) {
type = "widget";
integrationType = "twitch";
} else if (this.requestedScreen === "type_" + WIDGET_DIM_ETHERPAD) {
type = "widget";
integrationType = "etherpad";
} else {
console.log("Unknown screen requested: " + this.requestedScreen);
}

View File

@ -7,6 +7,7 @@ import { TravisCiConfigComponent } from "../configs/travisci/travisci-config.com
import { CustomWidgetConfigComponent } from "../configs/widget/custom_widget/custom_widget-config.component";
import { YoutubeWidgetConfigComponent } from "../configs/widget/youtube/youtube-config.component";
import { TwitchWidgetConfigComponent } from "../configs/widget/twitch/twitch-config.component";
import { EtherpadWidgetConfigComponent } from "../configs/widget/etherpad/etherpad-config.component";
@Injectable()
export class IntegrationService {
@ -24,6 +25,7 @@ export class IntegrationService {
"customwidget": true,
"youtube": true,
"twitch": true,
"etherpad": true,
},
};
@ -39,6 +41,7 @@ export class IntegrationService {
"customwidget": CustomWidgetConfigComponent,
"youtube": YoutubeWidgetConfigComponent,
"twitch": TwitchWidgetConfigComponent,
"etherpad": EtherpadWidgetConfigComponent,
},
};

View File

@ -14,6 +14,7 @@ export const WIDGET_SCALAR_TWITCH = "";
export const WIDGET_DIM_CUSTOM = "dimension-customwidget";
export const WIDGET_DIM_YOUTUBE = "dimension-youtube";
export const WIDGET_DIM_TWITCH = "dimension-twitch";
export const WIDGET_DIM_ETHERPAD = "dimension-etherpad";
export interface Widget {
id: string;

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB