Adding splash screen to an Ember.js app

technical

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! :)