Skip to content

prevent undefined access on some mobile devices and mobile emulators #36

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Kaster wants to merge 2 commits into
base: master
Choose a base branch
from
Open

prevent undefined access on some mobile devices and mobile emulators #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1649a00
prevent undefined access on mobile
Kaster Sep 10, 2015
c373a23
example for mobile devices
Kaster Sep 10, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 71 additions & 0 deletions example/sketch_mobile.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<html class="ui-mobile"><head>
<title>Signature</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script src="../src/sketch.js" type="text/javascript"></script>
<script type="text/javascript">//<!--
var sketchId = "simple_sketch";
var sktch = undefined;
var resetCanvas = function() {
if (sktch !== undefined) {
sktch.sketch().actions = []; // this line empties the actions.
var myCanvas = document.getElementById(sketchId);
if (myCanvas) {
var ctx = myCanvas.getContext('2d');
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
}
}
};
var saveCanvas = function() {
// TODO
/* replace canvas with image */
var canvas = document.getElementById(sketchId);
var img = canvas.toDataURL("image/png");
$('#'+sketchId).replaceWith('<img src="'+img+'"/>');
$("#buttonReset").remove();
alert(img);
};
$(function() {
sktch = $('#'+sketchId).sketch();
});
//--></script>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="0">
</head>
<body id="bbody" marginwidth="0" leftmargin="0" marginheight="0" topmargin="0">
<div data-role="page" id="smartphoneVerzeichnisseDialog" class="ui-page ui-page-theme-a ui-page-footer-fixed ui-page-active" data-url="smartphoneVerzeichnisseDialog" tabindex="0" style="padding-bottom: 53px; min-height: 683px;">
<div data-role="header" role="banner" class="ui-header ui-bar-inherit">
<h1 id="pfad" class="ui-title" role="heading" aria-level="1" style="text-align: left;margin-left:5%;margin-right:5%;">Signature</h1>
</div>
<div data-role="content" id="eintraege" class="ui-content" role="main">
<h5 id="beschreibung" class="ui-title" role="heading" aria-level="1" style="text-align: left;margin-left:5%;margin-right:5%;">You accept our conditions?<br /><br /></h5>
<div style="text-align:center;">
<canvas id="simple_sketch" width="300" height="140" style="border:solid 1px gray;background-color:white;"></canvas>
</div>
<div style="text-align:center;">
<a id="buttonReset" href="#" onclick="resetCanvas();return false;" style="margin-top:1em;" data-theme="b" data-role="button" data-icon="delete" data-iconpos="left" data-inline="true">Reset</a>
</div>
</div>
<div data-role="footer" class="ui-bar ui-footer ui-bar-b ui-footer-fixed slideup" style="height:45px;" data-position="fixed" data-theme="a" data-content-theme="b" role="contentinfo">
<a id="bars-button" data-icon="bars" class="ui-btn-left ui-link ui-btn ui-icon-bars ui-btn-icon-notext ui-shadow ui-corner-all" style="margin-top:5px;" href="#navpanel" data-iconpos="notext" data-role="button">Menu</a><a id="buttonSpeichern" href="#" onclick="saveCanvas();return false;" data-role="button" data-icon="check" data-theme="b" data-iconpos="left" style="margin-top:5px;float:right;margin-right:3em;" class="ui-link ui-btn ui-btn-b ui-icon-check ui-btn-icon-left ui-shadow ui-corner-all">Save</a>
</div>
<div data-theme="b" data-dismissible="true" data-display="overlay" data-position="left" id="navpanel" data-role="panel" data-swipe-close="true" class="ui-panel ui-panel-position-left ui-panel-display-overlay ui-panel-closed ui-body-a ui-panel-animate">
<div class="ui-panel-inner"><div data-role="controlgroup" data-corners="false" class="ui-controlgroup ui-controlgroup-vertical"><div class="ui-controlgroup-controls ">
<a href="#" data-theme="b" data-role="button" data-icon="clock" class="ui-link ui-btn ui-btn-b ui-icon-clock ui-btn-icon-left ui-shadow ui-corner-all ui-first-child">Menu 1</a>
<a href="#" data-theme="b" data-role="button" data-icon="bullets" class="ui-link ui-btn ui-btn-b ui-icon-bullets ui-btn-icon-left ui-shadow ui-corner-all">Menu 2</a>
<a href="#" data-theme="b" data-role="button" data-icon="grid" class="ui-link ui-btn ui-btn-b ui-icon-grid ui-btn-icon-left ui-shadow ui-corner-all">Menu 3</a>
<a href="#" data-theme="b" data-role="button" data-icon="calendar" class="ui-link ui-btn ui-btn-b ui-icon-calendar ui-btn-icon-left ui-shadow ui-corner-all">Menu 4</a>
<a href="#" data-theme="b" data-role="button" data-icon="tag" class="ui-link ui-btn ui-btn-b ui-icon-tag ui-btn-icon-left ui-shadow ui-corner-all">Menu 5</a>
<a href="#" data-theme="b" data-role="button" data-icon="power" class="ui-link ui-btn ui-btn-b ui-icon-power ui-btn-icon-left ui-shadow ui-corner-all ui-last-child">log off</a>
</div></div><div data-role="controlgroup" data-corners="false" style="bottom:0px;display:block;text-align:center;padding:0px;" class="ui-controlgroup ui-controlgroup-vertical"><div class="ui-controlgroup-controls ">
<a href="#" data-rel="close" data-theme="a" data-role="button" data-icon="back" class="ui-link ui-btn ui-btn-b ui-icon-back ui-btn-icon-left ui-shadow ui-corner-all ui-first-child ui-last-child">close</a>
<h4 style="color:yellow;">TTT</h4>
<h5 style="color:yellow;font-size:0.8em;">Version alpha 2015-05-21-1254</h5>
<p style="color:yellow;font-size:0.8em;">Copyright � XXX 2015<br><br></p>
</div></div></div>

</div>
<div class="ui-loader ui-corner-all ui-body-b ui-loader-default"><span class="ui-icon-loading"></span><h1>loading</h1></div><div class="ui-panel-dismiss"></div></div>
</body></html>
2 changes: 1 addition & 1 deletion lib/sketch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ var __slice = Array.prototype.slice;
return this.redraw();
};
Sketch.prototype.onEvent = function(e) {
if (e.originalEvent && e.originalEvent.targetTouches) {
if (e.originalEvent && e.originalEvent.targetTouches && e.originalEvent.targetTouches[0] !== undefined) {
e.pageX = e.originalEvent.targetTouches[0].pageX;
e.pageY = e.originalEvent.targetTouches[0].pageY;
}
Expand Down