Elementar jQuery plugin [DRAFT]

elementar.jquery.js

/* Elementar jQuery plugin [DRAFT] */

// use Elementar fonts via Typotheque's web font system
// args: family name, style name, webfont key
$('.myClass').eFont('Sans A', '13 21 2', 'WF-XXXXXX-XXXXX')

// use self-hosted fonts
// args: family name, style name, path to fonts folder
$('.myClass').eFont('Sans A', '13 21 2', '../fonts/')

// get current height (as a number, not string)
$('.myClass').eFont.height

// set current width, as a number:
// plugin does conversion internally,
// and updates text to resulting font
$('.myClass').eFont.width = 3

// increase width numerically
$('.myClass').eFont.width += 1

// increase stroke weights individually
$('.myClass').eFont.weight += 1  // horizontal (n)
$('.myClass').eFont.weight += 10 // vertical (n * 10)

// separate attributes for vert./horiz. strokes (?)
$('.myClass').eFont.vstroke += 1
$('.myClass').eFont.hstroke += 1

// logic for simple animation:
// change height from 7 to 13px
for (ht=7; ht<=13; ht++) {
  $('.myClass').eFont.height = ht;
}

/* eFont animation API [DRAFT] */

$('.mySample').eFont.animate(event, { parameter : (start, end) } )

/* example : interactive interface */

// on 'page load':
// animate text objects from 1 to 7px in height
$('.mySample').eFont.animate('load', { 'height' : (1, 7) } )

// on 'mouse over' the text object:
// animate height from 7 to 13px
$('.mySample').eFont.animate('mouseover', { 'height' : (7, 13) } )

// on 'mouse out' from the text object:
// animate height back from from 7 to 13px
$('.mySample').eFont.animate('mouseout', { 'height' : (13, 7) } )