Hi,

First of all, great module! I am using it over here: http://downloadabook.net/ebooks as an exposed views filter.

My question is how can I more clearly distinguish the parent terms from the child terms in my vocabulary? Ideally, what I would like is to enclose parent terms in a div or span tag with the class "parent" and child terms in a div or span tag with the class "child" so I can adjust the way they look by css.

Otherwise, is there a way to just bold the parent terms or indent the child terms? At the moment it is using the default '-' that taxonomy provides but that is not a clear enough indicator of a child term to your average site visitor.

I found this which should help but I wouldn't know where to start altering the module's code: http://www.angrydonuts.com/taxonomy_checkboxes_v2_the_reven

Any help would be REALLY appreciated.

Cheers,
Jake.

Comments

codenamerhubarb’s picture

Status: Fixed » Active

Nevermind... I did it myself by altering the taxonomy module.

I commented out this line:
$choice->option = array($term->tid => str_repeat('-', $term->depth) . $term->name);

and added:
if($term->depth==0){$choice->option = array($term->tid => '' . $term->name . '' ); };

if($term->depth!=0){$choice->option = array($term->tid => '' . str_repeat(' - ', $term->depth) . '' . $term->name . '' ); };

This works great for exposed filters but leaves an ugly trail when doing admin stuff around the site using multiple select taxonomy boxes such as on the categories page.

Mark Theunissen’s picture

You can use jQuery. I search for items that have a dash (hyphen) before their text values - they are children. Then add a class to the parent.

E.g. for the following vocab:

Asia
-Thailand
Africa
-South Africa
-Mozambique
North America
Europe
South America

The jQuery below will add the class "better-select-parent" to "Asia" and "Africa", because they have children. It uses regular expressions and may be a little slow, but it's fine for me!

// inside the better select elements, find the taxonomy parents and
// apply a class so they can get highlighted differently.
Drupal.behaviors.highlightParents = function(context) {
  var prev = null;
  var prev_is_parent = null;

  $('.better-select .form-checkboxes label.option').each(function() {
    // items that don't start with a hyphen
    var current_is_parent = jQuery.trim($(this).text()).match(/^[^-].*/);

    if (!current_is_parent && prev_is_parent) {
      $(prev).parent().addClass('better-select-parent');
    }
    prev_is_parent = current_is_parent;
    prev = this;
  });
}
Mark Theunissen’s picture

Status: Active » Fixed

This is now implemented without jQuery in 6.x-1.x. I used some of merlinofchaos' code.

Example: The following taxonomy...

North America
-USA
--California
--New York
--Ohio
-Mexico
South America
-Brazil
-Paraguay
-Chile
-Bolivia
-Peru

North America & South America will get classes "checkbox-depth-0".
USA & Brazil, etc, will get classes "checkbox-depth-1"
California, etc, will get classes "checkbox-depth-2"

North America, South America, USA will get classes "has-children" because they have child items.

You need to turn it on in admin/settings/betterselect.

Hope that solves everyones problems! :)

codenamerhubarb’s picture

Thanks for your replies.
Does anyone know if this option is going to be included in the 5.x module as well?

Status: Active » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

aschiwi’s picture

I was looking to remove the hyphens (which is hard as hell to find), because why would I need hyphens next to checkboxes. But I also need the depth classes for styling purposes. I understand from this that the classes are given based on the number of hyphens, right? Could I still get rid of those hyphens at all?