173 lines
6.1 KiB
HTML
173 lines
6.1 KiB
HTML
<!--
|
|
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>
|