Ember simple mobile

by amindunited

HTML

<div id="applicationWrap">

</div>
<script type="text/x-handlebars" data-template-name="application">
    <div class="navBar">
        <div>BAC</div>
        <span>{{#link-to "index"}}Home{{/link-to}}</span>
        <span>{{#link-to "gender"}}Gender{{/link-to}}</span>
        <span>{{#link-to "weight"}}Weight{{/link-to}}</span>
        <span>{{#link-to "session"}}Session{{/link-to}}</span>
        <span>{{#link-to "drinks"}}Drinks{{/link-to}}</span>
    </div>
    <hr/>
    {{outlet "gender"}}
    {{outlet "weight"}}
    {{outlet "session"}}
    {{outlet "drinks"}}
</script>
<script type="text/x-handlebars" data-template-name="gender">
    <h2>Gender</h2>
    <div>What is your gender?</div>
    <div class="genderToggleWrap">
        <div class="toggle-iphone">
            <div class="toggle toggle-select" data-type="select"></div>
        </div>
    </div>
</script>
<script type="text/x-handlebars" data-template-name="session">
    <h2>Session</h2>
    {{#link-to "index"}}Home{{/link-to}}
    {{#link-to "weight"}}Weight{{/link-to}}
    {{#link-to "session"}}Session{{/link-to}}
    {{#link-to "drinks"}}Drinks{{/link-to}}
</script>
<script type="text/x-handlebars" data-template-name="weight">
    <h2>Weight</h2>
</script>
<script type="text/x-handlebars" data-template-name="drinks">
    <h2>Drinks</h2>
    {{#link-to "index"}}Home{{/link-to}}
    {{#link-to "weight"}}Weight{{/link-to}}
    {{#link-to "session"}}Session{{/link-to}}
    {{#link-to "drinks"}}Drinks{{/link-to}}
</script>

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.2.0/ember.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-toggles/2.0.4/toggles.min.js"></script>

CSS

</style>
<link rel="stylesheet" type="text/css" href="https://rawgithub.com/simontabor/jquery-toggles/master/toggles.css"/>
<link rel="stylesheet" type="text/css" href="https://rawgithub.com/simontabor/jquery-toggles/master/themes/toggles-iphone.css"/>
<style type="text/css">
/* GENERAL */
.genderToggleWrap {
    margin: 10px;
}
/* GENERAL */

body {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: none;
  -webkit-user-select: none;
  user-select: none;
  font-size: 100%;
  padding: 0;
  margin: 0;
  background-color: #fff;
  font-family: "Roboto", "HelveticaNeue", Helvetica, Arial, sans-serif;
}

a {
  text-decoration: none;
  color: inherit;
}

/* APP */

.app, #applicationWrap {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  position:absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

/* PAGES */

.page {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 44px;
  padding: 10px;
  background-color: #fff;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translate3d(1000%, 0, 0);
  transform: translate3d(100%, 0, 0);
    
    
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000',...

JavaScript

$(function(){
    $('.genderToggleWrap .toggle').toggles({text:{on:'M',off:'F'}});
});

App = Em.Application.create({
    rootElement: '#applicationWrap'
});
Em.Router.reopen({
    /*
    willTransition: function(){
        console.log("will transition");
    },
    didTransition: function(info){
        console.log("did Transition", info);
    }
    */
});

App.Router.map(function(){
    //this.resource('index');
    this.resource('gender');
    this.resource('weight');
    this.resource('session');
    this.resource('drinks');
});

App.AnimatedRoute = Ember.Route.extend({
    _transitioning: false,
    willExit: function() { return Ember.RSVP.resolve(); },
    willEnter: function() { return Ember.RSVP.resolve(); },
    
    deactivate: function() { this._transitioning = false; },
    
    afterModel: function(model, transition) {
        var route = this;
        transition.then(function() {
            new Ember.RSVP.Promise(function(resolve, _) {
                Ember.run.next(this, function() {
                    route.willEnter().then(resolve);
                });
            });
        });
        
        this._super.apply(this, arguments);
    },
    
    actions: {
        willTransition: function(transition) {
            var routeNames = transition.handlerInfos.map(function(o) {
                return o.name;
            });
            var isParent = routeNames.indexOf(this.routeName) > -1;
            if (isParent) { return true; }
            if (this._transitioning) { return true; }
            
            this._transitioning = true;
            transition.abort();
            this.willExit().then(function() { transition.retry(); });
        }
    }
});


App.MView = Em.View.extend({
    pageType: 'next',
    classNames: ['page', 'transition'],
    classNameBindings: ['pageType'],
    
    willInsertElement: function(){
        this.set('pageType', 'right');
    },
    didInsertElement: function(){
        console.log("inthe views did inset",...