Basic Dialogs

dialogtest.htm (hint: right click, save as)

  1<!--
  2  Test/Development/Documentation page
  3  - enable web server file access
  4  - upload to web dir, e.g. scp testpage.htm test1.local:/sd/dev/
  5  - open in framework by e.g. http://test1.local/#/dev/testpage.htm
  6-->
  7
  8<div class="panel panel-primary">
  9  <div class="panel-heading">Dialog Test/Demo</div>
 10  <div class="panel-body">
 11	<h4>Core Widget</h4>
 12	<button class="btn btn-default" id="action-load">Dialog 1</button>
 13	<button class="btn btn-default" id="action-save">Dialog 2</button>
 14	<button class="btn btn-default" id="action-both">Both together</button>
 15	<button class="btn btn-default" id="action-dyn">Dynamic custom</button>
 16	<hr />
 17	<h4>Utility Wrappers</h4>
 18	<button class="btn btn-default" id="action-info">Alert</button>
 19	<button class="btn btn-default" id="action-confirm">Confirm</button>
 20	<button class="btn btn-default" id="action-choice">Choice</button>
 21	<button class="btn btn-default" id="action-prompt">Prompt</button>
 22	<button class="btn btn-default" id="action-password">Password</button>
 23	<hr />
 24	<h4>Log</h4>
 25	<pre id="log" />
 26  </div>
 27</div>
 28
 29<div id="dialog1" />
 30<div id="dialog2" />
 31<div id="dialog3" />
 32
 33<script>
 34
 35// =======================================================================================
 36// Dialog core widget:
 37//   options: {
 38//     title: '',
 39//     body: '',
 40//     show: false,           / true = open directly on init
 41//     remote: false,
 42//     backdrop: true,        background overlay
 43//     keyboard: true,        ESC = close
 44//     transition: 'fade',    / ''
 45//     size: '',              / 'sm' / 'lg'
 46//     contentClass: '',      added to .modal-content
 47//     onShown: null,         function(input)
 48//     onHidden: null,        function(input)
 49//     onShow: null,          function(input)
 50//     onHide: null,          function(input)
 51//     onUpdate: null,        function(input)
 52//     buttons: [{}],         see example
 53//     timeout: 0,            in seconds
 54//     input: null,           predefined/shared input object to use
 55//   },
 56
 57// Note: use static dialogs (attached to the document) for speed and to store reusable
 58// input, e.g. for a promptdialog.
 59
 60// The default dialog will contain just a "Close" button:
 61$('#dialog1').dialog({
 62  title: 'Please note',
 63  body: '<p>This is just a test.</p>'
 64});
 65$('#dialog2').dialog({
 66  title: 'Alert',
 67  body: '<p>Danger, Will Robinson, danger!</p>',
 68  contentClass: 'alert-danger', // note: looks strange, just an example -- don't use
 69});
 70
 71// You can simply open preconfigured dialogs like this:
 72$('#action-load').on('click', function(){
 73  $('#dialog1').dialog('show');
 74});
 75$('#action-save').on('click', function(){
 76  $('#dialog2').dialog('show');
 77});
 78
 79// …or you can reconfigure dialogs on the fly like this:
 80// Note: the new configuration is stored in the dialog.
 81$('#action-both').on('click', function(){
 82  $('#dialog1').dialog('show', { body: '<p>This is now another test.</p>' });
 83  // This example also opens a second dialog on top of the first:
 84  $('#dialog2').dialog('show', { body: '<p>This is a second layer dialog.</p>' });
 85});
 86
 87// Use dynamic dialogs for single shot purposes:
 88$('#action-dyn').on('click', function(){
 89  $("#log").text("");
 90  $('<div />').dialog({
 91    title: 'Dynamic…',
 92    body: '<p>…dialog with custom buttons.</p>',
 93    buttons: [
 94      // Buttons default to auto hiding the dialog:
 95      { label: "Nope" },
 96      // You can get the button clicked in the onHidden callback, or you can
 97      // add specific action callbacks to each button.
 98      { label: "Maybe…", btnClass: "warning", autoHide: false, action: function(input) {
 99        // input is the data container of the widget, with only predefined
100        // member being "button" = the button clicked (or null).
101        // You can use this container for custom extensions:
102        input.clicked_maybe = true;
103        $(this).find(".modal-body").append("<p>You're now a maybe person.</p>");
104      } },
105      // autoHide callbacks are called on the hidden event, so a fade out
106      // is guaranteed to be finished in the callback.
107      { label: "Done", btnClass: "primary", action: function(input) {
108        $("#log").text(JSON.stringify(input, null, 2));
109      } },
110    ],
111  });
112});
113
114
115// =======================================================================================
116// Dialog utility wrappers:
117//   confirmdialog(title, body, buttons, [callback,] timeout)
118//   promptdialog(type, title, body, buttons, callback)
119// Both can be used plugin style or standalone for dynamic dialogs.
120
121// Dynamic alert() style dialog with 5 seconds timeout:
122$('#action-info').on('click', function(){
123  confirmdialog("Sorry…", "I'm afraid I can't do that, Dave.", ["OK"], 5);
124  // Note: you can also add a callback here to know when the dialog is dismissed.
125});
126
127// Dynamic confirm() style dialog:
128$('#action-confirm').on('click', function(){
129  $("#log").text("");
130  confirmdialog("Load file", "Discard unsaved changes?", ["No", "Yes"], function(confirmed){
131    if (confirmed)
132      $("#log").text("Loading now…");
133    else
134      $("#log").text("Load aborted.");
135  });
136});
137
138// The callback argument is the index of the button clicked (or null), so
139// simple choice dialogs can be done like this:
140$('#action-choice').on('click', function(){
141  $("#log").text("");
142  confirmdialog("Select", "Please select the slot to use:", ["1", "2", "3", "4"], function(button){
143    if (button != null)
144      $("#log").text("Using slot " + (button+1));
145    else
146      $("#log").text("Abort.");
147  });
148});
149
150// Static prompt() style text input dialog (with #dialog3 keeping the dialog):
151$('#action-prompt').on('click', function(){
152  $("#log").text("");
153  $('#dialog3').promptdialog("text", "Save data", "Please enter file name:", ["Cancel", "Save"], function(button, input){
154    if (button && input)
155      $("#log").text("Saving to file: " + input);
156    else
157      $("#log").text("Save aborted.");
158  });
159});
160
161// All single field HTML5 input types can be used:
162$('#action-password').on('click', function(){
163  $("#log").text("");
164  promptdialog("password", "Authentication", "Please enter PIN:", ["Cancel", "Continue"], function(button, input){
165    if (button && input)
166      $("#log").text("PIN entered: " + input);
167    else
168      $("#log").text("Auth aborted.");
169  });
170});
171
172</script>