ListTreeWikifierPlugin released

[Devon Jones]

Hi all, I have released my new ListTreeWikifierPlugin - which uses @,
@@, @@@.... to build an explorer style collapsible tree.

You can test it out and download it at tiddlyforge:
http://www.tiddlyforge.net/pytw/#ListTreeWikifierPlugin

Devon

Source:
/***
|''Name:''|ListTreeWikifierPlugin |
|''Version:''|<<getversion listtree >> |
|''Date:''|<<getversiondate listtree "DD MMM YYYY">> |
|''Source:''|http://www.tiddlyforge.net/pytw/#ListTreeWikifierPlugin |
|''Author:''|[[DevonJones]] |
|''Type:''|Wikifier Extension |
|''License:''|Copyright (c) 2005, Devon Jones. Licensed under the
[[TiddlyWiki Plugin
License|http://www.tiddlyforge.net/pytw/#TWPluginLicense]], all rights
reserved. |
|''Requires:''|TiddlyWiki 1.2.37 and higher |
!Description
Adds support for a tree in the wikifier

!Syntax

{{{@ followed by a link}}}

!Sample Output

@ TestA
@@ TestB
@@@ TestC
@@ TestD
@@@ TestE

!Known issues

!Notes
you need images for this plugin. you can download them
[[here|http://www.tiddlyforge.net/pytw/listtree.zip]]

!Revision history
v0.9.0 November 3th 2005 - initial release

!Code
***/

//{{{
version.extensions.listtree = { major: 0, minor: 9, revision: 0, date:
new Date(2005, 10, 3) };

config.formatters.listtree = {}
config.formatters.listtree.plusimage = "./listtree/plus.png";
config.formatters.listtree.minusimage = "./listtree/minus.png";
config.formatters.listtree.bulletimage = "./listtree/bullet.png";

config.formatters.push({
name: "listtree",
match: "^(?:(?:@+))",
lookahead: "^(?:(@+))",
terminator: "\\n",
outerElement: "ul",
itemElement: "li",
handler: function(w) {
var lookaheadRegExp = new RegExp(this.lookahead,"mg");
w.nextMatch = w.matchStart;
var placeStack = [w.output];
var liStack = new Array()
var currLevel = 0, newLevel;
var topUl;
do {
lookaheadRegExp.lastIndex = w.nextMatch;
var lookaheadMatch = lookaheadRegExp.exec(w.source);
var matched = lookaheadMatch && lookaheadMatch.index ==
w.nextMatch;
if(matched) {
newClass = null;
if(currLevel == 0) {
newClass = "navtree";
}
newLevel = lookaheadMatch[0].length;
w.nextMatch += lookaheadMatch[0].length;
if(newLevel > currLevel) {
for(var i = currLevel; i < newLevel; i++) {
parent = placeStack[placeStack.length - 1];
liparent = liStack[liStack.length - 1];
if(liparent != null) {
parent = liparent;
}
elem = createTiddlyElement(parent, "ul", null,
newClass, null);
if(newClass == "navtree") {
topUl = elem;
}
placeStack.push(elem);
}
}
else if(newLevel < currLevel) {
for(var i = currLevel; i > newLevel; i--) {
placeStack.pop();
}
}

var e = createTiddlyElement(placeStack[placeStack.length
- 1],"li");
if(newLevel > currLevel) {
liStack.push(e);
}
else if(newLevel == currLevel) {
liStack.pop();
liStack.push(e);
}
else if(newLevel < currLevel) {
for(var i = currLevel; i > newLevel; i--) {
liStack.pop();
}
liStack.push(e);
}

currLevel = newLevel;
w.subWikify(e,this.terminator);
}
} while(matched);
processULEL(topUl);
}
});

function processULEL(ul) {
if (!ul.childNodes || ul.childNodes.length == 0) {
return;
}

// iterate <li>s
for (var i = 0; i < ul.childNodes.length; i++) {
var item = ul.childNodes[i];
if (item.nodeName.toLowerCase() == "li" &&
item.className.toLowerCase() != "gap") {
// iterate this <li>
var a;
var subul;
subul = "";
for (var j = 0; j < item.childNodes.length; j++) {
var sitem = item.childNodes[j];
switch (sitem.nodeName.toLowerCase()) {
case "a":
a = sitem;
break;
case "ul":
subul = sitem;
processULEL(subul);
break;
}
}
if (subul) {
associateEL(a,subul);
}
else {
a.parentNode.style.listStyleImage = "url(" +
config.formatters.listtree.bulletimage + ")";
}
}
}
}

function associateEL(a, ul) {
a.oldonclick = a.onclick;
a.onclick = function (e) {
var display = ul.style.display;
this.parentNode.style.listStyleImage = (display == "block") ?
"url(" + config.formatters.listtree.plusimage + ")" : "url(" +
config.formatters.listtree.minusimage + ")";
ul.style.display = (display == "block") ? "none" : "block";
if(ul.style.display =="block") {
//a.oldonclick(e);
}
return false;
}
a.onmouseover = function() {
var display = ul.style.display;
window.status = (display == "block") ? "Collapse" : "Expand";
return true;
}
a.onmouseout = function() {
window.status = "";
return true;
}
var display = ul.style.display;
a.parentNode.style.listStyleImage = "url(" +
config.formatters.listtree.plusimage + ")";
ul.style.display = "none";
}

//}}}

[rlgomes]

You might want to add the tooltip feature like some of us did on
another thread for the EasySlider wikifier... have a look
http://rodney.gotdns.com/#EasySlider it would make those links on the
tree cary more info before you actualy click to open...

Rodney.

[rlgomes]

cool idea by the way! :)

Rodney.

[rlgomes]

you know you could embed the images with the base64 technique...

Rodney.

[Clint Checketts]

This wikifier will be great in displaying TWs structure. I'll get it up ASAP.

-Clint

[Devon Jones]

rlgomes wrote:
> you know you could embed the images with the base64 technique...
>
> Rodney.
>
>

Yeah, I didn't know how to do that, so I figured as soon as I posted it,
someone would probably set about telling me how ;-)
If someone can give me a quick tutorial on embedding images in
javascript, that would be great.

Devon

[Devon Jones]

I gotta figure out good syntax for that, since these are not macros -
but wikifiers I'm trying to keep it as simple as possible.

any ideas?

Devon

[Devon Jones]

Or did you mean something like the number of children? That one would
be pretty easy to add......

Devon

[rlgomes]

I mean a tooltip on the actual link and the number of children would be
nice :)...
As for embedding an image in javascript.. I've done somethings..

here's a doc that explains how to do it for IE.. basically you have to
create a <img> like so:

<img src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////
wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4ML
wWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw=="
alt="Base64 encoded image" width="150" height="150"/>

and translate your images into base 64... the content of th src can be
kept in some global for your plugin... let me know if you have probs..
I have done this with my smiley macro:
http://rodney.gotdns.com/#SmileyMacro

http://dean.edwards.name/weblog/2005/06/base64-ie/

[Devon Jones]

good utility for doing the encoding:
http://www.greywyvern.com/code/php/binary2base64

Devon

[BradleyMeck]

unfortunately that is not Yet implemented in IE, as you can see when
you try to open something like the SmileyMacroTest from Rodney in IE.
Its too bad, but I think that it should not be done like that for now,
maybe some text and css?