Integrated a modal dialog framework (not in use yet)

diff --git a/webcit/static/modal.js b/webcit/static/modal.js
new file mode 100644 (file)
index 0000000..f12aed2
--- /dev/null
+++ b/webcit/static/modal.js
@@ -0,0 +1,84 @@
+var focusedElement = null;
+
+var modal = document.getElementById('modal');
+var dialog = document.getElementById('dialog');
+var body = document.getElementById('global');
+var html = document.documentElement;
+
+var modalShowing = (html.className === 'modal');
+
+
+// Have to hack for Safari, due to poor support for the focus() function.
+try {
+       var isSafari = window.navigator.vendor.match(/Apple/);
+} catch (ex) {
+       isSafari = false;
+}
+if ( isSafari ) {
+       var dialogFocuser = document.createElement('a');
+       dialogFocuser.href="#";
+       dialogFocuser.style.display='block';
+       dialogFocuser.style.height='0';
+       dialogFocuser.style.width='0';
+       dialogFocuser.style.position = 'absolute';
+       dialog.insertBefore(dialogFocuser, dialog.firstChild);
+} else {
+       dialogFocuser = dialog;
+}
+
+window.onunload = function () {
+       dialogFocuser = focusedElement = modal = dialog = body = html = null;
+};
+
+var onfocus = function (e) {
+       e = e || window.event;
+       var el = e.target || e.srcElement;
+
+       // save the last focused element when the modal is hidden.
+       if ( !modalShowing ) {
+               focusedElement = el;
+               return;
+       }
+       
+       // if we're focusing the dialog, then just clear the blurring flag.
+       // else, focus the dialog and prevent the other event.
+       var p = el.parentNode;
+       while ( p && p.parentNode && p !== dialog ) {
+               p=p.parentNode;
+       }
+       if ( p !== dialog ) {
+               dialogFocuser.focus();
+       }
+};
+
+
+
+var onblur = function () {
+       if ( !modalShowing ) {
+               focusedElement = body;
+       }
+};
+
+html.onfocus = html.onfocusin = onfocus;
+html.onblur = html.onfocusout = onblur;
+if ( isSafari ) {
+       html.addEventListener('DOMFocusIn',onfocus);
+       html.addEventListener('DOMFocusOut',onblur);
+}
+// focus and blur events are tricky to bubble.
+// need to do some special stuff to handle MSIE.
+
+
+var toggleModal = function () {
+       
+       html.className=modalShowing?'':'modal';
+       modalShowing = !modalShowing;
+       if (modalShowing) {
+               dialog.focus();
+       } else if (focusedElement) {
+               try {
+                       focusedElement.focus();
+               } catch(ex) {}
+       }
+       
+};

diff --git a/webcit/static/pixel.gif b/webcit/static/pixel.gif
new file mode 100644 (file)
index 0000000..5bfd67a
Binary files /dev/null and b/webcit/static/pixel.gif differ

diff --git a/webcit/static/styles/global.css b/webcit/static/styles/global.css
index 0a12c86d91db51855d9f2a069e507622e09bfbf5..8e72d865959456bcc209640a2479dae302995823 100644 (file)
--- a/webcit/static/styles/global.css
+++ b/webcit/static/styles/global.css
@@ -10,4 +10,3 @@
 }
 
 #global center { width: 80% }
-

diff --git a/webcit/static/styles/modal.css b/webcit/static/styles/modal.css
new file mode 100644 (file)
index 0000000..5d05b4a
--- /dev/null
+++ b/webcit/static/styles/modal.css
@@ -0,0 +1,74 @@
+.md-overlay-decorator {
+       background: #222;
+       height: 100%;
+       width: 100%;
+       position: absolute;
+       top:0;
+       left:0;
+       opacity:0.8;
+       z-index:2000;
+       *display:none;
+}
+
+.md-overlay-wrap {
+       height:100%;
+       width:100%;
+       display:block;
+       position:absolute;
+       top:0;
+       left:0;
+       z-index:2001;
+       overflow:auto;
+       *overflow-x:hidden;
+       *zoom:1;
+       /* (0.8 * 255).toString(16) = cc */
+       *filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc222222,endColorstr=#cc222222);
+       *background:transparent url(../pixel.gif);
+}
+
+.md-overlay {
+       z-index:2001;
+       position:relative;
+       margin:0 auto;
+       display:table;
+       height:100%;
+       vertical-align:middle;
+       width:300px;
+       z-index:9999;
+       *width:100%;
+       *text-align:center;
+       *position:static;
+       *display:block;
+}
+
+.md-dialog-wrap {
+       display:table-cell;
+       vertical-align:middle;
+       *width:300px;
+       *text-align:left;
+       *zoom:1;
+       *display:inline;
+}
+
+.md-dialog-decorator {
+       display:none;
+       *vertical-align:middle;
+       *zoom:1;
+       *display:inline;
+       *height:100%;
+       *width:0;
+       *background:red;
+}
+
+#modal {
+       display:none;
+}
+
+.modal #modal {
+       display:block;
+}
+
+.md-dialog {
+       background:white;
+       border:2px solid #080;
+}

diff --git a/webcit/static/styles/webcit.css b/webcit/static/styles/webcit.css
index 66e1daeaebc76faf77446dca8f73ba89b76bd98c..358a771799d3215e6c02bf5fd1fd5ef4ce6f8b31 100644 (file)
--- a/webcit/static/styles/webcit.css
+++ b/webcit/static/styles/webcit.css
@@ -12,21 +12,19 @@
 @import url("navbar.css");
 @import url("content.css");
 @import url("box.css");
+@import url("modal.css");
 
 @media print {
        input#toggler, .toolbar { display: none }
 }
 
-/* Typography */
-
-html {
+html, body {
        font-size: 100;
-       overflow: hidden;
-}
-
-body {
-       font-size: 100%;
-       overflow: hidden;
+       height:100%;
+       width:100%;
+       margin:0;
+       padding:0;
+       overflow:hidden;
 }
 
 .address_book_popup_title { font-size: 130% }
@@ -1264,4 +1262,3 @@ a.event_title:hover span.bttbottom, a.event_unread:hover span.bttbottom, a.event
        font-size: 100%;
        font-style: italic;
 }
-

diff --git a/webcit/static/t/head.html b/webcit/static/t/head.html
index 85b398bf5364eecff867d1f80759bab074b03689..3f3055a11124eaa6f208ee269963826b5d25624d 100644 (file)
--- a/webcit/static/t/head.html
+++ b/webcit/static/t/head.html
@@ -24,10 +24,34 @@
                <script type="text/javascript" src="static/wclib.js"></script>
                <script type="text/javascript" src="static/roomops.js"></script>
                <script type="text/javascript" src="static/ctdldragdrop.js"></script>
+               <script type="text/javascript" src="static/modal.js"></script>
        </head>
 <body>
 <??("COND:LOGGEDIN",1)>
        <?ICONBAR>
 <??("X",1)>
+<!--("begin modal container")-->
+<div id="modal">
+       <div class="md-overlay-decorator"></div>
+       <div class="md-overlay-wrap">
+               <div class="md-overlay">
+                       <div class="md-dialog-decorator"></div>
+                       <div class="md-dialog-wrap">
+                               <div class="md-dialog" id="dialog">
+                                       <div class="md-content">
+
+This is the modal dialog box.  If you are seeing this message, the
+modal dialog was invoked without first populating its contents, which
+is a mistake.
+<br>
+<h2><a href="javascript:toggleModal();">Dismiss</a></h2>
+
+                                       </div>
+                               </div>
+                       </div>
+               </div>
+       </div>
+</div>
+<!--("end modal container")-->
 <div id="global">
 <!--("end head.html")-->