?

Log in

No account? Create an account
 
 
murklinstest
Bi-Level Tags in Sidebar
June 26th, 2005 @ 12:53 am
Tags: ,

This is code to display your tags in a sidebar box. Similar to my multi-level tags, but simpler, it's designed for those who anticipate never needing more than two levels of tags. I think it might also be more efficient, but I made it mostly because I had an elusive bug in the multi-tags version once upon a time. Anyway, by naming your tags using a delimiter, for example animals:cats or animals:dogs, where the colon is the delimiter, you can display a two-level list of tags. If more than one delimiter is used (animals:cats:tabbies) all delimiters after the first are ignored. If you feel your tags list will take up too much space in the sidebar, there is example styling provided to limit the component's length and display a scrollbar.

While I wanted badly to make this code cleaner with functions, I read that that is technically not allowed in user and theme layers and can only be done by creating a new class. So I didn't do that. That means it's ugly. Since Flexible Squares is open source, if you're feeling more ambitious I suggest creating a new layout based on the Flexi-Squares code and adding this code to your layout as a separate function. That would allow you to extract some of the more repitious code in here into global utility functions, giving you a much cleaner solution.

This code needs way more testing so if you decide to take a chance and use it, but experience problems, let me know, please.

Colour coding:

  • Comments
  • Variables
  • Code that can be deleted to remove the scrollbar option.

function print_sidebar() 
{

#####   Config   #####

    # Specify your delimiter!  One char only -- extra chars get truncated.
    # Making the delimiter an empty string will result in an un-tiered list, 
    # which may be what you prefer, but this code is serious overkill for 
    # that purpose.
    var string delimiter = ":";

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

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

    var Page p = get_page();
    var string list = "";
    
    # mt:20050627
    # Replaced erroneous return code with if statement (otherwise
    # entire sidebar not printed at all if no visible tags!).
    if (size $p->visible_tag_list() > 0) 
    { 
        # mt:20050624
        # Can't use delimiter longer than one char, so truncate if necessary.
        if ($delimiter->length() > 1)    
        {
            $delimiter = $delimiter->substr(0, 1);
        }

        var bool list_started = false;
        var string list_item = "";
        var string[] prev_tags = ["", ""];

        # mt:20050624: Start the list.
        $list = """<ul class="tagList">"""; 
        
        foreach var TagDetail t ($p->visible_tag_list()) 
        {        
            var string[] tags;
             
            if ($t.name) 
            {  
                # mt:20050624
                # Split tags into a 1- or 2-element array on delimiter. Oh god, my
                # kingdom for a function.  Adapted from lj-user rane500's explode 
                # function to only care about first instance of the delimiter.
                var int array_counter = 0;
                var string buffer = "";
                var bool found_delimiter = false;
                foreach var string char ($t.name) 
                {
                    if (($found_delimiter == false) and ($char == $delimiter))
                    {
                        $found_delimiter = true;
                        $tags[$array_counter] = $buffer;
                        $array_counter = $array_counter + 1;
                        $buffer = "";
                    }
                    else 
                    {
                        $buffer = $buffer + $char;
                    } 
                }  
                $tags[$array_counter] = $buffer;
                
                # mt:20050624: Now examine the tags array to determine how to display the tag.
                if (size $tags == 1)
                {
                    # mt:20050624: This tag has no subtag.
        
                    if ($list_started)
                    {
                        # mt:20050624: Previous tag had a subtag, so must close its outstanding list. 
                        $list = $list + """</ul>""";
                        $list_started = false;
                    }
                    if ($prev_tags[0] != "")
                    {
                        # mt:20050624: This is not the very first tag in the list, so close off previous tag.
                        $list = $list + """</li>""";
                    }
                    # mt:20050624: Now add the new tag.
                    $list = $list + """<li class="tagItem"><a href="$t.url">$tags[0]</a>""";
                }
                else
                {   
                    # mt:20050624: This tag has a subtag.
        
                    $list_item = """<li class="tagItem"><a href="$t.url">$tags[1]</a></li>""";
                   
                    if (($tags[0] == $prev_tags[0]) and ($list_started))
                    {
                        # mt:20050624
                        # This tag fits under the previous tag's tier, and it is not the first item in that tier.
                        $list = $list + $list_item;
                    }
                    elseif (($tags[0] == $prev_tags[0]) and ($list_started == false))
                    {
                        # mt:20050624
                        # This tag fits under the previous tag's tier, and it is the very first item in that tier.
                        $list = $list + """<ul class="tagList">""" + $list_item;
                        $list_started = true;
                    }
                    elseif (($tags[0] != $prev_tags[0]) and ($list_started))
                    {
                        # mt:20050624: This tag initializes a new tier and must also close off the previous tag's list.
                        # $list_started retains its true state.
                        $list = $list + """</ul></li><li class="tagItem">$tags[0]<ul class="tagList">""" + $list_item;
                    }
                    elseif (($tags[0] != $prev_tags[0]) and ($list_started == false))
                    {
                        # mt:20050624: This tag initializes a new tier but does not have to close off a list.
                        
                        if ($prev_tags[0] != "")
                        {
                            # mt:20050624: This is not the very first tag in the list, so close off previous tag.
                            $list = $list + """</li>""";
                        }
                        
                        # mt:20050624: Now add the new tag.
                        $list = $list + """<li class="tagItem">$tags[0]<ul class="tagList">""" + $list_item;
                        $list_started = true;
                    }
                }       
                $prev_tags = $tags;           
            }        
            # mt:20050623: Next tag in the list!
        } 
    
        # mt:20050624: Close any outstanding lists.
        if ($list_started)
    	{
            $list = $list + """</ul>""";
        }	   
    	$list = $list + """</li></ul>""";
	   
        # mt:20050625: Enclose the entire list in an li tag as required by the layout.
        $list = """<li class="tagBox">""" + $list + """</li>""";

        # mt:20050623: Add styling to box title.
        $tag_title = """<li class="sbartitle">$tag_title</li>""";
    }

##### Specify Box Order #####
 
    # mt:20050627
    # Okay, now that's done, just print out all your sidebar boxes in the order you 
    # want, including a call for this one -- print_sidebar_box($tag_title, $list) --
    # nested within an if statement to prevent tags box from printing in the event 
    # of no visible tags.
    print_userpic();
    print_sidebar_blurb();  
    if ($list != ""){print_sidebar_box($tag_title, $list);}
    print_sidebar_linklist();
    print_sidebar_calendar();

#####   End Box Order   #####

}

function Page::print_custom_head()
{

    """
    <style type="text/css">

    /* List Alignment */
    /* Styles to ensure that the tag list is correctly aligned beneath the sidebox title */
    li.tagBox {padding-left: 0; margin-left: 0; list-style: none;}
    ul.tagList {padding-left: 0; margin-left: 0; list-style: none;}
    li.tagItem {padding-left: 15px; list-style: none;}
    
    /* Vertical Scroll */
    /* Need to shrink the list width to prevent horizontal scrollbar in Firefox. */
    /* Note this won't prevent it if your tags are super long, it will only */
    /* prevent it from displaying unnecessarily. For the pleasure of IE users */
    /* you can also colour any resulting scrollbars as you desire. */ 
    ul.tagList {width: 90%;}
    .tagBox {
      height: 200px;
      overflow: auto;
      scrollbar-arrow-color: #dae3b2;
      scrollbar-base-color: #ffffcc;
      scrollbar-face-color: #ffffcc;
      scrollbar-highlight-color: #dae3b2;
      scrollbar-darkshadow-color: #dae3b2;
      scrollbar-shadow-color: #dae3b2;
    }

    </style>
    """;
}  

Screenshots

Here's what you get without scrollbars:

Here's what you get with scrollbars (in Firefox):

Caveat

If you use the scrollbox styling and you have long tag names that don't employ enough whitespace to break over several lines, browsers other than IE will show a hideous horizontal scrollbar along the bottom.

July 28, 2005: Adjusted for new TagDetail class in Core Layer.

June 27, 2005: This code was edited to fix a bug. Heartfelt thanks go to lab_brat for detecting the problem and anchan218 for pinpointing the source of the trouble. Thanks also go out to all of you who are using this crazy experimental code!

 
( Post a new comment )
 
(no subject) - (Anonymous) on June 26th, 2005 09:48 pm (UTC)
 
murklinstestmurklinstest on June 26th, 2005 10:16 pm (UTC)
Yes. You can play around with the styles in the print_custom_head function under the List Alignment comment. To get bullet points on the sub-tags, but not the top level tags, you could try something like this:

li.tagBox {padding-left: 0; margin-left: 0; list-style: none;}
ul.tagList {padding-left: 0; margin-left: 0; list-style: none;}
li.tagItem {margin-left: 15px; list-style: none;}
.tagList li ul li {list-style: disc;}


Hope that helps!
 
(no subject) - psycho_gryph on July 4th, 2005 06:57 am (UTC)
 
(no subject) - murklinstest on July 4th, 2005 07:26 am (UTC)
 
(no subject) - psycho_gryph on July 4th, 2005 12:17 pm (UTC)
 
(no subject) - afuna on July 4th, 2005 12:54 pm (UTC)
 
 
Chichirianchan218 on June 27th, 2005 04:53 pm (UTC)
Just letting you know, there's an error in your code here:
    if (size $p->visible_tag_list() <= 0) 
    {
        return;
    }
This causes the function to escape before anything in the sidebar is printed at all if there aren't any visible tags. What you should do instead is put the following around all the parts that handle creating and printing out the "tags list" box:
    if (size $p->visible_tag_list() > 0) 
    {
        ...
    }
Just letting you know so you can edit the fixes into your posts. ^_^
 
murklinstestmurklinstest on June 27th, 2005 05:13 pm (UTC)
Oh, lord, that's what I get for adapting layout layer code to the user layer. Man, I miss functions. Okay, I'll fix that. Thanks so much for the heads up.

Do you know what the procedure is in this community for code fixes? When I edit the original, do I post a brand new FYI post, saying check out the new code?
 
Chichirianchan218 on June 27th, 2005 05:18 pm (UTC)
Not sure. This community is pretty new so I don't think standard proceedures for such things have been made. :/

There's already a later post on the error (which is how I caught it to begin with), so it may just be ok to tag that post as tags/sidebar (and hopefully get the original poster to change the subject to something more helpful) and just put an edit note at the end of your posts saying a code correction has been made.
 
 
Jady Arewararewar on July 2nd, 2005 05:38 am (UTC)
Thank you! XD
 
murklinstestmurklinstest on July 2nd, 2005 06:54 am (UTC)
You're welcome!
 
 
plus one skeletondelurker on January 29th, 2006 07:53 am (UTC)
Thanks! Now my sidebar is all pretty and organised, yay!
 
murklinstestmurklinstest on January 30th, 2006 05:25 am (UTC)
Oh, you adapted for Smooth Sailing. Nice!
 
(no subject) - delurker on January 30th, 2006 08:21 am (UTC)
 
(no subject) - murklinstest on January 30th, 2006 03:42 pm (UTC)
 
 
scotchsour: Chibi Youko Kuramascotchsour on July 9th, 2006 07:06 pm (UTC)
Sub title?
Since I plan on removing and starting over with my tags I thought this would be a great idea so I added this to my theme layer and it looks good but I'm probably missing something stupid. How do to create the sub title?

ex.
test
test: testing 1

so it should look like
test
--> testing 1

I kept the colon as the delimiter and created a new tag to see if that what I needed to do but like I said I missing something stupid. Help.
 
murklinstestmurklinstest on July 9th, 2006 08:31 pm (UTC)
Re: Sub title?
I can't tell what might be wrong. Can you link me to your theme layer? Also, if you want to assign some delimited tags to some public posts so that I can see them, that might help too. (Tags show up to the general public only when they're actually used on public posts.)
 
Re: Sub title? - scotchsour on July 9th, 2006 10:50 pm (UTC)
 
Re: Sub title? - murklinstest on July 10th, 2006 09:01 am (UTC)
 
Re: Sub title? - scotchsour on July 10th, 2006 02:25 pm (UTC)
 
Re: Sub title? - scotchsour on July 10th, 2006 02:32 pm (UTC)
 
Re: Sub title? - fickle_goddess on June 28th, 2007 01:38 pm (UTC)
 
Re: Sub title? - murklinstest on June 28th, 2007 08:00 pm (UTC)
 
Re: Sub title? - fickle_goddess on June 29th, 2007 07:55 am (UTC)
 
 
Alexandraalexandramuses on July 10th, 2006 08:36 am (UTC)
Thank you! This is groovy.
 
murklinstestmurklinstest on July 10th, 2006 09:02 am (UTC)
Glad you like! Thanks for commenting. :)
 
 
my mascara runs in constellations for you, dear.expatiates on December 20th, 2006 12:51 am (UTC)
i'm dying to use this code, but i'm sort of (totally, completely, embarassingly) clueless. would it be possible to use it with bloggish? i posted in ljdesigners but then i realized that it wouldn't hurt to ask the source.

thanks!
 
murklinstestmurklinstest on December 21st, 2006 03:51 am (UTC)
I haven't used Bloggish, but I don't see why we couldn't make it work. Make your theme layer viewable then comment back here with a link to the layer. I'll take a look at it and then we'll go from there. :)
 
(no subject) - expatiates on December 21st, 2006 05:01 am (UTC)
 
(no subject) - murklinstest on December 21st, 2006 08:53 pm (UTC)
 
(no subject) - expatiates on December 21st, 2006 09:10 pm (UTC)
 
(no subject) - expatiates on December 21st, 2006 09:11 pm (UTC)
 
(no subject) - murklinstest on December 21st, 2006 09:21 pm (UTC)
 
(no subject) - murklinstest on December 21st, 2006 09:22 pm (UTC)
 
(no subject) - expatiates on December 21st, 2006 09:25 pm (UTC)
 
(no subject) - murklinstest on December 21st, 2006 11:10 pm (UTC)
 
(no subject) - expatiates on December 21st, 2006 11:14 pm (UTC)
 
(no subject) - murklinstest on December 21st, 2006 11:20 pm (UTC)