Component: Tiered Tags with Scrollbar Option

[murklinstest]

Changes:

1. Changed default title of box to conform to Component defaults.
2. Enclosed entire list in div of class tagBox.
3. Added scrollbars styling.

function print_free_text(Page p)
{

#####   Config   #####

# Specify your delimiter!  One char only! Making it an empty string will
    # result in an un-tiered list, if that's what you prefer.
    var string delimiter = ":";

# Specify the title of your tag box!
    var string tag_title = "tags";

##### End Config #####

if (size $p->visible_tag_list() <= 0)
    {
        return;
    }

var string list = "";
    var string[] closing_tags;
    $closing_tags[0] = "";
    var string[] prev_tags;
    var int tag_list_pos = 0;
    var string tier_code = "";
    foreach var Tag t ($p->visible_tag_list())
    {

var string[] tags;

if ($t.name)
        {  
            # mt:20050623
            # Split tags into array on delimiter. Oh god, my kingdom
            # for a function.  Stolen shamelessly from lj-user rane500.
            var int array_counter = 0;
            var string buffer = "";
            foreach var string char ($t.name)
            {
                if($char == $delimiter)
                {
                    $tags[$array_counter] = $buffer;
                    $array_counter = $array_counter + 1;
                    $buffer = "";
                }
                else
                {
                    $buffer = $buffer + $char;
                }
            }  
            $tags[$array_counter] = $buffer;

var int pos = 0;
            foreach var string tier($tags)
            {
                if (size $closing_tags <= $pos)
                {
                    # mt:20050623
                    # $closing_tags keeps track of html that is used to close off open
                    # lists.  Its length must be kept >= to that of the current tag.
                    $closing_tags[$pos] = "";
                }

# mt:20050623
                # If we're on a tag's last tier, we need to return a link to the tag,
                # otherwise plain text is returned.
                if (size $tags == ($pos + 1))
                {
                    $tier_code = """ $tier""";
                }
                else
                {
                    $tier_code = """$tier""";
                }

if (($tag_list_pos == 0) and ($pos == 0))
                {  
                    # mt:20050623: The first tier of the first tag is a special case.

# mt:20050623: Add the tier as a list item.
                    $list = $list + """

• $tier_code""";
  
  # mt:20050623
                      # A list has been opened so add the required closing html.
                      $closing_tags[$pos] = """

""";                      
                }
                elseif (size $prev_tags <= $pos)
                {    
                    # mt:20050623
                    # The current tag has more tiers than the previous tag, so a new
                    # list must be opened.                    
                    $list = $list + """

• $tier_code""";
                      $closing_tags[$pos] = "

";
                }
                elseif ($tags[$pos] != $prev_tags[$pos])
                {  
                    # mt:20050623
                    # The current tag's tier is not the same as the previous tag's tier of  
                    # the same level.  This means we may need to close some lists.
                    var int i = 0;
                    foreach var string html ($closing_tags)
                    {
                        if ($i > $pos)
                        {
                            $list = $list + $closing_tags[$i];                                
                            # mt:20050623: As we append the closing code, pop it off the array.
                            $closing_tags[$i] = "";
                        }
                        $i++;
                    }

if ($closing_tags[$pos] == "")
                    {          
                        # mt:20050623
                        # This is the first tier at this level, so open list.
                        $list = $list + """

• $tier_code""";
                          $closing_tags[$pos] = "

";
                    }
                    else
                    {              
                        # mt:20050623
                        # There have already been tiers added at this level, so just close the previous
                        # list item before adding the new tier.
                        $list = $list + """

$tier_code""";
                    }                    
                }
                else
                {
                    # mt:20050623
                    # The current tag's tier is exactly the same as the previous tag's tier at
                    # this same level.  It has already been included in the list, so do nothing.
                }  
                # mt:20050623: Moving on to next tier in this tag!
                $pos++;
            }
            $prev_tags = $tags;          
        }        
        # mt:20050623: Next tag in the list!
        $tag_list_pos++;
    }

# mt:20050623
    # All the tags have been added so close all outstanding lists.
    var int i = 0;
    var string remaining_html = "";
    foreach var string html ($closing_tags)
    {
        if ($html != "")
        {
            $remaining_html = $html + $remaining_html;
            $closing_tags[$i] = "";
        }
        $i++;
    }
    # mt:20050624: Added surrounding div tag for styling purposes.
    $list = """
""" + $list + $remaining_html + """""";

# mt:20050623: This adds the Tags component.
    print_comp_header($tag_title);
    """$list""";
    print_comp_footer();

}

# mt:20050623
# If you're like me, you'll want to tighten up the default list formatting, and maybe you
# want to scroll your long tag list.  The tag list is enclosed in a div called tagBox,
# the ul lists are all classed as tagList, and the list items are classed as tagItem.
# Alter the styles below however you like.
function Page::print_custom_head() {
    """

""";
}

Note that the Vertical Scroll portion is entirely optional. If you like your tag box to be long enough to fit all your tags, just delete that section.

Also note that in Firefox (and probably others), if you have a tag name without whitespace that is too long to fit horizontally, and you have added the scrollbars option, a horizontal scrollbar will appear that is super ugly:


I have no solution to this.