Add a Splash screen in your Ember.js app

Show a custom splash screen in your Ember.js app, only once per session using a session cookie.

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.3.1/jquery.cookie.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.js"></script>
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <div class="container">
      {{outlet}}
    </div>
</script>

<script type="text/x-handlebars" data-template-name="splash">
    <div id="splash">
      <div id="splash-content">
        <img src="http://imageshack.us/a/img43/4363/wq8r4q6.jpg"/>    
        <h3>Splash in Ember.js App</h3>
      </div>
    </div>
</script>

<script type="text/x-handlebars" data-template-name="main">
  <div id="main">
    <h3>This is your app's content!</h3>      
    {{#linkTo index}}Index{{/linkTo}} 
      <br />
    {{#linkTo sub}}Sub{{/linkTo}} 
      <br />
    <button {{action 'clearCookie'}}>Clear Cookie</button>
  </div>
</script>

<script type="text/x-handlebars" data-template-name="sub">
  <div id="sub">
    <h3>This is some other page!</h3>      
    {{#linkTo index}}Index{{/linkTo}}
      <br />
    {{#linkTo main}}Main{{/linkTo}} 
  </div>
</script>

CSS

html, body {
    height: 99%;
}
#splash {
    margin-top: 3em;
    text-align: center;
    vertical-align: middle;
    height: 100%;
}
#splash:before {
    content:"";
    display: inline-block;
    height: 15%;
    vertical-align: middle;
}
#splash-content {
    position: relative;
}
#splash-content img {
    max-width: 400px;
    max-height: 400px;
}
#main {
    margin-top: 3em;
}
}

JavaScript

// Splash image courtesy: http://www.flickr.com/photos/chavals/2869153410/

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();