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>