Difference between revisions of "Extension talk:Treeview5.php"

From Organic Design wiki
(→‎Open/Close parser function)
(Rewrite)
Line 1: Line 1:
 
{{ext-talk-msg|Tree view}}
 
{{ext-talk-msg|Tree view}}
−
A more logical way of approaching a treeview in MediaWiki is for the PHP extension part to concentrate on allowing the bullet lists (and maybe numbered lists too) to work recusively with transclusion, and for the tree rendering to be handled by existing JavaScript components such as [http://www.destroydrop.com/javascripts/tree/ DTree] which are very good and packed with features such as persistence between pages.
+
A more logical way of approaching a treeview in MediaWiki is for the PHP extension part to concentrate on allowing bullet lists (and maybe numbered lists too) to work recusively with transclusion, and for the tree rendering to be handled by existing JavaScript components such as [http://www.destroydrop.com/javascripts/tree/ dTree] which are very good and packed with features such as persistence between pages.
  
−
{{Note|If this extension is going to use an external tool, we could for the fork and rename of the extension to [[Extension:DTree.php]], as it is now going to be an interface to a javascript application. There is currently no extension on MediaWiki called [[MW:Extension:DTree]].}}
+
{{Note|[[Extension:DTree.php]] has been created in the mean time to test dtree, the code will be integrateed into [[Extension:Treevide5.php]].}}
  
−
[[Extension:Treeview4.php|Treeview4]] already handles the recursion aspect well and has been written in a much more modular way than [[Extension:Treeview.php|Treeview3]] allowing it to be independent of the tree rendering. But with this version I'd like to make the list-recursion work without any parser-function syntax at all - i.e. essentially to fix the MediaWiki parser's limitation of not allowing transclusion to work properly with lists as in the following example.
+
[[Extension:Treeview4.php|Treeview4]] already handles the recursion aspect well and has been written in a much more modular way than [[Extension:Treeview.php|Treeview3]] allowing it to be independent of the tree rendering. But in this version I'd like to make the list-recursion work without any parser-function syntax at all - i.e. essentially to fix the MediaWiki parser's limitation of not allowing transclusion to work properly with lists as in the following example.
 
<pre>
 
<pre>
 
*Foo
 
*Foo
Line 13: Line 13:
 
The new version would allow the Baz article (if it were a bullet list) to be properly nested at the correct level in the parent tree. This would simply be based on the fact that the transclusion is directly after an asterisk.
 
The new version would allow the Baz article (if it were a bullet list) to be properly nested at the correct level in the parent tree. This would simply be based on the fact that the transclusion is directly after an asterisk.
  
−
The ''#tree'' parser-function would still be used to make bullet lists into trees, but would be optional and would simple wrap the structure in the appropriate HTML to activate the DTree JavaScript tree.
+
The ''#tree'' parser-function would still be used to make bullet lists into trees, but would be optional and would provide an interface to convert the transcluded bullet lists into the javascript required in [http://www.destroydrop.com/javascripts/tree/ dTree] (see [[Extension talk:Treeview5.php#Dtree API]]) to generate a tree.
 +
 
 
==Persistance==
 
==Persistance==
−
How does http://www.destroydrop.com/javascripts/tree/ DTree] handle persistance? Looks like it does it through cookies, see dtree.js, line 36.
+
Persistance is auctomatically handled via cookies, see dtree.js, line 36.
  
  
−
If it does it by saving temporary files we would want a temporary file location for the trees and a [[W:GUID|GUID]] such as
+
== Dtree API ==
−
[ArticleName]-[Database revision]
+
See file api.html in the [http://www.destroydrop.com/javascripts/tree/ dTree] directory.
−
 
 
−
==See also==
 
−
*[http://www.destroydrop.com/javascripts/tree/ DTree] (javascript based)
 
−
*[http://www.silpstream.com/blog/wp-dtree/  Slipstream wp-Dtree] (php based)
 
  
−
== Dtree API ==
 
−
See file api.html in the [http://www.destroydrop.com/javascripts/tree/ DTree] directory.
 
 
Basically this extension need to provide an interface from a parser function which deals with nested bullet lists to creating the javascript output. At the bullet list stage the php function [http://nz2.php.net/manual/en/function.htmlspecialchars.php htmlspecialchars] on the input to prevent cross site scripting. See [http://www.technicalinfo.net/papers/CSS.html HTML Code Injection and Cross-site scripting] for details.
 
Basically this extension need to provide an interface from a parser function which deals with nested bullet lists to creating the javascript output. At the bullet list stage the php function [http://nz2.php.net/manual/en/function.htmlspecialchars.php htmlspecialchars] on the input to prevent cross site scripting. See [http://www.technicalinfo.net/papers/CSS.html HTML Code Injection and Cross-site scripting] for details.
  
 
==Open/Close parser function==
 
==Open/Close parser function==
−
A dedicated parser function which provides functionality to open/close the clades of the tree would be useful.
+
A dedicated parser function should be provided which inserts the open/close functionality of clades on the tree.  
−
 
 
 
<pre>
 
<pre>
 
<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
 
<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
 
</pre>
 
</pre>
 +
Note here that the javascript object is a tree called '''d'''. The functionality will not work for any other tree other than that named '''d'''.
  
−
This example generates a tree similar to the example01.html provided with dtree
+
==Tree example==
 +
This example generates a tree similar to the example01.html provided with [http://www.destroydrop.com/javascripts/tree/ dTree]
 +
 
 +
;Wikisyntax
 
<pre>
 
<pre>
 
{{#tree:openlevels=4
 
{{#tree:openlevels=4
Line 52: Line 50:
 
}}
 
}}
 
</pre>
 
</pre>
 +
 +
;Original javascript syntax;
 +
<pre>
 +
d = new dTree('d');
 +
 +
d.add(0,-1,'My example tree');
 +
d.add(1,0,'Node 1','/wiki/index.php?title=Sandbox');
 +
d.add(2,0,'Node 2','example01.html');
 +
d.add(3,1,'Node 1.1','example01.html');
 +
d.add(4,0,'Node 3','example01.html');
 +
d.add(5,3,'Node 1.1.1','example01.html');
 +
d.add(6,5,'Node 1.1.1.1','example01.html');
 +
d.add(7,0,'Node 4','example01.html');
 +
d.add(8,1,'Node 1.2','example01.html');
 +
d.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
 +
d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');
 +
d.add(11,9,'Mom\'s birthday','example01.html');
 +
d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');
 +
 +
document.write(d);
 +
</pre>
 +
;Equivalent reordered javascript syntax;
 +
<pre>
 +
e = new dTree('e');
 +
 +
e.add(0,-1,'My example tree');
 +
e.add(1,0,'Node 1','/wiki/index.php?title=Sandbox');
 +
e.add(2,1,'Node 1.1','example01.html');
 +
e.add(3,2,'Node 1.1.1','example01.html');
 +
e.add(4,3,'Node 1.1.1.1','example01.html');
 +
e.add(5,1,'Node 1.2','example01.html');
 +
e.add(6,0,'Node 2','example01.html');
 +
e.add(7,0,'Node 3','example01.html');
 +
e.add(8,0,'Node 4','example01.html');
 +
e.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
 +
e.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');
 +
e.add(11,9,'Mom\'s birthday','example01.html');
 +
e.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');
 +
 +
document.write(e);
 +
 +
</pre>
 +
 +
==See also==
 +
*[http://www.destroydrop.com/javascripts/tree/ dTree] (javascript based)
 +
*[http://www.silpstream.com/blog/wp-dtree/  Slipstream wp-Dtree] (php based)

Revision as of 00:17, 20 February 2008

Info.svg This talk page pertains specifically to the development of this extension. For more general discussion about bugs and usage etc, please refer to the mediawiki.org talk page at MW:Extension talk:Tree view

A more logical way of approaching a treeview in MediaWiki is for the PHP extension part to concentrate on allowing bullet lists (and maybe numbered lists too) to work recusively with transclusion, and for the tree rendering to be handled by existing JavaScript components such as dTree which are very good and packed with features such as persistence between pages.


Note.svg Note: Extension:DTree.php has been created in the mean time to test dtree, the code will be integrateed into Extension:Treevide5.php.


Treeview4 already handles the recursion aspect well and has been written in a much more modular way than Treeview3 allowing it to be independent of the tree rendering. But in this version I'd like to make the list-recursion work without any parser-function syntax at all - i.e. essentially to fix the MediaWiki parser's limitation of not allowing transclusion to work properly with lists as in the following example. 

*Foo
**Bar
**{{:Baz}}
**Fodda

The new version would allow the Baz article (if it were a bullet list) to be properly nested at the correct level in the parent tree. This would simply be based on the fact that the transclusion is directly after an asterisk.

The #tree parser-function would still be used to make bullet lists into trees, but would be optional and would provide an interface to convert the transcluded bullet lists into the javascript required in dTree (see Extension talk:Treeview5.php#Dtree API) to generate a tree.

Persistance

Persistance is auctomatically handled via cookies, see dtree.js, line 36.


Dtree API

See file api.html in the dTree directory.

Basically this extension need to provide an interface from a parser function which deals with nested bullet lists to creating the javascript output. At the bullet list stage the php function htmlspecialchars on the input to prevent cross site scripting. See HTML Code Injection and Cross-site scripting for details.

Open/Close parser function

A dedicated parser function should be provided which inserts the open/close functionality of clades on the tree. 

<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>

Note here that the javascript object is a tree called d. The functionality will not work for any other tree other than that named d.

Tree example

This example generates a tree similar to the example01.html provided with dTree

Wikisyntax
{{#tree:openlevels=4
*Node 1
**Node 1.1
***Node 1.1.1
****Node 1.1.1.1
*Node 2
*Node 3
*Node 4
*My Pictures
**The trip to Iceland
**Mom's birthday
*Recycle bin
}}
Original javascript syntax;
	d = new dTree('d');

	d.add(0,-1,'My example tree');
	d.add(1,0,'Node 1','/wiki/index.php?title=Sandbox');
	d.add(2,0,'Node 2','example01.html');
	d.add(3,1,'Node 1.1','example01.html');
	d.add(4,0,'Node 3','example01.html');
	d.add(5,3,'Node 1.1.1','example01.html');
	d.add(6,5,'Node 1.1.1.1','example01.html');
	d.add(7,0,'Node 4','example01.html');
	d.add(8,1,'Node 1.2','example01.html');
	d.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
	d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');
	d.add(11,9,'Mom\'s birthday','example01.html');
	d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');

	document.write(d);
Equivalent reordered javascript syntax;
	e = new dTree('e');

	e.add(0,-1,'My example tree');
	e.add(1,0,'Node 1','/wiki/index.php?title=Sandbox');
	e.add(2,1,'Node 1.1','example01.html');
	e.add(3,2,'Node 1.1.1','example01.html');
	e.add(4,3,'Node 1.1.1.1','example01.html');
	e.add(5,1,'Node 1.2','example01.html');
	e.add(6,0,'Node 2','example01.html');
	e.add(7,0,'Node 3','example01.html');
	e.add(8,0,'Node 4','example01.html');
	e.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
	e.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');
	e.add(11,9,'Mom\'s birthday','example01.html');
	e.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');
	
	document.write(e);

See also

Retrieved from "https://organicdesign.nz/wiki/index.php?title=Extension_talk:Treeview5.php&oldid=81361"