Labs/Personas/Previewing Code

HTML

The Personas JavaScript binds to whatever elements you pass it, but it expects a persona attribute on those elements in the following format (copied from getpersonas.com):

<img class="preview persona" 
src="/static/9/5/44495/preview_featured.jpg" 
persona="{"id":"44495",
"name":"Generation Fame",
"accentcolor":"#663300",
"textcolor":"#fce8c3",
"header":"9\/5\/44495\/Persona_Header_fame-final.png",
"footer":"9\/5\/44495\/fame_Persona_footer-final.png",
"category":"Film and TV",
"description":"A dynamic reinvention of the Oscar\u00ae-winning film and globally successful TV series, FAME captures the visceral excitement and explosive energy of young artists and performers struggling to prove their talent and find their own\u2028voice. Caught up in the intense atmosphere of a performing arts high school\u2028in New York, they confront both the tantalizing promise of success, and the\u2028challenges of thriving in a highly competitive environment.\r\nhttp:\/\/www.generationfame.com",
"author":"MGM",
"detailURL":"http:\/\/www.getpersonas.com\/persona\/44495",
"headerURL":"http:\/\/www.getpersonas.com\/static\/9\/5\/44495\/Persona_Header_fame-final.png",
"footerURL":"http:\/\/www.getpersonas.com\/static\/9\/5\/44495\/fame_Persona_footer-final.png",
"previewURL":"http:\/\/www.getpersonas.com\/static\/9\/5\/44495\/preview.jpg",
"iconURL":"http:\/\/www.getpersonas.com\/static\/9\/5\/44495\/preview_small.jpg"
}">

You can copy the JSON blob from any persona on getpersonas.com. Note that HTML special characters have to be escaped in the JSON record when it is placed inside the persona attribute, although this is not shown in the example above. For example, the quotation mark, which appears many times in the example above, needs to be escaped to the character entity ". Note that the attribute name is data-browsertheme for the built-in lightweight theme behavior in Firefox 3.6+.

JavaScript

jQuery required

Grab http://people.mozilla.org/~rdoherty/personasfunctions.js and add it to your JS file.

To just preview personas, all you need to do in your page is this:

<script type="text/javascript">
$(function() {
    $("img.persona").previewPersona();
});
</script>

(assuming all images with class="persona" have a persona attribute) This will preview personas on mouseover/out.

Installing Personas

Since this probably won't be used for most sites, it's easiest to do it this way:

<script type="text/javascript">
$("img.persona").click(function(event) {
                dispatchPersonaEvent('SelectPersona', event.currentTarget);
                return false;
            });
</script>

If you need detection if the user has personas installed, etc, check $.fn.personasButton in http://www.getpersonas.com/static/js/script.js