Dev411 Blog

Several Typo themes have nice DHTML effects and I thought it would be useful to extract some of these for use in other themes. In particular I am interested in adding Modernist's DHTML Scriptaculous ScrollTo article slider to my modded Azure theme. You can see this in action at poocs.net which is currently running Modernist. This article covers the steps necessary to repurpose the DHTML article slider and involves templates, CSS and images. I've shown how Modernist does it and, where applicable, how I prefer to do it. It turns out to be pretty easy.

I've added this feature to my test system, however it's not here yet because I've decided to create a custom Dev411_Azure theme to handle the views (and controller/helper patches) for the growing number of mods I'm using rather than to continue manually hacking files under themes/azure and app. This should be here before long.

The things discussed here are the changes necessary to add the DHTML slider to a theme of your choice. For the files below the path part ... should be along the lines of "themes/#{mytheme}" but can be simply app if you don't mind losing your changes when the admin console is used to change themes.

I'll show where my preferences deviate from Modernist's implementation. My pet peeve is the use of the extra @ta instance varaible since it's unnecessary and the name isn't self-explanatory. I'll use each_with_index with article_index as the index name.

• .../views/articles/index.rhtml: in order to know the which article is next, Modernist introduces a counter called @ta in the index.rhtml file. I'll probably name this something more intuitive like @article_index but here's the code from: themes/modernist/views/articles/index.rhtml

  Modernist:

  <% @ta=0 %>
  <% for article in @articles -%>
    <%= render_partial "article", article %>
    <% @ta+=1 %>
  <% end -%>

  My preference:

  <% @articles.each_with_index do |article,article_index| -%>
    <%= render :partial => "article",
               :object  => article,
               :locals  => { :article_index => article_index }
    %>
  <% end -%>

  • use each_with_index instead of creating an extra counter since the index is already available
  • use render instead of render_partial just because the former was indicated as preferred on the #typo channel
  • use self-explanatory variable names: article_index instead of ta

  • I would actually prefer to send the article object to the render method as a local variable since that's what it seems to be and I don't see a reason to treat it differently.

    :locals => {
        :article => article
        :article_index => article_index
    }

    instead of as :object but I can't be sure that will always work since article is also the name of the template and there's some magic there.

• .../views/articles/_article.rhtml: there are two pertinent changes in this file: (a) the Scriptaculous ScrollTo controls and (b) adding a DOM id to the article header that can be navigated to.

  • ScrollTo controls: In the Modernist theme, the Scriptaculous controls are embedded directly in _article.rhtml as follows. Another option is to put it in a separate _article_flip.rhtml template include but I'm not sure if this will be automatically copied in by Typo's theme admin manager. In any event, the following should be added to the top of _article.rhtml either directly or as an include. Notice the innerHTML of the links below is a space. The links will be rendered as graphics once the CSS is enabled.

    Modernist:

    <div class="flip">
    <a href="#header" onclick="new Effect.ScrollTo('header'); 
      return false" class="flip-top"
      title="Scroll to the top"> </a>
    <% if @ta < (@articles.size-1) %>
    <a href="#post-<%= @ta+1 %>"
      onclick="new Effect.ScrollTo('post-<%= @ta+1 %>');
      return false" class="flip-next"
      title="Scroll to the next post"> </a>
    <% end %>
    <a href="#menu" onclick="new Effect.ScrollTo('menu');
      return false" class="flip-menu"
      title="Scroll to the menu"> </a>
    </div>

    The Modernist theme places the menu at the bottom of the page so having a control go to menu makes sense. For a more traditional theme like Azure, I added a <div id="bottom"> around <p id="pagination" to indicate the bottom and changed the last link above accordingly.

    My preference:

    • Change the @ta references to article_index as above

  • article anchor: The next change is to add a DOM id with the article index to each article's title:

    Modernist:

    <h3 id="post-<%= @ta %>">
      <%= article_link article.title, article %>
      <%= author_link(article) %>

    My preference:

    <h3 id="post-<%= article_index %>">

• CSS: Copy the CSS definitions that begin with .flip to one of your CSS files:

  .flip {
          float: left;
          position: absolute;
          opacity: 0.9;
          margin: 0 0 0 -65px;
  }
  
  .flip a {
          display: block;
          width: 25px;
          height: 16px;
          padding: 4px;
          background-position: center center;
          background-repeat: no-repeat;
  }
  
  .flip-menu { background-image:
    url('/images/theme/flip-bottom-0.gif'); }
  .flip-next { background-image:
    url('/images/theme/flip-down-0.gif'); }
  .flip-top { background-image:
    url('/images/theme/flip-top-0.gif'); }
  .flip-comments { background-image:
    url('/images/theme/flip-comments-0.gif'); }
  .flip-post { background-image:
    url('/images/theme/flip-post-0.gif'); }
  .flip-menu:hover { background-image:
    url('/images/theme/flip-bottom-1.gif'); }
  .flip-next:hover { background-image:
    url('/images/theme/flip-down-1.gif'); }
  .flip-top:hover { background-image:
    url('/images/theme/flip-top-1.gif'); }
  .flip-comments:hover { background-image:
    url('/images/theme/flip-comments-1.gif'); }
  .flip-post:hover { background-image:
    url('/images/theme/flip-post-1.gif'); }

• control images: the last step is to copy the control images to the right location. These are the flip-post-[01].gif images referenced in the CSS. Copy these to the correct directory.

That's it, you should be able to get up and running.