?

Log in

[user/theme] - [smoothsailing] - [bi-level tags in sidebar] - S2 Layers [entries|archive|friends|userinfo]
S2 Layers

[ website | advanced customization ]
[ userinfo | livejournal userinfo ]
[ archive | journal archive ]

Links
[Links:| how to post tags page ]
[affiliated communities| fblayers ]

[user/theme] - [smoothsailing] - [bi-level tags in sidebar] [Nov. 21st, 2005|11:41 am]
S2 Layers

s2layers

[kunzite1]
[Tags|, , , ]

in response to simons_flower's s2smoothsailing post.
this code is a quick'n'dirty conversion of murklinstest's s2flexisquares bi-level tags in sidebar.
the following set commands should be added to your user layer and replace any that are currently in there.
set layout_sidebox_profile_visibility     = "1";
set layout_sidebox_latestmonth_visibility = "2";
set layout_sidebox_links_visibility       = "3";
set layout_sidebox_summary_visibility     = "4";
set layout_sidebox_multisearch_visibility = "5";
set layout_sidebox_freetext_2_visibility  = "6";
set layout_sidebox_tags_visibility        = "hide";
the following function overrides should be placed into a theme layer. if you are using one of the system-provided theme layers, you'll need to move those set commands for the colors into your user layer, create a new theme layer, place this code into it, and attach the new theme layer to your style.
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. */
    ul.tagList {width: 90%;}

    </style>
    """;
}

function Page::lay_print_sidebar_freetextbox_2() {

#####   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   #####

  if ($list != ""){
    $this->lay_print_sidebox_top($tag_title);
    print $list;
    $this->lay_print_sidebox_bottom();
  }
}
linkReply

Comments:
[User Picture]From: delurker
2006-01-29 07:43 am (UTC)
Thanks for posting this - it's just what I've been looking for! The only thing is, being unexperienced with advanced cusomisations, I can't figure out how to get the bi-level part working. All I can manage is getting them in a list format, which is great, but headings would be nice! I don't know if you're able (or willing) to help me, but I'd be much appreciative if you could.

When I put a single character in 'var string delimiter = ":";' (r, if that matters) :
# 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 = ":";

My tags wound up splitting into bi-level whenever there was an 'r' in my tags, which was quite hard to navigate and not what I was trying to do at all! Should I be using a different delimiter? And if so, do I need to put that delimiter in my tags? (I presume so.) If I want to have a number of different headings to group my tags, how do I do that? Am I even making sense? (I hope so.)
Thanks once again for posting this!
(Reply) (Thread)
[User Picture]From: delurker
2006-01-29 07:47 am (UTC)
And of course, as soon as I ask, I figure it out. (colon = delimiter = headdesk.)
Sorry to bother you.
(Reply) (Parent) (Thread)
[User Picture]From: kunzite1
2006-01-29 07:50 am (UTC)

headdesks that lead to figuring things out so that i don't have to do any work are my favorite type of headdesks. :)
(Reply) (Parent) (Thread)
[User Picture]From: delurker
2006-01-30 08:20 am (UTC)
At least this was a speedy headdesk. :)
(Reply) (Parent) (Thread)
From: anoneknewmoose
2006-07-22 09:12 am (UTC)
(here by way of masterslacker)

Thank you for this!

Dunno if you'll want to change it or not, but people might want to know that it's easy to add in vertical scrolling if you have a huge number of tags like I do:

Add (as in the original code)
.tagBox {
     height: 500px;
     overflow: auto;
     }
to the end of the stylesheet.

Then put the unordered tag list in a div, like so:

Change $list = """<ul class="tagList">"""; to $list = """<div class="tagBox"><ul class="tagList">""";.

Close the div by changing $list = $list + """</li></ul>"""; to $list = $list + """</li></ul></div>""";.


:)
(Reply) (Thread)
[User Picture]From: anolinde
2007-02-02 01:29 pm (UTC)
Hey,

I'm trying to use this code, but whenever I implement the set layout_sidebox_tags_visibility = "hide"; part, all of my tags disappear. I don't really understand why we're supposed to put this into our user layers, because it doesn't make the tags display at all (hence, the hide part). Furthermore, what happens if we have a bunch of customizations already in the user layer? Do we still have to delete those and replace them with the code you provided at the beginning of this entry?

=( In any case, it's not working for me right now. My tags are visible (because I changed "hide" to "3"), but they're all centered and not in a list format. Any help would be appreciated!
(Reply) (Thread)
[User Picture]From: anolinde
2007-02-02 01:35 pm (UTC)
Oh, nevermind, I figured it out! Thanks! =D
(Reply) (Parent) (Thread)
[User Picture]From: alexandramuses
2007-02-05 06:17 pm (UTC)
Thank you, this is fabulous.

One problem: I have two boxes of free text, apart from the one taken up by the tag list, and I can't get them to display. I've used
set layout_sidebox_freetext_3_visibility  = "4";
, and made sure that the text is in free text box #3, but it's just not showing.

Any advice?

Thanks in advance!
(Reply) (Thread)
[User Picture]From: alexandramuses
2007-02-05 06:19 pm (UTC)
*headthunk* Of course, right after I posted this, they started showing up. Maybe I just needed to mess with it and compile it a few extra times to make it work.

Sorry to bother you with comment spam!
(Reply) (Parent) (Thread)
[User Picture]From: kunzite1
2007-02-05 11:48 pm (UTC)
i totally don't understand the logic with the sidebar boxes in this layout.

the component format makes more sense. but with the 14 or whatever boxes available to this layout would make that rather cumbersome.

glad to know that you figured it out!
(Reply) (Parent) (Thread)
[User Picture]From: agneson9
2007-02-13 08:48 am (UTC)
What should be added for multi (2+) level tags?
(Reply) (Thread)
[User Picture]From: kunzite1
2007-02-14 03:06 am (UTC)
see if this breaks.
(Reply) (Parent) (Thread)
[User Picture]From: carnifinda
2007-06-08 07:14 pm (UTC)
I've just discovered this and thank you, it's very useful.
However, I would have liked to know if it was possible to a) remove the bullet of the first level and b) make the indentation of the second level a tiny bit smaller. I think there are enough unlocked posts in my journal so that you can see what I'm talking about? The first bullet (the full one) is useless for me and pushes my tag list a bit too much to the right.
I suppose it could be done with CSS? Unfortunately, I don't know SS well enough to find the right code for this particular function.
Thank you very very much in advance!
(Reply) (Thread)
[User Picture]From: anolinde
2007-07-02 05:03 pm (UTC)
Is there a way to do this for the tags page instead of the sidebar?
(Reply) (Thread)
[User Picture]From: naeko
2009-06-22 04:33 pm (UTC)
Hi! I know this is years after you posted this, but I'm hoping you can help. When I try and use this override, it doesn't work and it says the following in the Theme Compiler Output box:

S2 Compiler Output at Mon Jun 22 16:29:48 2009
Error compiling layer:
Compile error: line 86, column 1: Unknown token encountered while parsing layer: [TokenPunct] = {
S2::Layer, S2/Layer.pm, 67
S2::Compiler, S2/Compiler.pm, 27

Context
82: set layout_sidebox_multisearch_visibility = "5";
83: set layout_sidebox_freetext_2_visibility = "6";
84: set layout_sidebox_tags_visibility = "hide";
85:
86: {
87: """
88:
89:
90: /* List Alignment */

What am I doing wrong?
(Reply) (Thread)