I've been stuck for 2 days and I can't find a solution.
My development enviroment:
Cordova 3.4.0-0.1.0,jQuery v1.10.2, BxSlider v4.1.1 and Android
When I select a category I make an ajax call and load my bxslider from the server
My code: front
$('.background_folder').on("change", function(){
var folder = $(this).val();
if(folder != '' && folder != undefined){
var jqxhr = $.ajax({
url:'http://myserver/get_backgrounds.php?folder='+folder
})
.done(function( html ) {
$('.background_sample').html(html);
if ($(window).width() <= 320 || $(window).height() <= 480) {
var s1 = $('.slider1').bxSlider({
slideWidth: 230,
minSlides: 1,
maxSlides: 1,
slideMargin: 10,
pager: false
});
}else{
var s2 = $('.slider1').bxSlider({
slideWidth: 265,
minSlides: 2,
maxSlides: 3,
slideMargin: 10,
pager: false
});
}
})
.always(function() {
alert( "complete" );
$('.convert').on("click", function(){
$('.convert').css({border: '2px solid transparent'}).animate({
opacity: 0.5
}, 500 );
$(this).css({border: '2px solid #f37736'}).animate({
opacity: 1
}, 500 );
});
});
}
});
My code: back
function get_backgrounds($folder){
//image backgrounds
$backgrounds = array();
if ($handle = opendir("../backgrounds/".$folder)) {
//$backgrounds = array();
while (false !== ($entry = readdir($handle))) {
$backgrounds[] = $entry;
}
foreach ($backgrounds as $key => $value) {
if($value == '.' || $value == '..'){
unset($backgrounds[$key]);
}
}
}
$i = 0;
echo '<div class="slider1">';
foreach ($backgrounds as $key => $value) {
if($i == 0){
$selected = 'checked="checked"';
}else{
$selected = '';
}
$idvalue = 'data'.$key;
echo '<div class="slide">';
echo '<div class="background_thumb">';
echo '<label class="fb" for="'.$idvalue.'">';
echo '<input '.$selected.' type="radio" name="background" id="'.$idvalue.'" value="'.$value.'">';
echo '<img class="convert" src="backgrounds/'.$folder.'/'.$value.'">';
echo '</label>';
echo '</div>';
echo '</div>';
$i++;
}
echo '</div>';
}
For any reason in Android 4.4.2 is fine but in Android 4.3 and lower versions the content is there but I can't see it.
Any idea what is happening ???
Certainly it was a CSS issue, for some reason I was losing the height, so my solution:
$('.slider1').bxSlider({
slideWidth: 265,
minSlides: 2,
maxSlides: 3,
slideMargin: 10,
pager: false,
onSliderLoad: function(){
$('.bx-viewport').css({"height":"80px !important"});
$('.convert').css({"height":"80px !important"});
}
});
Related
I want to implement print functionality in Android app, I'm using AngularJS. I have tried the below code, but it works only on browser, it doesn't work on Android.
AngularJS:
$scope.print = function (divName) {
var w = window.open();
w.document.write($('#' + divName).html());
w.print();
w.close();
}
Html:
<img ng-click="print('print');" class="card-img-top image-responsive" src="./plugins/images/print.png" alt="Card image cap">
<div id="print" style="display:none;">
<style>
#page {
size: auto;
margin: 7mm;
}
#media all {
.page-break {
display: none;
}
}
#media print {
.page-break {
display: block;
page-break-before: always;
}
}
</style>
<div class="row">
</div>
</div>
Update:
I have tried the solution provided by #VicJordan, But it gives the below error.
ReferenceError: cordova is not defined at ChildScope.$scope.print
(MyJs.js:37) at fn (eval at compile (angular.js:15500),
:4:149) at callback (angular.js:27285) at ChildScope.$eval
(angular.js:18372) at ChildScope.$apply (angular.js:18472) at
HTMLImageElement. (angular.js:27290) at
HTMLImageElement.dispatch (jquery.min.js:3) at
HTMLImageElement.r.handle (jquery.min.js:3)
Package.json
{
"name": "helloworld",
"displayName": "HelloCordova",
"version": "1.0.0",
"description": "A sample Apache Cordova application that responds to the deviceready event.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Apache Cordova Team",
"license": "Apache-2.0",
"dependencies": {
"cordova-android": "^7.0.0",
"cordova-browser": "^5.0.3",
"cordova-plugin-device-orientation": "^1.0.7",
"cordova-plugin-printer": "^0.7.3",
"cordova-plugin-whitelist": "^1.3.3"
},
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-device-orientation": {},
"cordova-plugin-printer": {}
},
"platforms": [
"browser",
"android"
]
}
}
Update2
MyJS.js
app.controller('ReciepieController', ['$scope', '$http', '$rootScope', '$state', '$window', '$uibModal', function ($scope, $http, $rootScope, $state, $window, $uibModal) {
$("#header").show();
$rootScope.back = true;
$rootScope.enableback = true;
$scope.toggleText = "See More...";
$scope.toggle = 0;
$scope.print = function (divName) {
console.log('2222222222222222222');
//Enter the page location.
var page = document.getElementById(divName).innerHTML;
cordova.plugins.printer.print(page, 'Document.html', function () {
alert('printing finished or canceled')
});
}
$scope.change = function () {
if ($scope.toggle == 0) {
$scope.toggleText = "See Less...";
$scope.toggle = 1;
}
else if ($scope.toggle == 1) {
$scope.toggleText = "See More...";
$scope.toggle = 0;
}
}
var recipe = null;
var categorylist = [];
$scope.GetRecipe = function (paginate) {
if (paginate == "next") {
if ($rootScope.RecipeIndex < categorylist.length - 1) {
$rootScope.RecipeIndex = $rootScope.RecipeIndex + 1;
$scope.IsNext = true;
$scope.IsPrevious = true;
if ($rootScope.RecipeIndex == categorylist.length - 1) { $scope.IsNext = false; }
}
}
else if (paginate == "previous") {
if ($rootScope.RecipeIndex < $rootScope.RecipeList.length) {
$rootScope.RecipeIndex = $rootScope.RecipeIndex - 1;
$scope.IsNext = true;
$scope.IsPrevious = true;
}
}
if ($rootScope.RecipeIndex == -1) {
$rootScope.RecipeIndex = 0;
}
if ($rootScope.RecipeIndex == 0 || $rootScope.RecipeIndex == -1) { $scope.IsPrevious = false; }
recipe = categorylist[$rootScope.RecipeIndex];
$scope.Ingredient = recipe.recipeIngredients.split('\n');
$scope.Method = recipe.recipeMethod.split('\n');
$scope.Image = recipe.imageName;
$scope.Name = recipe.recipeTitle;
$scope.Description = recipe.recipeDescription;
$scope.Prep = recipe.preparationTime;
$scope.Cook = recipe.cookingTime;
$scope.Serves = recipe.servings;
$scope.QrCode = recipe.QrCode;
$rootScope.IsBack = false;
$rootScope.IsTitle = false;
}
$scope.share = function () {
var modalInstance = $uibModal.open({
animation: true,
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'QrCode.html',
controller: 'ReciepieController',
controllerAs: '$ctrl',
size: 'sm',
backdrop: 'static', /* this prevent user interaction with the background */
keyboard: false
});
}
function NextRecipe() {
alert();
}
}]);
I also had the same issue.
Try to do it using cordova-plugin-printer plugin. It will solve your problem. From your code it looks you want to print div by id. Below are various usage of above plugin:
Print the whole HTML page:
var page = location.href;
cordova.plugins.printer.print(page, 'Document.html');
Print the content from one part of the page:
var page = document.getElementById('legal-notice');
cordova.plugins.printer.print(page, 'Document.html');
Print some custom content:
var page = '<h1>Hello Document</h1>';
cordova.plugins.printer.print(page, 'Document.html');
For more options, check out the documentation : https://github.com/katzer/cordova-plugin-printer#usage
It works for me in javascript
var dowloadurl = "/.../sample.pdf" // Here your file location
window.cordova.plugins.FileOpener.openFile(
dowloadurl,
onSuccessFileOpen,
onErrorFileOpen
);
var onSuccessFileOpen = function (data) {
alert('onSuccessFileOpen');
};
function onErrorFileOpen(err) {
alert('message: ' + err);
}
I am developing an ionic app. I am using cordova's FileTransfer plugin to download pdf file. I am able to download the file to my internal memory,but not able to display single progress bar for downloaidng.
What is the best way of displaying progress for downloading.
Controller
var url = 'http://someurl.com/api/pdf_download/' + id;
// Android
var targetPath = 'file:///storage/sdcard0/' + id + '.pdf';
var trustHosts = true;
var options = {};
$cordovaFileTransfer.download(url, targetPath, options, trustHosts)
.then(function(result) {
console.log(result);
}, function() {
var alertPopup = $ionicPopup.alert({
title: 'No internet access',
buttons: [{
text: 'OK',
type: 'button-assertive'
}]
});
alertPopup.then(function() {});
}, function(progress) {
$timeout(function() {
$scope.downloadProgress = (progress.loaded / progress.total) * 100;
})
console.log('progress--->', $scope.downloadProgress);
});
I have used cordovaToast plugin for this feature.Here is the example for showing pdf download progress
html
<ion-view >
<div class="bar bar-subheader bar-positive" style="padding:0px;height: 8px;" >
<progress id="progressbar" max="100" value="{{ downloadProgress }}" class="progress"> </progress>
</div>
<ion-content>
</ion-content>
</ion-view>
css
.progress {
margin: 0 px;
height: 8 px;
background - color: #F1292B!important;
border - radius: 2 px;
box - shadow: 0 2 px 5 px rgba(0, 0, 0, 0.25) inset;
}
js
if (window.cordova) {
var url = '{{base_url}}/pdf_download/' + id;
// Android
var targetPath = 'file:///storage/sdcard0/' + 'fpl_' + id + '.pdf';
var trustHosts = true;
var options = {};
$cordovaFileTransfer.download(url, targetPath, options, trustHosts)
.then(function(result) {
$cordovaToast
.show('File downloaded successfully..', 'short', 'center')
.then(function() {
// success
}, function() {
// error
});
console.log(result);
}, function() {
var alertPopup = $ionicPopup.alert({
title: 'No internet access',
buttons: [{
text: 'OK',
type: 'button-assertive'
}]
});
alertPopup.then(function() {});
}, function(progress) {
var dnldpgs = progress.loaded.toString().substring(0, 2);
$scope.downloadProgress = parseInt(dnldpgs);
});
}
As benka already answered to my question, you should use the <progress> html element.
The full answer can be found over here -> https://stackoverflow.com/a/25553044/3671726
Am trying to user the $cordovaFileTransfer plugin from ngCordovato upload images in my ionic app.
However the images, never seem to upload. The app is running on my android phone and am debugging with chrome remote inspector, the network tab does not show any request for the upload.
This method gets images from the device
$scope.getImages = function() {
var options = {
maximumImagesCount: 2,
width: 800,
height: 800,
quality: 80
};
$cordovaImagePicker.getPictures(options)
.then(function (results) {
for (var i = 0; i < results.length; i++) {
$scope.queue.push({
filepath: results[i],
progress: 0.00
});
}
$scope.$emit('process:queue');
}, function(error) {
// error getting photos
});
};
And am handling the 'process:queue' event with this method
$scope.startUploadQueue = function() {
var server = encodeURI(serviceUrl());
var options = {
fileKey: "image",
httpMethod: 'PUT',
headers: {
"Authorization": "Bearer "+$user.getToken()
}
};
angular.forEach($scope.queue, function(item) {
$cordovaFileTransfer.upload(server, item.filepath, options, true)
.then(function (result) {
console.log(result);
$scope.media.push(result.data);
}, function (error) {
}, function (progress) {
item.progress = (progress.loaded / progress.total) * 100;
});
});
};
Am doing something incorrectly?. Any help will be appreciated
Cordova error message in logcat:
D/chromium(24894): Unknown chromium error: 0
D/CordovaLog(24894): file:///android_asset/www/index.html: Line 2 : Uncaught TypeError: object is not a function
E/Web Console(24894): Uncaught TypeError: object is not a function at file:///android_asset/www/index.html:2
I did not find an android_asset folder. My best bet is myapp-debug.apk/assets/www/index.html, but where should there be an issue in line 2?
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="apple-touch-icon" href="resources/icons/myApp-ico.png">
<title>myApp</title>
<script type="text/javascript" src="cordova.js"></script>
<style type="text/css">
/**
* Example of an initial loading indicator.
* It is recommended to keep this as minimal as possible to provide instant feedback
* while other resources are still being loaded for the first time
*/
html, body {
height: 100%;
background-color: #1985D0
}
#appLoadingIndicator {
position: absolute;
top: 50%;
margin-top: -15px;
text-align: center;
width: 100%;
height: 30px;
-webkit-animation-name: appLoadingIndicator;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: linear;
}
#appLoadingIndicator > * {
background-color: #FFFFFF;
display: inline-block;
height: 30px;
-webkit-border-radius: 15px;
margin: 0 5px;
width: 30px;
opacity: 0.8;
}
#-webkit-keyframes appLoadingIndicator{
0% {
opacity: 0.8
}
50% {
opacity: 0
}
100% {
opacity: 0.8
}
}
</style>
<!-- The line below must be kept intact for Sencha Command to build your application -->
<script type="text/javascript">
/**
* Sencha Blink - Testing
* #author Jacky Nguyen <jacky#sencha.com>
*/
(function(global) {
var head = global.document.head,
Ext = global.Ext;
if (typeof Ext == 'undefined') {
global.Ext = Ext = {};
}
function write(content) {
document.write(content);
}
function addMeta(name, content) {
var meta = document.createElement('meta');
meta.setAttribute('name', name);
meta.setAttribute('content', content);
head.appendChild(meta);
}
Ext.blink = function(options) {
var scripts = options.js || [],
styleSheets = options.css || [],
i, ln, path, platform, theme;
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode(
"#media screen and (orientation: portrait) {" +
"#-ms-viewport {width: 320px !important;}" +
"}" +
"#media screen and (orientation: landscape) {" +
"#-ms-viewport {width: 560px !important;}" +
"}"
)
);
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
addMeta('viewport', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no');
addMeta('apple-mobile-web-app-capable', 'yes');
addMeta('apple-touch-fullscreen', 'yes');
Ext.microloaded = true;
var filterPlatform = window.Ext.filterPlatform = function(platform) {
var profileMatch = false,
ua = navigator.userAgent,
j, jln, exclude;
platform = [].concat(platform);
function isPhone(ua) {
var isMobile = /Mobile(\/|\s)/.test(ua);
// Either:
// - iOS but not iPad
// - Android 2
// - Android with "Mobile" in the UA
return /(iPhone|iPod)/.test(ua) ||
(!/(Silk)/.test(ua) && (/(Android)/.test(ua) && (/(Android 2)/.test(ua) || isMobile))) ||
(/(BlackBerry|BB)/.test(ua) && isMobile) ||
/(Windows Phone)/.test(ua);
}
function isTablet(ua) {
return !isPhone(ua) && (/iPad/.test(ua) || /Android|Silk/.test(ua) || /(RIM Tablet OS)/.test(ua) ||
(/MSIE 10/.test(ua) && /; Touch/.test(ua)));
}
// Check if the ?platform parameter is set in the URL
var paramsString = window.location.search.substr(1),
paramsArray = paramsString.split("&"),
params = {},
testPlatform, i;
for (i = 0; i < paramsArray.length; i++) {
var tmpArray = paramsArray[i].split("=");
params[tmpArray[0]] = tmpArray[1];
}
testPlatform = params.platform;
if (testPlatform) {
return platform.indexOf(testPlatform) != -1;
}
for (j = 0, jln = platform.length; j < jln; j++) {
switch (platform[j]) {
case 'phone':
profileMatch = isPhone(ua);
break;
case 'tablet':
profileMatch = isTablet(ua);
break;
case 'desktop':
profileMatch = !isPhone(ua) && !isTablet(ua);
break;
case 'ios':
profileMatch = /(iPad|iPhone|iPod)/.test(ua);
break;
case 'android':
profileMatch = /(Android|Silk)/.test(ua);
break;
case 'blackberry':
profileMatch = /(BlackBerry|BB)/.test(ua);
break;
case 'safari':
profileMatch = /Safari/.test(ua) && !(/(BlackBerry|BB)/.test(ua));
break;
case 'chrome':
profileMatch = /Chrome/.test(ua);
break;
case 'ie10':
profileMatch = /MSIE 10/.test(ua);
break;
case 'windows':
profileMatch = /MSIE 10/.test(ua) || /Trident/.test(ua);
break;
case 'tizen':
profileMatch = /Tizen/.test(ua);
break;
case 'firefox':
profileMatch = /Firefox/.test(ua);
}
if (profileMatch) {
return true;
}
}
return false;
};
for (i = 0,ln = styleSheets.length; i < ln; i++) {
path = styleSheets[i];
if (typeof path != 'string') {
platform = path.platform;
exclude = path.exclude;
theme = path.theme;
path = path.path;
}
if (platform) {
if (!filterPlatform(platform) || filterPlatform(exclude)) {
continue;
}
Ext.theme = {
name: theme || 'Default'
};
}
write('<link rel="stylesheet" href="'+path+'">');
}
for (i = 0,ln = scripts.length; i < ln; i++) {
path = scripts[i];
if (typeof path != 'string') {
platform = path.platform;
exclude = path.exclude;
path = path.path;
}
if (platform) {
if (!filterPlatform(platform) || filterPlatform(exclude)) {
continue;
}
}
write('<script src="'+path+'"></'+'script>');
}
}
})(this);
if(document.URL.indexOf('file://')==0) {
oldBlink = Ext.blink;
Ext.blink = function(options) {
document.addEventListener("deviceready", function() {
oldBlink(options);
}, false);
}
}
</script>
</head>
<body>
<div id="appLoadingIndicator">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
Could it be that "Line 2" does refer to something different entirely? If yes, what does it refer to?
Prettify this ugly line of code and try again to get a useful error message.
<script type="text/javascript">
(function(e) {
var c = e.document.head,
b = e.Ext;
if (typeof b == "undefined") {
e.Ext = b = {}
}
function d(f) {
document.write(f)
}
function a(f, g) {
var h = document.createElement("meta");
h.setAttribute("name", f);
h.setAttribute("content", g);
c.appendChild(h)
}
b.blink = function(p) {
var j = p.js || [],
n = p.css || [],
l, m, o, g, k;
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var h = document.createElement("style");
h.appendChild(document.createTextNode("#media screen and (orientation: portrait) {#-ms-viewport {width: 320px !important;}}#media screen and (orientation: landscape) {#-ms-viewport {width: 560px !important;}}"));
document.getElementsByTagName("head")[0].appendChild(h)
}
a("viewport", "width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no");
a("apple-mobile-web-app-capable", "yes");
a("apple-touch-fullscreen", "yes");
b.microloaded = true;
var f = window.Ext.filterPlatform = function(u) {
var D = false,
r = navigator.userAgent,
w, A, s;
u = [].concat(u);
function z(E) {
var i = /Mobile(\/|\s)/.test(E);
return /(iPhone|iPod)/.test(E) || (!/(Silk)/.test(E) && (/(Android)/.test(E) && (/(Android 2)/.test(E) || i))) || (/(BlackBerry|BB)/.test(E) && i) || /(Windows Phone)/.test(E)
}
function y(i) {
return !z(i) && (/iPad/.test(i) || /Android|Silk/.test(i) || /(RIM Tablet OS)/.test(i) || (/MSIE 10/.test(i) && /; Touch/.test(i)))
}
var q = window.location.search.substr(1),
t = q.split("&"),
v = {},
B, x;
for (x = 0; x < t.length; x++) {
var C = t[x].split("=");
v[C[0]] = C[1]
}
B = v.platform;
if (B) {
return u.indexOf(B) != -1
}
for (w = 0, A = u.length; w < A; w++) {
switch (u[w]) {
case "phone":
D = z(r);
break;
case "tablet":
D = y(r);
break;
case "desktop":
D = !z(r) && !y(r);
break;
case "ios":
D = /(iPad|iPhone|iPod)/.test(r);
break;
case "android":
D = /(Android|Silk)/.test(r);
break;
case "blackberry":
D = /(BlackBerry|BB)/.test(r);
break;
case "safari":
D = /Safari/.test(r) && !(/(BlackBerry|BB)/.test(r));
break;
case "chrome":
D = /Chrome/.test(r);
break;
case "ie10":
D = /MSIE 10/.test(r);
break;
case "windows":
D = /MSIE 10/.test(r) || /Trident/.test(r);
break;
case "tizen":
D = /Tizen/.test(r);
break;
case "firefox":
D = /Firefox/.test(r)
}
if (D) {
return true
}
}
return false
};
for (l = 0, m = n.length; l < m; l++) {
o = n[l];
if (typeof o != "string") {
g = o.platform;
exclude = o.exclude;
k = o.theme;
o = o.path
}
if (g) {
if (!f(g) || f(exclude)) {
continue
}
b.theme = {
name: k || "Default"
}
}
d('<link rel="stylesheet" href="' + o + '">')
}
for (l = 0, m = j.length; l < m; l++) {
o = j[l];
if (typeof o != "string") {
g = o.platform;
exclude = o.exclude;
o = o.path
}
if (g) {
if (!f(g) || f(exclude)) {
continue
}
}
d('<script src="' + o + '"><\/script>')
}
}
})(this);
if (document.URL.indexOf("file://") == 0) {
oldBlink = Ext.blink;
Ext.blink = function(a) {
document.addEventListener("deviceready", function() {
oldBlink(a)
}, false)
}
}
Ext.blink({
id: "8b19cfab-9dd1-44d0-892e-28f50a42aecd",
js: [{
path: "lzstring.js",
update: "full",
version: "1.0.0"
}, {
path: "microloader-enhancement.js",
update: "full",
version: "1.0.0"
}, {
path: "app.js",
update: "full",
version: "1.1.11"
}],
css: [{
path: "resources/css/app.css",
update: "full",
theme: "Default"
}, {
path: "resources/css/sch.css",
update: "full"
}, {
path: "resources/css/myApp.css",
update: "full"
}]
});
</script>
The webviewis just trying to make you understand that you're trying to call functions from the object Ext (like Ext.blink) but did not include any js library that would include that object.
You need to copy extjs somewhere in jour www folder and then add the missing <script type="text/javascript" src="somewhere/extjs.js"></script> line.
Next time, put your js in a separate file, you should get more accurate error messages.
I found the error to be caused by a script that is added to index.html by code from another javascript, using Ext.Loader.injectScriptElement, which roughly translates to the following JS:
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
For some reason yet to be determined, the "object is not a function" error inside the referenced script is thrown inside Cordova WebView, but not inside Chrome. Once I found the line where it is thrown and corrected it, no more error is thrown.
For some other reason yet to be determined, it is thrown as an "error in index.html:2", whereas the error could also have read "error in locale-de.js:72".
Don't ask how I found it, this tiny little problem just required a whole week of debugging...
I have managed to build a simple jQuery flash card game following an online tutorial, resulting in this code:
var eng2fr = {
from: null,
to: null,
suggester: {
i: 0,
words: [
[ "beer", "binouze" ],
[ "another beer", "une autre bière" ],
[ "crazy", "fou" ],
[ "What the heck?!", "c'est quoi ce délire" ],
[ "whatever", "n'importe quoi"]
],
next: function(){
return this.words[ ( this.i++ ) % this.words.length ];
}
},
init: function(el) {
this.bindSwipe( $( "#display" ) );
this.from = $( "#from" );
this.to = $( "#to" );
Events.listen( "card_next", $.proxy( this.next, this ) );
Events.listen( "card_flip", $.proxy( this.flip, this ) );
// Begin!
this.next();
},
next: function() {
var to = this.to,
from = this.from,
next = this.suggester.next(),
_this = this;
to.text( next[ 0 ] );
to.addClass( "push in current" );
from.addClass( "push out" ).one( "webkitAnimationEnd", function() {
from.text( next[ 1 ] );
from.removeClass( "current push out" );
to.removeClass( "push in" );
_this.from = to;
_this.to = from;
});
},
flip: function() {
var to = this.to,
from = this.from,
_this = this;
to.addClass( "flip in current" );
from.addClass( "flip out" ).one( "webkitAnimationEnd", function() {
from.removeClass( "current flip out" );
to.removeClass( "flip in" );
_this.from = to;
_this.to = from;
});
},
bindSwipe: function( el ) {
this.xStart = null;
this.downEvent = 'ontouchstart' in document.documentElement && navigator.appVersion.indexOf( 'iPhone OS ' ) > -1 ? 'touchstart' : 'mousedown';
this.upEvent = 'ontouchend' in document.documentElement && navigator.appVersion.indexOf( 'iPhone OS ' ) > -1 ? 'touchend' : 'mouseup';
var _this = this;
el.bind({
"touchstart mousedown": function( e ) {
if( e.type !== _this.downEvent ) return;
e.preventDefault();
_this.xStart = e.pageX && e.pageX > 0 ? e.pageX : e.originalEvent.changedTouches[ 0 ].pageX;
},
"touchend mouseup": function( e ) {
if( e.type !== _this.upEvent ) return;
var newX = e.pageX && e.pageX > 0 ? e.pageX : e.originalEvent.changedTouches[ 0 ].pageX;
var diff = newX - _this.xStart;
if( Math.abs( diff ) > 20) {
if( diff > 0 ){
Events.trigger( "card_previous", {} );
} else {
Events.trigger( "card_next", {} );
}
} else {
Events.trigger( "card_flip", {} );
}
},
"touchmove": function( e ) {
e.preventDefault();
}
});
}
};
As you can probably see, this code relies on mouse events for flipping and browsing through cards. I'm looking to implement jQuery mobile swipe/tap functions in place of these and I was wondering if someone could help me with that or at least point me in the right direction.
Also, I'm wondering if there is a simple way to detect a shake event and use this to select a random "card" / word pair?