Responsive Dialog

The Dialog Framework is based on JQueryUI plus a custom wrapper class (dialog.ts) and is fully responsive.

The custom wrapper class works in combination with jqueryUI dialog and Connection Utils and provides a generic CRUD dialog functionality. Basic Dialogs and sub-dialogs are supported.

Basic Dialog Code

Configuration

id: this is the html id which will be used to access the dialog from javascript
data-width: this is optional. If non-responsive, this is the default width for the dialog
data-icon: we use font-awesome to display an icon
data-color: the color-class (defining the background-color) for this dialog
title: this uses an i18n tag to get the title from the language file
style: use the display:none to make sure the dialog is not shown per default

The input uses the syntax of jsForm to allow us to fill the fields with json data.

<div id="sampleDialog" data-width="600" data-icon="fa fa-business-time" data-color="bg-color-blue" title="Sample" style="display:none">
  <h1>Hello World</h1>
  <input name="data.name" class="form-control"/>
</div>

Dialog.init("#projectInfoDlg");

To show the dialog you can simply call Dialog.open()

This will:

open the given dialog (#projectInfoDlg)
fill it with the given json
on "OK" press the function is being executed with the changed json passed (using jsForm)

Dialog.open("#sampleDlg", { name: "test"}, function(data){
   if(!data) {
	return false;
   }
   console.log("Saving!", data);
});

Dialog with HTML Buttons

If you define the button bar using html only, the default button bar will be replaced.
Buttons and Dropdown Buttons are possible, have the events on or tags.

data-event: data attribute for the "event-name"
class "disabled": if set, do not send events on click
class "data": if set, pass the .jsForm("get") data in the event

To replace the default button bar a div container with class buttonset is needed. Put it anywhere in your dialogs html.

Inside this div put your buttons (default button element or dropdown button)

 <div class="buttonset">

 <!-- Default html buttons  --> 
 <button class="btn btn-primary default data" data-event="invoicePrint" id="invoicePrint">Drucken</button>
 <button class="btn btn-secondary data" data-event="invoiceSendEmail" id="invoiceSendEmail">Verschicken</button>

  <!-- And/Or dropdown buttons  --> 
   <div class="dropdown d-inline">
        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown button</button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" data-event="someaction" href="#">Action</a></li>
          <li><a class="dropdown-item" data-event="someaction2" href="#">Another action</a></li>
          <li><a class="dropdown-item" data-event="someaction3" href="#">Something else here</a></li>
        </ul>
    </div>

 </div>

To enable replacement initialize your dialog with flag replaceButton (3rd parameter) set to true

Dialog.init('#dialog', {}, true);

<div id="dialog" data-width="1000" data-icon="fa fa-question" title="sample dialog">
  <!-- jsform -->
   
   <!-- buttonset container - Begin (needed div)  -->
   <div class="buttonset">

     <!-- define default html buttons -->
     <button class="btn btn-primary default data" data-event="someButtonId">Do sth</button>
     <button class="btn btn-secondary disabled data" data-event="disabledButton">Do sth else (disabled until we remove the disabled class)</button>

     <!-- define dropdown buttons -->
     <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown button</button>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" data-event="someaction" href="#">Action</a></li>
          <li><a class="dropdown-item" data-event="someaction2" href="#">Another action</a></li>
          <li><a class="dropdown-item" data-event="someaction3" href="#">Something else here</a></li>
        </ul>
     </div>

   </div>  
   <!-- buttonset container - End --> 

</div>

Event Handling

Bind to events

In order to bind to events the notation is 'eventName'. EventName is the part defined in data-event attribute.
So to listen on 'invoicePrint' event the notation is 'invoicePrint'.
Event is available in the corresponding dialog.

$(dlg).on("invoicePrint", (\_ev, dlg, data)=>{ do something on press });

Dispatch events

To dispatch an event you have to notice event name in 'data-event' attribute in your button element or a tag

<button class="btn btn-primary" data-event="invoicePrint" id="invoicePrint">Drucken</button>

Prevent event dispatching

If you don't wanna send events add class 'disabled' to your button element or a tag.

<button class="btn btn-primary disabled" data-event="invoicePrint" id="invoicePrint">Drucken</button>

Pass data to the event handler

If you need jsForms data in your event handler add class 'data' to your button element or a tag.
Receive your data as third parameter in your handler method as a jsForm data object

<button class="btn btn-primary data" data-event="invoicePrint" id="invoicePrint">Drucken</button>

// third parameter is jsForm data object
$(dlg).on("invoicePrint", (\_ev, dlg, data)=>{ process data });