Beware: This is currently just a placeholder. This project does not exist yet in a usable form.

Assorted JavaScript widgets for rich digital collection delivery.

TODO

• Books
• Audio
• Misc

• contactus — simple feedback form
• toolbar — a bar of buttons

A typical widget consists of five files plus any additional static assets.

widgets/helloworld/
    README.md
    config.json
    _helloworld.erb
    helloworld.css
    helloworld.js
    images/
        background.png

Each widget should have a README file with short description of it's purpose and the configuration options it supports.

HelloWorld Widget
=================

Displays a friendly greeting.

## Options

- message: the text to display

{
    "js": [
        "widgets/helloworld/helloworld.js"
    ]
}

Use ERB syntax like <%= foo %> for server-side templating and JST syntax like ${foo} for the client-side. It's normal to mix both in the same file.

<link rel="stylesheet" type="text/css" href="<%= app_path %>widgets/helloworld/helloworld.css"/>
<div class="pavo-widget helloworld" id="helloworld">
  <div class="saying-hi-to-the-world"></div>
  
  <div id="helloworld_message_template"><!--
    <p>${message}</p>
  --></div>
</div>

All widgets must have a top-level class of .pavo-widget.

.pavo-widget.helloworld p {
    text-decoration: blink;
}

require([], function() {
  PAVO.widgets.helloworld = function (wid) {
    // Variables
    var rootel = "#" + wid;

    // Events
    function addListeners() {
    }

    // Methods

    // Initialisation
    function init() {
      addListeners();
      $(".saying-hi-to-the-world", rootel).html(PAVO.templates.render("helloworld_message_template", {
 message: "Hello world"
      }));
    }
    init();
  }

  PAVO.widgets.informLoaded("helloworld");
});

Core dependencies:

• RequireJS for modularity (MIT+BSD)
• jQuery for events and DOM manipulation (MIT+GPL)
• Ruby for server-side templates (Ruby+BSD)
• TrimPath JavaScript Templates for client-side templates (APL+GPL)
• html5shiv for HTML5 element tags in IE (MIT+GPL)
• css3-mediaqueries-js for compatibility with older browsers (MIT)
• 1140 CSS Grid for layout (CC BY 3.0)

For audio widgets:

• jPlayer for audio playback (MIT+GPL)
• jQuery Splitter for split transcripts views (MIT+GPL)
• jQuery ScrollTo for scolling transcripts (MIT+GPL)
• jPaginate for paginating transcripts (Codrops)
• jQuery Expander for showing work details (MIT+GPL)
• jQuery Highlight for highlighting transcript search results (MIT)

TODO