http://qs321.pair.com?node_id=598355


in reply to Free Nodelet freed

The following hack makes each nodelet title clickable, and you can preconfigure your nodelet's initial state (collapsed/expanded).

Plunge into your Free nodelet and tweak the closedN array. For maximum benefit put your free nodelet last in Nodelet Settings.

update: use the block further down. I would have deleted this first attempt, had ikegami not answered :-) 

// this function toggles a nodelet's state.
function toggleVis (id) {
  var r = document.getElementById(id);
  if(r.style.display == "none") {
    r.style.display = "table-row";
  } else {
    r.style.display = "none";
  }
}
// Array with nodelet state flags, 1 = closed, 0 = open
var closedN = `[1,1,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1];

var nc = document.getElementById('nodelet_container');
var c = 0;
for(var i=0; i<nc.childNodes.length; i++) {
  if(nc.childNodes`[i].nodeName == "TBODY") {
    cn = nc.childNodes`[i];
    var ary = new Array;
    var k = 0;
    for(var j=0; j<cn.childNodes.length; j++) {
      if(cn.childNodes`[j].nodeName=="TR") {
        ary`[k] = cn.childNodes`[j]; k++;
      }
    }
    var str= ary`[0].childNodes`[1].innerHTML;
    var id = ary`[1].id;
    id = id.replace(/\'/,"\\'");
    ary`[0].childNodes`[1].innerHTML
        = '<div onClick="toggleVis('+"'"+id+"'"+');">'+ary`[0].childNo
+des`[1].innerHTML+'</div>';
    if(closedN`[c]) toggleVis(ary`[1].id);
    c++;
  }
}

[download]

That could've been more 'elegant'... but it's a hack. If JavaScript had hashes...

This one is for firefox. IE users likely will have to replace the document.getElemetById by the appropriate IE function.

<update>

Since some nodelets come and go, the order can change. Here's a version with hashes. The XP Nodelet has a degree sign in the upper left corner, which, when clicked, will pin/unpin the nodelet container. Use with the CSS snippet below. 

// this function toggles a nodelet's state.
function toggleVis (id) {
  var r = document.getElementById(id);
  if(!r.style.display || r.style.display == "none") {
    r.style.display = "table-row";
  } else {
    r.style.display = "none";
  }
}

function togglePin () {
  var n = document.getElementById('nodelet_container');
  var pin = document.getElementById('nodelet_pin');
  if (!n.style.position || n.style.position == 'fixed') {
    n.style.position = 'absolute';
    pin.innerHTML = '&nbsp;|&nbsp;';
  } else {
    n.style.position = 'fixed';
    pin.innerHTML = '&nbsp;&deg;&nbsp;';
  }
}

function collapseNodelets () {

  // insert the nodelets you want to have expanded here
  var opened = {
    'XP Nodelet'          : 0,
    'Chatterbox'          : 0,
    'Tick tock'           : 0,
    'Cabalists\' Nodelet' : 1,
  }

  var nc = document.getElementById('nodelet_container');
  var c = 0;
  for(var i=0; i<nc.childNodes.length; i++) {
    if(nc.childNodes`[i].nodeName == "TBODY") {
      cn = nc.childNodes`[i];
      var ary = new Array;
      var k = 0;
      for(var j=0; j<cn.childNodes.length; j++) {
        if(cn.childNodes`[j].nodeName=="TR") {
          ary`[k] = cn.childNodes`[j]; k++;
        }
      }
      var str= ary`[0].childNodes`[1].innerHTML;
      str = str.replace(/ *\n */g,"");
      str = str.replace(/  /g," ");
      var id = ary`[1].id;
      id = id.replace(/\'/,"\\'");

      if(str == "Chatterbox") {
        // this one gets the pin div - degree(pinned) or pipe(unpinned
+)
        ary`[0].childNodes`[1].innerHTML
          = '<div id="nodelet_pin" onClick="togglePin();"'
          + ' style="float: left; cursor: pointer">&nbsp;&deg;&nbsp;</
+div>'
          + '<div onClick="toggleVis('+"'"+id+"'"+');">'+str+'</div>';
      } else {
        ary`[0].childNodes`[1].innerHTML
          = '<div onClick="toggleVis('+"'"+id+"'"+');">'+str+'</div>';
      }
      if(!opened`[str]) toggleVis(ary`[1].id);
      c++;
 
    }
  }
}

collapseNodelets();

[download]

And here's a stylesheet snippet to pin the nodelet container to the upper right corner of the page: 

/* pin container, make it fixed width */
#nodelet_container {
    position: fixed;
    margin-left: 5px;
    top: 5px;
    width: 200px;
}

/* leave a bit space on the right, so the nodelet container fits */
#monkbar, #titlebar-top, #titlebar-bottom, #footer { padding-right: 20
+5px; }

/* initial state of all nodelets collapsed */
[id^="nodelet_body_row"] { display: none; }

[download]

</update>

--shmem 

_($_=" "x(1<<5)."?\n".q·/)Oo.  G°\        /
                              /\_¯/(q    /
----------------------------  \__(m.====·.(_("always off the crowd"))."·
");sub _{s./.($e="'Itrs `mnsgdq Gdbj O`qkdq")=~y/"-y/#-z/;$e.e && print}

Replies are listed 'Best First'.
Re: Free Nodelet Hack: Collapse/expand Nodelets individually (JS hashes)
by ikegami (Patriarch) on Feb 05, 2007 at 17:52 UTC

    That could've been more 'elegant'... but it's a hack. If JavaScript had hashes...

    But it does! JavaScript calls them Objects. (Kinda like how objects are usually implemented as hashes in Perl). 

    // Hash creation and initialization
var hash = new Object;
var hash = {};
var hash = { foo: "Foo!", bar: "Bar!" };
var hash = { "spaced out": "ok" };

// Setting
hash.foo    = "Foo!";  // Static key
hash["bar"] = "Bar!";  // Dynamic key

// Getting
alert("hash.foo: " + hash["foo"]);  // Dynamic key
alert("hash.bar: " + hash.bar);     // Static key

// Iterating
for (var key in hash) {
   var val = hash[key];
   alert("hash." + key + ": " + val);
}

    [download]
[reply]
[d/l]

In Section Perl Monks Discussion