Tritium Function Design for Responsive/JavaScript Frameworks

Question

I'm using Moovweb/Tritium to make a regular desktop site responsive using the Zurb Foundation framework.

As part of this I'd like to create helper functions for enabling Foundation widgets like the the Uranium integrations already in Moovweb. But some of the Foundation components, like the top bar have complex layouts that require more configuration than seems reasonable in a single function call.

For example, enabling the top bar requires something like the following structure:

# Use the foundation topbar
insert_top("nav", class: "top-bar") {

  # Create the title area
  insert("ul", class: "title-area") {
    inject("<li class='name'><h1><a href='/'>Website Name</a></h1></li>")
    inject("<li class='toggle-topbar menu-icon'><a href='#'><span>Menu</span></a></li>")
  }

  # Grab the header links and put them in the top bar
  insert("section", class: "top-bar-section") {
    insert("ul", class: "left") {

      # Move the original header links here
      move_here("//span[@class='pagetop']//a"){
        wrap("li")
      }
    }
  }
}

What's the right way to abstract this into reusable tritium functions that minimize boilerplate yet allow for flexibility?

score 3 · Answer 1 · answered Jun 20 '13 at 05:20

In my use case, I handled this by breaking the layout into related functions that get nested into each other. So the original code above becomes:

# enable the foundation top bar
zurb_topbar() {    
  zurb_topbar_title("Website Name", "Menu", "menu-icon")
  zurb_topbar_left() {
    move_here("//span[@class='pagetop']//a"){
      wrap("li")
    }        
  }
}

where the functions are defined as:

@func XMLNode.zurb_topbar() {   
    insert_top("nav", class: "top-bar") {
      yield()
    }
}

@func XMLNode.zurb_topbar_title(Text %name, Text %menu_btn_name, Text %menu_icon) {
    insert("ul", class: "title-area") {
      inject("<li class='name'><h1><a href='/'>" +%name +"</a></h1></li>")
      inject("<li class='toggle-topbar "+%menu_icon+"'><a href='#'><span>"+%menu_btn_name+"</span></a></li>")
    }
}

@func XMLNode.zurb_topbar_left() {
  insert("section", class: "top-bar-section") {
    insert("ul", class: "left") {
     yield()
    }
  }
}

You could imagine a zurb_topbar_right function that could be optionally used for defining the right section of the topbar.

Note for the zurb_topbar_title the hrefs and structure of the <LI>s are hardcoded because it's unlikely you'll typically want to point href anywhere but root. Instead the likely parts that you'll want to customize are the title of the topbar, the title of the Menu button, and the presence of the menu bar icon.

Whereas for zurb_topbar_left the <LI> content is probably going to be filled by the programmer, hence the yield.

The tradeoff appears to be that automatically enforcing that the right combination of functions are used in the right way becomes trickier, i.e.

you have to use both zurb_topbar and zurb_topbar_title
but only one of zurb_topbar_left or zurb_topbar_right
zurb_topbar must include zurb_topbar_left
etc., etc.

Tritium Function Design for Responsive/JavaScript Frameworks

1 Answers1