Last active
August 29, 2015 14:05
-
-
Save mscalora/d228a7e2e0b4b619bec6 to your computer and use it in GitHub Desktop.
jQuery UI Busy Dialog
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Busy Dialog Test</title> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> | |
| <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script> | |
| <link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" rel="stylesheet" /> | |
| <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" /> | |
| <style> | |
| #test-main { | |
| text-align: center; | |
| } | |
| #group { | |
| display: inline-block; | |
| } | |
| .test-case { | |
| margin: 20px auto; | |
| text-align: left; | |
| } | |
| .test-case button { | |
| margin-right: 10px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <section id="test-main"> | |
| <h1>Busy Dialog Test</h1> | |
| <div id="group"> | |
| </div> | |
| <div><b>Note:</b> Tests will dismiss after 10 seconds</div> | |
| </section> | |
| <script> | |
| var tests = { | |
| test1: { | |
| description: 'All defaults' | |
| }, | |
| test2: { | |
| description: 'Type of "gear"', | |
| type: 'gear' | |
| }, | |
| test3: { | |
| description: 'Cancelable', | |
| cancelable: true | |
| }, | |
| test4: { | |
| description: 'Cancelable with label', | |
| cancelable: true, | |
| cancelButtonLabel: 'I give up!' | |
| }, | |
| test5: { | |
| description: 'Custom icon and size', | |
| type: 'fa-android', | |
| size: '8em' | |
| } | |
| }; | |
| for( var i = 1; 'test'+i in tests; i++) { | |
| $('<div class="test-case">').append($('<button/>').attr('id','test'+i).text('Test '+i).wrap('<div/>')) | |
| .append($('<span>').text(tests['test'+i].description)) | |
| .appendTo('#group'); | |
| } | |
| $('#group button').on('click',function(){ | |
| var test = $(this).attr('id'); | |
| var dialog = showBusy(tests[test]); | |
| setTimeout(function(){ | |
| hideBusy(dialog); | |
| },10000) | |
| }); | |
| </script> | |
| </body> | |
| <script> | |
| /** | |
| * | |
| * @param typeOrOptions - string 'refresh', 'gear', 'spin', 'notch' or any FontAwesome icon class like 'fa-android' | |
| * or a options object with the following settings: | |
| * type - string 'refresh', 'gear', 'spin', 'notch' or any FontAwesome icon class like 'fa-android' | |
| * cancelable - boolean [false] | |
| * cancelButtonLabel - string ['Cancel'] | |
| * cancelCallback - function [ function(evt){} ] | |
| * size - icon width in CSS measurement units like '64px' [ '4em' ] | |
| * classes - space delimited of one or more classes applied to dialog element [ '' ] | |
| * dialogOptions - extra jQuery dialog options as a js object [ {} ] | |
| */ | |
| function showBusy(typeOrOptions) { | |
| var opts = $.extend({ | |
| type: typeof typeOrOptions === "string" ? typeOrOptions : "refresh", | |
| cancelable: false, | |
| cancelButtonLabel: "Cancel", | |
| cancelCallback: function(){}, | |
| size: '4em', | |
| classes: "", | |
| dialogOptions: {} | |
| },typeof typeOrOptions === "object" ? typeOrOptions : {}); | |
| $('#busy-dialog-ui').remove(); | |
| var dialog = $('<div id="busy-dialog-ui"><div><i class="fa fa-spin"/></div><button></button></div>'); | |
| dialog.append('<style>.busy-dialog-ui .ui-dialog-titlebar{ display:none; } .busy-dialog-ui { text-align: center; border-radius: 30px; border: 3px solid #444; } .busy-dialog-ui button { margin-top: 40px; } </style>'); | |
| if (opts.cancelable) { | |
| $('button',dialog).text(opts.cancelButtonLabel).addClass(opts.cancelButtonClasses).on('click',function(evt){ | |
| dialog.dialog('close'); | |
| opts.cancelCallback.apply(opts,[evt]); | |
| }); | |
| } else { | |
| $('button',dialog).remove(); | |
| } | |
| var typeMap = { | |
| refresh: 'fa-refresh', | |
| gear: 'fa-cog', | |
| spin: 'fa-spinner', | |
| notch: 'fa-circle-o-notch' | |
| }; | |
| $('i',dialog).addClass(opts.type in typeMap ? typeMap[opts.type] : opts.type).css('font-size',opts.size); | |
| dialog.css({ | |
| padding: 40 | |
| }).dialog($.extend({ | |
| modal: true, | |
| width: 'auto', | |
| closeOnEscape: false | |
| },opts.dialogOptions,{ | |
| dialogClass: 'busy-dialog-ui ' + ('dialogClass' in opts.dialogOptions ? opts.dialogOptions : '') | |
| })); | |
| $(window).on('resize orientationchange',function() { | |
| $("#busy-dialog-ui").dialog("option", "position", "center"); | |
| }); | |
| $('button',dialog).blur(); | |
| return dialog; | |
| } | |
| /** | |
| * hide (take down) busy dialog | |
| * @param dialog [optional] take down this specific instance of the busy dialog, if it is not showing, don't do anything | |
| */ | |
| function hideBusy(dialog) { | |
| // prevent stale dialog closure | |
| if (dialog && $(dialog).is(':not(:visible)')) { | |
| return; | |
| } | |
| $(dialog || '#busy-dialog-ui').dialog('close'); | |
| } | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment