includes/clientside/static/expander.js
changeset 1227 bdac73ed481e
parent 699 c7d737202d59
equal deleted inserted replaced
1226:de56132c008d 1227:bdac73ed481e
     2  * Expandable fieldsets
     2  * Expandable fieldsets
     3  */
     3  */
     4 
     4 
     5 var expander_onload = function()
     5 var expander_onload = function()
     6 {
     6 {
     7   var sets = document.getElementsByTagName('fieldset');
     7 	var sets = document.getElementsByTagName('fieldset');
     8   if ( sets.length < 1 )
     8 	if ( sets.length < 1 )
     9     return false;
     9 		return false;
    10   var init_us = [];
    10 	var init_us = [];
    11   for ( var index = 0; index < sets.length; index++ )
    11 	for ( var index = 0; index < sets.length; index++ )
    12   {
    12 	{
    13     var mode = sets[index].getAttribute('enano:expand');
    13 		var mode = sets[index].getAttribute('enano:expand');
    14     if ( mode == 'closed' || mode == 'open' )
    14 		if ( mode == 'closed' || mode == 'open' )
    15     {
    15 		{
    16       init_us.push(sets[index]);
    16 			init_us.push(sets[index]);
    17     }
    17 		}
    18   }
    18 	}
    19   for ( var k = 0; k < init_us.length; k++ )
    19 	for ( var k = 0; k < init_us.length; k++ )
    20   {
    20 	{
    21     expander_init_element(init_us[k]);
    21 		expander_init_element(init_us[k]);
    22   }
    22 	}
    23 }
    23 }
    24 
    24 
    25 function expander_init_element(el)
    25 function expander_init_element(el)
    26 {
    26 {
    27   // get the legend tag
    27 	// get the legend tag
    28   var legend = el.getElementsByTagName('legend')[0];
    28 	var legend = el.getElementsByTagName('legend')[0];
    29   if ( !legend )
    29 	if ( !legend )
    30     return false;
    30 		return false;
    31   // existing content
    31 	// existing content
    32   var existing_inner = legend.innerHTML;
    32 	var existing_inner = legend.innerHTML;
    33   // blank the innerHTML and replace it with a link
    33 	// blank the innerHTML and replace it with a link
    34   legend.innerHTML = '';
    34 	legend.innerHTML = '';
    35   var button = document.createElement('a');
    35 	var button = document.createElement('a');
    36   button.className = 'expander expander-open';
    36 	button.className = 'expander expander-open';
    37   button.innerHTML = existing_inner;
    37 	button.innerHTML = existing_inner;
    38   button.href = '#';
    38 	button.href = '#';
    39   
    39 	
    40   legend.appendChild(button);
    40 	legend.appendChild(button);
    41   
    41 	
    42   button.onclick = function()
    42 	button.onclick = function()
    43   {
    43 	{
    44     try
    44 		try
    45     {
    45 		{
    46       expander_handle_click(this);
    46 			expander_handle_click(this);
    47     }
    47 		}
    48     catch(e)
    48 		catch(e)
    49     {
    49 		{
    50       console.debug('Exception caught: ', e);
    50 			console.debug('Exception caught: ', e);
    51     }
    51 		}
    52     return false;
    52 		return false;
    53   }
    53 	}
    54   
    54 	
    55   if ( el.getAttribute('enano:expand') == 'closed' )
    55 	if ( el.getAttribute('enano:expand') == 'closed' )
    56   {
    56 	{
    57     expander_close(el);
    57 		expander_close(el);
    58   }
    58 	}
    59 }
    59 }
    60 
    60 
    61 function expander_handle_click(el)
    61 function expander_handle_click(el)
    62 {
    62 {
    63   if ( el.parentNode.parentNode.tagName != 'FIELDSET' )
    63 	if ( el.parentNode.parentNode.tagName != 'FIELDSET' )
    64     return false;
    64 		return false;
    65   var parent = el.parentNode.parentNode;
    65 	var parent = el.parentNode.parentNode;
    66   if ( parent.getAttribute('enano:expand') == 'closed' )
    66 	if ( parent.getAttribute('enano:expand') == 'closed' )
    67   {
    67 	{
    68     expander_open(parent);
    68 		expander_open(parent);
    69   }
    69 	}
    70   else
    70 	else
    71   {
    71 	{
    72     expander_close(parent);
    72 		expander_close(parent);
    73   }
    73 	}
    74 }
    74 }
    75 
    75 
    76 function expander_close(el)
    76 function expander_close(el)
    77 {
    77 {
    78   var children = el.childNodes;
    78 	var children = el.childNodes;
    79   for ( var i = 0; i < children.length; i++ )
    79 	for ( var i = 0; i < children.length; i++ )
    80   {
    80 	{
    81     var child = children[i];
    81 		var child = children[i];
    82     if ( child.tagName == 'LEGEND' )
    82 		if ( child.tagName == 'LEGEND' )
    83     {
    83 		{
    84       var a = child.getElementsByTagName('a')[0];
    84 			var a = child.getElementsByTagName('a')[0];
    85       $dynano(a).rmClass('expander-open');
    85 			$dynano(a).rmClass('expander-open');
    86       $dynano(a).addClass('expander-closed');
    86 			$dynano(a).addClass('expander-closed');
    87       continue;
    87 			continue;
    88     }
    88 		}
    89     if ( child.style )
    89 		if ( child.style )
    90     {
    90 		{
    91       child.expander_meta_old_state = child.style.display;
    91 			child.expander_meta_old_state = child.style.display;
    92       child.style.display = 'none';
    92 			child.style.display = 'none';
    93     }
    93 		}
    94   }
    94 	}
    95   el.expander_meta_padbak = el.style.padding;
    95 	el.expander_meta_padbak = el.style.padding;
    96   el.setAttribute('enano:expand', 'closed');
    96 	el.setAttribute('enano:expand', 'closed');
    97 }
    97 }
    98 
    98 
    99 function expander_open(el)
    99 function expander_open(el)
   100 {
   100 {
   101   var children = el.childNodes;
   101 	var children = el.childNodes;
   102   for ( var i = 0; i < children.length; i++ )
   102 	for ( var i = 0; i < children.length; i++ )
   103   {
   103 	{
   104     var child = children[i];
   104 		var child = children[i];
   105     if ( child.tagName == 'LEGEND' )
   105 		if ( child.tagName == 'LEGEND' )
   106     {
   106 		{
   107       var a = child.getElementsByTagName('a')[0];
   107 			var a = child.getElementsByTagName('a')[0];
   108       $dynano(a).rmClass('expander-closed');
   108 			$dynano(a).rmClass('expander-closed');
   109       $dynano(a).addClass('expander-open');
   109 			$dynano(a).addClass('expander-open');
   110       continue;
   110 			continue;
   111     }
   111 		}
   112     if ( child.expander_meta_old_state && child.style )
   112 		if ( child.expander_meta_old_state && child.style )
   113     {
   113 		{
   114       child.style.display = child.expander_meta_old_state;
   114 			child.style.display = child.expander_meta_old_state;
   115       child.expander_meta_old_state = null;
   115 			child.expander_meta_old_state = null;
   116     }
   116 		}
   117     else
   117 		else
   118     {
   118 		{
   119       if ( child.style )
   119 			if ( child.style )
   120       {
   120 			{
   121         child.style.display = null;
   121 				child.style.display = null;
   122       }
   122 			}
   123     }
   123 		}
   124   }
   124 	}
   125   if ( el.expander_meta_padbak )
   125 	if ( el.expander_meta_padbak )
   126   {
   126 	{
   127     el.style.padding = el.expander_meta_padbak;
   127 		el.style.padding = el.expander_meta_padbak;
   128     el.expander_meta_padbak = null;
   128 		el.expander_meta_padbak = null;
   129   }
   129 	}
   130   else
   130 	else
   131   {
   131 	{
   132     el.style.padding = null;
   132 		el.style.padding = null;
   133   }
   133 	}
   134   el.setAttribute('enano:expand', 'open');
   134 	el.setAttribute('enano:expand', 'open');
   135 }
   135 }
   136 
   136 
   137 addOnloadHook(expander_onload);
   137 addOnloadHook(expander_onload);