From: Art Cancro Date: Tue, 30 Nov 2010 06:11:43 +0000 (-0500) Subject: Integrated a modal dialog framework (not in use yet) X-Git-Tag: v8.01~549^2~6 X-Git-Url: https://code.citadel.org/?p=citadel.git;a=commitdiff_plain;h=8a8f7014e340e653af6e42480b604de611ea7e56 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 index 000000000..f12aed225 --- /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 index 000000000..5bfd67a2d 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 0a12c86d9..8e72d8659 100644 --- 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 index 000000000..5d05b4a60 --- /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 66e1daeae..358a77179 100644 --- 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 85b398bf5..3f3055a11 100644 --- a/webcit/static/t/head.html +++ b/webcit/static/t/head.html @@ -24,10 +24,34 @@ + + + +