FloriaJS ‐ FloriaDialog ‐ Basic Usage

Intro

Simple stackable modal dialogThe FloriaDialog component is defined in /floria.v2.0/module-dialog.js.

Create a dialog

import { FloriaDialog  } from "./module-dialog.js";

var dlg= new FloriaDialog("SOME_ID");

Creating a dialog is not trivial and often, dialogs are needed repeatedly, so it's generally preferred to create a variable as a page-level vs re-creating a dialog on any given event.

Show a dialog

dlg.show("This is a title", null, 1, 0.95, function(cntId) {
   document.getElementById(cntId).innerHTML = "This is the contents inside the dialog";
});

The show() method takes:

• a title
• an optional Url. If specified, the contents of the dialog will be obtained from that URL which is expected to return an HTML fragment (i.e., not a full HTML document). Additionally, the rendering function handler if passed will be ignored.
• a width and height ratio from 0 to 1 (any value less than 0.2 will be set to 0.2 and any value higher than .98 will be set to .98)
• a rendering function handler that will be called when the dialog is ready to render its contents. This rendering method is only used if URL is empty.

Popup lifecycle

The way popups work is that you create one popup and reuse it across multiple purposes. Only if you need multiple layers of popups would you create multiple instances. So the life-cycle for one dialog is typically:

• Create
• Show
• Hide
• Show
• Hide
• etc...

The main methods are:

• The show() function is heavily used and easy to understand.
• The hide() method allows to programmatically close the dialog. It is not often used in practice because most of the times, users close the dialog via the close-icon top-left. But in some cases, such as form submissions, pickers and so on, the dialog is closed programmatically based on a user action.
• The setOnHide(callbackFunc) allows you to set a handler to be called back when the dialog is closed, via any method. Note that because Dialog instances are often reused heavily across features, you have to call setOnHide every single time before you call show(), and when you are called, you must then unset by calling setOnHide(null). Because dialogs are often reused, you don't want to leave a onHide handler between invocations which could be over semantically completely different actual dialogs for the end user. e.g.:

<TABLE border="0" width="100%">
  <TR><TD><A href="javascript:doThis()"><IMG src="this.gif"></A></TD>
      <TD><A href="javascript:doThat()"><IMG src="that.gif"></A></TD>
  </TR>
</TABLE>

var dlg = new new FloriaDialog("SOME_ID");
function doThis()
 {
   dlg.show("Title for this", null, 1, 0.95, function(cntId) {
      document.getElementById(cntId).innerHTML = "Hello This";
   });
 }
function doThat()
 {
   dlg.show("Title for that", null, 1, 0.95, function(cntId) {
      document.getElementById(cntId).innerHTML = "Hello That";
   });
 }

The "this" dialog is different from the "that" dialog, and if you were to use an onHide handler, there might be a case where it's a single pirce of logic, but more likely, it should be different for this vs that.

var dlg = new new FloriaDialog("SOME_ID");
function doThis()
 {
   dlg.setOnHideHandler(function() {
        console.log("Closing This");
        // unset the handler
        dlg.setOnHideHandler();
   });
   dlg.show("Title for this", null, 1, 0.95, function(cntId) {
      document.getElementById(cntId).innerHTML = "Hello This";
   });
 }
function doThat()
 {
   dlg.setOnHideHandler(function() {
        console.log("Closing That");
        // unset the handler
        dlg.setOnHideHandler();
   });
   dlg.show("Title for that", null, 1, 0.95, function(cntId) {
      document.getElementById(cntId).innerHTML = "Hello That";
   });
 }

It is never possible for these 2 dialogs to be open at the same time, so they all use the same resource.