@signageos/front-applet 6.1.1 → 6.2.1

package/docs/js-api/js-command.md

@@ -18,25 +18,22 @@ In some cases, you might be interested in a complete log of what the device was
 All commands will be available in [Applet Command REST API](https://api.docs.signageos.io/#8e7a8814-e612-1fad-0152-72f37591c7f2) and can be downloaded [historically as CSV export](https://api.docs.signageos.io/#5dceec58-ac4f-7a0c-f5ef-0854f9376e6d).
 
 ## All methods
-::: table-responsive
+
 | Methods  | Description | Supported since |
 | ----------------- | ----------- | -----  |
 | `dispatch()`  | Dispatch method for sending logs and data from device | 1.0.3 |
 | `onCommand()`  | Event listener for incoming commands from server | 1.0.3 |
 
-:::
-
 ## dispatch()
 
 Dispatch() is used for sending your custom logs or data from device to signageOS.
 
 ### Parameters
-::: table-responsive
+
 |   Parameter    | Type | Required |  Description  |
 | -------------- | -------------| :----------------: | ------------- |
 | `type`     | String  | <div class="red">Yes</div> | Event type; can be any string **up to 100 characters**|
-| custom `parameter` | String  | No | Custom parameters and values that you need to be dispatched  |
-:::
+| custom `parameter` | String  | No | Custom parameters and values that you need to be dispatched  
 
 ### Javascript example
 ```javascript
@@ -70,30 +67,17 @@ await sos.command.dispatch({
 
 ```
 
-<div class="row d-flex align-content-stretch force-padding-20">
-    <div class="col-12 d-flex">
-        <a class="wide-box wide-box--white d-flex align-content-stretch widebox-kb-color" target="_blank" href="https://github.com/signageos/applet-examples/blob/master/examples/content-js-api/command/sending/">
-            <div>
-                <div class="wide-box__image d-flex align-items-center">
-                    <i class="fab fa-github svg-black"></i>
-                </div>
-            <div>
-                <h3 class="wide-box__title wide-box__title__small pl-85">Sending commands</h3>
-                <div class="wide-box__description">Working example on our Github</div>
-            </div>
-            </div>
-        </a>
-    </div>
-</div>
+:::note[GitHub Example]
+[Sending commands](https://github.com/signageos/applet-examples/blob/master/examples/content-js-api/command/sending/)
+:::
 
 ### Errors
-::: table-responsive
+
 | Code | Type | Message |
 | ---- | ---- | ------- |
 | 40401 | AppletCommandTypeError | Type contains invalid characters. |
 | 40402 | AppletCommandTypeError | Type is longer then 100 characters. |
-| 40403 | AppletCommandTypeError | Command type must be a string. |
-:::
+| 40403 | AppletCommandTypeError | Command type must be a string. 
 
 
 ### Usage with Typescript
@@ -104,37 +88,19 @@ interface ICommand {
 dispatch(command: ICommand): void;
 ```
 
-<div class="row d-flex align-content-stretch force-padding-20">
-    <div class="col-12 d-flex">
-        <a class="wide-box wide-box--white d-flex align-content-stretch widebox-kb-color" href="https://api.docs.signageos.io/#8e7a8814-e612-1fad-0152-72f37591c7f2">
-            <div>
-                <div class="wide-box__image d-flex align-items-center">
-                    <i class="fas fa-server svg-black"></i>
-                </div>
-            <div>
-                <h3 class="wide-box__title wide-box__title__small pl-85">Rest API: Get Commands</h3>
-                <div class="wide-box__description">Receiving your data dispatched from devices</div>
-            </div>
-            </div>
-        </a>
-    </div>
-</div>
-
-<div class="row d-flex align-content-stretch force-padding-20">
-    <div class="col-12 d-flex">
-        <a class="wide-box wide-box--white d-flex align-content-stretch widebox-kb-color" href="https://api.docs.signageos.io/#5dceec58-ac4f-7a0c-f5ef-0854f9376e6d">
-            <div>
-                <div class="wide-box__image d-flex align-items-center">
-                    <i class="fas fa-server svg-black"></i>
-                </div>
-            <div>
-                <h3 class="wide-box__title wide-box__title__small pl-85">Rest API: Monitoring/Device Reports</h3>
-                <div class="wide-box__description">Receiving historical data</div>
-            </div>
-            </div>
-        </a>
-    </div>
-</div>
+:::note[GitHub Example]
+[Rest API: Get Commands](https://api.docs.signageos.io/#8e7a8814-e612-1fad-0152-72f37591c7f2)
+
+Receiving your data dispatched from devices
+
+:::
+
+:::note[GitHub Example]
+[Rest API: Monitoring/Device Reports](https://api.docs.signageos.io/#5dceec58-ac4f-7a0c-f5ef-0854f9376e6d)
+
+Receiving historical data
+
+:::
 
 ## onCommand()
 Used for sending custom messages to online connected devices. 
@@ -142,12 +108,11 @@ This can be done through the REST API by [POST new applet command](https://api.d
 The command will be dispatched to the device & the applet can set up the logic by subscribing `onCommand` method.
 
 **Parameters:**
-::: table-responsive
+
 |      Param     | Type   | Required | Description  |
 | -------------- | ---------- | :-------: | ---------------------- |
 | `command`        | object      | <div class="red">Yes</div> | Any JS object with required property type. |
-| `append`         | HTMLElement  | <div class="red">Yes</div> | Type property must be string not longer then 50 characters and must contain only characters a-zA-Z0-9_- and .	|
-:::
+| `append`         | HTMLElement  | <div class="red">Yes</div> | Type property must be string not longer then 50 characters and must contain only characters a-zA-Z0-9_- and .	
 
 ### Javascript
 ```javascript
@@ -156,21 +121,9 @@ sos.command.onCommand((command) => {
 });
 ```
 
-<div class="row d-flex align-content-stretch force-padding-20">
-    <div class="col-12 d-flex">
-        <a class="wide-box wide-box--white d-flex align-content-stretch widebox-kb-color" target="_blank" href="https://github.com/signageos/applet-examples/blob/master/examples/content-js-api/command/receiving">
-            <div>
-                <div class="wide-box__image d-flex align-items-center">
-                    <i class="fab fa-github svg-black"></i>
-                </div>
-            <div>
-                <h3 class="wide-box__title wide-box__title__small pl-85">Receiving commands</h3>
-                <div class="wide-box__description">Working example on our Github</div>
-            </div>
-            </div>
-        </a>
-    </div>
-</div>
+:::note[GitHub Example]
+[Receiving commands](https://github.com/signageos/applet-examples/blob/master/examples/content-js-api/command/receiving)
+:::
 
 ### Usage with Typescript
 ```typescript
@@ -180,29 +133,18 @@ interface ICommand {
 onCommand(listener: (command: ICommand) => void): void;
 ```
 
-<div class="row d-flex align-content-stretch force-padding-20">
-    <div class="col-12 d-flex">
-        <a class="wide-box wide-box--white d-flex align-content-stretch widebox-kb-color" href="https://api.docs.signageos.io/#511e18f3-b61b-a049-6395-8541132adc44">
-            <div>
-                <div class="wide-box__image d-flex align-items-center">
-                    <i class="fas fa-server svg-black"></i>
-                </div>
-            <div>
-                <h3 class="wide-box__title wide-box__title__small pl-85">Rest API: Monitoring</h3>
-                <div class="wide-box__description">Creating monitoring data</div>
-            </div>
-            </div>
-        </a>
-    </div>
-</div>
+:::note[GitHub Example]
+[Rest API: Monitoring](https://api.docs.signageos.io/#511e18f3-b61b-a049-6395-8541132adc44)
+
+Creating monitoring data
+:::
 
 ## Errors
 Although we are doing our best, following errors may occur when working with the commands.
 
-::: table-responsive
+
 | Code | Type | Message |
 | ---- | ---- | ------- |
 | 40401 | AppletCommandTypeError | Type contains invalid characters, allowed are `/^[a-zA-Z0-9\.\-_]+$/g`|
 | 40402 | AppletCommandTypeError | Type is longer then 100 characters. |
-| 40403 | AppletCommandTypeError | Command type must be a string. |
-:::
+| 40403 | AppletCommandTypeError | Command type must be a string. 

package/docs/js-api/{js-api-debug.md → js-debug.md}

@@ -16,12 +16,11 @@ JS API debug lets you information about remote debug mode.
 
 ## All methods
 
-::: table-responsive
+
 | Method  | Description | Supported since |
 | ------ | -------- | :-------------: |
 | `isRemoteDebugEnabled()` | Returns information about remote debug settings | 5.8 |
-| `onRemoteDebugChanged()` | Accept function which is called after remote debug settings is changed | 5.8 |
-:::
+| `onRemoteDebugChanged()` | Accept function which is called after remote debug settings is changed | 5.8 
 
 ## isRemoteDebugEnabled()
 Method `isRemoteDebugEnabled()` returns the state of the [Device debug](https://docs.signageos.io/hc/en-us/articles/4416366711442-Device-debug) (**true** or **false**).

package/docs/js-api/js-device-info.md

@@ -8,20 +8,19 @@ tags:
 - applet_api
 - api
 - js_api
-description: "[Content JS API] There are many device-related informations that are grouped."
+description: "Information set to the device using the CloudControl - e.g. Location and Tags."
 ---
 
 # Device Info
-There are many device-related informations that are grouped.
+Information set to the device using the CloudControl - e.g. Location and Tags.
 
 ## All methods
 
-::: table-responsive
+
 | Method            | Description        | Supported since   |
 | ----------------- | ------------------ | :---------------: |
 | `getLocation()` | Returns location when assigned to device  | 5.2.0 |
-| `getOrganizationTags()` | Returns list of organization tags when some assigned to device  | 5.2.0 |
-:::
+| `getOrganizationTags()` | Returns list of organization tags when some assigned to device  | 5.2.0 
 
 ## getLocation()
 Location is requested from server on application start, automatically updated when changed and persists in local storage.

package/docs/js-api/js-display.md

@@ -19,11 +19,10 @@ That way your applet can handle cases, when a certain feature isn't supported by
 
 ## All methods
 
-::: table-responsive
+
 | Method             | Description            | Supported since |
 | ------------------ | ---------------------- | :-------------: |
-| `supports()` | Query, whether a certain feature is supported by the display | 3.1.0 |
-:::
+| `supports()` | Query, whether a certain feature is supported by the display | 3.1.0 
 
 ## supports()
 
@@ -31,16 +30,15 @@ Query the display to find out, whether a certain feature is supported.
 To let you know, when you should call this method, we will warn you throughout the content JS API documentation
 with a warning message like this one:
 
-::: alert alert--warning
+:::warning
 * Before using this API, ensure that the display supports serial via `sos.display.supports("SERIAL")`.
 * More info [**HERE**](/api/js/content/latest/js-display#supports).
 :::
 
-::: table-responsive
+
 | Param        | Type   | Required                   | Description     |
 | ------------ | ------ | :------------------------: | --------------- |
-| `capability` | string | <div class="red">Yes</div> | Capability name |
-:::
+| `capability` | string | <div class="red">Yes</div> | Capability name 
 
 ### Javascript example
 ```javascript

package/docs/js-api/js-file-system.md

@@ -15,7 +15,7 @@ description: "[Content JS API] File System API allows **low level manipulation w
 File System API allows **low level manipulation with files and directories** in the device internal storage.
 File System API works with both in **internal and external storages** (USB flash drives, etc.).
 
-::: alert alert--warning
+:::warning
 File System directory structure is **PERSISTENT** and is **NOT** automatically deleted through `Applet Reload` power action! Applet Reload only deletes `/data` directory which is reserved for simplified [Offline Cache API](/api/js/content/js-offline-cache-media-files). Use `deleteFile()` to clear the device storage file system.
 :::
 
@@ -53,7 +53,7 @@ File System directory structure is **PERSISTENT** and is **NOT** automatically d
 
 ## All methods
 
-::: table-responsive
+
 | Methods  | Description | Supported since |
 | -------- | ----------- | :---------------: |
 | `listStorageUnits()` | Return list of storage units /internal, external/ from the device | 2.1.0 |
@@ -71,18 +71,17 @@ File System directory structure is **PERSISTENT** and is **NOT** automatically d
 | `copyFile()` | Copy file or directory to a new location | 3.3.0 |
 | `writeFile()` | Write string to a file | 3.2.0 |
 | `appendFile()` | Write string to a file | 4.13.0 |
-| `readFile()` | Read a text file | 3.3.0 |
-:::
+| `readFile()` | Read a text file | 3.3.0 
 
 ## listStorageUnits()
 
 Return list of storage units /internal, external/ from the device. Capacity values are in bytes.
 
-::: alert alert--info
+:::info
 This is a mandatory method that is required for all the other File System APIs. The other APIs require a `storageUnit` object that is retrieved from this method to manipulate with files on a correct storage location (internal/external).
 :::
 
-::: alert alert--warning
+:::warning
 `storageUnit` is a dynamic object! It has to be always generated and retrieved by this JS API, as the values in `type` differ platform by platform. **Never** generate the object manually. `{"type":"internal"}` is for demonstration only.
 :::
 
@@ -236,7 +235,7 @@ console.log(fileProperties.localUri);
 
 ### Returns
 
-::: alert alert--warning
+:::warning
 Return statement is a dynamic object! It has to be always generated and retrieved by this JS API, as the values in `localUri` differ platform by platform. **Never** generate the object manually. `{"localUri":"file://internal/test-dir/downloaded-file.png"}` is for demonstration only.
 :::
 
@@ -293,11 +292,11 @@ Download file to path within existing directory or **overrides existing file** i
 | `uri` | String | <div class="red">Yes</div> | Url address to retrieve the file	from network			|
 | `headers`  | Object | <div class="yellow">No</div> | Key, value pairs of HTTP headers to send along with the request. Used when the target file is protected by a password or if any 
 
-::: alert alert--danger
+:::danger
 For every download request, our app makes HEAD request for `content-length` header on that downloaded file.
 :::
 
-::: alert alert--warning
+:::warning
 `headers` has to be a JSON object. If you are passing the value, make sure you use `JSON.parse()`.
 :::
 
@@ -416,7 +415,7 @@ Returns checksum of existing file in a path.
 * FAIL: When file path doesn't exist
 * FAIL: When file path is directory
 
-::: alert alert--info
+:::info
 Does not work on Samsung Tizen display - [read more here](https://docs.signageos.io/hc/en-us/articles/4416327809810)
 :::
 
@@ -450,7 +449,7 @@ Extract ZIPed all files (recursively) to destination path and override existing
 * FAIL: When extracting not existing ZIP archive file
 * FAIL: When extracting try override existing directory with file or existing file with directory
 
-::: alert alert--info
+:::info
 The directory/folder you are extracting your ZIP file into has to be created BEFORE you start extracting the ZIP.
 :::
 
@@ -484,12 +483,12 @@ Creates a archive in a path with all files from `archiveEntries` array.
 * FAIL: When creating directory over existing file or directory
 * FAIL: When creating directory in not existing containing (parent) directory
 
-::: alert alert--warning
+:::warning
 - Never start OR end the `filePath` with a slash - `/`. It will cause error *50517*
 - It is a good practice to check if file exists - `exists()` prior creating it
 :::
 
-::: alert alert--info
+:::info
 - This function is available only on Tizen devices.
 - All files are added to the archive based on absolute path from root directory.
 :::
@@ -527,7 +526,7 @@ Creates a directory in a path.
 * FAIL: When creating directory over existing file or directory
 * FAIL: When creating directory in not existing containing (parent) directory
 
-::: alert alert--warning
+:::warning
 - Never start OR end the `filePath` with a slash - `/`. It will cause error *50512*
 - It is a good practice to check if directory exists - `isDirectory()` prior creating it
 :::

package/docs/js-api/{js-loading-fonts.md → js-fonts.md}

@@ -1,5 +1,5 @@
 ---
-title:  Loading fonts
+title:  Fonts
 author: Miroslav Behina
 date:   22.11.2018
 type:   js-api
@@ -14,16 +14,18 @@ description: "[Content JS API] When working with custom font families, you shoul
 # Loading fonts
 When working with custom font families, you should use this method that downloads fonts into offline storage and generates the appropriate font-face definition.
 
-### All methods
-::: table-responsive
+## All methods
+
 | Method | Description | Supported since |
-| ------ | -------- | ----- | :----------: |
-| `addFont()` | Load additionally font into applet cache | 2.0.0  |
-:::
+| ------ | -------- |  :----------: |
+| `addFont()` | Load additionally font into applet cache | 2.0.0 |
 
-### Parameters
 
-::: table-responsive
+## addFont()
+
+Load your custom fonts into the Applet.
+
+### Parameters
 |      Param     | Type | Required | Description                  					                                                        |
 | ------- | --------- | :----------: | ------ |
 | `uid`            | string | <div class="red">Yes</div> | Unique file identifier is used for later file retrieval, must contain a-z,A-Z,0-9 and . characters  |
@@ -34,8 +36,7 @@ When working with custom font families, you should use this method that download
 | `fontStyle`      | string | <div class="yellow">No</div> | Apecifies the font stlye for a text                                                 				|
 |^^|^^|^^| Types: `normal`, `italic`, `oblique`, `initial`, `inherit`                                                               				|
 | `fontWeight`     | string | <div class="yellow">No</div> | Sets how thick or thin characters in text should be displayed                        				|
-| `unicodeRage`    | string | <div class="yellow">No</div> | Defines the range of unicode characters the font supports, default value is "U+0-10FFFF"			|
-:::
+| `unicodeRage`    | string | <div class="yellow">No</div> | Defines the range of unicode characters the font supports, default value is "U+0-10FFFF"			
 
 ### Formats parameters
 |      Param     | Type | Required | Description                  					                                                        |
@@ -69,37 +70,14 @@ await sos.offline.addFont({
 });
 ```
 
-<div class="row d-flex align-content-stretch force-padding-20">
-    <div class="col-12 d-flex">
-        <a class="wide-box wide-box--white d-flex align-content-stretch widebox-kb-color" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face">
-            <div>
-                <div class="wide-box__image d-flex align-items-center">
-                    <i class="fas fa-atlas svg-black"></i>
-                </div>
-            <div>
-                <h3 class="wide-box__title wide-box__title__small pl-85">Most properties follow the official CSS properties found</h3>
-                <div class="wide-box__description">Mozilla Developer Page</div>
-            </div>
-            </div>
-        </a>
-    </div>
-</div>
-
-<div class="row d-flex align-content-stretch force-padding-10">
-    <div class="col-12 d-flex">
-        <a class="wide-box wide-box--white d-flex align-content-stretch widebox-kb-color" target="_blank" href="https://github.com/signageos/applet-examples/blob/master/examples/content-js-api/fonts">
-            <div>
-                <div class="wide-box__image d-flex align-items-center">
-                    <i class="fab fa-github svg-black"></i>
-                </div>
-            <div>
-                <h3 class="wide-box__title wide-box__title__small pl-85">Example of Applet that load custom fonts</h3>
-                <div class="wide-box__description">Working example on our Github</div>
-            </div>
-            </div>
-        </a>
-    </div>
-</div>
+:::info
+Most properties follow the official CSS properties found on [Mozilla Developer Page](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face)
+:::
+
+
+:::note[GitHub Example]
+[Example of Applet that load custom fonts](https://github.com/signageos/applet-examples/blob/master/examples/content-js-api/fonts)
+:::
 
 ## Usage with Typescript
 You can also use all these methods with [signageOS TypeScript](https://docs.signageos.io/hc/en-us/articles/4405069154962#signageos-typescript).
@@ -126,7 +104,7 @@ addFont(
 ## Errors
 Although we are doing our best, following errors may occur when working with the Applet Resources.
 
-::: table-responsive
+
 | Code | Type | Message |
 | ---- | ---- | ------- |
 | 40105 | AppletResourcesError | Already loading file: `$$FILE_NAME$$` |
@@ -134,5 +112,4 @@ Although we are doing our best, following errors may occur when working with the
 | 40106 | AppletResourcesError | Already existing file: `$$FILE_NAME$$` |
 |^^|^^| Please, check your code for occurrences of addFile/s methods on lines before this error. |
 | 49901 | AppletResourceError | Please, check if the used URL is correct. |
-| 49902 | FileNotFoundError    | File was not found `$$FILE_ID$$` |
-:::
+| 49902 | FileNotFoundError    | File was not found `$$FILE_ID$$` 

package/docs/js-api/js-hardware.md

@@ -23,19 +23,17 @@ Some Philips brand devices have LED lights built into them. The color of lights
 
 ### All methods
 
-::: table-responsive
+
 | Method | Description | Supported since |
 | ------ | -------- | :---------: |
-| `setColor()` | Method supports a string in hexa format to display color of LED light or null value to not be disabled | 1.0.1 |
-:::
+| `setColor()` | Method supports a string in hexa format to display color of LED light or null value to not be disabled | 1.0.1 
 
 ### setColor()
 
-::: table-responsive
+
 | Param | Type | Required | Description |
 | ------ | ------ | :--------: | -------- |
-| `color` | string | <div class="red">Yes</div> | Color of LED to be set in CSS hexa format `#000000`. To disable LED pass null value instead. |
-:::
+| `color` | string | <div class="red">Yes</div> | Color of LED to be set in CSS hexa format `#000000`. To disable LED pass null value instead. 
 
 #### Javascript example
 ```javascript
@@ -61,10 +59,9 @@ sos.hardware.led.setColor("#00FF00"); // For GREEN light
 ## Errors
 Although we are doing our best, following errors may occur when working with the hardware.
 
-::: table-responsive
+
 | Code | Type | Message |
 | ---- | ---- | ------- |
 | 50601 | InternalHardwareError | Unexpected error occurred when working with hardware. |
 | 40601 | AppletHardwareError | Color must be string |
-| 40602 | AppletHardwareError | Color must be in format #000000 or null, allowed are `/^[a-zA-Z0-9\.\-_]+$/g` |
-:::
+| 40602 | AppletHardwareError | Color must be in format #000000 or null, allowed are `/^[a-zA-Z0-9\.\-_]+$/g` 

package/docs/js-api/js-iframes.md

@@ -9,13 +9,13 @@ tags:
 - api
 - js_api
 - iframe
-description: "[Content JS API] We **do not recommend** to use iframes inside your Applet. However, if you have to use it, you can add full support of the sOS JS API to every one of your iframe. Just add the JS snippet script below to every page load in iframe before ending </body>. Everything will be prepared, and you can call the very same methods as described for Applet."
+description: "[Content JS API] We **do not recommend** to use iframes inside your Applet. However, if you have to use it, you can add full support of the sOS JS API to every one of your iframe. Just add the JS snippet script below to every page load in iframe before ending &lt;/body>. Everything will be prepared, and you can call the very same methods as described for Applet."
 ---
 
 # Iframes
-We **do not recommend** to use iframes inside your Applet. However, if you have to use it, you can add full support of the sOS JS API to every one of your iframe. Just add the JS snippet script below to every page load in iframe before ending </body>. Everything will be prepared, and you can call the very same methods as described for Applet.
+We **do not recommend** to use iframes inside your Applet. However, if you have to use it, you can add full support of the sOS JS API to every one of your iframe. Just add the JS snippet script below to every page load in iframe before ending &lt;/body>. Everything will be prepared, and you can call the very same methods as described for Applet.
 
-::: alert alert--warning
+:::warning
 The signageOS Snippet and API works **ONLY** if the iframe is served from the display's internal storage - `<iframe src="file://...`. If your iframe is served from a live URL - `<iframe src="https://your-iframe-url"...` the snippet and signageOS API will **NOT** work. This is a security limitation to prevent random site took advantage of the API and alter the display behavior. There is a simple way to [save and load your iframe from the internal storage](https://github.com/signageos/applet-examples/blob/master/examples/content-js-api/iframes). Just make sure you are using full paths in your iframe for linking javascripts and css instead of the relative ones.
 
 If your device can not load a file stored in local storage, such as an html, you can try to use an alternative instead of python to zip the file when you are preparing the applet.

package/docs/js-api/js-input.md

@@ -20,11 +20,10 @@ This feature must be tested by users on real devices.
 
 ### Parameters
 
-::: table-responsive
+
 | Parameters | Type | Required | Description | Supported Since | 
 | ------ | ------ | :--------: | -------- | :-----: |
-| event (in listener) | Object | <div class="red">Yes</div> | Plain JS object containing keyCode as number and keyName as string and type of event (always keyup string) | 1.3.0 |
-:::
+| event (in listener) | Object | <div class="red">Yes</div> | Plain JS object containing keyCode as number and keyName as string and type of event (always keyup string) | 1.3.0 
 
 ### Javascript syntax
 ```javascript