Expand active links in tree view
nimzie - December 23, 2008 - 13:31
| Project: | Index |
| Version: | 6.x-1.x-dev |
| Component: | Display modes |
| Category: | feature request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Jump to:
Description
Hi, I am loving this module. It's exactly what I am trying to accomplish with navigation of terms/vocabs.
One issue for my usage. When they click on the deepest term, the menu collapses again. I would like it to stay expanded when they click on the deepest term.
http://www.brighthost.ca/venrez/by-category
click Desks
then click Combination Chair Desks.
The menu totally collapses.
Is there a way to keep it expanded and only collapse the menu when the user clicks on another parent level item? More like typical Windows Explorer behavior.
Thanks for your assistance.
#1
You could write a bit of JavaScript that tries to match the URL of the term links to the URL of the current page. If a match is found, the script should expand the parent 'term' (and the parent's parent as well, etc.).
I will mark this as a postponed feature request, since this would be a very nice feature for version 3.
#2
Hmm, have you got any idea how I would approach that piece of Javascript? I'm pretty green on the JavaScript and PHP still. This is a huge (and in my opinion the only) deterrent for me using this slick module. It does 99.9% of what I need presentation-wise... except for this.
I don't understand a scenario where a user would prefer their navigation to change automatically like this does (collapse on click).
I'll peek around for the answer.
Thanks for your reply. BTW, I am using 5.x version, not 7.x. I mistakenly chose that option.
Cheers,
Adam
#3
The issue has been set to D7, because it is postponed until development on version 3 has started and that version will likely only be available to Drupal 7. Please don't hijack other issues.
You may disable the JavaScript file (tree will always be fully expanded without it) through your theme layer. When using D5 this is a bit harder than with D6, but several articles have been written about this and I guess you will not have much trouble finding them.
#4
Is there anyone who has read this who would be able to assist me in a solution for this in D5? Having it permanently expanded isn't an option for this case as there are far too many items buried in this tree.
I've poked around around google for a solution to this with no luck whatsoever.
Any tips would be awesome.
I'll buy you a beer at DrupalconDC.
Thanks,
Adam
#5
I won't be in DC, but I'll see what I can do. Any solution will mostly likely be a patch, since new features won't be added to any existing versions. I hope you're comfortable with that.
#6
#7
@Nimzie: I _will_ be in DC after all :-P (I'd have to pass on the beer though, I'm not 21 yet)
Just some notes for implementing this feature, I don't know when I'll actually start working on it:
- Extract the page's path from the URL. Remove the query and fragment.
- Find links within vocabindex ULs of which the href values match the patch, expand the LI it's in and all parent LIs.
#8
#9
xano , you lost me.
How about a sandwich and soda?
#10
Lool :-P Fine with me :) Just give me a poke once in a while to remind me I gotta work on this :-P
#11
#12
#13
Hello. I've faced out the same problem. The following solution was applied to fix it. Possible, it will be useful for you.
the changed file vocabindex.js:
$(document).ready(function () {var parents = $('.vocabindex.tree .parent');
parents.removeClass('expanded').addClass('collapsed').find('ul').hide();
var openparents = $('.vocabindex.tree .openparent');
openparents.removeClass('openparent').addClass('parent');
parents = $('.vocabindex.tree .parent');
parents.children('a').click(function () {
$(this).parent().toggleClass('collapsed').toggleClass('expanded').find('ul').eq(0).slideToggle('fast');
return false;
}).focus(function () {
$(this).blur();
});
});
the changed file vocabindex.view.inc:
function _vocabindex_list_render_tree($tree, $children, $vi, $pid = 0, &$zebra_i = 0) {
$items = array();
$p0 = check_plain(arg(0));
$p1 = check_plain(arg(1));
$p2 = check_plain(arg(2));
$parents = $p0 == "taxonomy" && $p1 == "term" && $p2 != "" ? taxonomy_get_parents($p2) : array();
unset($parent);
if (!empty($parents)) $parent = current($parents);
$parent_tid = isset($parent) ? $parent->tid : -1;
for ($i = 0, $len_i = count($children[$pid]); $i < $len_i; $i++) {
$zebra_i++;
$zebra = ($zebra_i % 2 == 0 ? 'even' : 'odd');
$term = $tree[$children[$pid][$i]];
$term_children = NULL;
$parent = NULL;
if (array_key_exists($term->tid, $children)) {
$term_children = _vocabindex_list_render_tree($tree, $children, $vi, $term->tid, $zebra_i);
}
// Render the current term.
$real_class = ($parent_tid == $term->tid ? ' openparent expanded' : (!is_null($term_children) ? ' parent expanded' : NULL));
$items[] = array(
'data' => vocabindex_term_link($term, $vi),
'children' => $term_children,
'class' => $zebra . $real_class,
);
}
return $items;
}
#14
I tink I'm going to add this as an extra display mode next to the regular display mode. This is easy since display modes (Views in Vocabulary Index 2) are now pluggable.
Due to the way indexes are rendered it's somewhat more complicated to expand the tree at the right position. The entities (nodes, users, terms, etc.) are rendered separately and the tree render functions don't know if the rendered entities contain links or not and to what pages they point. To solve this we might add a
$urlproperty to theindexEntityclass that can be used to provide a relationship between the entity and it's Drupal page. It can be compared to the view as link setting in Views and Index can use the property to mimic this setting and to let the tree render functions know the 'main link' of an entity.Currently there is one single class for entities (
indexEntity). We can add a#classproperty to the entity definitions inhook_index_entity_type_info()that is set to a class that extendsindexEntityand use that class to create new instances for certain entity types. The constructor of that class can then preprocess the entity based on the settings for the layer the entity belongs to. One of these settings would be view as link.Apart from how we let the render functions know about the links, we cannot do this magic in PHP. Normally trees are expanded and JS just collapses all elements. If we let PHP collapse them all and there is no JS, the user cannot access collapsed elements at all. We can however let PHP decide what elements should be collapsed and expanded by JavaScript. PHP would have access to the
$urlproperty and using JavaScript to collapse and expand the elements to provide the best possible UX.#15
I just looked at the title of this issue again and realised we can't simple do the whole trick by relying on the
activeclass of the links, because links that are no 'parents' might have that class as well.#16
Subscribing, greetings, Martijn