Unofficial JDA (Javascript Dataflow Architecture) Wiki

The blueprint creates a scrollable selectable list of the items passed in the list_in input terminal, and sends a message on "clicked_item_out" containing the clicked item, when clicked.

Demos that use it

• 43.html
• evdb.html
• flickr_and_webshot.html
• rss_feeds.html

BLUEPRINT(
"~01A923D796ABB74597BD1D647EC0BF8AA2", 
[
 ["list_in", "onList", 10]
],
[
 "clicked_item_out"
],
function (Class) 
{
  Class.prototype._onInit = function(props)
    {
      this._listing;
      this._css = this.dom_node.className;
      
      if (this._css) {
	this._css += " ";
      }
    };
    
    Class.prototype.onList = function(msg)
    {
      var i, time, n, item, href;
	var html = "";

    function _onClick(e)
    {
      var t;
      e = e || __w.event;
      t = e.target || e.srcElement;


      while (t && t.className != _css +  "TextscrapItem") {
	t = t.parentNode;
      }

      self.postMessage("clicked_item_out", t.eform);
    }

	try {
	    n = msg.length;

	    for (i = 0; i < n; i ++) {
		item = msg[i];
		
		try {
		    time = item.date[0].toUTCString()//.split(" ")[4];
		} catch (ex) {
		    time = null;
		}

		href = (item.uri) ? "href=\"" + item.uri + "\"" : null;

		html += "<span class=\"" + this._css+ "TextscrapItem\">\
<span class=\"" + this._css + "TextscrapHeading\">\
<span>\
<span class=\"" + this._css+ "TextscrapLabel\">" + ((item.label) || "") + "</span>\
<span class=\"" + this._css + "TextscrapName\"><a target=\"_blank\" " + href + ">" + ((item.name) || "") + "</a></span>\
<span class=\"" + this._css + "TextscrapDate\">" + ((time) || "") + "</span>\
</span>\
</span>\
<span class=\"" + this._css + "TextscrapContent\">" + (item.text_content || item.name || "") + "</span>\
</span>";
	    }

            if (!this._listing) {
                this._findListing();
            }

	    try {
		this._listing.innerHTML = html;

		for (i = 0; i < n; i ++) {
		  if (this._listing.childNodes[i].nodeType == 1) {
		    this._listing.childNodes[i].eform = msg[i];
		    this._listing.childNodes[i].onclick = _onClick;
		  }
		}
	    } catch (ex) {		
		this.error("&lt;span class=\"TextscrapListing\">&lt;/span> is \
expected inside the DIV, but could not be found.");
	    }
	} catch (ex) {
	    error(ex, "Error drawing textscrap items");
	}
    };

    Class.prototype._findListing = function()
    {
        var i, j, arr, n, sp;
        var o = this.dom_node;
        
        for (i = 0; sp = o.getElementsByTagName("SPAN")[i]; i ++) {
            arr = sp.className.split(" ");
            n = arr.length;
            
            for (j = 0; j < n ; j ++) {
                if (arr[j] == "TextscrapListing") {
                    this._listing = sp;

                    return;
		    /*********************************************************/
                }
            }
        }
    }

}, "Scrollable Multiple Content List Box");