DJSGT - JavaScript-Quelltext

Quelltext von djsgt.js

Dies ist die Auflistung der Datei djsgt.js, die Grundobjekte für die Darstellung einfacher grafischer 2D-Gebilde auf HTML-Seiten bereitstellt.

Für "richtige" Vektorgrafik binde man zusätzlich djsgtpe.js ein.

Diese Scripts benötigen einen DOM-Level3-Browser (Gecko (Mozilla, Netscape, Galeon), KHTML (KDE Konqueror), MSIE).

Im folgenden Quelltext sind Prozedurdeklarationen rot und Kommentare grün markiert.
/* +---------------------------------------------------------+
   | Droeppez JavaScript Graphics Tool                       |
   |   grafische Gestaltung von HTML-Seiten ueber JavaScript |
   |   it's DHTML, baby! you know?                           |
   +---------------------------------------------------------+
   | unterstuetzende Browsertypen:                           |
   |   Gecko (Mozilla, Netscape 6+, Galeon, ...)             |
   |   KHTML (KDE Konqueror 3+ und andere)                   |
   |   Microsoft Internet Explorer 6+                        |
   +---------------------------------------------------------+
   | (c) 2003 Ulrich Kritzner                                |
   +---------------------------------------------------------+ */

/* Der Einsatz dieser Datei in kommerziellen Projekten ist kostenpflichtig. */

var djsgt_images=0;
var djsgt_bodyimage=0;

/* ---------------------------------------------------------------- */
/* Geometrie */

function djsgt_ResizeTo(width,height)
/* veraendert die Groesse eines Objekts */
{
  if (!this.canResize)
    return;
  this.element.style.minWidth=width;
  this.element.style.minHeight=height;
  this.element.style.maxWidth=width;
  this.element.style.maxHeight=height;
  this.element.style.width=width;
  this.element.style.height=height;
  this.element.style.overflow="hidden";
  if (typeof(this.isClip)!="number")
    return;
  this.element.style.clip="rect(0px, 0px, 0px, 0px)";
}

function djsgt_MoveTo(left,top)
/* veraendert die Position eines Objekts */
{
  if (!this.canMove)
    return;
  this.element.style.left=left;
  this.element.style.top=top;
}

function djsgt_SetZIndex(zIndex)
/* veraendert den zIndex eines Objekts */
{
  this.GetElement();
  this.element.style.zIndex=zIndex;
}

/* ---------------------------------------------------------------- */
/* Erscheinungsbild */

function djsgt_SetHTMLText(htmltext)
/* setzt den HTML-Inhalt eines HTML-Bereiches */
{
  if (typeof(this.isHTMLArea)!="number")
    return;
  this.element.innerHTML=htmltext;
}

function djsgt_SetBackground(bgstyle)
/* setzt den Hintergrundstil eines Objekts */
{
  this.GetElement();
  this.element.style.background=bgstyle;
}

function djsgt_SetBorder(borderstyle)
/* setzt den Randstil eines Objekts */
{
  this.GetElement();
  this.element.style.border=borderstyle;
}

/* ---------------------------------------------------------------- */
/* Verwaltung allgemein */

function djsgt_ShowObject(pobject)
/* zeigt ein Objekt, indem es die zugehoerige div-Sektion in die DOM-Hierarchie einfuegt */
{
  if (!this.canMove)
    return;
  if (typeof(this.pobject)=="object")
    return;
  if (!pobject.canHaveChilds)
    return;
  this.pobject=pobject;
  this.pobject.GetElement();
  this.pobject.element.appendChild(this.element); /* <---- Element in DOM-Hierarchie einfuegen */
}

function djsgt_HideObject()
/* verbirgt ein Objekt, indem es die zugehoerige div-Sektion aus der DHTML-Hierarchie entfernt */
{
  if (!this.canMove)
    return;
  if (typeof(this.pobject)!="object")
    return;
  this.pobject.element.removeChild(this.element); /* <---- Element aus DOM-Hierarchie entfernen */
  this.pobject=0;
}

function djsgt_GetElement()
/* gibt das div-Sektion-Objekt zurueck, nur fuer internen Gebrauch */
{
  if (typeof(this.element)!="object")
    this.element=document.getElementById(this.idstring); /* <---- Element per ID ermitteln */
  return this.element;
}

function djsgt_AddFunctions()
/* fuegt die noetigen Funktionen an ein Objekt an, nur fuer internen Gebrauch */
{
  this.ResizeTo=djsgt_ResizeTo;
  this.MoveTo=djsgt_MoveTo;
  this.SetZIndex=djsgt_SetZIndex;
  this.SetHTMLText=djsgt_SetHTMLText;
  this.SetBackground=djsgt_SetBackground;
  this.SetBorder=djsgt_SetBorder;
  this.ShowObject=djsgt_ShowObject;
  this.HideObject=djsgt_HideObject;
  this.GetElement=djsgt_GetElement;
}

/* ---------------------------------------------------------------- */
/* Konstruktoren */

function DJSGTObject(left,top,width,height)
/* erzeugt ein einfaches Objekt ohne alles */
{
  this.AddFunctions=djsgt_AddFunctions;
  this.AddFunctions();
  this.pobject=0;
  this.canMove=1;
  this.canResize=1;
  this.canHaveChilds=1;
  this.element=document.createElement("DIV"); /* <---- DOM-Element erzeugen, div */
  this.element.style.position="absolute";
  this.element.style.fontSize="0px";
  this.element.style.borderSpacing="0px";
  this.element.style.margin="0px";
  this.element.style.padding="0px";
  this.ResizeTo(width,height);
  this.MoveTo(left,top);
  this.Init=1;
}

function DJSGTClip(left,top,width,height)
/* erzeugt ein Clip-Rechteck */
{
  this.isClip=1;
  this.Init=DJSGTObject;
  this.Init(left,top,width,height);
}

function DJSGTFrame(left,top,width,height,bgstyle,borderstyle)
/* erzeugt ein Objekt mit Rand und gefuelltem Hintergrund */
{
  this.Init=DJSGTObject;
  this.Init(left,top,width,height);
  this.SetBackground(bgstyle);
  this.SetBorder(borderstyle);
}

function DJSGTBar(left,top,width,height,bgstyle)
/* erzeugt ein Objekt mit gefuelltem Hintergrund */
{
  this.Init=DJSGTObject;
  this.Init(left,top,width,height);
  this.SetBackground(bgstyle);
}

function DJSGTRect(left,top,width,height,borderstyle)
/* erzeugt ein Objekt mit Rand */
{
  this.Init=DJSGTObject;
  this.Init(left,top,width,height);
  this.SetBorder(borderstyle);
}

function DJSGTHTMLArea(left,top,width,height,htmltext)
/* erzeugt einen HTML-Textbereich
     - abgeschlossen (keine weiteren djsgt-Inhaltsobjekte moeglich) */
{
  this.Init=DJSGTObject;
  this.Init(left,top,width,height);
  this.canHaveChilds=0;
  this.isHTMLArea=1;
  this.SetHTMLText(htmltext);
}

function DJSGTImage(width,height)
/* erzeugt ein primaeres Bild im Dokument
     - nicht groessenveraenderlich
     - nicht beweglich */
{
  this.idstring="djsgtimg_"+djsgt_images;
  djsgt_images++;
  this.AddFunctions=djsgt_AddFunctions;
  this.AddFunctions();
  this.element=0;
  this.canMove=0;
  this.canResize=0;
  this.canHaveChilds=1;
  document.write("<div id=\""+this.idstring+"\" style=\"position:relative; width:"+width+"; height:"+height+";\"></div>\n");
}

function DJSGTBodyImage()
/* ermoeglicht die Behandlung des Gesamtdokumentes als Bild
     - nicht groessenveraenderlich
     - nicht beweglich */
{
  this.AddFunctions=djsgt_AddFunctions;
  this.AddFunctions();
  this.element=document.body;
  this.canMove=0;
  this.canResize=0;
  this.canHaveChilds=1;
}
Autor: Ulrich Kritzner