cms4ds.js - das Java-Herz des CMS - 1

Das Herz des CMS ist seine JavaScript-Funktionalität. Mit dieser werden im Browser eine Reihe von anspruchsvollen Aufgaben erledigt, die insgesamt das CMS schlank machen. Im Folgenden eine kurze Diskussion der wichtigsten Element und Funktionen der Datei cms4ds.js:

var isie = /msie/i.test(navigator.userAgent) && !window.opera;
var myXMLHTTPRequest = (window.XMLHttpRequest)?
                        new XMLHttpRequest():
                        new ActiveXObject("Microsoft.XMLHTTP");
var d0,d1=0,d2=0,d3; d0=new Date().getTime();                     
if (!document.getElementsByClassName) {
	document.getElementsByClassName = function(className) {
		var children = document.getElementsByTagName('*') || document.all;
		var elements = new Array();	  
		for (var i = 0; i < children.length; i++) {
			var child = children[i];
			var classNames = child.className.split(' ');
			for (var j = 0; j < classNames.length; j++) {
				if (classNames[j] == className) {
					elements.push(child);
					break;
				}
			}
		}
		return elements;
	}
}
function $(e) { return document.getElementById(e); }
function $$(e){ return document.getElementsByClassName(e); }

Erste Zeile: ein Browser-Test. Danach das Anlegen eines AJAX-Objekts. Dann ein paar Variablen für die Zeitmessung und dann die Implementation der fehlende DOM-Methode document.getElementByClassName. Zuletzt noch 2 kleine Hilfsfunktionen für den Zugriff auf DOM-Elemente: einmal per ID-Namen und einmal per Class-Namen.

function LoadHTML(request){
d1=new Date().getTime();
  myXMLHTTPRequest.open("GET", request, false); myXMLHTTPRequest.send(null);
  $('content').innerHTML=myXMLHTTPRequest.responseText;
d2=new Date().getTime();  
}
function LoadHTML2(request){
d1=new Date().getTime();
  myXMLHTTPRequest.open("GET", request, false); myXMLHTTPRequest.send(null);
  $('index').innerHTML=myXMLHTTPRequest.responseText;
d2=new Date().getTime();  
}

Zwei synochrone ALAX-Aufrufe: einmal als Rückgabe in das 'content'-Element und einmal in das 'index'-Element.

Die AJAX-Aufrufe, um einen RSS-Feed zu laden, werden hier beschrieben.

cms4ds.js - das Java-Herz des CMS - 2

Die Anzeigensteuerung und Bildung des Themen-Index geschieht in den folgenden Funktionen:

var counter;
var ref=0;
function show(i){
  $$('content')[ref].style.display="none";
  $$('content')[i].style.display="block";
  histFrame.location.search=i; 
}
function make_index() {
 var l=$('content').childNodes.length;
 var i=0;
 var j=0;
 var out="";
while(i<l) {
  if( $('content').childNodes[i].firstChild != null) {
    out+="<div class='index' onclick='show("+j+")'>"
       +$('content').childNodes[i].getElementsByTagName('H3')[0].innerHTML+"</div>";
    $$('content')[j].style.display='none';
    ++j; 
    }
  ++i;
  }
myXMLHTTPRequest.open("GET", "cms4ds_log.php?loc="
  +location.pathname+location.search, false); myXMLHTTPRequest.send(null);
$('counter').innerHTML=
  $('counter').innerHTML.replace('#',myXMLHTTPRequest.responseText);
$('index').innerHTML=out;
$$('content')[0].style.display='block';
d3=new Date().getTime();
$('timer').innerHTML=$('timer').innerHTML.replace('#','AJAX-Request: '
  +((d2-d1)/1000)+' sek. | Page: '+((d3-d0)/1000)+' sek.');
}

Die Funktione show() schaltet die Sichtbarkeit zwischen den verschiedenen Beiträge an bzw. aus. Damit später auch der Histroy-Mechnismus das mitverfolgen kann, wird jedesmal im histFrame die URL eingetragen (aber da sie nicht angezeigt wird, bekommt man davon nichts mit).

Die Funktion make_index() läuft den gesamten DOM-Baum des Elements 'content' ab und sucht sich jeweils die h3-Elemente heraus für die Bildung des Beitragsindex und schaltet die Sichbarkeit des Beitrags aus. Da das sehr schnell geht, sieht man das gar nicht.

Nachdem der Index fertig ist, wird ein Eintrag mit dem PHP-Skript cms4ds_log.php ins Logbuch geschrieben und der Counter aktualisiert. Der Index wird in das DOM der HTML-Seite kopiert und der erste Beitrag sichtbar gemacht. Dann finden noch die Timer-Berechnungen und die Ausgabe derselben statt.

cms4ds.js - das Java-Herz des CMS - 3

Für die Anzeige einer Recherche gibt es die Funktion showme(). Sie erhält den Titel (id) eines Beitrag und gegebenenfalls auch eine Rubik (page). Die Suche kann daher nur dann richtig funktionieren, wenn alle Titel einer Webseite (einer Rubrik) unterschiedlich sind.

function showme(s) {
  var found=0, page='', id='';
  s=decodeURIComponent(s.substr(1)); sa=s.split('&');
  for(var i=0; i
Die ersten Zeilen extrahieren die Rubrik (page) und den Titel (id). Falls die Angabe einer Rubrik (page) gemacht wurde, wird überprüft, ob man sich bereits auf ihr befindet. Wenn nein, wird sie aufgerufen und das Spiel beginnt von vorne.
Anschließend wird der Index-DOM-Baum abgesucht, ob der Titel (id) vorkommt. Falls ja, wird der entsprechende Beitrag sichtbar geschaltet, andernfalls bleibt der letzte ausgewählte Beitrag sichtbar oder falls es keine letzten Beitrag gab, dann der erste Beitrag.
War man fündig, wird zudem der histFrame aktualisiert.

cms4ds.js - das Java-Herz des CMS - 4

Die Recherche in dem dynamischen Content ist in der Funktion searchAll() implementiert:

function searchAll(s) {
$('content').innerHTML='';
if (s!='') {
  d0=new Date().getTime();
  LoadHTML("cms4ds.php?like="+s);
  for (var i=0; i<$('content').childNodes.length; ++i)
    if ($('content').childNodes[i].nodeType == 1)
      $('content').childNodes[i].innerHTML
        =$('content').childNodes[i].innerHTML.replace(eval('/('+s+')/gi'),'<u>$1</u>')
  }
if ($('content').innerHTML=='')
  $('content').innerHTML='<div><h3>keinen Suchbegriff gefunden</h3></div>';
make_index();
}

Zunächst wird das Element 'content' geleert. Dann wird per AJAX-Aufruf eine Datenbank-Abfrage auf den Suchbegriff vorgenommen und das Ergebnis wird in das Element 'content' eingehangen. Dann wird Beitrag für Beitrag nach dem Suchbegriff abgesucht und die Fundstellen mit <u>-Tags eingerahmt. Diese sind per CSS farbig hinterlegt, so dass die Fundstellen auffallen. Abschließend wird die Funktion index() aufgerufen, die dann für eine Titel-Liste sorgt.

cms4ds.js - das Java-Herz des CMS - 5

Ein weitere Funktion, nämlich bookmark() dient dazu, durch einen Klick auf den Titel die Bookmark-Funktionalität des Browsers zu versorgen.

function bookmark(s) {
  url=window.location.href+'?id='+s;
  if (isie) window.external.AddFavorite(url,s); else window.sidebar.addPanel(s,url,'');
}

Da dies wieder Browserspzifisch ist, wird es über ein Browserweiche implementiert.

Als vorläufig letzte Funktion in des cms4ds.js ist die Funktion history() implementiert, welche ja durch einen body-load in der Datei header.html aufgerufen wird.

function history(){
  if (histFrame.location.search) {
    his = histFrame.location.search.substr(1);    // remove '?'
    if (his != ref) {                             // poll return on no change
      $$('content')[ref].style.display="none";
      $$('content')[his].style.display="block";      
      ref=his;
      }
    }
  window.setTimeout(history,1000);                // Timer
}

Die Anwahl einer anderen Web-Seite passiert sowieso aufgrund der normalen History-Mechanik. Die Funktion history() dient (zusätzlich) dazu, auch die Beiträge innerhalb einer Seite wie einen Seitenwechsel zu verarbeiten. Diese Funktion ruft sich jede Sekunde (1000 ms) auf und schaut nach, ob man in der History des histFrames hin- und herwandert. Wird festgestellt, dass man in der History des histFrame eine anderen Eintrag im 'location.search'-String und damit eine andere URL ausgewählt hat, wird dieser Beitrag im content-element sichtbar gemacht und der vorhergehende ausgeblendet.