Sample Declaration

<div id="slideshow"
     impl="~01411B534EC4C842c9B69249055401F4C6"     
     script="http://localhost/Sniffer.js">
</div>

Input Terminals

• none

Output Terminals

• highlighted_date_out: (Selected date)

Properties

• year
• month
• selected_class
• unselected_class
• encodes_date_as_string

Demos that use it

• evdb.html

How does it work

This blueprint wraps an existing table which represent a calander. When a date is selected (a td element), the selection is sent to the output terminal.

BLUEPRINT(
"~01411B534EC4C842c9B69249055401F4C6", 
[],
[
 "highlighted_date_out"
],
function(Class)
{
  Class.prototype._onInit = function(props)
  {
    /*************************************************************************/
    this._year = props["year"];
    this._month = props["month"];
    this._sel_class = props["selected_class"];
    this._unsel_class = props["unselected_class"];
    this._table = this.dom_node.getElementsByTagName("TABLE")[0];
    this._last_selected;
    this._as_str = props["encodes_date_as_string"];

    var i, cell, mark, self = this;
    var j = 0;

    if (this._table) {
      if (this._year && this._month) {
	for (i = 0; (cell = this._table.getElementsByTagName("TD")[i]); i++) {
	  mark = cell.getAttribute("mark");

	  if (mark == "start") {
	    j = 1;
	  } else if (mark == "end") {
	    if (j) {
	      cell.date = new Date(this._year, this._month - 1, j);
	    } else {
	      this.error("missing \"tb\" element with \"mark\" attribute set to \
\"start\"");
	    }
	    break;
	  }
	  
	  if (j) {
	    cell.date = new Date(this._year, this._month - 1, j++);
	  }
	}


    function _onMouseDown(e) 
    {
	var e = e || window.event;
	var o = e.target || e.srcElement;
	var v = o.date

	if (v) {

	    if (self._last_selected != undefined) {
	      self._deselectCell(self._last_selected);
	    }

	    self._last_selected = o;

	    self._selectCell(o);

	    if (self._as_str) {
	      v = (v.getMonth() + 1) + "/" + v.getDate() + "/" + v.getFullYear();
	    }
	    self.postMessage("highlighted_date_out", v)
	} else {
	    self.debug("ignoring click on " + o.tagName);
	}
    };

	this.dom_node.onclick = _onMouseDown;
      } else {
	this.error("propeties \"year\" and \"month\" are required");
      }
    } else {
      this.error("\"table\" element is required");
    }

  }

  Class.prototype._selectCell = function(cell) 
    {
	try {
	    cell.className = this._sel_class;
	} catch (e) {
	  this.error(e, "Error selecting " + cell + 1);
	}
    };

    Class.prototype._deselectCell = function(cell) 
    {
	try {
	    cell.className = this._unsel_class;
	} catch (e) {
	    this.error(e, "Error deselecting " + e);
	}
    };

}, "Calendar");