Schinckel.net

It seems like the ABC is having some sort of an issue with media files: no new files have been added to the server, nor have podcast feeds been updated. The old media files are still there, but even in cases where the links to the files have been put on pages, the media files themselves aren’t available. Saturday’s programs were all updated (All In The Mind, By Design, Radio Eye and The Science Show, for instance), as was Ockham’s Razor at around lunchtime, but nothing since them has been. The feeds that should be there are: Background Briefing, National Interest, Rear Vision, Street Stories and The Night Air.

Ages ago, I wrote about how to (a) pass Pages through the Post template, and (b) use Smarty Tags in special Pages. I had an Archives page, that had a list of every Post I’d ever made. It’s getting kind of long, so I wrote a script that parses this list, and creates a structured list, dividing the posts up according to the month they were published. It then makes this list so that you can hide/show a whole month’s worth of posts in one go. In the Posts Template, I have the following lines:

    {elseif $smarty.server.REQUEST_URI == '/archives/' || $smarty.server.REQUEST_URI == '/archives'}
        <ul>{get_archives type='postbypost' limit='' format='html'}</ul>{$content}

Note that this is out of context: see my whole Posts template file for details. This is in the actual Page:

    <script type="text/javascript">
    var months = new Array("","January","February","March","April","May","June","July","August","September","October","November","December")
    function getYear(li){
        return li.innerHTML.split("/")[3]*1;
    }
    function getMonth(li){
        return li.innerHTML.split("/")[4]*1;
    }
    
    function showKids(id){
        var unit = getById(id);
        for (var i=1;i<unit.childNodes.length;i++){
            unit.childNodes[i].style.display="block";
        }
    }
    function hideKids(id){
        var unit = getById(id);
        for (var i=1;i<unit.childNodes.length;i++){
            unit.childNodes[i].style.display="none";
        }
    }
    function toggleKids(id){
        var unit = getById(id);
        if (unit.childNodes[1].style.display == "none")
            showKids(id)
        else
            hideKids(id)
    }
       
    function Restructure(){
        var pc = getByClass("post-content")[0];
        var items = pc.getElementsByTagName("li");
        var list = items[0].parentNode;
        var month_nodes = document.createElement("ul");
        
        var month_node = document.createElement("li");
        month_node.className = "month";
        month_node.innerHTML = months[getMonth(items[0])] + " " + getYear(items[0]);
        month_node.id = month_node.innerHTML.replace(" ","_");
        month_node.innerHTML = "<h3><a onclick='toggleKids(\""+ month_node.id +"\");'>" + month_node.innerHTML + "</a></h3>";
        month_nodes.appendChild(month_node);
        
        var this_month;
        var next_month;
        
        while (items.length) {
            this_month = items[0];
            next_month = items[1];
            month_node.appendChild(this_month);
            if (next_month && (getMonth(this_month) != getMonth(next_month))){
                month_node = document.createElement("li");
                month_node.className = "month";
                month_node.innerHTML = months[getMonth(next_month)] + " " + getYear(next_month);
                month_node.id = month_node.innerHTML.replace(" ","_");
                month_node.innerHTML = "<h3><a onclick='toggleKids(\""+ month_node.id +"\");'>" + month_node.innerHTML + "</a></h3>";
                month_nodes.appendChild(month_node);
            }
        }
        
        pc.replaceChild(month_nodes,list);
        
        var all = getByClass("month")
        for (var i=0;i<all.length;i++) hideKids(all[i].id);
    }
    
    Restructure();
    </script>

You’ll notice a couple of strange comments, and what looks to be a closing all tag: these are because the Blogsome post editor kindly closes tags for me, even when they aren’t tags!

[Movin’ Out (Anthony’s Song)][5] • [Billy Joel][6] • [Greatest Hits][7] ★★

I’m off to Karaoke now, I might have to sing that song!

[5]: itms://phobos.apple.com/WebObjects/MZSearch.woa/wa/advancedSearchResults?songTerm=Movin’+Out+(Anthony’s+Song)&artistTerm=Billy+Joel [6]: itms://phobos.apple.com/WebObjects/MZSearch.woa/wa/advancedSearchResults?artistTerm=Billy+Joel [7]: itms://phobos.apple.com/WebObjects/MZSearch.woa/wa/advancedSearchResults?albumTerm=Greatest+Hits&artistTerm=Billy+Joel

I spent hours last night working on this, and a fair bit of time today. I think I’ve got it pretty good, now. See my Templates page for an example. Now, instead of trying to get the data to appear immediately, which I could not do, I have four buttons that the user can select between the various template files, and it shows them in the <textarea> underneath.

    <script type="text/javascript">
        var req1 = new XMLHttpRequest(); 
        req1.open("GET", "/templates/index.html",true); 
        req1.send(""); 
        var req2 = new XMLHttpRequest(); 
        req2.open("GET", "/templates/post.html",true); 
        req2.send(""); 
        var req3 = new XMLHttpRequest(); 
        req3.open("GET", "/templates/comments.html",true); 
        req3.send(""); 
        var req4 = new XMLHttpRequest(); 
        req4.open("GET", "/templates/wp-layout.css",true); 
        req4.send(""); 
    
    function Display(text){
        document.getElementById('template').innerHTML = text;
    }
    </script>
    
    <p>This is the current, up to date version of my conversion of Patricia Müller's Connections Template for Blogsome.</p>
    
    <p>There are four files that Blogsome uses, you need to ensure that the correct data goes into each.  Each one also has, by default some features enabled.  There is commenting throughout that will enable you to disable that which you do not want.</p>
    
    <p><a class="button" onclick="Display(req1.responseText);">Main Page</a> 
    <a class="button" onclick="Display(req2.responseText);">Post</a> 
    <a class="button" onclick="Display(req3.responseText);">Comments</a> 
    <a class="button" onclick="Display(req4.responseText);">Style Sheet</a></p>
    
    <p><textarea id="template" wrap="off"  style='width:95%;height:500px;'>Click on a button above to display the template contents.</textarea></p>

I probably could have saved the data to variables, and reused the XMLHttpRequest item, but then I would have had to find some way to wait for the response code, and that kept failing for me.

Kissing You • Des’ree • []4 ★★★½

I bought Missing Sync for PalmOS - probably a bad decision as it’s not really that much better than the standard Palm Syncing software. Oh, it claims to be heaps better, but there are just too many things that don’t quite work right. For instance, it makes duplicate entries on my Palm of Read-Only calendars. I use but one of these, that has all of the Australian Public Holidays in it. However, I’ve stopped syncing, as by the end of a month I have 30 copies of each holiday in the database. Not cool. So, surely there’s a way (a-la iTunes/iPod syncing) to only choose some of the items. As it turns out, there is. If you select the Conduit (Events) and then Choose Settings…, you can choose to only sync selected calendars. Except you can’t get at anything other than the first 4 calendars. The scroll bar in this window is broken. Makes it pretty hard to deselect the ones you don’t want. I got around this by renaming my Holidays calendar to Aus Holidays, but I shouldn’t have to do this.

Now, I’m not talking here about using the “Show Source” feature of a Web Browser. Anyone worth even a quarter of a pinch of salt knows how to do that. What I’m trying to do is display the source of a web page as text/plain within another web page. This is so I can have a current version of my template available on a page of my blog. I’ve put a version up that I need to update, and I make so many changes to the template this is unsustainable.

Under Blogsome, the template files can be found in the /templates/ directory, and there are four of them: index.html, wp-layout.css, post.html and comments.html. Of these, only wp-layout.css is a plain text document, the rest are (naturally) text/html.

Now, HTML has a nice little feature called <object>, which should be able to display anything the browser can render. For example:

<object data="/templates/index.html"> </object>

Will display a rendering of the Main Page template. It looks somewhat ugly, since it’s not been pre-processed by the Smarty Templating engine, so is somewhat useless - it’s neither the source nor the full result:

<object data="/templates/index.html"codetype="text/plain"></object>

    <h3 class="comments">Main Page (index.html)</h3>
    <textarea id="index.html" wrap="off"  style='width:95%;height:200px;'>
    </textarea>

    <h3 class="comments">Style Sheet (wp-layout.css)</h3>
    <textarea id="wp-layout.css" wrap="off" style='width:95%;height:200px;'>
    </textarea>

    <h3 class="comments">Post (post.html)</h3>
    <textarea id="post.html" wrap="off" style='width:95%;height:200px;'>
    </textarea>

    <h3 class="comments">Comments (comments.html)</h3>
    <textarea id="comments.html" wrap="off" style='width:95%;height:200px;'>
    </textarea>

    <script type="text/javascript">

    var div1 = document.getElementById("index.html");
    var req1 = new XMLHttpRequest();
    req1.open("GET", "/templates/index.html",true);
    req1.send(""); 

    var div2 = document.getElementById("post.html");
    var req2 = new XMLHttpRequest();
    req2.open("GET", "/templates/post.html",true);
    req2.send(""); 

    var div3 = document.getElementById("comments.html");
    var req3 = new XMLHttpRequest();
    req3.open("GET", "/templates/comments.html",true);
    req3.send(""); 

    var div4 = document.getElementById("wp-layout.css");
    var req4 = new XMLHttpRequest();
    req4.open("GET", "/templates/wp-layout.css",true);
    req4.send(""); 

    function Source(){
        if (req1.status+req2.status+req3.status+req4.status == "800"){
            div1.innerHTML = req1.responseText
            div2.innerHTML = req2.responseText
            div3.innerHTML = req3.responseText
            div4.innerHTML = req4.responseText
        } else
            setTimeout("Source();",500);
    }

    Source();
    </script>

    <h2><a href="/categories/">Main Categories</a></h2>
    <ul>
        {capture name=cats}{list_cats optionall='1' all='All' sort_column='name' optioncount='0' children='0' hierarchical='1' feed_image='/images/feedicon10x10.gif'}{/capture}
        {$smarty.capture.cats|replace:"/></a>":"alt='Live Bookmark (RSS Feed)' /></a>"}
    </ul>

    <h2>Links Dropdown</h2>
    <ul>
        <li><form name="linksform" action="" method="post" style="margin: 0px; padding: 0px;">
            <select id="link_list">
            <option value=''>Select Link to View</option>
            {capture name="linklist"}{get_links}{/capture}
            {$smarty.capture.linklist|replace:'<a':'<option'|replace:'</a><br />':'</option>'|replace:'href':'value'}
            </select>
            <input type="button" class="button" value="Go" onclick="window.location = (document.forms.linksform.link_list[document.forms.linksform.link_list.selectedIndex].value);" />
        </form></li>
    </ul>

    <div class="post {is_aside}{if $is_aside=='true'}Asides{/if}" id="post-{the_ID}">

    <div class="post {the_category seperator=' '}" id="post-{the_ID}">

    {is_aside}
    {if $smarty.server.REQUEST_URI|truncate:17:'':1 == '/category/asides/'}
        {assign var=is_aside value=false}
    {/if}
    
    <div class="post {if $is_aside=='true'}Asides{/if}" id="post-{the_ID}">

    {capture name=title}{single_post_title}{/capture}
    {if $smarty.capture.title != ''}
        {assign var=is_aside value=false}
    {/if}