feat: webview upgrades, webview docs, webview focus

docs/api/server/player/player-webview.md

@@ -0,0 +1,27 @@
+# Webview
+
+This specific controller allows controlling the client-side webview instance for a given player.
+
+You can focus the webview, hide pages, or show pages with ease.
+
+```ts
+import { useWebview } from '@Server/player/webview.js';
+
+const view = useWebview(player);
+
+// Emit directly into the webview, and recieve the event
+// in the webview with the 'useEvents' composable
+view.emit('someevent', 'hello world!');
+
+// Show the cursor and focus the webview instance
+view.focus();
+
+// Hide the cursor and unfocus the webview instance
+view.unfocus();
+
+// Hide a specific page
+view.hide('Example');
+
+// Show a specific page
+view.show('Example', 'page');
+```

docs/webview/create.md

@@ -37,6 +37,42 @@ Click the `Arrow in the Top Right` and then click on your page to see it rendere
 
 ## Showing in-game
 
+You can actually show a page from the server-side using the player webview functionality.
+
+However, this section will show you how to do both client and server side.
+
 !!!
-These documents are a work in progress, this will be completed soon.
+When you show a page both the cursor and webview focus will happen automatically.
 !!!
+
+## Server Side
+
+Just ensure that you **run the server once** to populate the available pages.
+
+```ts
+import { useWebview } from '@Server/player/webview.js';
+
+// Show the page
+function someShowFunction(somePlayer: alt.Player) {
+    useWebview(somePlayer).show('MyExampleView');
+}
+
+// Hide the page
+function someHideFunction(somePlayer: alt.Player) {
+    useWebview(somePlayer).hide('MyExampleView');
+}
+```
+
+## Client side
+
+```ts
+import { useWebview } from '@Client/webview/index.js';
+
+// Show a page
+useWebview().show('Example', 'page');
+
+// Hide a page
+useWebview().hide('Example');
+```
+
+That's all it takes to show / hide your custom WebViews.

src/main/client/webview/index.ts

@@ -8,6 +8,7 @@ const ClientEvents: { [eventName: string]: AnyCallback } = {};
 
 let webview: alt.WebView;
 let cursorCount: number = 0;
+let isPageOpen = false;
 
 function handleServerEvent(event: string, ...args: any[]) {
     alt.emitServer(event, ...args);
@@ -102,7 +103,25 @@ export function useWebview(path = 'http://assets/webview/index.html') {
      * @param {PageType} type
      */
     function show(vueName: PageNames, type: PageType) {
+        isPageOpen = true;
         webview.emit(Events.view.show, vueName, type);
+        focus();
+    }
+
+    /**
+     * Show the cursor to the player, and focus the webview instance
+     */
+    function focus() {
+        webview.focus();
+        showCursor(true);
+    }
+
+    /**
+     * Remove the cursor on screen, and unfocus the webview instance
+     */
+    function unfocus() {
+        webview.unfocus();
+        showCursor(false);
     }
 
     /**
@@ -111,7 +130,9 @@ export function useWebview(path = 'http://assets/webview/index.html') {
      * @param {PageNames} vueName
      */
     function hide(vueName: PageNames) {
+        isPageOpen = false;
         webview.emit(Events.view.hide, vueName);
+        unfocus();
     }
 
     /**
@@ -133,6 +154,10 @@ export function useWebview(path = 'http://assets/webview/index.html') {
     }
 
     if (!isInitialized) {
+        alt.onServer(Events.view.focus, focus);
+        alt.onServer(Events.view.unfocus, unfocus);
+        alt.onServer(Events.view.hide, hide);
+        alt.onServer(Events.view.show, show);
         alt.onServer(Events.view.onServer, emit);
         webview.on(Events.view.emitClient, handleClientEvent);
         webview.on(Events.view.emitServer, handleServerEvent);
@@ -147,5 +172,8 @@ export function useWebview(path = 'http://assets/webview/index.html') {
         on,
         showCursor,
         show,
+        isAnyPageOpen() {
+            return isPageOpen;
+        },
     };
 }

src/main/server/player/webview.ts

@@ -1,5 +1,6 @@
 import * as alt from 'alt-server';
 import { Events } from '../../shared/events/index.js';
+import { PageNames, PageType } from '../../shared/webview/index.js';
 
 export function useWebview(player: alt.Player) {
     function emit(eventName: string, ...args: any[]) {
@@ -10,7 +11,43 @@ export function useWebview(player: alt.Player) {
         player.emit(Events.view.onServer, eventName, ...args);
     }
 
+    function show(vuePage: PageNames, type: PageType) {
+        if (!player || !player.valid) {
+            return;
+        }
+
+        player.emit(Events.view.show, vuePage, type);
+    }
+
+    function hide(vuePage: PageNames) {
+        if (!player || !player.valid) {
+            return;
+        }
+
+        player.emit(Events.view.hide, vuePage, 'page');
+    }
+
+    function focus() {
+        if (!player || !player.valid) {
+            return;
+        }
+
+        player.emit(Events.view.focus);
+    }
+
+    function unfocus() {
+        if (!player || !player.valid) {
+            return;
+        }
+
+        player.emit(Events.view.unfocus);
+    }
+
     return {
         emit,
+        focus,
+        hide,
+        show,
+        unfocus,
     };
 }

src/main/shared/events/index.ts

@@ -61,5 +61,7 @@ export const Events = {
         hide: 'webview:emit:page:hide',
         hideAll: 'webview:emit:page:hide:all',
         hideAllByType: 'webview:emit:page:hide:all:type',
+        focus: 'webview:emit:focus',
+        unfocus: 'webview:emit:unfocus',
     },
 };