JavaScript Components

Trongate comes with a variety of JavaScript components. Below are examples of Trongate's javascript components in action, along with some instruction on how to add them to your site.

Modals

A modal is a pop-up window that can usually be activated by clicking on a page element such as a button. Click the button below to see an example of a modal.

How To Add A Modal To A Webpage

At the bottom of your HTML, before the closing body tag, include the javascript file named app.js. This can usually be achieved with the following code:


<script src="<?= BASE_URL ?>js/app.js"></script>

Having included the app.js javascript file, the next stage is to add an 'onclick' command to a target element, such as a button. An onclick event should invoke the openModal() function. The openModal() function is a javascript function - contained within app.js. This function expects one argument to be passed in - the argument being the id of the modal that is to appear when the button is clicked. For example,


<button onclick="openModal('demo-modal')">Launch Demo Modal</button>

Finally, we have to write the HTML code for our modal. In Trongate, modal elements have the following key characteristics:

  1. They are all contained within a div that has class of 'modal'.
  2. Within the opening 'modal' div, there should a child div with a class of 'modal-heading'. This div should contain a headline for the modal.
  3. There should be another child div which has a class of 'modal-body'. The modal body should contain the main content area for your modal.
  4. The main modal container div should have an id that matches the argument that has been passed into the openModal() function.

<div class="modal" id="demo-modal">
    <div class="modal-heading">Demo Modal</div>
    <div class="modal-body">
        <h3>Modal Body</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        <p>
            <button onclick="closeModal()">Close Modal</button>
        </p>
    </div>
</div>

Closing Modals

Modals can be closed by invoking the closeModal() function. Typically, this would be added to a page element such as a button. For example:


<button onclick="closeModal()">Close Modal</button>
        

Working With Date Pickers and Time Pickers

Trongate lets you easily can turn ordinary HTML form elements into attractive date and time pickers. In order to add this functionality onto a webpage, you must:

  1. Include trondate-datetime.css in the 'head' section of your webpage
  2. Include trongate-datetime.js at the bottom of your page

Including The Required Files

At the top of your HTML, inside the 'head' section of your webpage, include the CSS file named trongate-datetime.css. This can usually be achieved with the following code:


<link rel="stylesheet" href="<?= BASE_URL ?>css/trongate-datetime.css">

At the bottom of your HTML, before the closing body tag, include the javascript file named trongate-datetime.js. This can usually be achieved with the following code:


<script src="<?= BASE_URL ?>js/trongate-datetime.js"></script>

Changing The Appearance Of Your Date and Time Pickers

It's possible to modify the types of values that are presented in your date pickers. To do this, open up trongate-datetime.js and at the top of the code you'll see a variety of settings. The code is well commented and includes a reference to a URL on W3Schools with more information about how to modify settings relating to dates and times. Feel free to modify these settings to suit your needs.

Colors, sizing and other matters to do with the visual appearance of your date pickers can be changed by modifying or extending trongate-datetime.css.


Popup Calendars (aka, date-pickers)

With Trongate, you can also turn ordinary text input fields into pop-up calendars. For example,

Having included trongate-datetime.css along with trongate-datetime.js, all you have to do is add a class of 'date-picker' onto any ordinary form input field. For example:


<input type="text" class="date-picker">

Time Pickers

Adding a class of 'time-picker' onto an ordinary form input element can convert it into a time picker. This is, of course, assuming that you have included trongate-datetime.css as well as trongate-datetime.js.


<input type="text" class="time-picker">

Date Time Pickers

Adding a class of 'datetime-picker' onto an ordinary form input element can convert it into a date-time picker. Again, this is assuming that you have included trongate-datetime.css as well as trongate-datetime.js.


<input type="text" class="datetime-picker">

Learn More About JavaScript Components View Documentation