|
Fraser Hore
|
Tuesday 10 January 2006 12:12:24 pm
I find that the ability to fold/unfold (close/open) hierchical lists is a necessity for any long list. For example i'd like to have a multi-level list of tasks that where the user can drill down in the hierarchy. I've tried using the contentmenustructure and it works, but it seems overly complex for this purpose. I also couldn't figure out how to add attributes from the data_map after the object.name. For some reason the standard methods don't seem to be working. Has anyone created a generic fold/unfold javascript and template combination that could be used to easily create foldable lists? Idealy there is a template that has a fetch tree statement at the beginning which can be modified for individual needs (e.g. starting node, filters, etc.) and then the children are displayed as a fold/unfoldable hierarchical list using javascript. The basic template could just display the name of the object (linked to the object), but make it really easy to add additional attributes (not linked to the object) by adding them after the name (not linked to the object) in a <span></span>. I've been able to generate this functionality using only template code (code below, just for fun) but it's slow and awkward. I don't know javascript so it would be great if someone has already done something like this. Cheers, Fraser Fold/Unfold in Template Code:
{*Check if open nodes is set in the view parameters. If not, do nothing. If yes, create an array of open nodes assigned to the $open_nodes variable. If there is a close node view parameter set, don't include that node in the $open_nodes array*}
{def $vp_open_nodes=$view_parameters.open_nodes}
{def $vp_close_node=$view_parameters.close_node}
{def $open_nodes=concat("", $node.node_id)}
{def $items=fetch('content','tree',
hash('parent_node_id', $node.node_id,
'class_filter_type', 'include',
'class_filter_array', array('activity')))}
{if $vp_open_nodes|null()}
{else}
{foreach $items as $item}
{if $vp_open_nodes|contains($item.node_id)}
{if $vp_close_node|null()}
{set $open_nodes=$open_nodes|append(",", $item.node_id)}
{else}
{if $vp_close_node|contains($item.node_id)}
{else}
{set $open_nodes=$open_nodes|append(",", $item.node_id)}
{/if}
{/if}
{/if}
{/foreach}
{/if}
{*Loop through the items printing all items that are in open folders*}
<div class="content-view-children">
{def $last_node=fetch( 'content', 'node', hash('node_id', $node.node_id))}
{def $nodes_shown=array($node.node_id)}
{foreach $items as $item max 1}
<table cellspacing="5" width="100%">
<tr>
<th>Workstream/Activity</th>
{def $content_object_attributes=$item.contentobject_version_object.contentobject_attributes}
{foreach $content_object_attributes as $content_object_attribute offset 1}
<th valign=top>
<label>{$content_object_attribute.contentclass_attribute.name|wash}</label>
</th>
{/foreach}
<th> </th>
<th> </th>
</tr>
{/foreach}
{foreach $items as $item}
{def $content_object_attributes=$item.contentobject_version_object.contentobject_attributes}
{def $indent=sub( $item.depth, $node.depth)}
{set $indent=sub( $indent, 1)}
{set $indent=mul( $indent, 10)}
{if $nodes_shown|contains($item.parent_node_id)}
{if $open_nodes|contains($item.parent_node_id)}
{if $open_nodes|contains($item.node_id)}
<tr>
<td valign=top style="padding-left: {$indent}px">
<span><a href="{$node.url_alias|ezurl(no)}/(open_nodes)/{$open_nodes}/(close_node)/{$item.node_id}"><img src={"folder_open.png"|ezimage} alt="" /></a></span>
<span><a href={$node.url_alias|ezurl}>{$item.name|wash()}</a></span>
</td>
{foreach $content_object_attributes as $content_object_attribute offset 1}
<td valign=top>
{attribute_view_gui attribute=$content_object_attribute}
</td>
{/foreach}
<td>
{*Add a button to edit the item*}
{section show=$item.object.can_edit}
<form method="post" action={"content/action/"|ezurl}>
<input class="button" type="submit" name="EditButton" value="{'Edit'|i18n('design/standard/node/view')}" />
<input type="hidden" name="ContentObjectID" value="{$item.object.id}" />
</form>
{/section}
</td>
<td>
{*Add a button to add a new class item*}
<form method="post" action={"content/action/"|ezurl}>
<input class="button" type="submit" name="NewButton" value="New" />
<input type="hidden" name="ClassIdentifier" value="{$item.class_identifier}" />
<input type="hidden" name="NodeID" value="{$item.node_id}" />
</form>
</td>
</tr>
{else}
<tr>
<td valign=top style="padding-left: {$indent}px">
<span><a href="{$node.url_alias|ezurl(no)}/(open_nodes)/{$open_nodes},{$item.node_id}"><img src={"folder_closed.png"|ezimage} alt="" /></a></span>
<span><a href={$node.url_alias|ezurl}>{$item.name|wash()}</a></span>
</td>
{foreach $content_object_attributes as $content_object_attribute offset 1}
<td valign=top>
{attribute_view_gui attribute=$content_object_attribute}
</td>
{/foreach}
<td>
{*Add a button to edit the item*}
{section show=$item.object.can_edit}
<form method="post" action={"content/action/"|ezurl}>
<input class="button" type="submit" name="EditButton" value="{'Edit'|i18n('design/standard/node/view')}" />
<input type="hidden" name="ContentObjectID" value="{$item.object.id}" />
</form>
{/section}
</td>
<td>
{*Add a button to add a new class item*}
<form method="post" action={"content/action/"|ezurl}>
<input class="button" type="submit" name="NewButton" value="New" />
<input type="hidden" name="ClassIdentifier" value="{$item.class_identifier}" />
<input type="hidden" name="NodeID" value="{$item.node_id}" />
</form>
</td>
</tr>
{/if}
{set $nodes_shown=$nodes_shown|append(",", $item.node_id)}
{/if}
{/if}
{/foreach}
</table>
</div>
|