entrouvert
/
momo
Archived
17
0
Fork 0
Code Issues Pull Requests Releases Activity

Update + Swipe pages + Flash messages + Unzip cordova plugin test - Ref #7914 #7910

This commit is contained in:
Ghislain Loaec 2015-08-08 02:47:58 +02:00
parent d303f85625
commit 1d46e0e0e1
6 changed files with 239 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
plugins/android.json
View File

@ -11,10 +11,6 @@
{
"xml": "<feature name=\"File\"><param name=\"android-package\" value=\"org.apache.cordova.file.FileUtils\" /><param name=\"onload\" value=\"true\" /></feature>",
"count": 1
},
{
"xml": "<feature name=\"FileTransfer\"><param name=\"android-package\" value=\"org.apache.cordova.filetransfer.FileTransfer\" /></feature>",
"count": 1
}
],
"/widget": [
@ -30,7 +26,7 @@
"/*": [
{
"xml": "<uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\" />",
"count": 2
"count": 1
}
]
}
@ -38,18 +34,15 @@
}
},
"installed_plugins": {
"org.apache.cordova.file-transfer": {
"PACKAGE_NAME": "com.cadoles.momo"
},
"org.apache.cordova.inappbrowser": {
"PACKAGE_NAME": "com.cadoles.momo"
},
"org.chromium.zip": {
"cordova-plugin-zip": {
"PACKAGE_NAME": "com.cadoles.momo"
}
},
"dependent_plugins": {
"org.apache.cordova.file": {
"cordova-plugin-file": {
"PACKAGE_NAME": "com.cadoles.momo"
}
}

11
www/css/index.css
View File

@ -261,3 +261,14 @@ h1 {
animation:fade 3000ms infinite;
-webkit-animation:fade 3000ms infinite;
}
.top-right {
position: absolute;
top: 6px;
right: 7px;
}
.alert {
margin: 0;
border-radius: 0;
}

3
www/css/wptr.css
View File

@ -40,7 +40,7 @@
display: block;
}
.loading span {
.loading span.l {
display: inline-block;
vertical-align: middle;
width: 10px;
@ -106,6 +106,7 @@
/*-webkit-transform: translate3d( 0, 0, 0 );
transform: translate3d( 0, 0, 0 );*/
top: 60px;
left: 0px;
transition: all .25s ease;
}

33
www/index.html
View File

@ -86,9 +86,10 @@
<span class="genericon genericon-next"></span>
<div class="loading">
<span id="l1"></span>
<span id="l2"></span>
<span id="l3"></span>
<span class="l" id="l1"></span>
<span class="l" id="l2"></span>
<span class="l" id="l3"></span>
<span class="momo-loading-text"></span>
</div>
</div>
@ -148,6 +149,9 @@
<script type="text/x-tmpl" id="momo-icon-item-tmpl">
<div class="col-xs-{%= o.colxs %} col-sm-{%= o.colsm %} col-md-{%= o.colmd %} col-lg-{%= o.collg %}">
<a href="#{%= o.id %}" class="btn btn-block text-center {%= o.className || 'btn-default' %}">
{% if(o.external){ %}
<i class="fa fa-external-link top-right"></i>
{% } %}
{% if(o.icon){ %}
<div style="height: 42px;">
{%# tmpl('momo-icon-tmpl', { icon: o.icon, size: 42 }) %}
@ -158,11 +162,30 @@
</div>
</script>
<!-- Page Template -->
<!-- Flash message template -->
<script type="text/x-tmpl" id="momo-flash-message-tmpl">
<div class="alert alert-{%= o.type %}">
{%# o.message %}
</div>
</script>
<!-- Update availbable template -->
<script type="text/x-tmpl" id="momo-update-available-tmpl">
<div class="clearfix">
<a href="#momo-update" class="btn btn-success pull-right">
<i class="fa fa-download"></i>
Mettre à jour
</a>
<strong>Une nouvelle version est disponible !</strong>
</div>
</script>
<!-- Page template -->
<script type="text/x-tmpl" id="momo-page-tmpl">
<div class="{% if(o.url){ %}momo-frame-wrapper{% } else { %}momo-page-wrapper{% } %} clearfix">
<div class="momo-flash-messages"></div>
<div class="container-fluid">
<section class="momo-page-content">{%# o.content %}</section>
</div>

179
www/js/index.js
View File

@ -251,7 +251,7 @@ var app = {
fetchAssets: function(cb){
if(DEBUG) console.log('fetch assets');
app.utils.setLoadingMsg("Téléchargement de la mise à jour");
app.utils.setLoadingMsg("Mise à jour - 0%");
if(typeof FileTransfer !== 'undefined' && typeof zip !== 'undefined'){
window.requestFileSystem(LocalFileSystem.TEMPORARY, 0, function (fileSystem) {
@ -261,34 +261,50 @@ var app = {
var uri = encodeURI(app.manifest.meta.assetsUrl);
var filePath = fileSystem.root.toURL() + uri.substr(uri.lastIndexOf("/") + 1);
zip.unzip(uri, rootPath,
// Success callback
function(ret){
app.utils.setLoadingMsg("Mise à jour - 100%");
if(ret == 0)
alert('Success unzip');
if(ret == -1)
alert('Error unzip');
cb();
},
// Progress callback
function(e){
var progress = Math.round((e.loaded / e.total) * 100);
app.utils.setLoadingMsg("Mise à jour - "+progress+"%");
});
// Fetch Assets Zip Archive
fileTransfer.download(
// Source
uri,
// Destination
filePath,
// Success callback
function(entry) {
app.utils.setLoadingMsg("Extraction de la mise à jour");
// Unzip Assets
zip.unzip(filePath, rootPath, function(){
if(DEBUG) console.log('unzip success');
cb();
});
},
// Error callback
function(error) {
if(DEBUG) console.log("download error source " + error.source);
if(DEBUG) console.log("download error target " + error.target);
if(DEBUG) console.log("upload error code" + error.code);
cb();
},
// Misc
false,
{
headers: {}
}
);
//fileTransfer.download(
// // Source
// uri,
// // Destination
// filePath,
// // Success callback
// function(entry) {
// app.utils.setLoadingMsg("Extraction de la mise à jour");
// // Unzip Assets
// zip.unzip(filePath, rootPath, function(){
// if(DEBUG) console.log('unzip success');
// cb();
// });
// },
// // Error callback
// function(error) {
// if(DEBUG) console.log("download error source " + error.source);
// if(DEBUG) console.log("download error target " + error.target);
// if(DEBUG) console.log("upload error code" + error.code);
// cb();
// },
// // Misc
// false,
// {
// headers: {}
// }
//);
}, function(error){
if(DEBUG) console.error('Filesystem error');
cb();
@ -347,6 +363,7 @@ var app = {
// Render Homepage
app.render(app.manifest);
app.navigate('home', false, function(){
app.flash(tmpl('momo-update-available-tmpl', {}), 'success');
// Import Scripts & Styles
app.appendAssets(function(){
@ -524,44 +541,7 @@ var app = {
// Pull to update binder
WebPullToRefresh.init( {
loadingFunction: function(){
return new Promise( function( resolve, reject ) {
// Run some async loading code here
//window.location.reload();
app.loadManifest(false, function(){
for(var page in app.pages){
if(typeof app.pages[page].search == 'undefined'){
delete app.pages[page];
document.getElementById("momo-pages").removeChild(
document.getElementById(page)
);
}
}
// Regiter pages tree
app.menu = [];
app.manifest.id = 'home';
app.registerPage(app.manifest);
// Render every page
for(var page in app.pages){
var $page = document.getElementById(page);
if(!$page){
$page = document.createElement('div');
$page.id = app.pages[page].id;
$page.className = "momo-page";
document.getElementById('momo-pages').appendChild($page);
}
}
// Render Homepage
//app.render(app.manifest);
resolve();
if(typeof app.pages[app.current_page].search != 'undefined'){
app.search(app.current_query);
} else {
app.navigate(app.current_page);
}
}, true); // Force reload manifest
//reject();
});
return new Promise( app.update );
},
contentEl: $inpage
} );
@ -644,6 +624,21 @@ var app = {
var hash = window.location.hash, length = window.history.length;
var page = window.location.hash.slice(1);
if(page == 'momo-update'){
window.location.replace(app.hashHistory[app.hashHistory.length-1]);
document.body.classList.add('ptr-loading');
var cb = function() {
setTimeout(function(){
document.body.classList.remove('ptr-loading');
document.body.classList.add('ptr-reset');
setTimeout(function() {
document.body.classList.remove('ptr-reset');
}, 250);
}, 1000);
};
return app.update(cb, cb);
}
if(!app.pages.hasOwnProperty(page)){
page = 'home';
}
@ -726,6 +721,58 @@ var app = {
window.location.hash = "#"+id;
},
flash: function(message, type) {
var elements = document.getElementsByClassName("momo-flash-messages");
for (var i = 0; i < elements.length; i++)
elements[i].innerHTML += tmpl('momo-flash-message-tmpl', {
message: message,
type: type ? type : 'info'
});
},
update: function( resolve, reject ) {
// Run some async loading code here
//window.location.reload();
app.loadManifest(false, function(){
for(var page in app.pages){
if(typeof app.pages[page].search == 'undefined'){
delete app.pages[page];
document.getElementById("momo-pages").removeChild(
document.getElementById(page)
);
}
}
// Regiter pages tree
app.menu = [];
app.manifest.id = 'home';
app.registerPage(app.manifest);
// Render every page
for(var page in app.pages){
var $page = document.getElementById(page);
if(!$page){
$page = document.createElement('div');
$page.id = app.pages[page].id;
$page.className = "momo-page";
document.getElementById('momo-pages').appendChild($page);
}
}
// Render Homepage
//app.render(app.manifest);
if(typeof resolve === 'function')
resolve();
app.utils.setLoadingMsg("Mise à jour effectuée !");
if(typeof app.pages[app.current_page].search != 'undefined'){
app.search(app.current_query);
} else {
app.navigate(app.current_page);
}
}, true); // Force reload manifest
//reject();
},
// Various Javascript Helpers
utils: {

88
www/js/wptr.js
View File

@ -14,6 +14,8 @@ var WebPullToRefresh = (function () {
// Number of pixels of panning until refresh
distanceToRefresh: 70,
distanceToBack: 20,
distanceToForward: 20,
// Pointer to function that does the loading and returns a promise
loadingFunction: false,
@ -35,7 +37,9 @@ var WebPullToRefresh = (function () {
var pan = {
enabled: false,
distance: 0,
startingPositionY: 0
startingPositionY: 0,
distanceRight: 0,
distanceLeft: 0
};
/**
@ -54,6 +58,8 @@ var WebPullToRefresh = (function () {
contentEl: params.contentEl || document.getElementById( defaults.contentEl ),
ptrEl: params.ptrEl || document.getElementById( defaults.ptrEl ),
distanceToRefresh: params.distanceToRefresh || defaults.distanceToRefresh,
distanceToBack: params.distanceToBack || defaults.distanceToBack,
distanceToForward: params.distanceToBack || defaults.distanceToForward,
loadingFunction: params.loadingFunction || defaults.loadingFunction,
resistance: params.resistance || defaults.resistance
};
@ -62,13 +68,28 @@ var WebPullToRefresh = (function () {
return false;
}
var h = new Hammer( options.contentEl, { touchAction: 'pan-y'} );
var iframes = options.contentEl.getElementsByTagName('iframe');
h.get( 'pan' ).set( { direction: Hammer.DIRECTION_VERTICAL } );
if(iframes.length > 0){
var iframe = iframes[0];
var oE1 = iframe.contentWindow;
if(window.pageYOffset==undefined)
{
oE1= (oE1.document.documentElement) ? oE1.document.documentElement : oE1=document.body;
}
options.contentEl = iframe;
}
var h = new Hammer( options.contentEl, { touchAction: 'pan-y' } );
h.get( 'pan' ).set( { direction: Hammer.DIRECTION_ALL } );
h.on( 'panstart', _panStart );
h.on( 'pandown', _panDown );
h.on( 'panup', _panUp );
h.on( 'panright', _panRight );
h.on( 'panleft', _panLeft );
h.on( 'panend', _panEnd );
};
@ -102,6 +123,7 @@ var WebPullToRefresh = (function () {
_setBodyClass();
};
/**
* Handle element on screen movement when the pandown events is firing.
*
@ -124,6 +146,34 @@ var WebPullToRefresh = (function () {
_setBodyClass();
};
var _panRight = function(e) {
e.preventDefault();
pan.distanceRight = e.distance / options.resistance;
if ( pan.distanceLeft < e.distance / options.resistance ) {
pan.distanceLeft = 0;
} else {
pan.distanceLeft = e.distance / options.resistance;
}
_setBodyClass();
};
var _panLeft = function(e) {
e.preventDefault();
pan.distanceLeft = e.distance / options.resistance;
if ( pan.distanceRight < e.distance / options.resistance ) {
pan.distanceRight = 0;
} else {
pan.distanceRight = e.distance / options.resistance;
}
_setBodyClass();
};
/**
* Set the CSS transform on the content element to move it on the screen.
*/
@ -139,6 +189,16 @@ var WebPullToRefresh = (function () {
* Set/remove the loading body class to show or hide the loading indicator after pull down.
*/
var _setBodyClass = function() {
if ( pan.distanceRight > options.distanceToBack ) {
bodyClass.add( 'ptr-back' );
} else {
bodyClass.remove( 'ptr-back' );
}
if ( pan.distanceLeft > options.distanceToForward ) {
bodyClass.add( 'ptr-forward' );
} else {
bodyClass.remove( 'ptr-forward' );
}
if ( pan.distance > options.distanceToRefresh ) {
bodyClass.add( 'ptr-refresh' );
} else {
@ -153,9 +213,6 @@ var WebPullToRefresh = (function () {
* @param {object} e - Event object
*/
var _panEnd = function(e) {
if ( ! pan.enabled ) {
return;
}
e.preventDefault();
@ -167,11 +224,17 @@ var WebPullToRefresh = (function () {
if ( document.body.classList.contains( 'ptr-refresh' ) ) {
_doLoading();
} else if ( document.body.classList.contains( 'ptr-back' ) ) {
_doBack();
} else if ( document.body.classList.contains( 'ptr-forward' ) ) {
_doForward();
} else {
_doReset();
}
pan.distance = 0;
pan.distanceRight = 0;
pan.distanceLeft = 0;
pan.enabled = false;
};
@ -196,11 +259,24 @@ var WebPullToRefresh = (function () {
}, 1000 );
};
var _doBack = function() {
window.history.back();
_doReset();
};
var _doForward = function() {
window.history.forward();
_doReset();
};
/**
* Reset all elements to their starting positions before any paning took place.
*/
var _doReset = function() {
bodyClass.remove( 'ptr-loading' );
bodyClass.remove( 'ptr-back' );
bodyClass.remove( 'ptr-forward' );
bodyClass.remove( 'ptr-pulling' );
bodyClass.remove( 'ptr-refresh' );
bodyClass.add( 'ptr-reset' );