Add cowebsite percentWidth property to the documention

This commit is contained in:
Alexis Faizeau 2022-02-07 17:53:36 +01:00
parent 75d42209f4
commit e51300e850
3 changed files with 20 additions and 14 deletions

View file

@ -3,7 +3,7 @@
### Opening a web page in a new tab ### Opening a web page in a new tab
``` ```ts
WA.nav.openTab(url: string): void WA.nav.openTab(url: string): void
``` ```
@ -11,13 +11,13 @@ Opens the webpage at "url" in your browser, in a new tab.
Example: Example:
```javascript ```ts
WA.nav.openTab('https://www.wikipedia.org/'); WA.nav.openTab('https://www.wikipedia.org/');
``` ```
### Opening a web page in the current tab ### Opening a web page in the current tab
``` ```ts
WA.nav.goToPage(url: string): void WA.nav.goToPage(url: string): void
``` ```
@ -25,14 +25,13 @@ Opens the webpage at "url" in your browser in place of WorkAdventure. WorkAdvent
Example: Example:
```javascript ```ts
WA.nav.goToPage('https://www.wikipedia.org/'); WA.nav.goToPage('https://www.wikipedia.org/');
``` ```
### Going to a different map from the script ### Going to a different map from the script
``` ```ts
WA.nav.goToRoom(url: string): void WA.nav.goToRoom(url: string): void
``` ```
@ -43,7 +42,7 @@ global urls: "/_/global/domain/path/map.json[#start-layer-name]"
Example: Example:
```javascript ```ts
WA.nav.goToRoom("/@/tcm/workadventure/floor0") // workadventure urls WA.nav.goToRoom("/@/tcm/workadventure/floor0") // workadventure urls
WA.nav.goToRoom('../otherMap/map.json'); WA.nav.goToRoom('../otherMap/map.json');
WA.nav.goToRoom("/_/global/<path to global map>.json#start-layer-2") WA.nav.goToRoom("/_/global/<path to global map>.json#start-layer-2")
@ -51,25 +50,25 @@ WA.nav.goToRoom("/_/global/<path to global map>.json#start-layer-2")
### Opening/closing web page in Co-Websites ### Opening/closing web page in Co-Websites
``` ```ts
WA.nav.openCoWebSite(url: string, allowApi: boolean = false, allowPolicy: string = "", position: number, closable: boolean, lazy: boolean): Promise<CoWebsite> WA.nav.openCoWebSite(url: string, allowApi?: boolean = false, allowPolicy?: string = "", percentWidth?: number, position?: number, closable?: boolean, lazy?: boolean): Promise<CoWebsite>
``` ```
Opens the webpage at "url" in an iFrame (on the right side of the screen) or close that iFrame. `allowApi` allows the webpage to use the "IFrame API" and execute script (it is equivalent to putting the `openWebsiteAllowApi` property in the map). `allowPolicy` grants additional access rights to the iFrame. The `allowPolicy` parameter is turned into an [`allow` feature policy in the iFrame](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allow), position in whitch slot the web page will be open, closable allow to close the webpage also you need to close it by the api and lazy Opens the webpage at "url" in an iFrame (on the right side of the screen) or close that iFrame. `allowApi` allows the webpage to use the "IFrame API" and execute script (it is equivalent to putting the `openWebsiteAllowApi` property in the map). `allowPolicy` grants additional access rights to the iFrame. The `allowPolicy` parameter is turned into an [`allow` feature policy in the iFrame](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allow),widthPercent define the width of the main cowebsite beetween the min size and the max size (70% of the viewport), position in whitch slot the web page will be open, closable allow to close the webpage also you need to close it by the api and lazy
it's to add the cowebsite but don't load it. it's to add the cowebsite but don't load it.
Example: Example:
```javascript ```ts
const coWebsite = await WA.nav.openCoWebSite('https://www.wikipedia.org/'); const coWebsite = await WA.nav.openCoWebSite('https://www.wikipedia.org/');
const coWebsiteWorkAdventure = await WA.nav.openCoWebSite('https://workadventu.re/', true, "", 1, true, true); const coWebsiteWorkAdventure = await WA.nav.openCoWebSite('https://workadventu.re/', true, "", 70, 1, true, true);
// ... // ...
coWebsite.close(); coWebsite.close();
``` ```
### Get all Co-Websites ### Get all Co-Websites
``` ```ts
WA.nav.getCoWebSites(): Promise<CoWebsite[]> WA.nav.getCoWebSites(): Promise<CoWebsite[]>
``` ```
@ -77,6 +76,6 @@ Get all opened co-websites with their ids and positions.
Example: Example:
```javascript ```ts
const coWebsites = await WA.nav.getCowebSites(); const coWebsites = await WA.nav.getCowebSites();
``` ```

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.8 KiB

View file

@ -52,6 +52,13 @@ If you set `openWebsiteTrigger: onaction`, when the user walks on the layer, an
If you set `openWebsiteTriggerMessage: your message action` you can edit alert message displayed. If is not defined, the default message displayed is 'Press on SPACE to open the web site'. If you set `openWebsiteTriggerMessage: your message action` you can edit alert message displayed. If is not defined, the default message displayed is 'Press on SPACE to open the web site'.
If you set `openWebsiteTrigger: onicon`, when the user walks on the layer, an icon will be displayed at the bottom of the screen:
<figure class="figure">
<img src="images/icon_open_website.png" class="figure-img img-fluid rounded" alt="" />
<figcaption class="figure-caption">The iFrame will only open if the user clicks on icon</figcaption>
</figure>
### Setting the iFrame "allow" attribute ### Setting the iFrame "allow" attribute
By default, iFrames have limited rights in browsers. For instance, they cannot put their content in fullscreen, they cannot start your webcam, etc... By default, iFrames have limited rights in browsers. For instance, they cannot put their content in fullscreen, they cannot start your webcam, etc...