<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Structured Procrastination &#187; javascript</title>
	<atom:link href="http://blog.adamspiers.org/tag/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.adamspiers.org</link>
	<description>because there's always something more interesting than what you should be doing</description>
	<lastBuildDate>Sat, 05 May 2012 16:47:15 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>Hacking Blogger templates</title>
		<link>http://blog.adamspiers.org/2009/04/19/hacking-blogger-templates/</link>
		<comments>http://blog.adamspiers.org/2009/04/19/hacking-blogger-templates/#comments</comments>
		<pubDate>Sun, 19 Apr 2009 16:20:00 +0000</pubDate>
		<dc:creator>Adam</dc:creator>
				<category><![CDATA[geek]]></category>
		<category><![CDATA[hidden]]></category>
		<category><![CDATA[blog]]></category>
		<category><![CDATA[blogging]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[xml]]></category>

		<guid isPermaLink="false">http://wp.adamspiers.org/?p=9</guid>
		<description><![CDATA[The ultimate goal here was filtering of posts based on inclusion (or even better, exclusion) of posts with certain labels. (Read this post first for context.) [Update: before you think about imitating the following approach, you should know that I gave up with Blogger and switched to WordPress which is far more flexible and easy [...]]]></description>
			<content:encoded><![CDATA[<p>The ultimate goal here was filtering of posts based on inclusion (or even better, exclusion) of posts with certain labels.  (Read <a href="http://blog.adamspiers.org/2009/04/two-blogs-or-not-two-blogs.html">this post</a> first for context.)</p>
<p>[<strong>Update:</strong> before you think about imitating the following approach, you should know that <a href="http://blog.adamspiers.org/2009/05/03/goodbye-blogger-hello-wordpress/">I gave up with Blogger and switched to WordPress</a> which is far more flexible and easy to hack.]</p>
<p>Unfortunately it turns out that <a href="http://help.blogger.com/bin/topic.py?topic=12488">Blogger&#8217;s XML-based template layout system</a> is not quite as flexible as it first seems.  It&#8217;s almost superb, but has some key omissions:</p>
<ul>
<li>Flow control is limited to <code>&lt;b:if&gt;</code>, <code>&lt;b:else&gt;</code>, and <code>&lt;b:loop&gt;</code>.  Crucially, you can&#8217;t break out of a loop.</li>
<li>No writable variables of any kind.</li>
<li>Conditional testing via <code>&lt;b:cond&gt;</code> is extremely limited.  I kept expecting to find some comprehensive documentation for the <code>xmlns:expr</code> namespace (which is used via things like <code>&lt;a expr:href='data:blog.homepageUrl + "search/label/foo"'&gt;</code>), but it doesn&#8217;t exist, simply because all you can really do is simple comparisons using <a href="http://help.blogger.com/bin/answer.py?hl=en&amp;answer=47270">a limited set of data</a> and hardcoded strings.</li>
<li>There are no string-handling functions, and you can&#8217;t get access to the current <code>QUERY_STRING</code> to do any kind of parametrisation (for example, show some HTML saying which label you are currently viewing based on what comes after <code>/search/label/</code> in the current URL).</li>
<li>The box generated by the status-message includable is hardcoded to either be invisible or say &#8220;Showing label <span style="font-style: italic;">foo</span>. Show all posts&#8221;.  It cannot be customised.</li>
</ul>
<p><span id="more-9"></span>I briefly considered ditching the idea of fiddling with this XML, and just using Javascript and CSS to hide the posts I wanted hidden, but persevered and came up with a solution with the following ingredients:</p>
<ul>
<li>I will label all posts with at least one of &#8216;geek&#8217; or &#8216;main&#8217;, or possibly both.  Posts labelled &#8216;main&#8217; will appear on the default home page view.  This is unfortunately necessary since there is no general way of <span style="font-style: italic;">excluding</span> posts with a particular label, only <span style="font-style: italic;">including</span>.  The reason for this is that the only way to test for membership in a set of labels is by looping over all the post&#8217;s labels, and when you find the one you are including for, you output the post&#8217;s contents.  If you were trying to exclude, you&#8217;d need a temporary variable to flag when you&#8217;d found the excluded label, then use that outside the loop.</li>
<li>I used a <a href="http://groups.google.com/group/blogger-help-customizing/browse_frm/thread/9b7eb58b82305426?tvc=1&amp;q=filtering">standard</a> template modification <a href="http://blog.mobocracy.net/2007/06/filtering-blogger-by-label.html">trick</a> to limit visible posts on the home page to those labelled &#8216;main&#8217;.</li>
<li>I wrapped my custom code in stuff like <code>&lt;b:if cond='data:blog.pageType != "item"'&gt;</code> so that it wouldn&#8217;t mess with single-post views.</li>
<li>I figured out that <a href="http://blogs.adamspiers.org/search/label/">http://blogs.adamspiers.org/search/label/</a> is a URL which will yield a view containing all posts, circumventing the <code>&lt;b:if cond='data:blog.url == data:blog.homepageUrl'&gt;</code> equality test in my default view (<a href="http://blogs.adamspiers.org/search/">http://blogs.adamspiers.org/search/</a> also works)</li>
<li>I reimplemented the status-message box from scratch, using Javascript:
<pre class="brush: jscript; title: ; notranslate">
var labelsel = document.URL.match(/\/search\/label\/(.*)/);
var view = 'unknown';
if (document.URL == &quot;&amp;lt;data:blog.homepageUrl/&amp;gt;&quot;) {
view = 'default';
} else if (labelsel) {
switch (labelsel[1]) {
case &quot;&quot;: view = 'all';     break
case &quot;main&quot;:       view = 'default'; break
case &quot;geek&quot;:       view = 'geek';    break
default:           view = 'label';
}
} else if (document.URL.match(/\/search.*updated-min/)) {
view = 'time range';
} else {
view = 'unknown';
}

switch (view) {
case 'all':
document.write(&quot;Showing all posts.  &amp;lt;a href='/search/label/main'&amp;gt;Hide the geek stuff&amp;lt;/a&amp;gt; or &amp;lt;a href='/search/label/geek'&amp;gt;hide the non-geek stuff&amp;lt;/a&amp;gt;&quot;);
break;
case 'default':
document.write(&quot;Not showing computer stuff.  You can see &amp;lt;a href='/search/label/geek'&amp;gt;the geek stuff&amp;lt;/a&amp;gt;, &amp;lt;a href='/search/label/music'&amp;gt;music stuff&amp;lt;/a&amp;gt;, or &amp;lt;a href='/search/label/'&amp;gt;all posts together&amp;lt;/a&amp;gt;.&quot;);
break;
case 'geek':
document.write(&quot;Only showing computer stuff.&amp;lt;br/&amp;gt;&amp;lt;a href='/search/label/'&amp;gt;See all posts&amp;lt;/a&amp;gt; or &amp;lt;a href='/search/label/main'&amp;gt;just the non-geek stuff&amp;lt;/a&amp;gt;&quot;);
break;
case 'label':
document.write(&quot;Only showing posts labelled &amp;lt;strong&amp;gt;&quot; + labelsel[1] + &quot;&amp;lt;/strong&amp;gt;.&amp;lt;br/&amp;gt;&amp;lt;a href='/'&amp;gt;Go to default view&amp;lt;/a&amp;gt;&quot;);
break;
case 'time range':
document.write(&quot;Showing posts within a time range.&amp;lt;br/&amp;gt;&amp;lt;a href='/'&amp;gt;Go to default view&amp;lt;/a&amp;gt;&quot;);
break;
case 'unknown':
document.write(&quot;Unknown viewing mode, but don't panic.&quot;);
break;
default:
document.write(&quot;BUG: Don't know how to handle viewing mode &quot; + view);
}
</pre>
</li>
<li>I replaced the non-item part of the feedLinks includable with a hardcoded version.</li>
<li>I altered the label-listing widget to exclude the &#8216;main&#8217; label from being displayed.</li>
</ul>
<p>If you want to look at my complete layout template, it&#8217;s <a href="http://adamspiers.org/blogger/layout.xml">here</a>.</p>
<p><a class="a2a_dd a2a_target addtoany_share_save" href="http://www.addtoany.com/share_save#url=http%3A%2F%2Fblog.adamspiers.org%2F2009%2F04%2F19%2Fhacking-blogger-templates%2F&amp;title=Hacking%20Blogger%20templates" id="wpa2a_2"><img src="http://blog.adamspiers.org/wp-content/plugins/add-to-any/share_save_171_16.png" width="171" height="16" alt="Share"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://blog.adamspiers.org/2009/04/19/hacking-blogger-templates/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

