Pure Javascript

Element


var
Elements            = {}
Elements.Toggle     = Toggle
Elements.Show       = Toggle.Show
Elements.Hide       = Toggle.Hide
Elements.ShowHide   = ShowHide;
Elements.HideShow   = null;
Elements.SetFnSetup   = null;
Elements.SetFnSubmit  = null;
Elements.SetFnHandler = null;

Toggle

Elements.Toggle( id )


function Toggle( id )
{
	var ret = null;
	var e = document.getElementById( id );
	
	if ( e )
	{
		if ( null === e.offsetParent )
		{
			ret = Toggle.Show( e );
		}
		else
		{
			ret = Toggle.Hide( e );
		}
	}
	
	return ret;
}

Show

Elements.Show( e )


Toggle.Show
=
function ( e, display )
{
    if ( ! display )
    {
	    switch ( e.tagName )
	    {
	    case "TABLE":
	        e.style.display    = "table";
	        break;

	    case "TR":
	        e.style.display    = "table-row-group";
	        break;

	    case "TH":
	        e.style.display    = "table-cell";
	        break;

	    case "TD":
	        e.style.display    = "table-cell";
	        break;

	    default:
	        e.style.display    = "block";
	    }
	}
	else
	{
		e.style.display = display;
	}

	e.style.visibility = "visible";

	return true;
}

Hide Show

Elements.Hide( e )


Toggle.Hide
=
function ( e )
{
	e.style.display    = "none";
	e.style.visibility = "hidden";

	return false;
}

Hide

Elements.HideShow( cls, id )

Hides all elements containing the specified class, then shows the class with the specified ID.


Elements.HideShow
=
function ( cls, id, display )
{
    var elements = document.getElementsByClassName( cls );
    var e        = document.getElementById( id );
    var n        = elements.length;

    for ( var i=0; i < n; i++ )
    {
        Toggle.Hide( elements[i] );

        Class.RemoveClass( elements[i], "active" );
    }

    if ( e )
    {
        Toggle.Show( e, display );
        Class.AddClass( e, "active" );
    }

    return false;
}

Hide

Elements.HideShow( cls, id )

Hides all elements containing the specified class, then shows the class with the specified ID.


function ShowHide( id, show_id, hide_id )
{
	var self   = document.getElementById( id );
	var show_e = document.getElementById( show_id );
	var hide_e = document.getElementById( hide_id );
	
	if ( show_e && hide_e )
	{
		Toggle.Hide( hide_e );
		Toggle.Show( show_e );
	}

	if ( self )
	{
		ShowHide.MakePeersInactive( self );
		ShowHide.MakeActive( self );
	}
}

ShowHide.MakePeersInactive
=
function( e )
{
	if ( e.parentNode && e.parentNode.parentNode )
	{
		var children = e.parentNode.parentNode.getElementsByTagName( "A" );
		var n        = children.length;
		
		for ( var i=0; i < n; i++ )
		{
			var child = children[i];
		
			ShowHide.MakeInactive( child );
		}
	}
}

ShowHide.MakeActive
=
function( e )
{
	Class.AddClass( e, "active" );
}

ShowHide.MakeInactive
=
function( e )
{
	Class.RemoveClass( e, "active" );
}

Elements.SetFnSetup( id, fn )

If element with id exists, sets fn as setup function.


Elements.SetFnSetup
=
function( id, fn )
{
	var e = document.getElementById( id );
	if ( e )
	{
		e.setup = fn;
	}
}

Elements.SetFnSubmit( id, fn )

If element with id exists, sets fn as submit function.


Elements.SetFnSubmit
=
function( id, fn )
{
	var e = document.getElementById( id );
	if ( e )
	{
		e.addEventListener( 'submit', fn );
	}
}

Elements.SetFnHandler( id, fn )

If element with id exists, sets fn as handler function.


Elements.SetFnHandler
=
function( id, fn )
{
	var e = document.getElementById( id );
	if ( e )
	{
		e.handler = fn;
	}
}

Elements.SetFnEventListener( id, event_type, fn )

If element with id exists, sets fn as event listener for event_type.


Elements.SetFnEventListener
=
function( id, event_type, fn )
{
	var e = document.getElementById( id );
	if ( e )
	{
		e.addEventListener( event_type, fn );
	}
}