xhtml2to1: JavaScript support

▼24. JavaScript support

Document load and unload
Collapse-expand toggle
Navigation menu
Functions to access the DOM
Functions to access cookies

▼24.1. Namespace policy

All global JavaScript functions and variables shall be prefixed with “xhtml2to1_”.

▼24.2. Document load and unload

    function xhtml2to1_onload()
    {
      var nav_div = document.getElementById('_navigation');
      xhtml2to1_tree_load_state(nav_div);
      return true;
    }

    function xhtml2to1_onunload()
    {
      var nav_div = document.getElementById('_navigation');
      xhtml2to1_tree_save_state(nav_div);
      return true;
    }

▼24.3. Collapse-expand toggle

Certain block-level elements displayed in the document body can be optionally collapsed and hidden by the user. In particular, this is used for sub-sections in the document. The xhtml2to1_collapse_toggle JavaScript function implements this functionality.

This function can be called via the onclick attribute, passing it as parameters:

the ID of the content element block to collapse or expand if the toggle is clicked;
the standard event object

      function xhtml2to1_collapse_toggle(id, event)
      {
        if(!event) event = window.event;
        var switch_elem = event.target ? event.target : event.srcElement;
        
        var target = document.getElementById(id);
      
        if(target.style.display == 'none') {
          target.style.display = 'block';
          switch_elem.childNodes.item(0).data = '\u25bc';
        } else {
          target.style.display = 'none';
          switch_elem.childNodes.item(0).data = '\u25ba';
        }

        return false;
      }

▼24.4. Navigation menu


      Collapse / expand list bullets
      Save / restore tree state
      Main expand / collapse control

var dragged_elem = null;
var drag_start_pos = 0;
var drag_current_pos = 0;

function drag_mouse_up(event)
{
  set_drag_width();
  dragged_elem = null;
  return true;
}

function set_drag_width()
{
  if(dragged_elem != null) {
    var e = document.getElementById('body');
    var l = e.offsetLeft;
    var u = e.offsetWidth;
    var w = drag_current_pos - drag_start_pos;
    dragged_elem.style.width = (l+w) + "px";
    e.style.left = (l+w) + "px";
    e.style.width = (u-w) + "px";
  }
}


function drag_mouse_down(elem, event)
{
  if(!event) event = window.event;
  current_pos = start_pos = event.clientX;
  dragged_elem = elem;
  return true;
}

function drag_mouse_move(event)
{
  if(!event) event = window.event;

  if(dragged_elem != null) {
    drag_current_pos = event.clientX;
    set_drag_width();
  }
}

▼24.4.1. Collapse / expand list bullets

      function xhtml2to1_tree_collapse_event(event) {
        var li = event.target ? event.target : event.srcElement; 
        var ul = xhtml2to1_get_child_element(li, "UL");
        li.onclick = xhtml2to1_tree_expand_event;
        if(ul == null) {
          li.style.listStyleImage = "url(icons/nav-item-collapsed-empty.png)";
        } else {
          li.style.listStyleImage = "url(icons/nav-item-collapsed.png)";
          ul.style.display = "none";
        }
        event.stopPropagation();
        return true;
      }
      
      function xhtml2to1_tree_expand_event(event) {
        var li = event.target ? event.target : event.srcElement; 
        var ul = xhtml2to1_get_child_element(li, "UL");
        li.onclick = xhtml2to1_tree_collapse_event;
        if(ul == null) {
          li.style.listStyleImage = "url(icons/nav-item-expanded-empty.png)";
        } else {
          li.style.listStyleImage = "url(icons/nav-item-expanded.png)";
          ul.style.display = "block";
        }
        event.stopPropagation();
        return true;
      }

▼24.4.2. Save / restore tree state

 
      function xhtml2to1_tree_save_state_r(li, state_array) {
        var ul = xhtml2to1_get_child_element(li, "UL");
        if( ul == null ) return;

        if( (ul.style.display != 'none') == state_array.length % 2 )
          state_array[ state_array.length-1 ]++;
        else
          state_array[ state_array.length ] = 1;

        var cl = ul.childNodes;
        for( var i = 0; i < cl.length; ++i ) {
          if(cl[i].nodeType == document.ELEMENT_NODE && 
             cl[i].tagName == "LI")
            xhtml2to1_tree_save_state_r( cl[i], state_array );
        }

        return state_array;
      }

      function xhtml2to1_tree_save_state(root) {
        var state_array = xhtml2to1_tree_save_state_r(root, [ 0 ]);
        xhtml2to1_set_cookie('navigation-tree-state', 
                             state_array.join(','), 1);
      }

      function xhtml2to1_tree_load_state_r(li, state_array) {
        var ul = xhtml2to1_get_child_element(li, "UL");

        while( state_array[0] <= 0 ) state_array.shift();
        --state_array[0];
        var expanded = !(state_array.length % 2);

        if( li.tagName == "LI" ) {
          li.onclick = expanded ? xhtml2to1_tree_collapse_event
                                : xhtml2to1_tree_expand_event;
        }

        if( ul != null ) {
          li.style.listStyleImage = 
            expanded ? "url(icons/nav-item-expanded.png)"
                     : "url(icons/nav-item-collapsed.png)";
          ul.style.display = expanded ? "block" 
                                      : "none";
          var cl = ul.childNodes;
          for( var i = 0; i < cl.length; ++i ) {
            if(cl[i].nodeType == document.ELEMENT_NODE && 
               cl[i].tagName == "LI")
              xhtml2to1_tree_load_state_r( cl[i], state_array );
          }
        } else {
          li.style.listStyleImage = 
            expanded ? "url(icons/nav-item-expanded-empty.png)"
                     : "url(icons/nav-item-collapsed-empty.png)";
        }
      }

      function xhtml2to1_tree_load_state(root) {
        var s = xhtml2to1_get_cookie( 'navigation_tree_state' );
        if( s != null ) {
          var a = s.split(',');
          if( a.length % 2 ) a[a.length] = 0;
          xhtml2to1_tree_load_state_r(root, a);
        } 
        else {
          xhtml2to1_tree_load_state_r(root, [ 65535, 0 ] );
        }
      }

▼24.4.3. Main expand / collapse control

      function xhtml2to1_navigation_expand() {
        var nav_div = document.getElementById('_navigation');
        xhtml2to1_tree_load_state_r(nav_div, [ 65535, 0 ] );
        return true;
      }
      function xhtml2to1_navigation_collapse() {
        var nav_div = document.getElementById('_navigation');
        var ul = xhtml2to1_get_child_element(nav_div, "UL");
        if( ul == null ) return;

        var cl = ul.childNodes;
        for( var i = 0; i < cl.length; ++i ) {
          if(cl[i].nodeType == document.ELEMENT_NODE && 
             cl[i].tagName == "LI")
            xhtml2to1_tree_load_state_r(cl[i], [ 0, 65535 ] );
        }
        return true;
      }

▼24.5. Functions to access the DOM

      function xhtml2to1_get_child_element(e, gi) {
        var cl = e.childNodes;
        for(var i = 0; i < cl.length; ++i) {
          if(cl[i].nodeType == document.ELEMENT_NODE 
              && cl[i].tagName == gi)
            return cl[i];
        }
      
        return null;
      }

▼24.6. Functions to access cookies


      function xhtml2to1_get_cookie(name) {
        var a = document.cookie.split(';');
        var re = /^ *([^ =]+)=(.*)$/;

        for( var i = 0; i < a.length; ++i ) {
          var m = re.exec( a[i] );
          if ( m != null && m[1] == name )
              return m[2];
        }

        return null;
      }

      function xhtml2to1_set_cookie(name, value, days) {
        var info = "";
        if( days ) {
          var date = new Date();
          date.setTime( date.getTime() + (days*24*60*60*1000) );
          info = "; expires=" + date.toGMTString();
        }
        info += "; path=/";

        document.cookie = name + "=" + value + info;
      }

      function xhtml2to1_erase_cookie(name) {
        xhtml2to1_set_cookie(name, "", -1);
      }

Formatted using xhtml2to1 by Steve Cheng.

Keyboard shortcuts: Previous Up Next