Webview Service

Learn more about the Webview Service

Introduction

Working with webviews can be managed with this service. We guess, you will love it.

Keep in mind, our WebviewService is only working with SPA (Single Page Application).

Setup

The only thing you should do, is set up the webview registry. The first argument is the path to your webview, second argument is the event name to change the route.

bootstrap.ts

import { registerWebview } from '@abstractFlo/atlas-client';

// other stuff inside bootstrap.ts
registerWebview('http://your/path/to/your/webview', 'routeEventName');

your.component.ts

import { singleton } from 'tsyringe';
import { On } from '@abstractFlo/atlas-shared';
import { WebviewService } from '@abstractFlo/atlas-client';

@singleton()
export class PlayerAuthComponent {

  constructor(
      private readonly webviewService: WebviewService
  ) {}

  /**
   * Change route, set focus and show cursor
   */
  @On('yourEvent')
  public yourEvent(): void {
    this.webviewService
        .routeTo('/your/path')
        .focus()
        .showCursor();
  }
}

Available Methods

Here you can find all available methods if you get the webviewService instance.

getWebView()

// Get webView Instance
const webView = this.webviewService.getWebView();

routeTo(route: string, ...args: any[])

// Change route inside your SPA
this.webviewService.routeTo('/your/path', 'arg1', 'arg2');

showCursor()

// Show Cursor
this.webviewService.showCursor();

removeCursor()

// Remove last created cursor
this.webviewService.removeCursor();

removeAllCursors()

// Remove all cursors
this.webviewService.removeAllCursors();

emit(eventName: string, ...args: any[])

// Emit event to webView
this.webviewService.emit('eventName', 'arg1', 'arg2');

on(eventName: string, listener: (...args: any[]) => void)

This method is not needed, The @OnGui() Decorator does the same, but for completeness it is listed here.

// Listen to event from webView
this.webviewService.on('eventName', (...args: any[]) => {
    // Do whatever you want
});

destroy()

// Destroy the webview
this.webviewService.destroy();

focus()

// Add focus
this.webviewService.focus();

unfocus()

// Remove focus
this.webviewService.unfocus();

Side notes

You can combine any method like a chain.

this.webviewService
    .routeTo('/your/path')
    .showCursor()
    .focus();