Navigate back on homepage
This commit is contained in:
parent
6fe5cc5809
commit
3096a375bf
|
@ -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>
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
Reference in New Issue