UNPKG

jquery-dialog

Version:

jQuery plugin that creates the basic interactivity for an ARIA dialog widget.

3 lines (2 loc) 3.11 kB
(function($){$.fn.dialogButton=function dialogButton(options){return this.each(function onEach(){var $dialogButton=$(this);var dialogId=$dialogButton.data('jquery-dialog-button-for');var $dialog=$('#'+dialogId);$dialog.on('dialogClose',function(){$dialogButton.focus();});$dialogButton.on('click',function(){$dialog.dialog(options);});});};$.fn.dialog=function dialog(options){options=$.extend({},$.fn.dialog.defaults,options);return this.each(function onEach(){var $dialog=$(this);var dataHasTransitions=$dialog.data('jquery-dialog-transitions-enabled');var hasTransitions=(dataHasTransitions===undefined)?options.transitionsEnabled:dataHasTransitions;var $body=$('body');var $header=$dialog.find('.dialog__header');var $dialogBody=$dialog.find('.dialog__body');var $heading=$header.find('> h2');var $dialogWindow=$dialog.find('.dialog__window');var $closeButton=$header.find('.dialog__close, .dialog__back');var $dialogForm=$dialogBody.find('.dialog__form');var $dialogFormChoice=$('<input type="hidden" name="choice" />');var $autoFocusable=$dialogWindow.find('[autofocus]');var $focusable;var openTimeout;var closeTimeout;var onKeyDown=function(e){if(e.keyCode===27){close(e);}};var onFormSubmitClick=function(){var value=this.value||this.innerText;$dialogFormChoice.attr('value',value);};var onFormSubmit=function(e){e.preventDefault();close(e,$(this).serializeArray());};var open=function(){$dialog.prop('hidden',false);$focusable=($autoFocusable.length>0)?$autoFocusable:$dialog.focusable();if($focusable.length===0){$dialogWindow.attr('tabindex','-1').focus();}else{$focusable.first().focus();} $.trapScreenreader($dialog);$.trapKeyboard($dialog,{deactivateOnFocusExit:false});$body.addClass('has-dialog');$dialog.on('keydown',onKeyDown);$dialog.trigger('dialogOpen');};var close=function(e,data){$dialogForm.off('click','[type=submit]',onFormSubmitClick);$dialogForm.off('click','[type=button]',close);$dialogForm.off('submit',onFormSubmit);$closeButton.off('click',close);$dialog.off('keydown',onKeyDown);$dialogFormChoice.remove();$.untrapKeyboard();$.untrapScreenreader();$body.removeClass('has-dialog');if(hasTransitions===true){window.clearTimeout(openTimeout);$dialog.addClass('dialog--transition-out');$dialogWindow.one('transitionend',function(){$dialog.removeClass('dialog--transition-out');$dialog.prop('hidden',true);$dialog.trigger('dialogClose',[data]);});}else{$dialog.prop('hidden',true);$dialog.trigger('dialogClose',[data]);}};$dialogForm.append($dialogFormChoice);$dialog.nextId('dialog');$heading.nextId($dialog.prop('id')+'-title');$dialog.attr('aria-labelledby',$heading.prop('id'));$dialog.attr('role','dialog');$dialogForm.on('click','[type=submit]',onFormSubmitClick);$dialogForm.on('click','[type=button]',close);$dialogForm.on('submit',onFormSubmit);$closeButton.on('click',close);if(hasTransitions===true){window.clearTimeout(closeTimeout);$dialog.addClass('dialog--transition-in');openTimeout=setTimeout(function(){open();$dialog.removeClass('dialog--transition-in');},16);}else{open();}});};}(jQuery));$.fn.dialog.defaults={transitionsEnabled:false,transitionOutDuration:0};