webcit/static/modal.js

   1 var focusedElement = null;
   2
   3 var modal = document.getElementById('modal');
   4 var dialog = document.getElementById('dialog');
   5 var body = document.getElementById('global');
   6 var html = document.documentElement;
   7
   8 var modalShowing = (html.className === 'modal');
   9
  10
  11 // Have to hack for Safari, due to poor support for the focus() function.
  12 try {
  13         var isSafari = window.navigator.vendor.match(/Apple/);
  14 } catch (ex) {
  15         isSafari = false;
  16 }
  17 if ( isSafari ) {
  18         var dialogFocuser = document.createElement('a');
  19         dialogFocuser.href="#";
  20         dialogFocuser.style.display='block';
  21         dialogFocuser.style.height='0';
  22         dialogFocuser.style.width='0';
  23         dialogFocuser.style.position = 'absolute';
  24         dialog.insertBefore(dialogFocuser, dialog.firstChild);
  25 } else {
  26         dialogFocuser = dialog;
  27 }
  28
  29 window.onunload = function () {
  30         dialogFocuser = focusedElement = modal = dialog = body = html = null;
  31 };
  32
  33 var onfocus = function (e) {
  34         e = e || window.event;
  35         var el = e.target || e.srcElement;
  36
  37         // save the last focused element when the modal is hidden.
  38         if ( !modalShowing ) {
  39                 focusedElement = el;
  40                 return;
  41         }
  42
  43         // if we're focusing the dialog, then just clear the blurring flag.
  44         // else, focus the dialog and prevent the other event.
  45         var p = el.parentNode;
  46         while ( p && p.parentNode && p !== dialog ) {
  47                 p=p.parentNode;
  48         }
  49         if ( p !== dialog ) {
  50                 dialogFocuser.focus();
  51         }
  52 };
  53
  54
  55
  56 var onblur = function () {
  57         if ( !modalShowing ) {
  58                 focusedElement = body;
  59         }
  60 };
  61
  62 html.onfocus = html.onfocusin = onfocus;
  63 html.onblur = html.onfocusout = onblur;
  64 if ( isSafari ) {
  65         html.addEventListener('DOMFocusIn',onfocus);
  66         html.addEventListener('DOMFocusOut',onblur);
  67 }
  68 // focus and blur events are tricky to bubble.
  69 // need to do some special stuff to handle MSIE.
  70
  71
  72 function toggleModal (b) {
  73
  74         if (modalShowing && b) return;
  75         if (!modalShowing && !b) return;
  76
  77         html.className=modalShowing?'':'modal';
  78
  79         modalShowing = !modalShowing;
  80
  81         if (modalShowing) {
  82                 dialog.focus();
  83         } else if (focusedElement) {
  84                 try {
  85                         focusedElement.focus();
  86                 } catch(ex) {}
  87         }
  88
  89 };