Skim the manual

Introduction

Croque Monsieur is a small CoffeeScript boilerplate. With it, you can shortly start a new project with ready-to-use tools and JS libraries.


Get started

Load base scripts

In your HTML page, you just need to load these scripts and create these vars:

<script type="text/javascript">
	var JSFOLDER = 'js/'; // Path to JS folder
	var CROQUECLASS = 'examples/HelloWorld'; // Main class to load
</script>
<script type="text/javascript" src="js/vendor/require.2.1.9.js"></script>
<script type="text/javascript" src="js/boot.js"></script>		
		

Here we go :) you have to do nothing else to load your lovely scripts!


Create a class

To create your bundle, you need to specify its name, its dependencies and its source code. Don't worry, it's very easy:

miam( # New class
	'controllers/MyFabulousClass' # The name
	[ # Array of dependencies
		'utils/AnotherClass' 
	]
	() => # Anonymous function wrapping your source code
		class MyFabulousClass
			constructor: () ->
				alert 'hello world!'
)
		

'miam' is the keyword to use to define a new bundle. Then, the name must wrap an absolute path from JS folder. Ditto for dependencies.

Every script must be into coffee folder.


Aw man! I get an error when loading

All your code seems fine and Croque fails to start? Please check you bared your code: your code must not be wrapped in anonymous functions.


Libraries

Several libraries are already included in Croque Monsieur. Here are aliases you can use to load them:

jquery # Automatic
modernizr # Automatic
jqueryCookie # Automatic when loading system/Cookie
jqueryUI 
quoJS		
		

Go further

If you want to improve your development, you can browse each file of Croque: the full project is open source.

Configuration

You can set up you own config with config.coffee file. Here are some guidelines:


How to update

It is very simple: just erase your existing boot.coffee and system folder with new ones. You do not have to spend time anymore with foolish stuff.


This class makes cookies' management easier. You can quickly set a cookie or get current value.

Cookie(String key)

Builds a new cookie and gets current value if exists.


Cookie(String key, String value)

Builds a new cookie with default values (expires in 365 days and root used as path folder).


Cookie(String key, String value, Int expires, String path)

Builds a new cookie using (key, value) and expires/path as options.


static String getValue(String key)

Returns value bound to key if exists.


String getValue()

Gets value of current cookie.


void setValue(String value)

Sets value of current cookie.


static void remove(String key)

Removes cookie matching given key.


void remove()

Removes current cookie.


system/CroqueTrigger

This class helps developers setting listeners to HTML elements. For instance:

<div data-onMouseEnter="execute"></div>
		

Will automatically call the method execute() of your main class if the mouse enters into your div element.

The CroqueTrigger handles the initialization of listeners for all elements whose you specified an event. Moreover, your callback function has as first argument the listened element, then the event object.
Mind that every event should be first letter capitalized.

Available mouse events are:

Available keyboard events are:

static void run()

Executes croque trigger.


system/ImgLazyLoad

This class enables an image lazy loader. For instance:

<div class="lazy-img" data-small-img="img1.png" data-medium-img="img2.png" data-large-img="img3.png"></div>
		

Will be automatically converted to matching image. Breakpoints are 0-500, 500-1000 and > 1000

You have nothing to do: images will be automatically refreshed. Making your website responsive is not tricky anymore.

static void run()

Runs image lazy loader. Divs must have 'lazy-img' class.


static void run(String class)

Runs image lazy loader using custom class.


system/Tag

This class allows developper to insert shortly a new element in his webpage.

Tag(String tag)

Builds a new tag class. Used string should match this format:

div#id.class
div
div#id
div.class1.class2
		

Then, you can shortly bind classes and an id to your element.

void addClass(String class)

Adds class to your element.


void setId(String id)

Sets id of your element.


void setContent(String content)

Sets content.


void setAttr(String key, String value)

Sets attribute using (key, value) pair.


void setDataElement(String key, String value)

Sets data-element using (key, value) pair.


String toString()

Gets current element as a string (HTML tag).


void appendTo()

Appends element to body tag.


void appendTo(String tag)

Appends element to provided tag. Tag must match a jQuery input format.


void horizontal()

Centerizes element horizontally using body as wrapper.


void horizontal(jQueryObject wrapper)

Centerizes element horizontally using given wrapper.


static void horizontal(jQueryObject element)

Centerizes element horizontally using body as wrapper.


static void horizontal(jQueryObject element, jQueryObject wrapper)

Centerizes element horizontally using given wrapper.


void vertical()

Centerizes element vertically using body as wrapper.


void vertical(jQueryObject wrapper)

Centerizes element vertically using given wrapper.


static void vertical(jQueryObject element)

Centerizes element vertically using body as wrapper.


static void vertical(jQueryObject element, jQueryObject wrapper)

Centerizes element vertically using given wrapper.


void centerize()

Centerizes element using body as wrapper.


void centerize(jQueryObject wrapper)

Centerizes element using given wrapper.


static void centerize(jQueryObject element)

Centerizes element using body as wrapper.


static void centerize(jQueryObject element, jQueryObject wrapper)

Centerizes element using given wrapper.


jQueryObject toJQuery()

Gets current element as jQuery object.


JavascriptObject toJS()

Gets current element as JS object.


system/Utils

This class wraps multiple global useful functions.

static String implode(String glue, String pieces)

Joins pieces of an array using provided glue.


static Array explode(String delimiter, String string)

Explodes string using specified delimiter. Returns an array.


static void shuffleArray(Array target)

Shuffles provided array.


static void concatJSON(JSONObject obj1, JSONObject obj2)

Concats two JSON objects in first arg.


static String capitalize(String s)

Uppercases first letter of a string.


system/ajax/AjaxRequest

This class allows developper to build quickly an ajax hanlder.

AjaxRequest(String url)

Builds a new request using given url. Default values are GET as type and json as data type. Success and error functions are also available.


void setType(String type)

Sets type.


void setData(String data)

Sets extra data to send.


void setDataType(String type)

Sets type of received data.


void setSuccess(Function f)

Sets success callback.


void setError(Function f)

Sets error callback.


void execute()

Executes ajax request.


system/ajax/DeleteRequest

Inherits from AjaxRequest. Defines a DELETE request.


system/ajax/GetRequest

Inherits from AjaxRequest. Defines a GET request.


system/ajax/PostRequest

Inherits from AjaxRequest. Defines a POST request.


system/ajax/PutRequest

Inherits from AjaxRequest. Defines a PUT request.


system/collections/Queue

A simple queue class.

Queue<T>()

Inits a new queue.


T top<T>()

Returns oldest element in structure.


T pop<T>()

Returns oldest element and removes it from the queue.


void push<T>(T t)

Adds new element in queue.


Int getSize()

Gets current size of queue.


system/collections/Stack

A simple stack structure.

Stack<T>()

Inits a new stack.


T top<T>()

Returns youngest element in structure.


T pop<T>()

Returns youngest element and removes it from structure.


void push<T>(T t)

Adds element to stack.


Int getSize()

Returns current size of stack.


system/default/Environment

This class is automatically loaded with any class from your app. Wraps multiple functions to get details about environment.

static Float getWidth()

Gets window's width.


static Float getHeight()

Gets window's height.


static Boolean isMobile()

Detects if device is a mobile or not.


system/default/Log

This class is automatically loaded with any class from your app. Adds a more powerful log to your app: it can be disable, can handle warning or infos etc.

static void d(String msg)

Adds debug message to log.


static void i(String msg)

Adds info message to log.


static void w(String msg)

Adds warning message to log.


system/testing/Assert

Allows developers to assert when testing.

void isTrue(Boolean bool)

Asserts specified value is true.


void isFalse(Boolean bool)

Asserts specified value is false.


void isNull<T>(T t)

Asserts specified value is null.


void isNotNull<T>(T t)

Asserts specified value is not null.


void areEqual<T>(T a, T b)

Asserts specified values are equal.


void areNotEqual<T>(T a, T b)

Asserts specified values are not equal.


void fail(Func f)

Asserts provided method raise an exception.


system/testing/TestClass

Makes unit testing easier. To use it, simply implement it. A sum up will be generated when all tests have ended.

Each method of your class, that is ended by 'Test' word, will be automatically run.

Each test class can override setUp() and tearDown methods(). First one is called before each test, other one after it.

TestClass()

Creates a new test class. Collects it for runtime.


static void run()

Runs all collected tests.