JS Polyfills

Overview

These JavaScript polyfills for Prysm 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 Prysm 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.

These are the lists with the supported properties and methods. Although there might be more, these are the more meaningful ones:

Properties

PropertyTypeDescription
selectedOptiongetterReturns the last selected option.
optionsgetterReturns an array with the option elements.
lengthgetterReturns the number of elements in options array.
valuegetterReturns the value of the last selected option.

Methods

MethodAccepted valuesDescription
namedItemstringReturns the option element with the matching id, name or value.
itemnumberReturns the option element with the provided index for an argument or null if not found.
addHTMLOptionElement[, number]Adds the provided option element. Provide the second argument to add the option before the desired one.
removenumberRemoves 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

PropertyTypeDescription
checkedgetterReturns a boolean for the radio button’s checked state.
idgetterReturns the radio button’s id.
idsetterSets the radio button’s id.
valuegetterReturns the radio button’s value.
valuesetterSets the radio button’s value.
namegetterReturns the radio button’s name.
namesetterSets the radio button’s name.

Slider

Use the standard <input type="range">.

Attributes

AttributeDefaultAccepted valuesDescription
orientationhorizontalhorizontal or verticalSpecify the slider orientation.
min0Integer or floatsSpecify the minimum value.
max100Integer or floatSpecify the maximum value.
step10IntegersSpecify the granularity of the step value.
value50Integer or floatsSpecify the initial value.
oninputN/Afunction()Specify the function which will be executed on each slider drag when the value is changed.