Basic Dialogs

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

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!--
  Test/Development/Documentation page
  - enable web server file access
  - upload to web dir, e.g. scp testpage.htm test1.local:/sd/dev/
  - open in framework by e.g. http://test1.local/#/dev/testpage.htm
-->

<div class="panel panel-primary">
  <div class="panel-heading">Dialog Test/Demo</div>
  <div class="panel-body">
	<h4>Core Widget</h4>
	<button class="btn btn-default" id="action-load">Dialog 1</button>
	<button class="btn btn-default" id="action-save">Dialog 2</button>
	<button class="btn btn-default" id="action-both">Both together</button>
	<button class="btn btn-default" id="action-dyn">Dynamic custom</button>
	<hr />
	<h4>Utility Wrappers</h4>
	<button class="btn btn-default" id="action-info">Alert</button>
	<button class="btn btn-default" id="action-confirm">Confirm</button>
	<button class="btn btn-default" id="action-choice">Choice</button>
	<button class="btn btn-default" id="action-prompt">Prompt</button>
	<button class="btn btn-default" id="action-password">Password</button>
	<hr />
	<h4>Log</h4>
	<pre id="log" />
  </div>
</div>

<div id="dialog1" />
<div id="dialog2" />
<div id="dialog3" />

<script>

// =======================================================================================
// Dialog core widget:
//   options: {
//     title: '',
//     body: '',
//     show: false,           / true = open directly on init
//     remote: false,
//     backdrop: true,        background overlay
//     keyboard: true,        ESC = close
//     transition: 'fade',    / ''
//     size: '',              / 'sm' / 'lg'
//     contentClass: '',      added to .modal-content
//     onShown: null,         function(input)
//     onHidden: null,        function(input)
//     onShow: null,          function(input)
//     onHide: null,          function(input)
//     onUpdate: null,        function(input)
//     buttons: [{}],         see example
//     timeout: 0,            in seconds
//     input: null,           predefined/shared input object to use
//   },

// Note: use static dialogs (attached to the document) for speed and to store reusable
// input, e.g. for a promptdialog.

// The default dialog will contain just a "Close" button:
$('#dialog1').dialog({
  title: 'Please note',
  body: '<p>This is just a test.</p>'
});
$('#dialog2').dialog({
  title: 'Alert',
  body: '<p>Danger, Will Robinson, danger!</p>',
  contentClass: 'alert-danger', // note: looks strange, just an example -- don't use
});

// You can simply open preconfigured dialogs like this:
$('#action-load').on('click', function(){
  $('#dialog1').dialog('show');
});
$('#action-save').on('click', function(){
  $('#dialog2').dialog('show');
});

// …or you can reconfigure dialogs on the fly like this:
// Note: the new configuration is stored in the dialog.
$('#action-both').on('click', function(){
  $('#dialog1').dialog('show', { body: '<p>This is now another test.</p>' });
  // This example also opens a second dialog on top of the first:
  $('#dialog2').dialog('show', { body: '<p>This is a second layer dialog.</p>' });
});

// Use dynamic dialogs for single shot purposes:
$('#action-dyn').on('click', function(){
  $("#log").text("");
  $('<div />').dialog({
    title: 'Dynamic…',
    body: '<p>…dialog with custom buttons.</p>',
    buttons: [
      // Buttons default to auto hiding the dialog:
      { label: "Nope" },
      // You can get the button clicked in the onHidden callback, or you can
      // add specific action callbacks to each button.
      { label: "Maybe…", btnClass: "warning", autoHide: false, action: function(input) {
        // input is the data container of the widget, with only predefined
        // member being "button" = the button clicked (or null).
        // You can use this container for custom extensions:
        input.clicked_maybe = true;
        $(this).find(".modal-body").append("<p>You're now a maybe person.</p>");
      } },
      // autoHide callbacks are called on the hidden event, so a fade out
      // is guaranteed to be finished in the callback.
      { label: "Done", btnClass: "primary", action: function(input) {
        $("#log").text(JSON.stringify(input, null, 2));
      } },
    ],
  });
});


// =======================================================================================
// Dialog utility wrappers:
//   confirmdialog(title, body, buttons, [callback,] timeout)
//   promptdialog(type, title, body, buttons, callback)
// Both can be used plugin style or standalone for dynamic dialogs.

// Dynamic alert() style dialog with 5 seconds timeout:
$('#action-info').on('click', function(){
  confirmdialog("Sorry…", "I'm afraid I can't do that, Dave.", ["OK"], 5);
  // Note: you can also add a callback here to know when the dialog is dismissed.
});

// Dynamic confirm() style dialog:
$('#action-confirm').on('click', function(){
  $("#log").text("");
  confirmdialog("Load file", "Discard unsaved changes?", ["No", "Yes"], function(confirmed){
    if (confirmed)
      $("#log").text("Loading now…");
    else
      $("#log").text("Load aborted.");
  });
});

// The callback argument is the index of the button clicked (or null), so
// simple choice dialogs can be done like this:
$('#action-choice').on('click', function(){
  $("#log").text("");
  confirmdialog("Select", "Please select the slot to use:", ["1", "2", "3", "4"], function(button){
    if (button != null)
      $("#log").text("Using slot " + (button+1));
    else
      $("#log").text("Abort.");
  });
});

// Static prompt() style text input dialog (with #dialog3 keeping the dialog):
$('#action-prompt').on('click', function(){
  $("#log").text("");
  $('#dialog3').promptdialog("text", "Save data", "Please enter file name:", ["Cancel", "Save"], function(button, input){
    if (button && input)
      $("#log").text("Saving to file: " + input);
    else
      $("#log").text("Save aborted.");
  });
});

// All single field HTML5 input types can be used:
$('#action-password').on('click', function(){
  $("#log").text("");
  promptdialog("password", "Authentication", "Please enter PIN:", ["Cancel", "Continue"], function(button, input){
    if (button && input)
      $("#log").text("PIN entered: " + input);
    else
      $("#log").text("Auth aborted.");
  });
});

</script>