Full Usage Wiki

Full Usage Wiki

$((function(){
  $(window).roughDraft({
    'author' : 'bacon',
    'illustrator' : 'placehold'
  });
});

With the main options of author + illustrator, of the developers preferred lorem ipsum + image generator libraries.

Currently, BaconIpsum, LoremIpsum and HipsterIpsum (TEXT) + Placehold.it and Placekitten.com (IMAGES) are supported, but more can be added.

The content is retreived via JSONP/JSON APIs, but there is also the option to maintain a local lorem ipsum library, in roughdraft.thesaurus.json

The plugin then enables the data-draft tags:

data-draft-repeat

<div data-draft-repeat="#"></div>
<div data-draft-repeat="5"></div>

Will repeat the entire div, including all inner html and javascript listeners the assigned number of times.

data-draft-text

<p data-draft-text="#/type"></p>
<span data-draft-text="3/p"></span>

Will insert a specified amount of random text in between the tags. The number (seperated by backslash), and text type (p - paragraph, s - sentence, w - words). 3/p will generate 3 paragraphs of lorem ipsum.

The lorem ipsum library is loaded through Ajax -- if you have trouble running on local network (Google Chrome), run through a simple web server, or open in Firefox (I think).

For example -- (via Terminal with Python)

$ cd roughdraft.js
$ python -m SimpleHTTPServer

Local Lorem Ipsum:

To save load time you can specify a thesaurus that will be used instead of making an HTTP call for lorem ipsum text.

$(window).roughDraft({
  author: 'lorem',
  customIpsum: true,
  customIpsumPath: '/bower_components/roughdraft.js/roughdraft.thesaurus.json'
});

data-draft-image

<img data-draft-image="width/height" />
<img data-draft-image="300/500" />

Will insert the requested image size src (as well as height + width attributes) into the dom.

The image links are formatted based on the services requirements, and also taps into color randomization to serve different images to avoid repetitiveness.

data-draft-date

<span data-draft-date="D/M/Y"></span>
<span data-draft-date="M-r/j-r"></span>

Will insert a date into the calling elements inner html in the requested format. The date month is separated by a backslash, and the date can be randomized by adding a "-r".

The first span tag will return "Wed Jan 2013" and the second will return "Mar 7" (randomized).

The date format uses PHP's date format (my preference), and can be changed through initialization options as so.

'calendar': {
  'dayNumber'        : 'j',
  'dayNumberZeros'   : 'd',
  'dayText'          : 'l',
  'dayTextThree'     : 'D',
  'monthNumber'      : 'n',
  'monthNumberZeros' : 'm',
  'monthText'        : 'F',
  'monthTextThree'   : 'M',
  'yearNumber'       : 'Y',
  'yearNumberTwo'    : 'y'
}

data-draft-number

<span data-draft-number="$/digits/decimal"></span>
<span data-draft-number="$/3-4/2"></span>
<span data-draft-number="3"></span>

Will insert a randomized number into calling elements with requested options. The first option ($) is optional to signify as money. The second (digits) is either a single number 3 (3 digits) or range (3-5) to allow for greater number variance, and the last (decimal) to add decimals onto the number.

The 2nd span tag will return '$234.50' or '$9331.99', etc. The 3rd tag will return '144', etc.

data-draft-user

<span data-draft-user="full"><!-- generates full name --></span>
<span data-draft-user="first"><!-- generates first name --></span>
<span data-draft-user="last"><!-- generates last name --></span>
<span data-draft-user="email"><!-- generates email --></span>
<span data-draft-user="username"><!-- generates username --></span>
<span data-draft-user="twitter"><!-- generates '@' + username --></span>
<span data-draft-user="phone"><!-- generates phone number --></span>
<span data-draft-user="address"><!-- generates street address --></span>
<span data-draft-user="city"><!-- generates city name --></span>
<span data-draft-user="state"><!-- generates a US state --></span>
<span data-draft-user="zip"><!-- generates a zip code --></span>
<span data-draft-user="country"><!-- generates a country --></span>

Class name sequencer

Sometimes we need to use a sequence of class names to customize styling.

A recommendation is to abstract class names from their color or objective and use them in a sequential order, the sequencer does it.

Using a class name containing the word alfa:

<div class="sample">
 <div data-draft-repeat="2" class="myclass-alfa">
     <h1>Example node</h1>
 </div>
</div>

Would generate in an expectable order similar class names:

<div class="sample">
 <div class="myclass-alfa">
     <h1>Example node</h1>
 </div>
 <div class="myclass-bravo">
     <h1>Example node</h1>
 </div>
</div>

The feature ensures the sequence is applied to the same level siblings.

To enable, activate flag in:

$(window).roughDraft({
  classNameSequencer: true
});