Navigate back on homepage

This commit is contained in:
Ghislain Loaec 2015-02-05 09:00:58 +01:00
parent 6fe5cc5809
commit 3096a375bf
3 changed files with 50 additions and 19 deletions

View File

@ -73,10 +73,19 @@
<nav class="navbar navbar-inverse navbar-static-top momo-subnavbar"> <nav class="navbar navbar-inverse navbar-static-top momo-subnavbar">
<div class="container-fluid"> <div class="container-fluid">
<div class="navbar-header"> <div class="row">
<span class="navbar-brand"> <div class="col-xs-2 navbar-btn text-left">
{% if(o.id != 'home'){ %}
<a href="#" class="btn btn-success pull-left" onclick="window.history.back(); return false;">
<i class="fa fa-chevron-left"></i>
</a>
{% } %}
</div>
<div class="col-xs-8 navbar-brand text-center">
{%= o.title %} {%= o.title %}
</span> </div>
<div class="col-xs-2">
</div>
</div> </div>
</div> </div>
</nav> </nav>

View File

@ -19,6 +19,8 @@
var ANIMATION_OUT_CLASS = 'pt-page-moveToLeftEasing pt-page-ontop'; var ANIMATION_OUT_CLASS = 'pt-page-moveToLeftEasing pt-page-ontop';
var ANIMATION_IN_CLASS = 'pt-page-moveFromRight'; var ANIMATION_IN_CLASS = 'pt-page-moveFromRight';
var ANIMATION_BACK_OUT_CLASS = 'pt-page-moveToRightEasing pt-page-ontop';
var ANIMATION_BACK_IN_CLASS = 'pt-page-moveFromLeft';
var extend = function ( defaults, options ) { var extend = function ( defaults, options ) {
var extended = {}; var extended = {};
@ -45,10 +47,12 @@ var app = {
'contact': 'contact@cadoles.com' 'contact': 'contact@cadoles.com'
}, },
current : 0, current : 0,
isAnimating: false, isAnimating : false,
endCurrPage: false, endCurrPage : false,
endNextPage: false, endNextPage : false,
hashHistory : [window.location.hash],
historyLength : window.history.length,
// Application Constructor // Application Constructor
initialize: function() { initialize: function() {
@ -164,7 +168,7 @@ var app = {
} }
}, },
navigate: function(page){ navigate: function(page, back){
var page_obj = app.pages[page]; var page_obj = app.pages[page];
@ -192,22 +196,22 @@ var app = {
$outpage.removeEventListener('MSAnimationEnd', outCb); $outpage.removeEventListener('MSAnimationEnd', outCb);
app.endCurrPage = true; app.endCurrPage = true;
if(app.endNextPage){ if(app.endNextPage){
app.onAnimationEnd($outpage, $inpage); app.onAnimationEnd($outpage, $inpage, back);
} }
}; };
var inCb = function(){ var inCb = function(){
$inpage.removeEventListener('animationend', inCb); $inpage.removeEventListener('animationend', inCb);
$inpage.removeEventListener('webkitAnimationEnd', inCb); $inpage.removeEventListener('webkitAnimationEnd', inCb);
$inpage.removeEventListener('oAnimationEnd', inCb); $inpage.removeEventListener('oAnimationEnd', inCb);
$inpage.removeEventListener('MSAnimationEnd', inCb); $inpage.removeEventListener('MSAnimationEnd', inCb);
app.endNextPage = true; app.endNextPage = true;
if(app.endCurrPage){ if(app.endCurrPage){
app.onAnimationEnd($outpage, $inpage); app.onAnimationEnd($outpage, $inpage, back);
} }
}; };
var out_classes = ANIMATION_OUT_CLASS.split(' '); var out_classes = (back ? ANIMATION_BACK_OUT_CLASS : ANIMATION_OUT_CLASS).split(' ');
for(var i = 0; i < out_classes.length; i++) for(var i = 0; i < out_classes.length; i++)
$outpage.classList.add(out_classes[i]); $outpage.classList.add(out_classes[i]);
$outpage.addEventListener('animationend', outCb, false); $outpage.addEventListener('animationend', outCb, false);
@ -217,7 +221,7 @@ var app = {
$inpage.classList.add('momo-page-current'); $inpage.classList.add('momo-page-current');
var in_classes = ANIMATION_IN_CLASS.split(' '); var in_classes = (back ? ANIMATION_BACK_IN_CLASS : ANIMATION_IN_CLASS).split(' ');
for(var i = 0; i < in_classes.length; i++) for(var i = 0; i < in_classes.length; i++)
$inpage.classList.add(in_classes[i]); $inpage.classList.add(in_classes[i]);
$inpage.addEventListener('animationend', inCb, false); $inpage.addEventListener('animationend', inCb, false);
@ -228,15 +232,15 @@ var app = {
app.current_page = page; app.current_page = page;
}, },
onAnimationEnd: function($outpage, $inpage) { onAnimationEnd: function($outpage, $inpage, back) {
app.endCurrPage = false; app.endCurrPage = false;
app.endNextPage = false; app.endNextPage = false;
var out_classes = ANIMATION_OUT_CLASS.split(' '); var out_classes = (back ? ANIMATION_BACK_OUT_CLASS : ANIMATION_OUT_CLASS).split(' ');
for(var i = 0; i < out_classes.length; i++) for(var i = 0; i < out_classes.length; i++)
$outpage.classList.remove(out_classes[i]); $outpage.classList.remove(out_classes[i]);
if($outpage != $inpage) if($outpage != $inpage)
$outpage.classList.remove('momo-page-current'); $outpage.classList.remove('momo-page-current');
var in_classes = ANIMATION_IN_CLASS.split(' '); var in_classes = (back ? ANIMATION_BACK_IN_CLASS : ANIMATION_IN_CLASS).split(' ');
for(var i = 0; i < in_classes.length; i++) for(var i = 0; i < in_classes.length; i++)
$inpage.classList.remove(in_classes[i]); $inpage.classList.remove(in_classes[i]);
app.isAnimating = false; app.isAnimating = false;
@ -247,13 +251,31 @@ var app = {
window.addEventListener('hashchange', this.onHashChange, false); window.addEventListener('hashchange', this.onHashChange, false);
}, },
onHashChange: function(e) { onHashChange: function(e) {
var hash = window.location.hash, length = window.history.length;
var page = window.location.hash.slice(1); var page = window.location.hash.slice(1);
var back = page == 'home';
if (app.hashHistory.length && app.historyLength == length) {
if (app.hashHistory[app.hashHistory.length - 2] == hash) {
app.hashHistory = app.hashHistory.slice(0, -1);
back = true;
} else {
app.hashHistory.push(hash);
}
} else {
app.hashHistory.push(hash);
app.historyLength = length;
}
if(!app.pages.hasOwnProperty(page)){ if(!app.pages.hasOwnProperty(page)){
page = 'home'; page = 'home';
} }
//if(app.current_page != page)
app.navigate(page); if(app.current_page != page){
app.navigate(page, back);
}
}, },
onDeviceReady: function() { onDeviceReady: function() {

View File

@ -253,9 +253,9 @@ var app = {
onHashChange: function(e) { onHashChange: function(e) {
var back = false;
var hash = window.location.hash, length = window.history.length; var hash = window.location.hash, length = window.history.length;
var page = window.location.hash.slice(1); var page = window.location.hash.slice(1);
var back = page == 'home';
if (app.hashHistory.length && app.historyLength == length) { if (app.hashHistory.length && app.historyLength == length) {
if (app.hashHistory[app.hashHistory.length - 2] == hash) { if (app.hashHistory[app.hashHistory.length - 2] == hash) {