chillJS - tutorials: basics

Configurator object

In the first chapter you have seen, how to create layers and elements. Let's see what's under the hood. The Scene.createLayer and Layer.create methods both have an optional parameter (source) for configuration. These are used by a global function. With this function, you can modify the Layer or the Element (target) in many ways. It depends on the type of the target's and the type of the source's property. Here is the list, how does it works:

Here is how to use it:

var layer = scene.insertLayer({
	insert: [ // call layer.insert two times
		['Text', { text: 'Hello World!' }], // layer.insert('Text', { text: 'Hello World!' })
		['Circle', { r: 50 }] // layer.insert('Circle', { r: 50 })
	]
});

var element = layer.insert('Rectangle', {
	classList: { // use element.classList as target
		add: ['myClass'] // element.classList.add('myClass')
	},
	width: 100, // element.width = 100
	height: 80 // element.height = 80
});

Chill App

You can also configure the Scene with Chill.App. There is one optional parameter, which can be an object, or a string (path to a JSON file).

var app = new Chill.App('path-to-my-json/config.json');

Chill.out(app, 'div1');
Chill.out(app, 'div2');

Events

The Scene, Layer and Element are extends EventTarget, which is an interface that can receive events and may have listeners for them. You can listen for any Event, with the EventTarget.addEventListener or EventTarget.on. The EventTarget.removeEventListener and EventTarget.off removes a given listener, the EventTarget.removeAllEventListeners is used for remove every one of them. You can also check if a listener already added with the EventTarget.hasEventListener method. In order to dispatch an event, you should use EventTarget.dispatchEvent or EventTarget.emit.

element.on('myCustomEvent', function() {
	this.x += 10;
});

element.emit('myCustomEvent');

There are not only custom events. You can listen for keyboard events on the Scene, like "keypress", "keydown" or "keyup". The "mousedown", "mousemove", "mouseup", "mouseenter" and "mouseleave" events are works on the Element. There are also shorthand methods for the mouse events:

element.on('mouseenter', function() { this.background = 'orange'; });
element.mouseleave(function() { this.background = ''; });

Tasks and animations

You can add a Task to the Scene.queue with the Scene.addTask method, which requires a listener function as first parameter, and you can also specify the delay between the calls. There are two ways to remove a Task from the Queue. If the return value of the listener is true, then the Task is removed automatically by the Queue. An other solution is to call the Queue.remove method manually.

scene.addTask(function() {
	return ++element.x > 240;
}, 25);

The Scene.later method executes the provided listener function once after a specified delay. The Scene.repeat repeats the given listener n times.

scene.later(function() {
	element.angle = 90;
}, 2000); // 2 sec

There is an easier way to animate an Element. The Element.animate method helps to create animation effects on any numeric property. The first parameter is a plain object, where you can specify the modifications. The second is the duration in milliseconds. You can also set delay optionally in the third parameter.

element.animate({
	x: 300,
	width: 40
}, 2500);