Permalink
Browse files

part13

  • Loading branch information...
1 parent a2fcd9a commit 1741c6ad2544cd2097ca9e17ca293c81ccdf3770 d4kris committed Nov 5, 2012
Showing with 70 additions and 3 deletions.
  1. +25 −0 css/styles.css
  2. +45 −3 js/main.js
View
@@ -193,4 +193,29 @@ h2 {
li>a.tappable-active {
color: #fff;
background-color: #4286f5;
+}
+.page {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ -webkit-transform:translate3d(0,0,0);
+}
+
+.stage-center {
+ top: 0;
+ left: 0;
+}
+
+.stage-left {
+ left: -100%;
+}
+
+.stage-right {
+ left: 100%;
+}
+
+.transition {
+ -moz-transition-duration: .375s;
+ -webkit-transition-duration: .375s;
+ -o-transition-duration: .375s;
}
View
@@ -45,21 +45,63 @@ var app = {
},
route: function() {
+ var self = this;
var hash = window.location.hash;
if (!hash) {
if (!this.HomeView) {
- this.HomeView = new HomeView(this.store);
+ this.HomeView = new HomeView(this.store).render();
+ this.slidePage(this.HomeView);
+ } else {
+ this.slidePage(this.HomeView);
}
- $('body').html(this.HomeView.render().el);
return;
}
var match = hash.match(app.detailsURL);
if (match) {
this.store.findById(Number(match[1]), function(employee) {
self.currentEmployee = employee;
- $('body').html(new EmployeeView(employee).render().el);
+ self.slidePage(new EmployeeView(employee).render());
});
}
+ },
+
+ slidePage: function(page) {
+
+ var currentPageDest,
+ self = this;
+
+ // If there is no current page (app just started) -> No transition: Position new page in the view port
+ if (!this.currentPage) {
+ $(page.el).attr('class', 'page stage-center');
+ $('body').append(page.el);
+ this.currentPage = page;
+ return;
+ }
+
+ // Cleaning up: remove old pages that were moved out of the viewport
+ $('.stage-right, .stage-left').not('.homePage').remove();
+
+ if (page === app.HomeView) {
+ // Always apply a Back transition (slide from left) when we go back to the search page
+ $(page.el).attr('class', 'page stage-left');
+ currentPageDest = "stage-right";
+ } else {
+ // Forward transition (slide from right)
+ $(page.el).attr('class', 'page stage-right');
+ currentPageDest = "stage-left";
+ }
+
+ $('body').append(page.el);
+
+ // Wait until the new page has been added to the DOM...
+ setTimeout(function() {
+ // Slide out the current page: If new page slides from the right -> slide current page to the left, and vice versa
+ $(self.currentPage.el).attr('class', 'page transition ' + currentPageDest);
+ // Slide in the new page
+ $(page.el).attr('class', 'page stage-center transition');
+ self.currentPage = page;
+ });
+
}
};

0 comments on commit 1741c6a

Please sign in to comment.