DizmoElements

The library dizmoElements, included in Grace and also available as a standalone library, provides UI elements that can be used to design your dizmo.

As an example, to add an UI element, first add the HTML element to index.html:

<input type="text" data-type="dizmo-input">

This Inputfield element will then be converted to a dizmo styled textfield at the start of the dizmo.

Note: All elements that are added after the start of the dizmo, or elements with dynamic parts that are added after that start of the dizmo (e.g the options in a selectbox), need to be initialized manually.

Checkbox

Visual

image-checkbox
image-checkbox

Transforms your checkboxes into dizmo themed checkboxes. No additional events or anything else are required to use this. It is solely a cosmetic change.

Data type

<input id="my-checkbox" type="checkbox" data-type="dizmo-checkbox"/><label for="my-checkbox">Description</label>

Constraints

Works only on checkbox elements.

Usage

Manual initialization:

DizmoElements('#my-checkbox').dcheckbox();

Get the current state

var state=DizmoElements('#my-checkbox').prop('checked');

Set the state

DizmoElements('#my-checkbox').prop('checked',true);

React to state changes

DizmoElements('#my-checkbox').on('change',function(){
    var state=DizmoElements('#my-checkbox').prop('checked');
});

Radiobutton

Visual

image-radiobutton
image-radiobutton

A normal radiobutton, styled to match the dizmo theme. To create a group of radio buttons, use the same name attribute for each member of a group.

Data type

<input type="radio" data-type="dizmo-radiobutton" value="1" name="choice">
<input type="radio" data-type="dizmo-radiobutton" value="2" name="choice">

Constraints

Works only on radiobutton elements.

Usage

To get the value of the checked radiobutton in the group, use the following call:

var data=DizmoElements('input[name=choice]:checked').val();

Slider

Visual

image-slider
image-slider

Creates a slider that can be used as an element. This is an extension of the jQuery slider plugin. Everything that applies to the plugin, for example the usage, also applies to this element.

Data type

<div id="my-slider" data-type="dizmo-slider" ></div>

Constraints

All the constraints that apply to the jQuery UI slider apply here too.

Usage

Manual initialization:

DizmoElements('#my-slider').dslider(
      orientation: 'horizontal',
      step: 1,
      max: 100,
      value: 0
  );

orientation: can be ‘horizontal’ or ‘vertical’ step: can be any number between 1 and n max: maximum value of the slider value: set the slider to a certain value between 0 and max

Make sure you update the slider after you set the orientation, step, max or value parameters:

DizmoElements('#my-slider').dslider('update');

This example shows how to attach an event handler to the slider:

DizmoElements('#my-slider').dslider({
    onSliderMoved: function(value, e) {
    // Do something on slide change
    console.log("new slider position="+value);
    }
});

This example illustrates how to set a slider value programmatically:

DizmoElements('#my-slider').dslider('value',40);

To get the current value, you can use:

var myval=DizmoElements('#my-slider').dslider('value');

Selectbox

Visual

image-selectbox
image-selectbox

The selectbox element enhances a default HTML selectbox and styles it to fall in line with other dizmoElements.

Data type

<select id="my-select" data-type="dizmo-selectbox" >
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

Constraints

Everything should work as it does on a default selectbox. The change event is being propagated, so you can just use the default event to interact with the element. It only works on select elements. If the underlying element changes, a call to the update function is required.

If you add a selectbox to the back side of a dizmo, you need to update it when the dizmo is turned to the back side, to ensure its size is updated correctly. Add the update call to the dizmo.onShowBack function as following:

    dizmo.onShowBack(function() {
        DizmoElements('#my-select').dselectbox('update');
    }

Usage

Manual initialization:

DizmoElements('#my-select').dselectbox();

To react to a change in the selectbox:

DizmoElements('#my-select').on('change', function(e) {
    var selected=DizmoElements('#my-select').val();
});

To update the element when the underlying select changes:

DizmoElements('#my-select').dselectbox('update');

To set the value programmatically, use the provided value function:

DizmoElements('#my-select').dselectbox('value', 'b');

To get the value, you can either use

DizmoElements('#my-select').val();

or

DizmoElements('#my-select').dselectbox('value');

Switch

Visual

image-switch
image-switch

A simple on/off switch made from a button. This element provides functionality to change the switch and get the current state.

Data type

<button id="my-switch" data-type="dizmo-switch"></button>

Constraints

Only works on button elements.

Usage

Manual initialization:

DizmoElements('#my-switch').dswitch();

To change the state of the button programmatically, call ‘state’. The same function is also used to get the current state.

DizmoElements('#my-switch').dswitch('state', 'off');
DizmoElements('#my-switch').dswitch('state', 'on');

To get the current state:

var state = DizmoElements('#my-switch').dswitch('state');

To react to state changes:

DizmoElements('#my-switch').on('click',function(){
    var state = DizmoElements('#my-switch').dswitch('state');
});

Button

Visual

image-button
image-button

A normal button, styled to match the dizmo theme.

Data type

<button id="my-button" data-type="dizmo-button">Done</button>

For an image button, simply replace the text with an image element:

<button id="my-button" data-type="dizmo-button"><img src="icon-back-svg"></button>

Constraints

Only works on button elements.

Usage

Manual initialization:

DizmoElements('#my-button').dbutton();

To react to clicks on a button:

DizmoElements('#my-button').on('click',function(){
    //do something when the button is clicked
});

Inputfield

Visual

image-inputfield
image-inputfield

A normal inputfield, styled to match the dizmo theme.

Data type

<input id="my-input" type="text" data-type="dizmo-input" placeholder="Text">

Constraints

Only works on inputfields with type text.

Usage

Manual initialization

DizmoElements('#my-input').dinput();

To get the current inputfield value:

var data=DizmoElements('#my-input').val();

To get the inputfield value after the focus has shifted:

DizmoElements('#my-input').on('blur',function(){
    var data=DizmoElements('#my-input').val();
});

Textarea

Visual

image-textarea
image-textarea

A normal textarea, styled to match the dizmo theme.

Data type

<textarea id="my-textarea" data-type="dizmo-textarea" cols=20 rows=3></textarea>

Constraints

Only works on textarea elements.

Usage

Manual initialization

DizmoElements('#my-textarea').dtextarea();

To get the current textarea value:

var data=DizmoElements('#my-textarea').val();

To set the textarea value:

DizmoElements('#my-textarea').val('my text');

To get the textarea value after the focus has shifted:

DizmoElements('#my-textarea').on('blur',function(){
    var data=DizmoElements('#my-textarea').val();
});

List

Visual

image-list
image-list

An ordered or unordered dlist styled to match the dizmo theme (with the special iScrollJS library integrated).

Data Type

<div id="my-list" class="list" data-type="dizmo-list"><ol>..<ol></div>

Or

<div id="my-list" class="list" data-type="dizmo-list"><ul>..<ul></div>

Styling

Here is an example of a basic list styling. It is mandatory to set the position to absolute or relative, set overflow to hidden and add fixed sizes to the list div (or a percentage).

 .list {
    border-top: 1px solid rgba(61, 61, 61, 0.5);
    border-bottom: 1px solid rgba(61, 61, 61, 0.5);
    height: 200px; /* or e.g. 100% */
    left: 10px;
    top: 10px;
    width: 200px;
    overflow: hidden;
    position: absolute;
  }
  .list ul {
    list-style-type: none;
    margin: 0px 10px 0px 0px;
    padding: 4px;
    position: relative;
  }

Constraints

For a static list that is declared in HTML, the scrollbars are added automatically. But for a dynamic list that is created and updated at runtime, it is necessary to create the scrollbar manually:

if (this.iscroll !== undefined) {
    this.iscroll.dlist('create');
} else {
    this.iscroll = DizmoElements('#my-list');
    this.iscroll.dlist();
}

The scrollbar can also be destroyed manually:

if (this.iscroll !== undefined) {
    this.iscroll.dlist('destroy');
}

Usage

Manual initialization:

DizmoElements('#my-list').dlist();

Update the list after the contents have changed:

DizmoElements('#my-list').dlist('update');

Notifications

Visual

Confirmation

image-ask
image-ask

Information

image-info
image-info

A dialog notifying the user either for confirmation or information purposes.

Data Type

<div id="my-confirmation" data-type="dizmo-confirmation"></div>

Or

<div id="my-notification" data-type="dizmo-notification"></div>

Constraints

If a notification has to invoke another notification, then it is recommended to use two different div elements.

Usage

For a confirmation, you can choose to have a Ok/Cancel dialog or a Yes/No/Cancel dialog by specifing the appropriate callbacks.

DizmoElements('#my-confirmation').dnotify('ask', {
    title: 'my-title',       // default: 'Confirmation'
    text: 'my-text',         // default: 'Are you sure? Please confirm.'
    ok: ok_callback,         // default: undefined
    cancel: cancel_callback, // default: undefined
    important: false         // default: undefined
});

Or

DizmoElements('#my-confirmation').dnotify('ask', {
    title: 'my-title',       // default: 'Confirmation'
    text: 'my-text',         // default: 'Are you sure? Please confirm.'
    yes: yes_callback,       // default: undefined
    no: no_callback,         // default: undefined
    cancel: cancel_callback, // default: undefined
    important: false         // default: undefined
});

A notification simply displays an Ok dialog

DizmoElements('#my-notification').dnotify('info', {
    title: 'my-title',       // default: 'Notification'
    text: 'my-text',         // default: 'Are you sure? Please confirm.'
    ok: ok_callback          // default: undefined
    important: false         // default: undefined
});

If the important flag is set, then the dialog box is rendered in red.

Practical example

We are adding three inputfields for having a maximum, a mininum and a unit input:

<div id="back">
    <div class="maximum_value">
        <input id="maximum_value_inputfield" type="text" data-type="dizmo-input">
    </div>
    <div class="minimum_value">
        <input id="minimum_value_inputfield" type="text" data-type="dizmo-input">
    </div>
    <div class="unit">
        <input id="unit_inputfield" type="text" data-type="dizmo-input">
    </div>
    <div class="done-btn-wrapper">
        <button class="done-btn" data-type="dizmo-button">Done</button>
    </div>
</div>

External resources