Adding splash screen to an Ember.js app

Have been playing around with Ember.js quite a bit lately and it’s been real good fun. I have been trying to put together a PhoneGap/Cordova based Android app, for the awesome, open source, continuous integration application - Travis-CI. It is really in its pre-natal stages, but you could see whatever I’ve been doing here.

And I implemented a splash screen for that app using the below technique.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
var App = Ember.Application.createWithMixins({
LOG_TRANSITIONS: true,
init: function () {
this.deferReadiness();
this._super();
}
});

App.Router.map(function () {
this.resource('splash');
this.resource('main');
this.resource('sub');
});

App.IndexRoute = Ember.Route.extend({
redirect: function () {
var seenSplash = $.cookie('seen-splash');
if (!seenSplash) {
$.cookie('seen-splash', "true");
this.transitionTo('splash');
} else {
this.transitionTo('main');
}
}
});

App.SplashRoute = Ember.Route.extend({
enter: function () {
var widthOrHeight = $(window).height() > $(window).width() ? 'width' : 'height';
$('#splash-content').find('img').css(widthOrHeight, '70%');
$('#splash').fadeIn();

Ember.run.later(this, function () {
$('#splash').fadeOut().detach();
this.transitionTo('main');
}, 1500);
}
});

App.MainController = Ember.Controller.extend({
clearCookie: function () {
$.cookie('seen-splash', null);
console.log('cleared session cookie');
}
});

App.advanceReadiness();

These are the versions of jQuery, Ember and Handlebars this was tested with:

1
2
3
4
5
DEBUG: -------------------------------
DEBUG: Ember.VERSION : 1.0.0-rc.1
DEBUG: Handlebars.VERSION : 1.0.0-rc.3
DEBUG: jQuery.VERSION : 1.9.1
DEBUG: -------------------------------

You could find this in action on jsfiddle.

Please leave a comment if you found this useful! :)