data/Template.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html>
   3 <head>
   4         <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   5         <base href="%@">
   6         <script type="text/ecmascript" defer="defer">
   7
   8                 //Appending new content to the message view
   9                 function appendMessage(html) {
  10                         shouldScroll = nearBottom();
  11
  12                         //Remove any existing insertion point
  13                         insert = document.getElementById("insert");
  14                         if(insert) insert.parentNode.removeChild(insert);
  15
  16                         //Append the new message to the bottom of our chat block
  17                         chat = document.getElementById("Chat");
  18                         range = document.createRange();
  19                         range.selectNode(chat);
  20                         documentFragment = range.createContextualFragment(html);
  21                         chat.appendChild(documentFragment);
  22
  23                         alignChat(shouldScroll);
  24                 }
  25                 function appendMessageNoScroll(html) {
  26                         //Remove any existing insertion point
  27                         insert = document.getElementById("insert");
  28                         if(insert) insert.parentNode.removeChild(insert);
  29
  30                         //Append the new message to the bottom of our chat block
  31                         chat = document.getElementById("Chat");
  32                         range = document.createRange();
  33                         range.selectNode(chat);
  34                         documentFragment = range.createContextualFragment(html);
  35                         chat.appendChild(documentFragment);
  36                 }
  37                 function appendNextMessage(html){
  38                         shouldScroll = nearBottom();
  39
  40                         //Locate the insertion point
  41                         insert = document.getElementById("insert");
  42
  43                         //make new node
  44                         range = document.createRange();
  45                         range.selectNode(insert.parentNode);
  46                         newNode = range.createContextualFragment(html);
  47
  48                         //swap
  49                         insert.parentNode.replaceChild(newNode,insert);
  50
  51                         alignChat(shouldScroll);
  52                 }
  53                 function appendNextMessageNoScroll(html){
  54                         //Locate the insertion point
  55                         insert = document.getElementById("insert");
  56
  57                         //make new node
  58                         range = document.createRange();
  59                         range.selectNode(insert.parentNode);
  60                         newNode = range.createContextualFragment(html);
  61
  62                         //swap
  63                         insert.parentNode.replaceChild(newNode,insert);
  64                 }
  65
  66                 //Auto-scroll to bottom.  Use nearBottom to determine if a scrollToBottom is desired.
  67                 function nearBottom() {
  68                         return ( document.body.scrollTop >= ( document.body.offsetHeight - ( window.innerHeight * 1.2 ) ) );
  69                 }
  70                 function scrollToBottom() {
  71                         document.body.scrollTop = document.body.offsetHeight;
  72                 }
  73
  74                 //Dynamically exchange the active stylesheet
  75                 function setStylesheet( id, url ) {
  76                         code = "<style id=\"" + id + "\" type=\"text/css\" media=\"screen,print\">";
  77                         if( url.length ) code += "@import url( \"" + url + "\" );";
  78                         code += "</style>";
  79                         range = document.createRange();
  80                         head = document.getElementsByTagName( "head" ).item(0);
  81                         range.selectNode( head );
  82                         documentFragment = range.createContextualFragment( code );
  83                         head.removeChild( document.getElementById( id ) );
  84                         head.appendChild( documentFragment );
  85                 }
  86
  87                 //Swap an image with its alt-tag text on click, or expand/unexpand an attached image
  88                 document.onclick = imageCheck;
  89                 function imageCheck() {
  90                         node = event.target;
  91                         if(node.tagName == 'IMG' && !client.zoomImage(node) && node.alt) {
  92                                 a = document.createElement('a');
  93                                 a.setAttribute('onclick', 'imageSwap(this)');
  94                                 a.setAttribute('src', node.getAttribute('src'));
  95                                 a.className = node.className;
  96                                 text = document.createTextNode(node.alt);
  97                                 a.appendChild(text);
  98                                 node.parentNode.replaceChild(a, node);
  99                         }
 100                 }
 101
 102                 function imageSwap(node) {
 103                         shouldScroll = nearBottom();
 104
 105                         //Swap the image/text
 106                         img = document.createElement('img');
 107                         img.setAttribute('src', node.getAttribute('src'));
 108                         img.setAttribute('alt', node.firstChild.nodeValue);
 109                         img.className = node.className;
 110                         node.parentNode.replaceChild(img, node);
 111
 112                         alignChat(shouldScroll);
 113                 }
 114
 115                 //Align our chat to the bottom of the window.  If true is passed, view will also be scrolled down
 116                 function alignChat(shouldScroll) {
 117                         var windowHeight = window.innerHeight;
 118
 119                         if (windowHeight > 0) {
 120                                 var contentElement = document.getElementById('Chat');
 121                                 var contentHeight = contentElement.offsetHeight;
 122                                 if (windowHeight - contentHeight > 0) {
 123                                         contentElement.style.position = 'relative';
 124                                         contentElement.style.top = (windowHeight - contentHeight) + 'px';
 125                                 } else {
 126                                         contentElement.style.position = 'static';
 127                                 }
 128                         }
 129
 130                         if (shouldScroll) scrollToBottom();
 131                 }
 132
 133                 function windowDidResize(){
 134                         alignChat(true/*nearBottom()*/); //nearBottom buggy with inactive tabs
 135                 }
 136
 137                 window.onresize = windowDidResize;
 138         </script>
 139
 140         <!-- This style is shared by all variants. !-->
 141         <style id="baseStyle" type="text/css" media="screen,print">
 142                 %@
 143                 *{ word-wrap:break-word; }
 144                 img.scaledToFitImage { height:auto; width:100%; }
 145         </style>
 146
 147         <!-- Although we call this mainStyle for legacy reasons, it's actually the variant style !-->
 148         <style id="mainStyle" type="text/css" media="screen,print">
 149                 @import url( "%@" );
 150         </style>
 151
 152 </head>
 153 <body onload="alignChat(true);" style="==bodyBackground==">
 154 %@
 155 <div id="Chat">
 156 </div>
 157 %@
 158 </body>
 159 </html>