Controls Module - FrameworkJS documentation for developers

According to needs in FrameworkJS, we made the controls module. This will provide us with some user interface tools like buttons and text boxes.

Panel

This control is used when we want to have some pop-up, like modal in JavaScript. We can use it like below:

app.controls.panel(content, id, options);

Parameters	Type	Description
content	String	This is the content HTML
id	String	Optional. This is referred to key of each made control.
options	Object	Options are for some customizations. It has two parameters.

options: For options there are below parameters:

closeButton: Set it true to add a close icon on the panel box. We can use it like following:

app.controls.panel(content, id, {closeButton: true});

closeViaOverlay: Set it true to close the panel with overlay.

app.controls.panel(content, id, {closeViaOverlay: true});

Example

For example, in the panel box, we want to write 'Hello World!'. For this purpose add the following code in index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>FrameworkJS</title>

        <link rel="stylesheet" type="text/css" href="lib/framework.css">

        <!-- add your page styles here -->
        <!-- <link rel="stylesheet" type="text/css" href="css/"> -->
        <link rel="stylesheet" type="text/css" href="css/home.css"> 
    </head>
    <body>
        <div class="page home"> 
            <h1>Panel Control!</h1> 
            <div class="button" key="show">Show Panel<div> 
            <div class="button" key="hide">Hide Panel<div> 
        </div>
    </body>
    <script src="lib/cloadio.min.js"></script>
    <script src="lib/jquery-2.2.0.min.js"></script>
    <script src="lib/framework-a.min.js"></script>
    <script src="lib/framework-b.min.js"></script>
    <script src="js/app.js"></script>

    <!-- add your module scripts here -->
    <!-- <script src="modules/"><script> -->
    <script src="modules/controls/js/script.js"></script>

    <!-- add your page scripts here -->
    <!-- <script src="js/"></script> -->
    <script src="js/home.js"></script>
</html>

So add these codes in home.js as follow:

app.ui.button($('.page.home'), 'ripple', {
    key: 'show',
    color: '#747474',
    onPush: function (jButton) {
        var html = '<div class="text">Hello World!</div>';
        app.controls.panel(html, 'text', {closeButton: true});
    }
});
app.ui.button($('.page.home'), 'ripple', {
    key: 'hide',
    color: '#747474',
    onPush: function (jButton) {
        app.controls.panel.destroy();
    }
});

Box

This control is used when we want to have some alert and confirmation as pop-up. We can use it like the below syntax:

app.controls.box(type, id, text, align, callback);

The box control has five parameters.

Parameters	Type	Description
type	String	This defines the type of alert box. It can be 'alert' or 'confirm'. The 'alert' type just shows an information box to users. The 'confirm' type is to get feedback, so it shows the 'Yes/No' question in the box.
id	String	Optional. This is the key of each created control box. It is for this purpose that you may have several boxes on one page, so you can separate them by getting id.
text	String	This contains the message of the alert box. The type is a string.
align	String	Optional. This determines the direction of the text.
callback	Function	Optional. This is a function. If you use the 'confirm' type, this parameter returns the result of user selection.

Example

In below, you can see an example for the alert box.

app.controls.box('alert', 'test', 'Please fill the blank...', 'center');

This example is for confirm type in the control box.

app.controls.box('confirm', 'test', 'Do you agree to go home page?', 'left', function (result) {
    if (result)
        homePage.show();
    else
        chatPage.show();
});

Options

This control is used when we want to have selected an item between several. We can use it like below:

app.controls.options(items, callback, options);

This control has three parameters.

Parameters	Type	Description
items	Object	This is the list of items that shows in the control for user.
callback	Function	When user selects an option, this function returns the result.
Options	Object	Optional. It contains several items: id: This is an id for each options control. align: This is to align the whole options box. title: The title of control is for helping users to select a specific option. onDestroyed: It uses when we want to close the options panel after doing some actions.

Toast

This control is used when we want to have a toast alert. We can use it like below syntax:

app.controls.toast(type, id, text, align, callback);

The toast control has five parameters.

Parameters	Type	Description
type	String	This defines the type of toast. It should be 'toast'.
id	String	Optional. This is the key to each created toast box. It is for this purpose that you may have several toasts on one page, so you can separate them by getting id.
text	String	The content of the toast message.
align	String	Optional. This determines the direction of the text.
callback	Function	Optional. This parameter returns the result of user selection when your toast contains a content selection.

Example

app.controls.toast('toast', 'test', 'Your operation was successful.', 'left');

Select

The select control is used to select an item from several items.

app.controls.select(title, items, callback);

The select control has three parameters.

Parameters	Type	Description
title	String	The string text helps user what to do.
items	Object	The items contain a list of objects.
callback	Function	Shows the result of user-selected item. The result of this control is the key of user-selected item.

Example

For example, user selects an item between several. We should write the below code in index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>FrameworkJS</title>

        <link rel="stylesheet" type="text/css" href="lib/framework.css">

        <!-- add your page styles here -->
        <!-- <link rel="stylesheet" type="text/css" href="css/"> -->
        <link rel="stylesheet" type="text/css" href="css/home.css">
    </head>
    <body>
        <div class="page home"> 
            <div class="button">Select Item<div>
            <div class="item">User Selected Item:<span></span></div>
        </div>
    </body>
    <script src="lib/cloadio.min.js"></script>
    <script src="lib/jquery-2.2.0.min.js"></script>
    <script src="lib/framework-a.min.js"></script>
    <script src="lib/framework-b.min.js"></script>
    <script src="js/app.js"></script>

    <!-- add your module scripts here -->
    <!-- <script src="modules/"><script> -->
    <script src="modules/controls/js/script.js"></script>

    <!-- add your page scripts here -->
    <!-- <script src="js/"></script> -->
    <script src="js/home.js"></script>
</html>

So in the home.js add the following codes:

$('.page.home > .button').click(function () {
    var items = {0: "Jhon", 1: "Jack", 2: "Marya"};
    app.controls.select('Please select an item.', items,
        function (value) {
            $('.page.home > .item > span').html(items[value]);
        });
});

Text

This control is used when we want to get a long text from a user.

app.controls.text(placeholder, callback);

The text control has two parameters.

Parameters	Type	Description
placeholder	String	Optional. It can be a description text to help user write their text.
callback	Function	To show the result user-entered text.

Example

For example, we want to show user-entered long text. Therefore we write the below code in index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>FrameworkJS</title>

        <link rel="stylesheet" type="text/css" href="lib/framework.css">

        <!-- add your page styles here -->
        <!-- <link rel="stylesheet" type="text/css" href="css/"> -->
        <link rel="stylesheet" type="text/css" href="css/home.css">
    </head>
    <body>
        <div class="page home"> 
            <div class="button">Description<div>
            <div class="description"><div>
        </div>
    </body>
    <script src="lib/cloadio.min.js"></script>
    <script src="lib/jquery-2.2.0.min.js"></script>
    <script src="lib/framework-a.min.js"></script>
    <script src="lib/framework-b.min.js"></script>
    <script src="js/app.js"></script>

    <!-- add your module scripts here -->
    <!-- <script src="modules/"><script> -->
    <script src="modules/controls/js/script.js"></script>

    <!-- add your page scripts here -->
    <!-- <script src="js/"></script> -->
    <script src="js/home.js"></script>
</html>

So in the home.js add the following codes:

$('.page.home > .button').click(function () {
    app.controls.text('Please Write your description compeletly.',
        function (value) {
            $('.page.home > .description').html(value);
        });
});

Number

When we want to get just numbers characters from users.

app.controls.number(label, value, attributes);

The number control has three parameters.

Parameters	Type	Description
label	String	The text of the tag.
value	number	The value of the field.
attributes	Object	Include a series of HTML tags attributes.

Map

This control is used when we want to get user location selected.

app.controls.map(title, callback);

The map control has two parameters.

Parameters	Type	Description
title	String	Optional. The message title shows to users to help them to select a location from the map.
callback	Function	This is for showing user-selected location. When user selects a latitude and longitude we can custom that.

Example

For example, we want to get user-selected location.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>FrameworkJS</title>

        <link rel="stylesheet" type="text/css" href="lib/framework.css">
        <link rel="stylesheet" type="text/css" href="lib/map/leaflet.css">

        <!-- add your page styles here -->
        <!-- <link rel="stylesheet" type="text/css" href="css/"> -->
        <link rel="stylesheet" type="text/css" href="css/home.css">
    </head>
    <body>
        <div class="page home"> 
            <div class="button">Select Location<div>
            <div class="map"><div>
        </div>
    </body>
    <script src="lib/cloadio.min.js"></script>
    <script src="lib/jquery-2.2.0.min.js"></script>
    <script src="lib/map/leaflet.js"></script>
    <script src="lib/framework-a.min.js"></script>
    <script src="lib/framework-b.min.js"></script>
    <script src="js/app.js"></script>

    <!-- add your module scripts here -->
    <!-- <script src="modules/"><script> -->
    <script src="modules/controls/js/script.js"></script>

    <!-- add your page scripts here -->
    <!-- <script src="js/"></script> -->
    <script src="js/home.js"></script>
</html>

So in the home.js add the following codes:

$('.page.home > .button').click(function () {
    var position, map, marker, jMap = $('.page.home > .map');
    app.controls.map('Please select a location', function (coordinate) {
        if (coordinate) {
            position = {
                lng: coordinate.lng,
                lat: coordinate.lat
            };
            map = L.map(jMap[0], {zoomControl: false}).setView([position.lat, position.lng], 11);
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '© OpenStreetMap'}).addTo(map);
            marker = new L.marker([position.lat, position.lng]);
            marker.addTo(map);
            map._onResize();
        }
    });
});

Datepicker

This control is used when we want to select the date from a date picker. We can use it like the below syntax:

app.controls.datepicker(title, callback, options);

The datepicker control has three parameters.

Parameters	Type	Description
title	String	Optional. This is a title to help users select their own date.
callback	Function	This is for shows user-selected item. When user selects a time we can custom that.
options	Object	Optional. It contains several items for customizing user interface of the datepicker.

options: For options There are several parameters:

timePicker: This is for customization the detail of showing time.

app.controls.datepicker(title, callback, {
    timePicker: {
        enabled: false,
        showSeconds: false,
        showMeridian: false
    }
});

toolbox: This is to handle the toolbox to show the current day.

app.controls.datepicker(title, callback, {
    toolbox: {
        enabled: false
    }
});

Example

For example, we want to show the selected user date. In order that, we write the below code in index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>FrameworkJS</title>

        <link rel="stylesheet" type="text/css" href="lib/framework.css">

        <!-- add your page styles here -->
        <!-- <link rel="stylesheet" type="text/css" href="css/"> -->
        <link rel="stylesheet" type="text/css" href="css/home.css">
    </head>
    <body>
        <div class="page home"> 
            <div class="button">Select Date<div>
            <div class="date"><div>
        </div>
    </body>
    <script src="lib/cloadio.min.js"></script>
    <script src="lib/jquery-2.2.0.min.js"></script>
    <script src="lib/framework-a.min.js"></script>
    <script src="lib/framework-b.min.js"></script>
    <script src="js/app.js"></script>

    <!-- add your module scripts here -->
    <!-- <script src="modules/"><script> -->
    <script src="modules/controls/js/script.js"></script>

    <!-- add your page scripts here -->
    <!-- <script src="js/"></script> -->
    <script src="js/home.js"></script>
</html>

So in the home.js add the following codes:

$('.page.home > .button').click(function () {
    app.controls.datepicker('Please select a date',
        function (value) {
            $('.page.home > .date').html(new persianDate(value).format('YYYY/MM/DD'));
        },
        {
            timePicker: {
                enabled: false,
                showSeconds: false,
                showMeridian: false
            },
            toolbox: {
                enabled: false
            }
        }
    );
});