Corners of Sakai 3 – Pseudo Hierarchy

Suppose you want to relate several Sakai sites together. Some use cases:

1. a project site membership has a created a series of subsites to take care of committee work
2. you want to allow users of Fall 2008 course site access to all previous course sites for same course. You can take care of the access issues – but how to make it easier for them to find these other sites?
3. a department needs to provide a set of documents to all courses in it. The sites of these courses need to appear as “children” of the departmental site.
4. etc.

What to do? Pseudo-hierarchy might fit the bill. Run up at an airport by Chuck Severance it establishes a user-interface-only relationship between the sites. This takes place in a breadcrumb that displays below the site navigation paraphernalia.

The full details are here: sakai_pseudo_hierarchy.doc.

The rendering bits are in any version of Sakai after 2.4.x. – to customize for your institution – add the following lines (36-53 in Sakai 2.5.x) from the default.css and then change to suit.

/*site hierarchy breadcrumb*/
#siteHierarchy{
        clear:both;
        float:none;
        margin:0;
        list-style: none;
        padding:.5em 0;
}
/*style the standard breadcrumbseparator
   can set display:none if needed because the
   list-style is taking care of it*/
.breadSeparator{
}
#siteHierarchy li{
        display:inline;
}
#siteHierarchy li a, #siteHierarchy li a:visited{
        color:#09c;
}

You can also add your own separator via the language bundle.

Print previews on the cheap

1. Put this in the document (as well as a link to the jquery file).

<script type="text/javascript">
  $(document).ready(function(){
    setupLinks();
    setupPrintPreview();
  });
</script>

2. Put this in your external javascript:

function setupLinks(){
  $('a.print-window').click(function(){
     var w = window.open(this.href, 'printwindow', 'width=600,
          height=400,scrollbars=yes,resizable=yes');
     w.focus();
     return false;
  });
}

3. And this

function setupPrintPreview(){
  if (window.name == 'printwindow') {
   // all the settings below would need to be edited
    $('.portletBody *').css({
        color: '#000'
    });
    $('.bookList').show();
    $('.collapse').show();
    $('.expand').hide();
    $('.noPrint').hide();
    $('.portletBody').css({
        padding: '1em',
        fontSize: '.85em'
    });
    // provide a print link
    $("h3").append('a link with an
        'javascript:window.print()' href value);
  }
}

In (1) we are calling a function (2) that bind the onclick event to any link with a class of ‘print-window’ – opening the current document in a named window. In (3) – if a window matches the given name, then massage the elements for the print medium, hide elements that were classed as ‘noPrint’ (formish things, whatever), and add a link with an ‘javascript:window.print()’ href value to the DOM.

The end. Lots of room for improvement, of course – the massaging would be done best by swapping the stylesheets, for example.