scripts/domutils.js
author Dan
Tue, 23 Dec 2008 20:37:36 -0500
changeset 66 f30ffbf92cdd
parent 58 05a69bab5f10
permissions -rw-r--r--
Release: 0.1 alpha 4

// The "Dynano" Javascript framework. Similar in syntax to JQuery but only has what Enano needs.
// License = GPLv2

var $ = function(id)
{
  return new DNobj(id);
}
var $dynano = $;
function DNobj(id)
{
  this.object = ( typeof(id) == 'object' ) ? id : document.getElementById(id);
  if ( !this.object )
  {
    this.object = false;
    return false;
  }
  if ( this.object.Dynano )
  {
    return this.object.Dynano;
  }
  this.object.Dynano = this;
  this.height = __DNObjGetHeight(this.object);
  this.width = __DNObjGetWidth(this.object);
  // fixme: make more accurate?
  this.object.DN_opac = 100;
  
  return true;
}
function __DNObjGetHeight(o) {
  return o.offsetHeight;
}

function __DNObjGetWidth(o) {
  return o.offsetWidth;
}

function addClass(obj, clsname)
{
  var cnt = obj.className;
  var space = ( (cnt + '').length > 0 ) ? ' ' : '';
  var cls = cnt + space + clsname;
  obj.className = cls;
}

function rmClass(obj, clsname)
{
  var cnt = obj.className;
  if ( cnt == clsname )
  {
    obj.className = '';
  }
  else
  {
    cnt = cnt.replace(clsname, '');
    cnt = trim(cnt);
    obj.className = cnt;
  }
}

function hasClass(obj, clsname)
{
  var cnt = obj.className;
  if ( !cnt )
    return false;
  if ( cnt == clsname )
    return true;
  cnt = cnt.split(' ');
  
  for ( var i in cnt )
    if ( cnt[i] == clsname )
      return true;
    
  return false;
}
function __DNObjGetLeft(obj) {
  var left_offset = obj.offsetLeft;
  while ((obj = obj.offsetParent) != null) {
    left_offset += obj.offsetLeft;
  }
  return left_offset;
}

function __DNObjGetTop(obj) {
  var left_offset = obj.offsetTop;
  while ((obj = obj.offsetParent) != null) {
    left_offset += obj.offsetTop;
  }
  return left_offset;
}

DNobj.prototype.addClass = function(clsname) { addClass(this.object, clsname); return this; };
DNobj.prototype.rmClass  = function(clsname) { rmClass( this.object, clsname); return this; };
DNobj.prototype.hasClass = function(clsname) { return hasClass(this.object, clsname); };
DNobj.prototype.Height   = function()        { return __DNObjGetHeight(this.object); };
DNobj.prototype.Width    = function()        { return __DNObjGetWidth( this.object); };
DNobj.prototype.Left     = function()        { /* return this.object.offsetLeft; */ return __DNObjGetLeft(this.object); };
DNobj.prototype.Top      = function()        { /* return this.object.offsetTop;  */ return __DNObjGetTop( this.object); };
DNobj.prototype.insertText = function(text)  { this.object.appendChild(document.createTextNode(text)); return this; };
DNobj.prototype.insertBR = function()        { this.object.appendChild(document.createElement('br')); return this; };
DNobj.prototype.attr     = function(attribute, value) { this.object.setAttribute(attribute, value); return this; };
DNobj.prototype.css      = function(attribute, value)
{
  if ( attribute == 'float' )
  {
    this.object.style.cssFloat = value;
    this.object.style.styleFloat = value;
  }
  else
  {
    // convert attribute to CamelCase format (quick and easy version)
    var i;
    while ( (i = attribute.indexOf('-')) > -1 )
    {
      attribute = attribute.substr(0, i) +
                  attribute.substr(i + 1, 1).toUpperCase() +
                  attribute.substr(i + 2);
    }
    this.object.style[attribute] = value;
  }
  return this;
}
DNobj.prototype.opacity = function(opacity)
{
  var object = this.object.style;
  object.opacity = (opacity / 100);
  object.MozOpacity = (opacity / 100);
  object.KhtmlOpacity = (opacity / 100);
  object.filter = "alpha(opacity=" + opacity + ")";
  this.object.DN_opac = opacity;
}
DNobj.prototype.fade = function(to, time, done)
{
  var from = this.object.DN_opac;
  if ( to == from )
  {
    return this;
  }
  time = time || 500;
  var op = to > from ? 1 : -1;
  var timestep = time / ( op * (to - from) );
  var i = from, tick = 0, o = this.object;
  this.object.id = this.object.id || 'dynano_autofade_' + Math.floor(Math.random() * 1000000);
  
  while ( true )
  {
    i += op;
    tick += timestep;
    
    if ( ( op == -1 && i < to ) || ( op == 1 && i > to ) )
      break;
    
    setTimeout('$("' + this.object.id + '").opacity(' + i + ');', tick);
  }
  if ( typeof(done) == 'function' )
  {
    setTimeout(function()
      {
        done(o);
      }, tick);
  }
  return this;
}
DNobj.prototype.fadeIn = function(time, done)
{
  return this.fade(100, time, done);
}
DNobj.prototype.fadeOut = function(time, done)
{
  return this.fade(0, time, done);
}

// Equivalent to PHP trim() function
function trim(text)
{
  text = text.replace(/^([\s]+)/, '');
  text = text.replace(/([\s]+)$/, '');
  return text;
}

// Tell which elements have the specified CSS class
// Parameters:
//   * object - HTMLElement
//   * string - class name
//   * string - tag name, if omitted will test all elements (slow)
function getElementsByClassName(oRoot, className, tagName)
{
  tagName = ( tagName ) ? tagName : '*';
  var arrEls = document.getElementsByTagName(tagName);
  var arrResult = [];
  for ( var i = 0; i < arrEls.length; i++ )
  {
    if ( $(arrEls[i]).hasClass(className) )
    {
      arrResult.push(arrEls[i]);
    }
  }
  return arrResult;
}

// shortcut :)
document.getElementsByClassName = function(a, b)
{
  return getElementsByClassName(document, a, b);
}