RoughDraft.js v0.1.1

LIVE DEMO

Auto-generates content based on data attributes in HTML.

data-draft-repeat
data-draft-text
data-draft-image
data-draft-date

Lorem Ipsum remote APIs ("library")

"lorem" : "http://www.randomtext.me/api/lorem/p-20/40-50"
"bacon" : "https://baconipsum.com/api/?type=all-meat&paras=20&start-with-lorem=1"
"hipster" : "http://hipsterjesus.com/api?paras=20&type=hipster-centric&html=false"

Lorem Ipsum local JSON ("bookstore")

"lorem"
add your favorite ipsum generator with JSON converter/add to repository library

Image generators

"placekitten" : "http://placekitten.com/ + params"
"placehold" : "http://placehold.it/ + params"

Allows developers to quickly mockup a design using minimal HTML markup + JS, without server side scripting, and without having to navigate to image/text lorem ipsum generators.

The layout prototype ideally will cut down on development time by figuring out layout kinks, prior to the heavy code lifting.

Installation

Requires jQuery
Make sure the roughdraft.thesaurus.json lives in the same directory as the file, or adjust the the option.

Add the following (potentially in a IS_DEV include header, as this JS library will likely only be used in early stage development).

<script type="text/javascript" src="js/jquery.roughdraft.0.1.0.js"></script>

Usage/Overview

The plugin is called by

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

full options below

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

data-draft-image

<img data-draft-img="width/height" />
<img data-draft-img="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'
}

Possible ideas for contribution

not sure how these would all work, just brainstorming...

Refactor anything
More lorem ipsum libraries
More image generators
Get it working with pagination/infinite scroll
data-draft-user (generates a fake name/email etc)
data-draft-number (generates random numbers)
data-draft-form (generates a form)
data-draft-time (random time etc)
data-draft-tweet (pull in random tweet from certain accounts)
data-draft-rss (pulls in rss feed)
data-draft-video (youtube, vimeo)
data-draft-song (soundcloud etc)
data-draft-quote (like lorem ipsum but blockquotes)

other libraries that could be included (with author permission)

flickholdr.com (image)
placedog.com (image)
lorempixel.com (image)
placezombies.com (image)
rndimg.com (image)
~~lipsum.com (text)~~ DONE
lorizzle.nl (text)
slipsum.com (text)
robotipsum.com (text)
spaceipsum.com (text)
hipsteripsum.com (text)
tunaipsum.com (text)
veggieipsum.com (text)
teapartyipsum.com (text)
fillerati.com (text)

Lorem Ipsum Tool

In the tools section, I made a simple script to help convert lorem ipsum text into JSON data that the roughdraft plugin can read. Download the files and navigate to /tools/convert_to_json.html. It should make it pretty easy to generate your own lorem ipsum library if you'd prefer quicker loads/a favorite ipsum library.

Full customization options

$(window).roughDraft({
  // the site to generate lorem ipsum from, for both jsonp + custom options
  author      : 'bacon',
  // the site to generate placeholder images from
  illustrator : 'placehold',
  // true if customIpsum library is preferred over jsonp api libraries
  customIpsum : false,
  // set timeout for JSONP requests
  timeout: 5000,
  // if customIpsum is true, relative url of library is necessary
  customIpsumPath: '/roughdraft.thesaurus.json',
  // calendar data formatting (default using PHP formatting)
  calendar: {
    dayNumber        : 'j',
    dayNumberZeros   : 'd',
    dayText          : 'l',
    dayTextThree     : 'D',
    monthNumber      : 'n',
    monthNumberZeros : 'm',
    monthText        : 'F',
    monthTextThree   : 'M',
    yearNumber       : 'Y',
    yearNumberTwo    : 'y'
  }
});

ultimatedelman / roughdraft.js

RoughDraft.js v0.1.1

Installation

Usage/Overview

Possible ideas for contribution

About

Languages