JS Polyfills
Overview
These JavaScript polyfills for Gameface replace some of the missing features like the standard elements used for dropdowns, radio buttons, ordered/unordered lists, range input (slider), etc. The purpose of the polyfills is to speed-up prototyping, not fully replace and support the standard elements.
These polyfills enable you to use native elements such as the <select> by replacing it with a custom element with another structure.
Polyfills Location
The polyfills can be found in the Samples/uiresources folder located in the Gameface package.
The folders in uiresources are as follows - Dropdown, Lists, RadioButton, Slider.
How to Use
Use the standard <select>, <ul>, <ol>, <input type="radio">, <input type="range"> tags with their corresponding types and inner elements.
Example
<select name="display-mode" id="display-mode">
<option value="windowed-mode">Windowed</option>
<option value="fullscreen-mode">Fullscreen</option>
<option value="windowed-fullscreen-mode">Windowed Fullscreen</option>
</select>
Specifications
The polyfills react to DOM changes by using the MutationObserver API. Adding an <input type="radio"> or an <option> in a <select> will be reflected.
The polyfills are not using the native elements but using either a custom element and/or regular elements like <div>s to replace the native ones.
Dropdown
Use the standard <select> and <option> tags.
<select> is switched to <custom-select>, the reference to the original <select> is not going to reflect any change if modified.These are the lists with the supported properties and methods. Although there might be more, these are the more meaningful ones:
Properties
| Property | Type | Description |
|---|---|---|
| selectedOption | getter | Returns the last selected option. |
| options | getter | Returns an array with the option elements. |
| length | getter | Returns the number of elements in options array. |
| value | getter | Returns the value of the last selected option. |
Methods
| Method | Accepted values | Description |
|---|---|---|
| namedItem | string | Returns the option element with the matching id, name or value. |
| item | number | Returns the option element with the provided index for an argument or null if not found. |
| add | HTMLOptionElement[, number] | Adds the provided option element. Provide the second argument to add the option before the desired one. |
| remove | number | Removes the option element with the matching index. |
Lists ul / ol
Both Unordered <ul> and Ordered <ol> lists and their <li> elements are converted and visualized.
Radio Button
Use the standard <input type="radio"> along with the <label> element. The radio button’s name, id and the <label>’s for attributes work as expected.
Properties
| Property | Type | Description |
|---|---|---|
| checked | getter | Returns a boolean for the radio button’s checked state. |
| id | getter | Returns the radio button’s id. |
| id | setter | Sets the radio button’s id. |
| value | getter | Returns the radio button’s value. |
| value | setter | Sets the radio button’s value. |
| name | getter | Returns the radio button’s name. |
| name | setter | Sets the radio button’s name. |
<input type="radio"> is switched to <radio-button>, the reference to the original <input> is not going to reflect any change if modified.Slider
Use the standard <input type="range">.
Attributes
| Attribute | Default | Accepted values | Description |
|---|---|---|---|
| orientation | horizontal | horizontal or vertical | Specify the slider orientation. |
| min | 0 | Integer or floats | Specify the minimum value. |
| max | 100 | Integer or float | Specify the maximum value. |
| step | 10 | Integers | Specify the granularity of the step value. |
| value | 50 | Integer or floats | Specify the initial value. |
| oninput | N/A | function() | Specify the function which will be executed on each slider drag when the value is changed. |