PersonasInteractive

Creating a Personas Gallery

• Overview

Overview

Personas are described in HTML by adding a snippet of JSON as an attribute to any HTML element. This element is usually a preview image. Then you use Javascript to indicate whether the item will preview or install a Persona.

Here's a very simple example:

<img alt="My Persona"
     data-browsertheme='{"id": "mypersona@mysure.com",
                         "name": "My Persona",
                         "headerURL": "colts/window-bg.png"}'
     src="mypersona.png"
     id="mypersona-preview" />

* Note that the JSON is surrounded by single quotes.

Here we have a preview image that contains the minimum amount of JSON to describe a Persona.

If we want to make the Persona have a preview associated with it, we use Javascript. In Firefox, there are custom DOM Events for previewing, resetting preview and installing. We need to associate those events with a particular action. Brand Thunder's made this convenient by creating a simple JavaScript library that performs the association. By calling "attachPersona" on a particular DOM node, all the work to connect with Firefox will be done for you.

personas.js (save link as...)

function attachPersona(node) {
    node.addEventListener("click", InstallBrowserTheme, false);
    node.addEventListener("mouseover", PreviewBrowserTheme, false);
    node.addEventListener("mouseout", ResetBrowserThemePreview, false); 
}

function dispatchPersonaEvent(node, action) {
    var event = document.createEvent("Events");
    event.initEvent(action, true, false);
    node.dispatchEvent(event);
}

function InstallBrowserTheme(event) {
    dispatchPersonaEvent(event.target, "InstallBrowserTheme");
}

function PreviewBrowserTheme(event) {
    dispatchPersonaEvent(event.target, "PreviewBrowserTheme");
}

function ResetBrowserThemePreview(event) {
    dispatchPersonaEvent(event.target, "ResetBrowserThemePreview");
}