Merge branch 'feature/page-transitions' into develop
This commit is contained in:
Ghislain Loaec
commit
d2d6c87cae
|
|
@ -3,3 +3,5 @@
|
|||
.*.swo
|
||||
.*.swn
|
||||
|
||||
# Builds
|
||||
platforms/*
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<projectDescription>
|
||||
<name>Hello World</name>
|
||||
<name>Momo</name>
|
||||
<comment></comment>
|
||||
<projects>
|
||||
</projects>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
#Last build type
|
||||
#Wed, 04 Feb 2015 10:26:33 +0100
|
||||
#Wed, 04 Feb 2015 19:20:17 +0100
|
||||
|
||||
build.last.target=debug
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -1,5 +1,5 @@
|
|||
<?xml version='1.0' encoding='utf-8'?>
|
||||
<manifest android:hardwareAccelerated="true" android:versionCode="10000" android:versionName="1.0.0" package="com.phonegap.helloworld" xmlns:android="http://schemas.android.com/apk/res/android">
|
||||
<manifest android:hardwareAccelerated="true" android:versionCode="10000" android:versionName="1.0.0" package="com.cadoles.momo" xmlns:android="http://schemas.android.com/apk/res/android">
|
||||
<supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true" />
|
||||
<uses-permission android:name="android.permission.INTERNET" />
|
||||
<application android:hardwareAccelerated="true" android:icon="@drawable/icon" android:label="@string/app_name">
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,4 +0,0 @@
|
|||
/home/ghis/Workspace/momo/platforms/android/ant-build/CordovaApp-release-unsigned.apk : \
|
||||
/home/ghis/Workspace/momo/platforms/android/ant-build/CordovaApp.ap_ \
|
||||
/home/ghis/Workspace/momo/platforms/android/ant-build/classes.dex \
|
||||
/home/ghis/Workspace/momo/platforms/android/CordovaLib/ant-build/classes.jar \
|
||||
Binary file not shown.
|
|
@ -1,7 +1,6 @@
|
|||
/home/ghis/Workspace/momo/platforms/android/ant-build/CordovaApp.ap_ \
|
||||
: /home/ghis/Workspace/momo/platforms/android/res/drawable-port-mdpi/screen.png \
|
||||
/home/ghis/Workspace/momo/platforms/android/res/drawable-hdpi/icon.png \
|
||||
/home/ghis/Workspace/momo/platforms/android/res/drawable-hdpi/drawable-mdpi \
|
||||
/home/ghis/Workspace/momo/platforms/android/res/drawable-land-ldpi/screen.png \
|
||||
/home/ghis/Workspace/momo/platforms/android/res/drawable-port-xhdpi/screen.png \
|
||||
/home/ghis/Workspace/momo/platforms/android/res/drawable-land-mdpi/screen.png \
|
||||
|
|
@ -38,13 +37,16 @@
|
|||
/home/ghis/Workspace/momo/platforms/android/assets/www/spec.html \
|
||||
/home/ghis/Workspace/momo/platforms/android/assets/www/res \
|
||||
/home/ghis/Workspace/momo/platforms/android/assets/www/fonts \
|
||||
/home/ghis/Workspace/momo/platforms/android/assets/www/js/tmpl.min.js \
|
||||
/home/ghis/Workspace/momo/platforms/android/assets/www/js/bootstrap.min.js \
|
||||
/home/ghis/Workspace/momo/platforms/android/assets/www/js/index.js \
|
||||
/home/ghis/Workspace/momo/platforms/android/assets/www/js/pagetransitions.js \
|
||||
/home/ghis/Workspace/momo/platforms/android/assets/www/img/logo.png \
|
||||
/home/ghis/Workspace/momo/platforms/android/assets/www/css/bootstrap.min.css \
|
||||
/home/ghis/Workspace/momo/platforms/android/assets/www/css/index.css \
|
||||
/home/ghis/Workspace/momo/platforms/android/assets/www/css/bootstrap-theme.min.css \
|
||||
/home/ghis/Workspace/momo/platforms/android/assets/www/css/font-awesome.min.css \
|
||||
/home/ghis/Workspace/momo/platforms/android/assets/www/css/animations.css \
|
||||
/home/ghis/Workspace/momo/platforms/android/assets/www/spec/lib \
|
||||
/home/ghis/Workspace/momo/platforms/android/assets/www/spec/helper.js \
|
||||
/home/ghis/Workspace/momo/platforms/android/assets/www/spec/index.js \
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
#Last build type
|
||||
#Wed, 04 Feb 2015 10:26:40 +0100
|
||||
#Wed, 04 Feb 2015 19:20:21 +0100
|
||||
|
||||
build.last.target=debug
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -1,9 +1,9 @@
|
|||
/home/ghis/Workspace/momo/platforms/android/ant-build/classes.dex : \
|
||||
/home/ghis/Workspace/momo/platforms/android/ant-build/classes/com/phonegap/helloworld/R.class \
|
||||
/home/ghis/Workspace/momo/platforms/android/ant-build/classes/com/phonegap/helloworld/R$xml.class \
|
||||
/home/ghis/Workspace/momo/platforms/android/ant-build/classes/com/phonegap/helloworld/BuildConfig.class \
|
||||
/home/ghis/Workspace/momo/platforms/android/ant-build/classes/com/phonegap/helloworld/R$drawable.class \
|
||||
/home/ghis/Workspace/momo/platforms/android/ant-build/classes/com/phonegap/helloworld/CordovaApp.class \
|
||||
/home/ghis/Workspace/momo/platforms/android/ant-build/classes/com/phonegap/helloworld/R$attr.class \
|
||||
/home/ghis/Workspace/momo/platforms/android/ant-build/classes/com/phonegap/helloworld/R$string.class \
|
||||
/home/ghis/Workspace/momo/platforms/android/ant-build/classes/com/cadoles/momo/R.class \
|
||||
/home/ghis/Workspace/momo/platforms/android/ant-build/classes/com/cadoles/momo/R$xml.class \
|
||||
/home/ghis/Workspace/momo/platforms/android/ant-build/classes/com/cadoles/momo/BuildConfig.class \
|
||||
/home/ghis/Workspace/momo/platforms/android/ant-build/classes/com/cadoles/momo/R$drawable.class \
|
||||
/home/ghis/Workspace/momo/platforms/android/ant-build/classes/com/cadoles/momo/CordovaApp.class \
|
||||
/home/ghis/Workspace/momo/platforms/android/ant-build/classes/com/cadoles/momo/R$attr.class \
|
||||
/home/ghis/Workspace/momo/platforms/android/ant-build/classes/com/cadoles/momo/R$string.class \
|
||||
/home/ghis/Workspace/momo/platforms/android/ant-build/dexedLibs/classes-703f86d81f0ed180098d872ee1ccf45c.jar \
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,3 +1,3 @@
|
|||
# view AndroidManifest.xml #generated:6
|
||||
-keep class com.phonegap.helloworld.CordovaApp { <init>(...); }
|
||||
-keep class com.cadoles.momo.CordovaApp { <init>(...); }
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -20,9 +20,23 @@
|
|||
@import "bootstrap.min.css";
|
||||
/*@import "bootstrap-theme.min.css";*/
|
||||
@import "font-awesome.min.css";
|
||||
@import "animations.css";
|
||||
|
||||
* {
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html, body,
|
||||
#momo-body,
|
||||
.momo-page {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.momo-page {
|
||||
background: url("http://subtlepatterns.com/patterns/greyzz.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
|
||||
box-shadow: 0 0 20px #000;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -30,7 +44,6 @@ body {
|
|||
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
|
||||
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
|
||||
font-size:12px;
|
||||
height:100%;
|
||||
margin:0px;
|
||||
padding:0px;
|
||||
padding-top: 60px;
|
||||
|
|
@ -39,9 +52,27 @@ body {
|
|||
}
|
||||
|
||||
/* Portrait layout (default) */
|
||||
.momo-page-wrapper {
|
||||
min-height: 100%;
|
||||
height: auto !important;
|
||||
height: 100%;
|
||||
margin: 0 auto -60px;
|
||||
}
|
||||
.momo-footer, .push {
|
||||
height: 60px;
|
||||
}
|
||||
.momo-subnavbar {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.momo-container {
|
||||
top: 60px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
}
|
||||
.momo-page-content {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
|
@ -52,12 +83,10 @@ body {
|
|||
.momo-page-content:empty {
|
||||
padding: 0;
|
||||
}
|
||||
.momo-page-content > iframe {
|
||||
margin: -20px 0;
|
||||
.momo-page iframe {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
min-height: 80%;
|
||||
|
||||
min-height: 100%;
|
||||
}
|
||||
.momo-page-pages {
|
||||
border-radius: 0px;
|
||||
|
|
@ -66,6 +95,40 @@ body {
|
|||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.momo-pages {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
perspective: 1200px;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.momo-page {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
visibility: hidden;
|
||||
overflow: auto;
|
||||
backface-visibility: hidden;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.momo-page-current,
|
||||
.no-js .pt-page {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.no-js body {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.momo-page-ontop {
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
/* Landscape layout (with min-width) */
|
||||
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,43 +30,92 @@
|
|||
<title class="momo-title">Loading</title>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-default navbar-fixed-top momo-navbar">
|
||||
|
||||
<div id="momo-main"></div>
|
||||
|
||||
<!-- Main Template -->
|
||||
<script type="text/x-tmpl" id="momo-main-tmpl">
|
||||
|
||||
<div class="momo-page-wrapper">
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar navbar-default navbar-fixed-top momo-navbar">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<a class="navbar-brand" href="#home">
|
||||
<span class="momo-icon">
|
||||
<img src="{%= o.meta.icon %}" width="20" height="20"/>
|
||||
</span>
|
||||
<span class="momo-title">{%= o.meta.title %}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Pages List -->
|
||||
<div id="momo-pages"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="momo-footer">
|
||||
<div class="container-fluid clearfix">
|
||||
<p class="navbar-text pull-right">
|
||||
<a href="mailto:{%= o.contact %}" class="momo-contact">{%= o.meta.contact %}</a>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</script>
|
||||
|
||||
<!-- Page Template -->
|
||||
<script type="text/x-tmpl" id="momo-page-tmpl">
|
||||
|
||||
<nav class="navbar navbar-inverse navbar-static-top momo-subnavbar">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<span class="navbar-brand">
|
||||
{%= o.title %}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<a class="navbar-brand" href="#home">
|
||||
<span class="momo-icon"><i class="fa fa-spinner fa-pulse"></i></span>
|
||||
<span class="momo-title">Loading...</span>
|
||||
</a>
|
||||
<section class="momo-page-content">{%# o.content %}</section>
|
||||
</div>
|
||||
|
||||
{% if(o.url){ %}
|
||||
<iframe src="{%= o.url %}"></iframe>
|
||||
{% } %}
|
||||
|
||||
{% if(o.pages){ %}
|
||||
<div class="list-group momo-page-pages">
|
||||
{% for (var i = 0; i < o.pages.length; i++) { %}
|
||||
<a href="#{%= o.pages[i] %}" class="list-group-item">{%= app.pages[o.pages[i]].title %}</a>
|
||||
{% } %}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="navbar navbar-inverse navbar-static-top momo-subnavbar">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<span class="navbar-brand momo-page-title">
|
||||
</span>
|
||||
{% } %}
|
||||
|
||||
{% if(o.seealso){ %}
|
||||
<div class="container-fluid">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
See Also
|
||||
</div>
|
||||
<div class="list-group momo-page-pages">
|
||||
{% for (var i = 0; i < o.seealso.length; i++) { %}
|
||||
<a href="#{%= o.seealso[i] %}" class="list-group-item">{%= app.pages[o.seealso[i]].title %}</a>
|
||||
{% } %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container-fluid">
|
||||
{% } %}
|
||||
|
||||
<!--h3 class="page-header momo-page-title"></h3-->
|
||||
</script>
|
||||
|
||||
<div class="momo-page-content">
|
||||
<div class="jumbotron text-center">
|
||||
<i class="fa fa-spinner fa-pulse fa-2x"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row list-group momo-page-pages"></div>
|
||||
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">See also</div>
|
||||
<div class="list-group momo-page-seealso"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script type="text/javascript" src="cordova.js"></script>
|
||||
<script type="text/javascript" src="js/tmpl.min.js"></script>
|
||||
<script type="text/javascript" src="js/index.js"></script>
|
||||
<script type="text/javascript">
|
||||
app.initialize();
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
"assetsUrl": "https://perso.entrouvert.org/~fred/ma-ville-assets.zip?1416471664"
|
||||
},
|
||||
"title": "Ma ville",
|
||||
"content": "<p>Bienvenue !</p>",
|
||||
"content": "<p>Bienvenue !</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>",
|
||||
"pages": [
|
||||
{"title": "Découvrir la ville",
|
||||
"pages": [
|
||||
|
|
|
|||
|
|
@ -16,105 +16,232 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
var ANIMATION_OUT_CLASS = 'pt-page-moveToLeftEasing pt-page-ontop';
|
||||
var ANIMATION_IN_CLASS = 'pt-page-moveFromRight';
|
||||
|
||||
var extend = function ( defaults, options ) {
|
||||
var extended = {};
|
||||
var prop;
|
||||
for (prop in defaults) {
|
||||
if (Object.prototype.hasOwnProperty.call(defaults, prop)) {
|
||||
extended[prop] = defaults[prop];
|
||||
}
|
||||
}
|
||||
for (prop in options) {
|
||||
if (Object.prototype.hasOwnProperty.call(options, prop)) {
|
||||
extended[prop] = options[prop];
|
||||
}
|
||||
}
|
||||
return extended;
|
||||
};
|
||||
|
||||
var app = {
|
||||
|
||||
pages: {},
|
||||
|
||||
meta: {
|
||||
'title': 'Momo Application',
|
||||
'contact': 'contact@cadoles.com'
|
||||
},
|
||||
|
||||
current : 0,
|
||||
isAnimating: false,
|
||||
endCurrPage: false,
|
||||
endNextPage: false,
|
||||
|
||||
// Application Constructor
|
||||
initialize: function() {
|
||||
this.bindEvents();
|
||||
this.loadManifest();
|
||||
},
|
||||
|
||||
// JSON Manifest loading function
|
||||
loadManifest: function(){
|
||||
console.log("Loading Manifest");
|
||||
var manifest = localStorage.getItem("momo-manifest");
|
||||
var manifest = localStorage.getItem("momo-manifest");
|
||||
var manifestUrl = manifest ? manifest['updateUrl'] : 'index.json';
|
||||
var request = new XMLHttpRequest();
|
||||
var request = new XMLHttpRequest();
|
||||
request.open('GET', manifestUrl, true);
|
||||
request.onload = function() {
|
||||
if (request.status >= 200 && request.status < 400) {
|
||||
var data = JSON.parse(request.responseText);
|
||||
app.registerPage(data, true);
|
||||
app.render(data);
|
||||
} else {
|
||||
alert("Error "+request.status);
|
||||
}
|
||||
if (request.status >= 200 && request.status < 400) {
|
||||
var data = JSON.parse(request.responseText);
|
||||
app.start(data);
|
||||
} else {
|
||||
alert("Error "+request.status);
|
||||
}
|
||||
};
|
||||
request.onerror = function() {
|
||||
alert("Connexion Error");
|
||||
alert("Connexion Error");
|
||||
};
|
||||
request.send();
|
||||
},
|
||||
|
||||
registerPage: function(data, homepage){
|
||||
|
||||
// Application starter
|
||||
start: function(data){
|
||||
data.id = 'home';
|
||||
app.current_page = data.id;
|
||||
app.registerPage(data);
|
||||
app.render(data);
|
||||
//app.navigate(data.id);
|
||||
},
|
||||
|
||||
// Recursive function to index page form json
|
||||
registerPage: function(data){
|
||||
|
||||
if(data instanceof Object){
|
||||
var id = data.id ? data.id : (homepage ? 'home' : '_' + Math.random().toString(36).substr(2, 9));
|
||||
app.pages[id] = data;
|
||||
|
||||
// Generate a page ID
|
||||
var id = data.id = data.id ? data.id : (data.title ? app.utils.hyphenate(data.title) : '_' + Math.random().toString(36).substr(2, 9));
|
||||
|
||||
// Make sure id is unique
|
||||
var i = 1;
|
||||
while(app.pages.hasOwnProperty(data.id)){
|
||||
data.id = id+'_'+i.toString();
|
||||
}
|
||||
|
||||
// Register page
|
||||
app.pages[data.id] = data;
|
||||
|
||||
// Register page childrens
|
||||
if(data.pages instanceof Array){
|
||||
for(var i = 0; i < data.pages.length; i++){
|
||||
var page = data.pages[i];
|
||||
app.pages[id].pages[i] = app.registerPage(page, false);
|
||||
app.pages[data.id].pages[i] = app.registerPage(page, false);
|
||||
}
|
||||
}
|
||||
|
||||
// Register seealso childrens
|
||||
if(data.seealso instanceof Array){
|
||||
for(var i = 0; i < data.seealso.length; i++){
|
||||
var page = data.seealso[i];
|
||||
app.pages[id].seealso[i] = app.registerPage(page, false);
|
||||
app.pages[data.id].seealso[i] = app.registerPage(page, false);
|
||||
}
|
||||
}
|
||||
return id;
|
||||
|
||||
return data.id;
|
||||
} else
|
||||
if(typeof data === 'string' || data instanceof String || data instanceof Number){
|
||||
return data;
|
||||
}
|
||||
},
|
||||
|
||||
// Render Application
|
||||
render: function(data){
|
||||
app.utils.updateEl('.momo-title', data.meta.title);
|
||||
app.utils.updateEl('.momo-icon', '<img src="'+data.meta.icon+'" width="20px" height="20px"/>');
|
||||
app.renderPage(data);
|
||||
|
||||
// Render Main section
|
||||
var $main = tmpl("momo-main-tmpl", data);
|
||||
document.getElementById('momo-main').innerHTML = $main;
|
||||
|
||||
// Render every page
|
||||
for(var page in app.pages)
|
||||
app.renderPage(app.pages[page]);
|
||||
},
|
||||
|
||||
// Render Page
|
||||
renderPage: function(page){
|
||||
|
||||
if(page instanceof Object){
|
||||
if(page.external){
|
||||
navigator.app.loadUrl(page.url, { openExternal:true });
|
||||
return false;
|
||||
}
|
||||
app.utils.updateEl('.momo-page-content', '');
|
||||
app.utils.updateEl('.momo-page-pages', '');
|
||||
app.utils.updateEl('.momo-page-seealso', '');
|
||||
app.utils.updateEl('.momo-page-title', page.title);
|
||||
var $seealso = document.querySelector('.momo-page-seealso');
|
||||
$seealso.parentElement.style.display = 'none';
|
||||
|
||||
if(page.content){
|
||||
app.utils.updateEl('.momo-page-content', page.content);
|
||||
} else
|
||||
if(page.url){
|
||||
app.utils.updateEl('.momo-page-content', '<iframe src="'+page.url+'"></iframe>');
|
||||
}
|
||||
if(page.pages instanceof Array){
|
||||
app.utils.updateEl('.momo-page-pages', app.utils.renderLinks(page.pages));
|
||||
}
|
||||
if(page.seealso instanceof Array){
|
||||
$seealso.parentElement.style.display = 'block';
|
||||
app.utils.updateEl('.momo-page-seealso', app.utils.renderLinks(page.seealso));
|
||||
var $page = document.createElement('div');
|
||||
$page.id = page.id;
|
||||
$page.className = "momo-page";
|
||||
if(page.id == 'home'){
|
||||
$page.classList.add('momo-page-current');
|
||||
}
|
||||
$page.innerHTML = tmpl("momo-page-tmpl", page);
|
||||
document.getElementById('momo-pages').appendChild($page);
|
||||
|
||||
} else
|
||||
if(typeof page === 'string' || page instanceof String || page instanceof Number){
|
||||
console.log('Render page '+page);
|
||||
window.location.hash = page;
|
||||
if(app.pages.hasOwnProperty(page)) {
|
||||
app.renderPage(app.pages[page]);
|
||||
} else {
|
||||
alert('Page "'+page+'" doesn\'t exist');
|
||||
}
|
||||
//console.log('Render page '+page);
|
||||
//window.location.hash = page;
|
||||
//if(app.pages.hasOwnProperty(page)) {
|
||||
// app.renderPage(app.pages[page]);
|
||||
//} else {
|
||||
// alert('Page "'+page+'" doesn\'t exist');
|
||||
//}
|
||||
}
|
||||
},
|
||||
|
||||
navigate: function(page){
|
||||
|
||||
var page_obj = app.pages[page];
|
||||
|
||||
if(page_obj.external){
|
||||
navigator.app.loadUrl(page_obj.url, { openExternal:true });
|
||||
return false;
|
||||
}
|
||||
|
||||
if(app.isAnimating) {
|
||||
return false;
|
||||
}
|
||||
|
||||
app.isAnimating = true;
|
||||
|
||||
var $outpage = document.getElementById(app.current_page);
|
||||
var $inpage = document.getElementById(page);
|
||||
|
||||
//$inpage.classList.add('momo-page-current');
|
||||
//$outpage.classList.remove('momo-page-current');
|
||||
|
||||
var outCb = function(){
|
||||
$outpage.removeEventListener('animationend', outCb);
|
||||
$outpage.removeEventListener('webkitAnimationEnd', outCb);
|
||||
$outpage.removeEventListener('oAnimationEnd', outCb);
|
||||
$outpage.removeEventListener('MSAnimationEnd', outCb);
|
||||
app.endCurrPage = true;
|
||||
if(app.endNextPage){
|
||||
app.onAnimationEnd($outpage, $inpage);
|
||||
}
|
||||
};
|
||||
|
||||
var inCb = function(){
|
||||
$inpage.removeEventListener('animationend', inCb);
|
||||
$inpage.removeEventListener('webkitAnimationEnd', inCb);
|
||||
$inpage.removeEventListener('oAnimationEnd', inCb);
|
||||
$inpage.removeEventListener('MSAnimationEnd', inCb);
|
||||
app.endNextPage = true;
|
||||
if(app.endCurrPage){
|
||||
app.onAnimationEnd($outpage, $inpage);
|
||||
}
|
||||
};
|
||||
|
||||
var out_classes = ANIMATION_OUT_CLASS.split(' ');
|
||||
for(var i = 0; i < out_classes.length; i++)
|
||||
$outpage.classList.add(out_classes[i]);
|
||||
$outpage.addEventListener('animationend', outCb, false);
|
||||
$outpage.addEventListener('webkitAnimationEnd', outCb, false);
|
||||
$outpage.addEventListener('oAnimationEnd', outCb, false);
|
||||
$outpage.addEventListener('MSAnimationEnd', outCb, false);
|
||||
|
||||
$inpage.classList.add('momo-page-current');
|
||||
|
||||
var in_classes = ANIMATION_IN_CLASS.split(' ');
|
||||
for(var i = 0; i < in_classes.length; i++)
|
||||
$inpage.classList.add(in_classes[i]);
|
||||
$inpage.addEventListener('animationend', inCb, false);
|
||||
$inpage.addEventListener('webkitAnimationEnd', inCb, false);
|
||||
$inpage.addEventListener('oAnimationEnd', inCb, false);
|
||||
$inpage.addEventListener('MSAnimationEnd', inCb, false);
|
||||
|
||||
app.current_page = page;
|
||||
},
|
||||
|
||||
onAnimationEnd: function($outpage, $inpage) {
|
||||
app.endCurrPage = false;
|
||||
app.endNextPage = false;
|
||||
var out_classes = ANIMATION_OUT_CLASS.split(' ');
|
||||
for(var i = 0; i < out_classes.length; i++)
|
||||
$outpage.classList.remove(out_classes[i]);
|
||||
if($outpage != $inpage)
|
||||
$outpage.classList.remove('momo-page-current');
|
||||
var in_classes = ANIMATION_IN_CLASS.split(' ');
|
||||
for(var i = 0; i < in_classes.length; i++)
|
||||
$inpage.classList.remove(in_classes[i]);
|
||||
app.isAnimating = false;
|
||||
},
|
||||
|
||||
bindEvents: function() {
|
||||
document.addEventListener('deviceready', this.onDeviceReady, false);
|
||||
window.addEventListener('hashchange', this.onHashChange, false);
|
||||
|
|
@ -122,10 +249,11 @@ var app = {
|
|||
|
||||
onHashChange: function(e) {
|
||||
var page = window.location.hash.slice(1);
|
||||
if(!page){
|
||||
page = app.pages['home']
|
||||
if(!app.pages.hasOwnProperty(page)){
|
||||
page = 'home';
|
||||
}
|
||||
app.renderPage(page);
|
||||
//if(app.current_page != page)
|
||||
app.navigate(page);
|
||||
},
|
||||
|
||||
onDeviceReady: function() {
|
||||
|
|
@ -137,6 +265,7 @@ var app = {
|
|||
},
|
||||
|
||||
utils: {
|
||||
|
||||
updateEl: function(selector, html){
|
||||
var $el = document.querySelectorAll(selector);
|
||||
for (var i = 0; i < $el.length; i++)
|
||||
|
|
@ -154,6 +283,65 @@ var app = {
|
|||
html += '</a>';
|
||||
}
|
||||
return html;
|
||||
},
|
||||
|
||||
trim: function(str){
|
||||
return (str || '').replace(/^\s+|\s+$/g, '');
|
||||
},
|
||||
|
||||
removeNonWord: function(str){
|
||||
return (str || '').replace(/[^0-9a-zA-Z\xC0-\xFF \-]/g, ''); //remove non-word chars
|
||||
},
|
||||
|
||||
replaceAccents: function(str){
|
||||
str = str || '';
|
||||
// verifies if the String has accents and replace them
|
||||
if (str.search(/[\xC0-\xFF]/g) > -1) {
|
||||
str = str
|
||||
.replace(/[\xC0-\xC5]/g, "A")
|
||||
.replace(/[\xC6]/g, "AE")
|
||||
.replace(/[\xC7]/g, "C")
|
||||
.replace(/[\xC8-\xCB]/g, "E")
|
||||
.replace(/[\xCC-\xCF]/g, "I")
|
||||
.replace(/[\xD0]/g, "D")
|
||||
.replace(/[\xD1]/g, "N")
|
||||
.replace(/[\xD2-\xD6\xD8]/g, "O")
|
||||
.replace(/[\xD9-\xDC]/g, "U")
|
||||
.replace(/[\xDD]/g, "Y")
|
||||
.replace(/[\xDE]/g, "P")
|
||||
.replace(/[\xE0-\xE5]/g, "a")
|
||||
.replace(/[\xE6]/g, "ae")
|
||||
.replace(/[\xE7]/g, "c")
|
||||
.replace(/[\xE8-\xEB]/g, "e")
|
||||
.replace(/[\xEC-\xEF]/g, "i")
|
||||
.replace(/[\xF1]/g, "n")
|
||||
.replace(/[\xF2-\xF6\xF8]/g, "o")
|
||||
.replace(/[\xF9-\xFC]/g, "u")
|
||||
.replace(/[\xFE]/g, "p")
|
||||
.replace(/[\xFD\xFF]/g, "y");
|
||||
}
|
||||
return str;
|
||||
},
|
||||
|
||||
slugify: function(str, delimeter){
|
||||
if (delimeter == null) {
|
||||
delimeter = "-";
|
||||
}
|
||||
str = app.utils.replaceAccents(str);
|
||||
str = app.utils.removeNonWord(str);
|
||||
str = app.utils.trim(str) //should come after removeNonWord
|
||||
.replace(/ +/g, delimeter) //replace spaces with delimeter
|
||||
.toLowerCase();
|
||||
return str;
|
||||
},
|
||||
|
||||
unCamelCase: function(str){
|
||||
return (str || '').replace(/([a-z\xE0-\xFF])([A-Z\xC0\xDF])/g, '$1 $2').toLowerCase(); //add space between camelCase text
|
||||
},
|
||||
|
||||
hyphenate: function(str){
|
||||
str = app.utils.unCamelCase(str);
|
||||
return app.utils.slugify(str, "-");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,398 @@
|
|||
var PageTransitions = (function() {
|
||||
|
||||
var $main = $( '#pt-main' ),
|
||||
$pages = $main.children( 'div.pt-page' ),
|
||||
$iterate = $( '#iterateEffects' ),
|
||||
animcursor = 1,
|
||||
pagesCount = $pages.length,
|
||||
current = 0,
|
||||
isAnimating = false,
|
||||
endCurrPage = false,
|
||||
endNextPage = false,
|
||||
animEndEventNames = {
|
||||
'WebkitAnimation' : 'webkitAnimationEnd',
|
||||
'OAnimation' : 'oAnimationEnd',
|
||||
'msAnimation' : 'MSAnimationEnd',
|
||||
'animation' : 'animationend'
|
||||
},
|
||||
// animation end event name
|
||||
animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ],
|
||||
// support css animations
|
||||
support = Modernizr.cssanimations;
|
||||
|
||||
function init() {
|
||||
|
||||
$pages.each( function() {
|
||||
var $page = $( this );
|
||||
$page.data( 'originalClassList', $page.attr( 'class' ) );
|
||||
} );
|
||||
|
||||
$pages.eq( current ).addClass( 'pt-page-current' );
|
||||
|
||||
$( '#dl-menu' ).dlmenu( {
|
||||
animationClasses : { in : 'dl-animate-in-2', out : 'dl-animate-out-2' },
|
||||
onLinkClick : function( el, ev ) {
|
||||
ev.preventDefault();
|
||||
nextPage( el.data( 'animation' ) );
|
||||
}
|
||||
} );
|
||||
|
||||
$iterate.on( 'click', function() {
|
||||
if( isAnimating ) {
|
||||
return false;
|
||||
}
|
||||
if( animcursor > 67 ) {
|
||||
animcursor = 1;
|
||||
}
|
||||
nextPage( animcursor );
|
||||
++animcursor;
|
||||
} );
|
||||
|
||||
}
|
||||
|
||||
function nextPage(options ) {
|
||||
var animation = (options.animation) ? options.animation : options;
|
||||
|
||||
if( isAnimating ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
isAnimating = true;
|
||||
|
||||
var $currPage = $pages.eq( current );
|
||||
|
||||
if(options.showPage){
|
||||
if( options.showPage < pagesCount - 1 ) {
|
||||
current = options.showPage;
|
||||
}
|
||||
else {
|
||||
current = 0;
|
||||
}
|
||||
}
|
||||
else{
|
||||
if( current < pagesCount - 1 ) {
|
||||
++current;
|
||||
}
|
||||
else {
|
||||
current = 0;
|
||||
}
|
||||
}
|
||||
|
||||
var $nextPage = $pages.eq( current ).addClass( 'pt-page-current' ),
|
||||
outClass = '', inClass = '';
|
||||
|
||||
switch( animation ) {
|
||||
|
||||
case 1:
|
||||
outClass = 'pt-page-moveToLeft';
|
||||
inClass = 'pt-page-moveFromRight';
|
||||
break;
|
||||
case 2:
|
||||
outClass = 'pt-page-moveToRight';
|
||||
inClass = 'pt-page-moveFromLeft';
|
||||
break;
|
||||
case 3:
|
||||
outClass = 'pt-page-moveToTop';
|
||||
inClass = 'pt-page-moveFromBottom';
|
||||
break;
|
||||
case 4:
|
||||
outClass = 'pt-page-moveToBottom';
|
||||
inClass = 'pt-page-moveFromTop';
|
||||
break;
|
||||
case 5:
|
||||
outClass = 'pt-page-fade';
|
||||
inClass = 'pt-page-moveFromRight pt-page-ontop';
|
||||
break;
|
||||
case 6:
|
||||
outClass = 'pt-page-fade';
|
||||
inClass = 'pt-page-moveFromLeft pt-page-ontop';
|
||||
break;
|
||||
case 7:
|
||||
outClass = 'pt-page-fade';
|
||||
inClass = 'pt-page-moveFromBottom pt-page-ontop';
|
||||
break;
|
||||
case 8:
|
||||
outClass = 'pt-page-fade';
|
||||
inClass = 'pt-page-moveFromTop pt-page-ontop';
|
||||
break;
|
||||
case 9:
|
||||
outClass = 'pt-page-moveToLeftFade';
|
||||
inClass = 'pt-page-moveFromRightFade';
|
||||
break;
|
||||
case 10:
|
||||
outClass = 'pt-page-moveToRightFade';
|
||||
inClass = 'pt-page-moveFromLeftFade';
|
||||
break;
|
||||
case 11:
|
||||
outClass = 'pt-page-moveToTopFade';
|
||||
inClass = 'pt-page-moveFromBottomFade';
|
||||
break;
|
||||
case 12:
|
||||
outClass = 'pt-page-moveToBottomFade';
|
||||
inClass = 'pt-page-moveFromTopFade';
|
||||
break;
|
||||
case 13:
|
||||
outClass = 'pt-page-moveToLeftEasing pt-page-ontop';
|
||||
inClass = 'pt-page-moveFromRight';
|
||||
break;
|
||||
case 14:
|
||||
outClass = 'pt-page-moveToRightEasing pt-page-ontop';
|
||||
inClass = 'pt-page-moveFromLeft';
|
||||
break;
|
||||
case 15:
|
||||
outClass = 'pt-page-moveToTopEasing pt-page-ontop';
|
||||
inClass = 'pt-page-moveFromBottom';
|
||||
break;
|
||||
case 16:
|
||||
outClass = 'pt-page-moveToBottomEasing pt-page-ontop';
|
||||
inClass = 'pt-page-moveFromTop';
|
||||
break;
|
||||
case 17:
|
||||
outClass = 'pt-page-scaleDown';
|
||||
inClass = 'pt-page-moveFromRight pt-page-ontop';
|
||||
break;
|
||||
case 18:
|
||||
outClass = 'pt-page-scaleDown';
|
||||
inClass = 'pt-page-moveFromLeft pt-page-ontop';
|
||||
break;
|
||||
case 19:
|
||||
outClass = 'pt-page-scaleDown';
|
||||
inClass = 'pt-page-moveFromBottom pt-page-ontop';
|
||||
break;
|
||||
case 20:
|
||||
outClass = 'pt-page-scaleDown';
|
||||
inClass = 'pt-page-moveFromTop pt-page-ontop';
|
||||
break;
|
||||
case 21:
|
||||
outClass = 'pt-page-scaleDown';
|
||||
inClass = 'pt-page-scaleUpDown pt-page-delay300';
|
||||
break;
|
||||
case 22:
|
||||
outClass = 'pt-page-scaleDownUp';
|
||||
inClass = 'pt-page-scaleUp pt-page-delay300';
|
||||
break;
|
||||
case 23:
|
||||
outClass = 'pt-page-moveToLeft pt-page-ontop';
|
||||
inClass = 'pt-page-scaleUp';
|
||||
break;
|
||||
case 24:
|
||||
outClass = 'pt-page-moveToRight pt-page-ontop';
|
||||
inClass = 'pt-page-scaleUp';
|
||||
break;
|
||||
case 25:
|
||||
outClass = 'pt-page-moveToTop pt-page-ontop';
|
||||
inClass = 'pt-page-scaleUp';
|
||||
break;
|
||||
case 26:
|
||||
outClass = 'pt-page-moveToBottom pt-page-ontop';
|
||||
inClass = 'pt-page-scaleUp';
|
||||
break;
|
||||
case 27:
|
||||
outClass = 'pt-page-scaleDownCenter';
|
||||
inClass = 'pt-page-scaleUpCenter pt-page-delay400';
|
||||
break;
|
||||
case 28:
|
||||
outClass = 'pt-page-rotateRightSideFirst';
|
||||
inClass = 'pt-page-moveFromRight pt-page-delay200 pt-page-ontop';
|
||||
break;
|
||||
case 29:
|
||||
outClass = 'pt-page-rotateLeftSideFirst';
|
||||
inClass = 'pt-page-moveFromLeft pt-page-delay200 pt-page-ontop';
|
||||
break;
|
||||
case 30:
|
||||
outClass = 'pt-page-rotateTopSideFirst';
|
||||
inClass = 'pt-page-moveFromTop pt-page-delay200 pt-page-ontop';
|
||||
break;
|
||||
case 31:
|
||||
outClass = 'pt-page-rotateBottomSideFirst';
|
||||
inClass = 'pt-page-moveFromBottom pt-page-delay200 pt-page-ontop';
|
||||
break;
|
||||
case 32:
|
||||
outClass = 'pt-page-flipOutRight';
|
||||
inClass = 'pt-page-flipInLeft pt-page-delay500';
|
||||
break;
|
||||
case 33:
|
||||
outClass = 'pt-page-flipOutLeft';
|
||||
inClass = 'pt-page-flipInRight pt-page-delay500';
|
||||
break;
|
||||
case 34:
|
||||
outClass = 'pt-page-flipOutTop';
|
||||
inClass = 'pt-page-flipInBottom pt-page-delay500';
|
||||
break;
|
||||
case 35:
|
||||
outClass = 'pt-page-flipOutBottom';
|
||||
inClass = 'pt-page-flipInTop pt-page-delay500';
|
||||
break;
|
||||
case 36:
|
||||
outClass = 'pt-page-rotateFall pt-page-ontop';
|
||||
inClass = 'pt-page-scaleUp';
|
||||
break;
|
||||
case 37:
|
||||
outClass = 'pt-page-rotateOutNewspaper';
|
||||
inClass = 'pt-page-rotateInNewspaper pt-page-delay500';
|
||||
break;
|
||||
case 38:
|
||||
outClass = 'pt-page-rotatePushLeft';
|
||||
inClass = 'pt-page-moveFromRight';
|
||||
break;
|
||||
case 39:
|
||||
outClass = 'pt-page-rotatePushRight';
|
||||
inClass = 'pt-page-moveFromLeft';
|
||||
break;
|
||||
case 40:
|
||||
outClass = 'pt-page-rotatePushTop';
|
||||
inClass = 'pt-page-moveFromBottom';
|
||||
break;
|
||||
case 41:
|
||||
outClass = 'pt-page-rotatePushBottom';
|
||||
inClass = 'pt-page-moveFromTop';
|
||||
break;
|
||||
case 42:
|
||||
outClass = 'pt-page-rotatePushLeft';
|
||||
inClass = 'pt-page-rotatePullRight pt-page-delay180';
|
||||
break;
|
||||
case 43:
|
||||
outClass = 'pt-page-rotatePushRight';
|
||||
inClass = 'pt-page-rotatePullLeft pt-page-delay180';
|
||||
break;
|
||||
case 44:
|
||||
outClass = 'pt-page-rotatePushTop';
|
||||
inClass = 'pt-page-rotatePullBottom pt-page-delay180';
|
||||
break;
|
||||
case 45:
|
||||
outClass = 'pt-page-rotatePushBottom';
|
||||
inClass = 'pt-page-rotatePullTop pt-page-delay180';
|
||||
break;
|
||||
case 46:
|
||||
outClass = 'pt-page-rotateFoldLeft';
|
||||
inClass = 'pt-page-moveFromRightFade';
|
||||
break;
|
||||
case 47:
|
||||
outClass = 'pt-page-rotateFoldRight';
|
||||
inClass = 'pt-page-moveFromLeftFade';
|
||||
break;
|
||||
case 48:
|
||||
outClass = 'pt-page-rotateFoldTop';
|
||||
inClass = 'pt-page-moveFromBottomFade';
|
||||
break;
|
||||
case 49:
|
||||
outClass = 'pt-page-rotateFoldBottom';
|
||||
inClass = 'pt-page-moveFromTopFade';
|
||||
break;
|
||||
case 50:
|
||||
outClass = 'pt-page-moveToRightFade';
|
||||
inClass = 'pt-page-rotateUnfoldLeft';
|
||||
break;
|
||||
case 51:
|
||||
outClass = 'pt-page-moveToLeftFade';
|
||||
inClass = 'pt-page-rotateUnfoldRight';
|
||||
break;
|
||||
case 52:
|
||||
outClass = 'pt-page-moveToBottomFade';
|
||||
inClass = 'pt-page-rotateUnfoldTop';
|
||||
break;
|
||||
case 53:
|
||||
outClass = 'pt-page-moveToTopFade';
|
||||
inClass = 'pt-page-rotateUnfoldBottom';
|
||||
break;
|
||||
case 54:
|
||||
outClass = 'pt-page-rotateRoomLeftOut pt-page-ontop';
|
||||
inClass = 'pt-page-rotateRoomLeftIn';
|
||||
break;
|
||||
case 55:
|
||||
outClass = 'pt-page-rotateRoomRightOut pt-page-ontop';
|
||||
inClass = 'pt-page-rotateRoomRightIn';
|
||||
break;
|
||||
case 56:
|
||||
outClass = 'pt-page-rotateRoomTopOut pt-page-ontop';
|
||||
inClass = 'pt-page-rotateRoomTopIn';
|
||||
break;
|
||||
case 57:
|
||||
outClass = 'pt-page-rotateRoomBottomOut pt-page-ontop';
|
||||
inClass = 'pt-page-rotateRoomBottomIn';
|
||||
break;
|
||||
case 58:
|
||||
outClass = 'pt-page-rotateCubeLeftOut pt-page-ontop';
|
||||
inClass = 'pt-page-rotateCubeLeftIn';
|
||||
break;
|
||||
case 59:
|
||||
outClass = 'pt-page-rotateCubeRightOut pt-page-ontop';
|
||||
inClass = 'pt-page-rotateCubeRightIn';
|
||||
break;
|
||||
case 60:
|
||||
outClass = 'pt-page-rotateCubeTopOut pt-page-ontop';
|
||||
inClass = 'pt-page-rotateCubeTopIn';
|
||||
break;
|
||||
case 61:
|
||||
outClass = 'pt-page-rotateCubeBottomOut pt-page-ontop';
|
||||
inClass = 'pt-page-rotateCubeBottomIn';
|
||||
break;
|
||||
case 62:
|
||||
outClass = 'pt-page-rotateCarouselLeftOut pt-page-ontop';
|
||||
inClass = 'pt-page-rotateCarouselLeftIn';
|
||||
break;
|
||||
case 63:
|
||||
outClass = 'pt-page-rotateCarouselRightOut pt-page-ontop';
|
||||
inClass = 'pt-page-rotateCarouselRightIn';
|
||||
break;
|
||||
case 64:
|
||||
outClass = 'pt-page-rotateCarouselTopOut pt-page-ontop';
|
||||
inClass = 'pt-page-rotateCarouselTopIn';
|
||||
break;
|
||||
case 65:
|
||||
outClass = 'pt-page-rotateCarouselBottomOut pt-page-ontop';
|
||||
inClass = 'pt-page-rotateCarouselBottomIn';
|
||||
break;
|
||||
case 66:
|
||||
outClass = 'pt-page-rotateSidesOut';
|
||||
inClass = 'pt-page-rotateSidesIn pt-page-delay200';
|
||||
break;
|
||||
case 67:
|
||||
outClass = 'pt-page-rotateSlideOut';
|
||||
inClass = 'pt-page-rotateSlideIn';
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
$currPage.addClass( outClass ).on( animEndEventName, function() {
|
||||
$currPage.off( animEndEventName );
|
||||
endCurrPage = true;
|
||||
if( endNextPage ) {
|
||||
onEndAnimation( $currPage, $nextPage );
|
||||
}
|
||||
} );
|
||||
|
||||
$nextPage.addClass( inClass ).on( animEndEventName, function() {
|
||||
$nextPage.off( animEndEventName );
|
||||
endNextPage = true;
|
||||
if( endCurrPage ) {
|
||||
onEndAnimation( $currPage, $nextPage );
|
||||
}
|
||||
} );
|
||||
|
||||
if( !support ) {
|
||||
onEndAnimation( $currPage, $nextPage );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function onEndAnimation( $outpage, $inpage ) {
|
||||
endCurrPage = false;
|
||||
endNextPage = false;
|
||||
resetPage( $outpage, $inpage );
|
||||
isAnimating = false;
|
||||
}
|
||||
|
||||
function resetPage( $outpage, $inpage ) {
|
||||
$outpage.attr( 'class', $outpage.data( 'originalClassList' ) );
|
||||
$inpage.attr( 'class', $inpage.data( 'originalClassList' ) + ' pt-page-current' );
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
return {
|
||||
init : init,
|
||||
nextPage : nextPage,
|
||||
};
|
||||
|
||||
})();
|
||||
|
|
@ -0,0 +1 @@
|
|||
!function(a){"use strict";var b=function(a,c){var d=/[^\w\-\.:]/.test(a)?new Function(b.arg+",tmpl","var _e=tmpl.encode"+b.helper+",_s='"+a.replace(b.regexp,b.func)+"';return _s;"):b.cache[a]=b.cache[a]||b(b.load(a));return c?d(c,b):function(a){return d(a,b)}};b.cache={},b.load=function(a){return document.getElementById(a).innerHTML},b.regexp=/([\s'\\])(?!(?:[^{]|\{(?!%))*%\})|(?:\{%(=|#)([\s\S]+?)%\})|(\{%)|(%\})/g,b.func=function(a,b,c,d,e,f){return b?{"\n":"\\n","\r":"\\r"," ":"\\t"," ":" "}[b]||"\\"+b:c?"="===c?"'+_e("+d+")+'":"'+("+d+"==null?'':"+d+")+'":e?"';":f?"_s+='":void 0},b.encReg=/[<>&"'\x00]/g,b.encMap={"<":"<",">":">","&":"&",'"':""","'":"'"},b.encode=function(a){return(null==a?"":""+a).replace(b.encReg,function(a){return b.encMap[a]||""})},b.arg="o",b.helper=",print=function(s,e){_s+=e?(s==null?'':s):_e(s);},include=function(s,d){_s+=tmpl(s,d);}","function"==typeof define&&define.amd?define(function(){return b}):a.tmpl=b}(this);
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
/*
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
*/
|
||||
|
||||
package com.phonegap.helloworld;
|
||||
|
||||
import android.os.Bundle;
|
||||
import org.apache.cordova.*;
|
||||
|
||||
public class CordovaApp extends CordovaActivity
|
||||
{
|
||||
@Override
|
||||
public void onCreate(Bundle savedInstanceState)
|
||||
{
|
||||
super.onCreate(savedInstanceState);
|
||||
super.init();
|
||||
// Set by <content src="index.html" /> in config.xml
|
||||
loadUrl(launchUrl);
|
||||
}
|
||||
}
|
||||
|
|
@ -1294,4 +1294,4 @@
|
|||
.pt-page-delay1000 {
|
||||
-webkit-animation-delay: 1s;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,6 +24,19 @@
|
|||
|
||||
* {
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html, body,
|
||||
#momo-body,
|
||||
.momo-page {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.momo-page {
|
||||
background: url("http://subtlepatterns.com/patterns/greyzz.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
|
||||
box-shadow: 0 0 20px #000;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -31,7 +44,6 @@ body {
|
|||
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
|
||||
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
|
||||
font-size:12px;
|
||||
height:100%;
|
||||
margin:0px;
|
||||
padding:0px;
|
||||
padding-top: 60px;
|
||||
|
|
@ -40,6 +52,15 @@ body {
|
|||
}
|
||||
|
||||
/* Portrait layout (default) */
|
||||
.momo-page-wrapper {
|
||||
min-height: 100%;
|
||||
height: auto !important;
|
||||
height: 100%;
|
||||
margin: 0 auto -60px;
|
||||
}
|
||||
.momo-footer, .push {
|
||||
height: 60px;
|
||||
}
|
||||
.momo-subnavbar {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
|
@ -62,11 +83,10 @@ body {
|
|||
.momo-page-content:empty {
|
||||
padding: 0;
|
||||
}
|
||||
.momo-page-content iframe {
|
||||
.momo-page iframe {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
min-height: 100%;
|
||||
|
||||
}
|
||||
.momo-page-pages {
|
||||
border-radius: 0px;
|
||||
|
|
@ -75,6 +95,40 @@ body {
|
|||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.momo-pages {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
perspective: 1200px;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.momo-page {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
visibility: hidden;
|
||||
overflow: auto;
|
||||
backface-visibility: hidden;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.momo-page-current,
|
||||
.no-js .pt-page {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.no-js body {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.momo-page-ontop {
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
/* Landscape layout (with min-width) */
|
||||
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
|
||||
}
|
||||
|
|
|
|||
107
www/index.html
107
www/index.html
|
|
@ -31,45 +31,100 @@
|
|||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-default navbar-fixed-top momo-navbar">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<a class="navbar-brand" href="#home">
|
||||
<span class="momo-icon"><i class="fa fa-spinner fa-pulse"></i></span>
|
||||
<span class="momo-title">Loading...</span>
|
||||
</a>
|
||||
</div>
|
||||
<div id="momo-main"></div>
|
||||
|
||||
<!-- Main Template -->
|
||||
<script type="text/x-tmpl" id="momo-main-tmpl">
|
||||
|
||||
<div class="momo-page-wrapper">
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar navbar-default navbar-fixed-top momo-navbar">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<a class="navbar-brand" href="#home">
|
||||
<span class="momo-icon">
|
||||
<img src="{%= o.meta.icon %}" width="20" height="20"/>
|
||||
</span>
|
||||
<span class="momo-title">{%= o.meta.title %}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Pages List -->
|
||||
<div id="momo-pages"></div>
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="momo-footer">
|
||||
<div class="container-fluid clearfix">
|
||||
<p class="navbar-text pull-right">
|
||||
<a href="mailto:{%= o.contact %}" class="momo-contact">{%= o.meta.contact %}</a>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<div class="container-fluid momo-container">
|
||||
</script>
|
||||
|
||||
<nav class="navbar navbar-inverse navbar-static-top row momo-subnavbar">
|
||||
<!-- Page Template -->
|
||||
<script type="text/x-tmpl" id="momo-page-tmpl">
|
||||
|
||||
<nav class="navbar navbar-inverse navbar-static-top momo-subnavbar">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<span class="navbar-brand momo-page-title">
|
||||
</span>
|
||||
<div class="row">
|
||||
<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 %}
|
||||
</div>
|
||||
<div class="col-xs-2">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</nav>
|
||||
|
||||
<!--h3 class="page-header momo-page-title"></h3-->
|
||||
<div class="container-fluid">
|
||||
<section class="momo-page-content">{%# o.content %}</section>
|
||||
</div>
|
||||
|
||||
<div class="momo-page-content">
|
||||
<div class="jumbotron text-center">
|
||||
<i class="fa fa-spinner fa-pulse fa-2x"></i>
|
||||
{% if(o.url){ %}
|
||||
<iframe src="{%= o.url %}"></iframe>
|
||||
{% } %}
|
||||
|
||||
{% if(o.pages){ %}
|
||||
<div class="list-group momo-page-pages">
|
||||
{% for (var i = 0; i < o.pages.length; i++) { %}
|
||||
<a href="#{%= o.pages[i] %}" class="list-group-item">{%= app.pages[o.pages[i]].title %}</a>
|
||||
{% } %}
|
||||
</div>
|
||||
</div>
|
||||
{% } %}
|
||||
|
||||
<div class="row list-group momo-page-pages"></div>
|
||||
{% if(o.seealso){ %}
|
||||
<div class="container-fluid">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
See Also
|
||||
</div>
|
||||
<div class="list-group momo-page-pages">
|
||||
{% for (var i = 0; i < o.seealso.length; i++) { %}
|
||||
<a href="#{%= o.seealso[i] %}" class="list-group-item">{%= app.pages[o.seealso[i]].title %}</a>
|
||||
{% } %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% } %}
|
||||
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">See also</div>
|
||||
<div class="list-group momo-page-seealso"></div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
</div>
|
||||
<script type="text/javascript" src="cordova.js"></script>
|
||||
<script type="text/javascript" src="js/tmpl.min.js"></script>
|
||||
<script type="text/javascript" src="js/index.js"></script>
|
||||
<script type="text/javascript">
|
||||
app.initialize();
|
||||
|
|
|
|||
314
www/js/index.js
314
www/js/index.js
|
|
@ -16,116 +16,266 @@
|
|||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
var ANIMATION_OUT_CLASS = 'pt-page-moveToLeftEasing pt-page-ontop';
|
||||
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 extended = {};
|
||||
var prop;
|
||||
for (prop in defaults) {
|
||||
if (Object.prototype.hasOwnProperty.call(defaults, prop)) {
|
||||
extended[prop] = defaults[prop];
|
||||
}
|
||||
}
|
||||
for (prop in options) {
|
||||
if (Object.prototype.hasOwnProperty.call(options, prop)) {
|
||||
extended[prop] = options[prop];
|
||||
}
|
||||
}
|
||||
return extended;
|
||||
};
|
||||
|
||||
var app = {
|
||||
|
||||
pages: {},
|
||||
|
||||
meta: {
|
||||
'title': 'Momo Application',
|
||||
'contact': 'contact@cadoles.com'
|
||||
},
|
||||
|
||||
current : 0,
|
||||
isAnimating : false,
|
||||
endCurrPage : false,
|
||||
endNextPage : false,
|
||||
hashHistory : [window.location.hash],
|
||||
historyLength : window.history.length,
|
||||
|
||||
// Application Constructor
|
||||
initialize: function() {
|
||||
this.bindEvents();
|
||||
this.loadManifest();
|
||||
},
|
||||
|
||||
// JSON Manifest loading function
|
||||
loadManifest: function(){
|
||||
console.log("Loading Manifest");
|
||||
var manifest = localStorage.getItem("momo-manifest");
|
||||
var manifest = localStorage.getItem("momo-manifest");
|
||||
var manifestUrl = manifest ? manifest['updateUrl'] : 'index.json';
|
||||
var request = new XMLHttpRequest();
|
||||
var request = new XMLHttpRequest();
|
||||
request.open('GET', manifestUrl, true);
|
||||
request.onload = function() {
|
||||
if (request.status >= 200 && request.status < 400) {
|
||||
var data = JSON.parse(request.responseText);
|
||||
app.registerPage(data, true);
|
||||
app.render(data);
|
||||
} else {
|
||||
alert("Error "+request.status);
|
||||
}
|
||||
if (request.status >= 200 && request.status < 400) {
|
||||
var data = JSON.parse(request.responseText);
|
||||
app.start(data);
|
||||
} else {
|
||||
alert("Error "+request.status);
|
||||
}
|
||||
};
|
||||
request.onerror = function() {
|
||||
alert("Connexion Error");
|
||||
alert("Connexion Error");
|
||||
};
|
||||
request.send();
|
||||
},
|
||||
|
||||
registerPage: function(data, homepage){
|
||||
|
||||
// Application starter
|
||||
start: function(data){
|
||||
data.id = 'home';
|
||||
app.current_page = data.id;
|
||||
app.registerPage(data);
|
||||
app.render(data);
|
||||
//app.navigate(data.id);
|
||||
},
|
||||
|
||||
// Recursive function to index page form json
|
||||
registerPage: function(data){
|
||||
|
||||
if(data instanceof Object){
|
||||
var id = data.id ? data.id : (homepage ? 'home' : '_' + Math.random().toString(36).substr(2, 9));
|
||||
app.pages[id] = data;
|
||||
|
||||
// Generate a page ID
|
||||
var id = data.id = data.id ? data.id : (data.title ? app.utils.hyphenate(data.title) : '_' + Math.random().toString(36).substr(2, 9));
|
||||
|
||||
// Make sure id is unique
|
||||
var i = 1;
|
||||
while(app.pages.hasOwnProperty(data.id)){
|
||||
data.id = id+'_'+i.toString();
|
||||
}
|
||||
|
||||
// Register page
|
||||
app.pages[data.id] = data;
|
||||
|
||||
// Register page childrens
|
||||
if(data.pages instanceof Array){
|
||||
for(var i = 0; i < data.pages.length; i++){
|
||||
var page = data.pages[i];
|
||||
app.pages[id].pages[i] = app.registerPage(page, false);
|
||||
app.pages[data.id].pages[i] = app.registerPage(page, false);
|
||||
}
|
||||
}
|
||||
|
||||
// Register seealso childrens
|
||||
if(data.seealso instanceof Array){
|
||||
for(var i = 0; i < data.seealso.length; i++){
|
||||
var page = data.seealso[i];
|
||||
app.pages[id].seealso[i] = app.registerPage(page, false);
|
||||
app.pages[data.id].seealso[i] = app.registerPage(page, false);
|
||||
}
|
||||
}
|
||||
return id;
|
||||
|
||||
return data.id;
|
||||
} else
|
||||
if(typeof data === 'string' || data instanceof String || data instanceof Number){
|
||||
return data;
|
||||
}
|
||||
},
|
||||
|
||||
// Render Application
|
||||
render: function(data){
|
||||
app.utils.updateEl('.momo-title', data.meta.title);
|
||||
app.utils.updateEl('.momo-icon', '<img src="'+data.meta.icon+'" width="20px" height="20px"/>');
|
||||
app.renderPage(data);
|
||||
|
||||
// Render Main section
|
||||
var $main = tmpl("momo-main-tmpl", data);
|
||||
document.getElementById('momo-main').innerHTML = $main;
|
||||
|
||||
// Render every page
|
||||
for(var page in app.pages)
|
||||
app.renderPage(app.pages[page]);
|
||||
},
|
||||
|
||||
// Render Page
|
||||
renderPage: function(page){
|
||||
|
||||
if(page instanceof Object){
|
||||
if(page.external){
|
||||
navigator.app.loadUrl(page.url, { openExternal:true });
|
||||
return false;
|
||||
}
|
||||
app.utils.updateEl('.momo-page-content', '');
|
||||
app.utils.updateEl('.momo-page-pages', '');
|
||||
app.utils.updateEl('.momo-page-seealso', '');
|
||||
app.utils.updateEl('.momo-page-title', page.title);
|
||||
var $seealso = document.querySelector('.momo-page-seealso');
|
||||
$seealso.parentElement.style.display = 'none';
|
||||
|
||||
if(page.content){
|
||||
app.utils.updateEl('.momo-page-content', page.content);
|
||||
} else
|
||||
if(page.url){
|
||||
app.utils.updateEl('.momo-page-content', '<div class="momo-container"><iframe src="'+page.url+'"></iframe></div>');
|
||||
}
|
||||
if(page.pages instanceof Array){
|
||||
app.utils.updateEl('.momo-page-pages', app.utils.renderLinks(page.pages));
|
||||
}
|
||||
if(page.seealso instanceof Array){
|
||||
$seealso.parentElement.style.display = 'block';
|
||||
app.utils.updateEl('.momo-page-seealso', app.utils.renderLinks(page.seealso));
|
||||
var $page = document.createElement('div');
|
||||
$page.id = page.id;
|
||||
$page.className = "momo-page";
|
||||
if(page.id == 'home'){
|
||||
$page.classList.add('momo-page-current');
|
||||
}
|
||||
$page.innerHTML = tmpl("momo-page-tmpl", page);
|
||||
document.getElementById('momo-pages').appendChild($page);
|
||||
|
||||
} else
|
||||
if(typeof page === 'string' || page instanceof String || page instanceof Number){
|
||||
console.log('Render page '+page);
|
||||
window.location.hash = page;
|
||||
if(app.pages.hasOwnProperty(page)) {
|
||||
app.renderPage(app.pages[page]);
|
||||
} else {
|
||||
alert('Page "'+page+'" doesn\'t exist');
|
||||
}
|
||||
//console.log('Render page '+page);
|
||||
//window.location.hash = page;
|
||||
//if(app.pages.hasOwnProperty(page)) {
|
||||
// app.renderPage(app.pages[page]);
|
||||
//} else {
|
||||
// alert('Page "'+page+'" doesn\'t exist');
|
||||
//}
|
||||
}
|
||||
},
|
||||
|
||||
navigate: function(page, back){
|
||||
|
||||
var page_obj = app.pages[page];
|
||||
|
||||
if(page_obj.external){
|
||||
navigator.app.loadUrl(page_obj.url, { openExternal:true });
|
||||
return false;
|
||||
}
|
||||
|
||||
if(app.isAnimating) {
|
||||
return false;
|
||||
}
|
||||
|
||||
app.isAnimating = true;
|
||||
|
||||
var $outpage = document.getElementById(app.current_page);
|
||||
var $inpage = document.getElementById(page);
|
||||
|
||||
//$inpage.classList.add('momo-page-current');
|
||||
//$outpage.classList.remove('momo-page-current');
|
||||
|
||||
var outCb = function(){
|
||||
$outpage.removeEventListener('animationend', outCb);
|
||||
$outpage.removeEventListener('webkitAnimationEnd', outCb);
|
||||
$outpage.removeEventListener('oAnimationEnd', outCb);
|
||||
$outpage.removeEventListener('MSAnimationEnd', outCb);
|
||||
app.endCurrPage = true;
|
||||
if(app.endNextPage){
|
||||
app.onAnimationEnd($outpage, $inpage, back);
|
||||
}
|
||||
};
|
||||
|
||||
var inCb = function(){
|
||||
$inpage.removeEventListener('animationend', inCb);
|
||||
$inpage.removeEventListener('webkitAnimationEnd', inCb);
|
||||
$inpage.removeEventListener('oAnimationEnd', inCb);
|
||||
$inpage.removeEventListener('MSAnimationEnd', inCb);
|
||||
app.endNextPage = true;
|
||||
if(app.endCurrPage){
|
||||
app.onAnimationEnd($outpage, $inpage, back);
|
||||
}
|
||||
};
|
||||
|
||||
var out_classes = (back ? ANIMATION_BACK_OUT_CLASS : ANIMATION_OUT_CLASS).split(' ');
|
||||
for(var i = 0; i < out_classes.length; i++)
|
||||
$outpage.classList.add(out_classes[i]);
|
||||
$outpage.addEventListener('animationend', outCb, false);
|
||||
$outpage.addEventListener('webkitAnimationEnd', outCb, false);
|
||||
$outpage.addEventListener('oAnimationEnd', outCb, false);
|
||||
$outpage.addEventListener('MSAnimationEnd', outCb, false);
|
||||
|
||||
$inpage.classList.add('momo-page-current');
|
||||
|
||||
var in_classes = (back ? ANIMATION_BACK_IN_CLASS : ANIMATION_IN_CLASS).split(' ');
|
||||
for(var i = 0; i < in_classes.length; i++)
|
||||
$inpage.classList.add(in_classes[i]);
|
||||
$inpage.addEventListener('animationend', inCb, false);
|
||||
$inpage.addEventListener('webkitAnimationEnd', inCb, false);
|
||||
$inpage.addEventListener('oAnimationEnd', inCb, false);
|
||||
$inpage.addEventListener('MSAnimationEnd', inCb, false);
|
||||
|
||||
app.current_page = page;
|
||||
},
|
||||
|
||||
onAnimationEnd: function($outpage, $inpage, back) {
|
||||
app.endCurrPage = false;
|
||||
app.endNextPage = false;
|
||||
var out_classes = (back ? ANIMATION_BACK_OUT_CLASS : ANIMATION_OUT_CLASS).split(' ');
|
||||
for(var i = 0; i < out_classes.length; i++)
|
||||
$outpage.classList.remove(out_classes[i]);
|
||||
if($outpage != $inpage)
|
||||
$outpage.classList.remove('momo-page-current');
|
||||
var in_classes = (back ? ANIMATION_BACK_IN_CLASS : ANIMATION_IN_CLASS).split(' ');
|
||||
for(var i = 0; i < in_classes.length; i++)
|
||||
$inpage.classList.remove(in_classes[i]);
|
||||
app.isAnimating = false;
|
||||
},
|
||||
|
||||
bindEvents: function() {
|
||||
document.addEventListener('deviceready', this.onDeviceReady, false);
|
||||
window.addEventListener('hashchange', this.onHashChange, false);
|
||||
},
|
||||
|
||||
|
||||
onHashChange: function(e) {
|
||||
var back = false;
|
||||
var hash = window.location.hash, length = window.history.length;
|
||||
var page = window.location.hash.slice(1);
|
||||
if(!page){
|
||||
page = app.pages['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)){
|
||||
page = 'home';
|
||||
}
|
||||
app.renderPage(page);
|
||||
|
||||
if(app.current_page != page){
|
||||
app.navigate(page, back);
|
||||
}
|
||||
},
|
||||
|
||||
onDeviceReady: function() {
|
||||
|
|
@ -137,6 +287,7 @@ var app = {
|
|||
},
|
||||
|
||||
utils: {
|
||||
|
||||
updateEl: function(selector, html){
|
||||
var $el = document.querySelectorAll(selector);
|
||||
for (var i = 0; i < $el.length; i++)
|
||||
|
|
@ -154,6 +305,65 @@ var app = {
|
|||
html += '</a>';
|
||||
}
|
||||
return html;
|
||||
},
|
||||
|
||||
trim: function(str){
|
||||
return (str || '').replace(/^\s+|\s+$/g, '');
|
||||
},
|
||||
|
||||
removeNonWord: function(str){
|
||||
return (str || '').replace(/[^0-9a-zA-Z\xC0-\xFF \-]/g, ''); //remove non-word chars
|
||||
},
|
||||
|
||||
replaceAccents: function(str){
|
||||
str = str || '';
|
||||
// verifies if the String has accents and replace them
|
||||
if (str.search(/[\xC0-\xFF]/g) > -1) {
|
||||
str = str
|
||||
.replace(/[\xC0-\xC5]/g, "A")
|
||||
.replace(/[\xC6]/g, "AE")
|
||||
.replace(/[\xC7]/g, "C")
|
||||
.replace(/[\xC8-\xCB]/g, "E")
|
||||
.replace(/[\xCC-\xCF]/g, "I")
|
||||
.replace(/[\xD0]/g, "D")
|
||||
.replace(/[\xD1]/g, "N")
|
||||
.replace(/[\xD2-\xD6\xD8]/g, "O")
|
||||
.replace(/[\xD9-\xDC]/g, "U")
|
||||
.replace(/[\xDD]/g, "Y")
|
||||
.replace(/[\xDE]/g, "P")
|
||||
.replace(/[\xE0-\xE5]/g, "a")
|
||||
.replace(/[\xE6]/g, "ae")
|
||||
.replace(/[\xE7]/g, "c")
|
||||
.replace(/[\xE8-\xEB]/g, "e")
|
||||
.replace(/[\xEC-\xEF]/g, "i")
|
||||
.replace(/[\xF1]/g, "n")
|
||||
.replace(/[\xF2-\xF6\xF8]/g, "o")
|
||||
.replace(/[\xF9-\xFC]/g, "u")
|
||||
.replace(/[\xFE]/g, "p")
|
||||
.replace(/[\xFD\xFF]/g, "y");
|
||||
}
|
||||
return str;
|
||||
},
|
||||
|
||||
slugify: function(str, delimeter){
|
||||
if (delimeter == null) {
|
||||
delimeter = "-";
|
||||
}
|
||||
str = app.utils.replaceAccents(str);
|
||||
str = app.utils.removeNonWord(str);
|
||||
str = app.utils.trim(str) //should come after removeNonWord
|
||||
.replace(/ +/g, delimeter) //replace spaces with delimeter
|
||||
.toLowerCase();
|
||||
return str;
|
||||
},
|
||||
|
||||
unCamelCase: function(str){
|
||||
return (str || '').replace(/([a-z\xE0-\xFF])([A-Z\xC0\xDF])/g, '$1 $2').toLowerCase(); //add space between camelCase text
|
||||
},
|
||||
|
||||
hyphenate: function(str){
|
||||
str = app.utils.unCamelCase(str);
|
||||
return app.utils.slugify(str, "-");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
!function(a){"use strict";var b=function(a,c){var d=/[^\w\-\.:]/.test(a)?new Function(b.arg+",tmpl","var _e=tmpl.encode"+b.helper+",_s='"+a.replace(b.regexp,b.func)+"';return _s;"):b.cache[a]=b.cache[a]||b(b.load(a));return c?d(c,b):function(a){return d(a,b)}};b.cache={},b.load=function(a){return document.getElementById(a).innerHTML},b.regexp=/([\s'\\])(?!(?:[^{]|\{(?!%))*%\})|(?:\{%(=|#)([\s\S]+?)%\})|(\{%)|(%\})/g,b.func=function(a,b,c,d,e,f){return b?{"\n":"\\n","\r":"\\r"," ":"\\t"," ":" "}[b]||"\\"+b:c?"="===c?"'+_e("+d+")+'":"'+("+d+"==null?'':"+d+")+'":e?"';":f?"_s+='":void 0},b.encReg=/[<>&"'\x00]/g,b.encMap={"<":"<",">":">","&":"&",'"':""","'":"'"},b.encode=function(a){return(null==a?"":""+a).replace(b.encReg,function(a){return b.encMap[a]||""})},b.arg="o",b.helper=",print=function(s,e){_s+=e?(s==null?'':s):_e(s);},include=function(s,d){_s+=tmpl(s,d);}","function"==typeof define&&define.amd?define(function(){return b}):a.tmpl=b}(this);
|
||||
Reference in New Issue