added touch events
diff --git a/Makefile b/Makefile
index 73ce259..3600040 100755
--- a/Makefile
+++ b/Makefile
@@ -45,10 +45,10 @@
js: lib/phonegap.js
-lib/phonegap.js: js/phonegap.js.base js/acceleration.js js/accelerometer.js js/application.js js/audio.js js/camera.js js/contacts.js js/debugconsole.js js/device.js js/file.js js/geolocation.js js/map.js js/mojo.js js/mouse.js js/network.js js/notification.js js/orientation.js js/position.js js/service.js js/sms.js js/telephony.js js/window.js js/windowproperties.js
+lib/phonegap.js: js/phonegap-core.js js/acceleration.js js/accelerometer.js js/application.js js/audio.js js/camera.js js/contacts.js js/debugconsole.js js/device.js js/file.js js/geolocation.js js/map.js js/mojo.js js/mouse.js js/network.js js/notification.js js/orientation.js js/position.js js/service.js js/sms.js js/telephony.js js/window.js js/windowproperties.js lib/thumbs.0.5.2.js
$(MKPATH) lib
$(RM_F) $@
- $(CAT) js/phonegap.js.base >> $@
+ $(CAT) js/phonegap-core.js >> $@
$(CAT) js/acceleration.js >> $@
$(CAT) js/accelerometer.js >> $@
$(CAT) js/application.js >> $@
@@ -71,3 +71,4 @@
$(CAT) js/telephony.js >> $@
$(CAT) js/window.js >> $@
$(CAT) js/windowproperties.js >> $@
+ $(CAT) lib/thumbs.0.5.2.js >> $@
diff --git a/framework/dashboard.html b/framework/dashboard.html
index b09f6cf..5ae26d0 100644
--- a/framework/dashboard.html
+++ b/framework/dashboard.html
@@ -7,11 +7,8 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Dashboard</title>
-
- <link rel="stylesheet" type="text/css" href="menu.css">
-
</head>
<body>
-Win
+Hello World
</body>
</html>
diff --git a/framework/index.html b/framework/index.html
index 693206f..fd3d1fb 100644
--- a/framework/index.html
+++ b/framework/index.html
@@ -16,35 +16,29 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>PhoneGap WebOS</title>
- <link rel="stylesheet" href="jqtouch/jqtouch.css" />
- <link rel="stylesheet" href="jqtouch/themes/default/theme.css" />
- <link rel="stylesheet" href="css/main.css" />
-
-
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript">
// create global var for sqlite database instance
var db;
</script>
-
-
+
<link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body>
-<a onclick="dashboard();">Dashboard</a>
-
<div id="menu">
<a onclick="page('screen');">Adjust Screen Settings</a>
+ <a onclick="page('notifications');">Notification Examples</a>
<a onclick="info();">Show Device Info</a>
- <a onclick="net();">Show Network Info</a>
- <a onclick="navigator.notification.showBanner('Banner test','banner');menu(false);">Show Banner Message</a>
+ <a onclick="net();">Show Network Info</a>
<a onclick="window.debug.log('trace this');">Console Logging</a>
<a onclick="launchmap()">Launch Map App</a>
- <a onclick="navigator.window.newCard('about:blank', '<html><body>Hello again!</body></html>');menu(false);">Launch New Card</a>
+ <a onclick="navigator.window.newCard('dashboard.html'); menu(false);">Launch New Card</a>
<a onclick="getPicture();">Launch Camera</a>
- <a onclick="storage();">Storage Tests</a>
+ <a onclick="storage();">Storage Tests</a>
+ <a onclick="callPhoneGapExec();menu(false);">PhoneGap Exec</a>
+ <a onclick="page('touchDemo');">Touch Events Examples</a>
<a onclick="menu(false);">Done</a>
</div>
@@ -52,31 +46,53 @@
<p><input type="checkbox" onchange="navigator.window.setFullScreen(this.checked);">navigator.window.setFullScreen();</p>
<p><input type="checkbox" onchange="navigator.window.blockScreenTimeout(this.checked);">navigator.window.blockScreenTimeout();</p>
<p><input type="checkbox" onchange="navigator.accelerometer.setFastAccelerometer(this.checked);">navigator.accelerometer.fastAccelerometer();</p>
+
<p>navigator.orientation.setWindowOrientation();</p>
<input type="radio" onchange="navigator.orientation.setOrientation(this.value);" value="up" name="orientation" checked>up
<input type="radio" onchange="navigator.orientation.setOrientation(this.value);" value="down" name="orientation">down
<input type="radio" onchange="navigator.orientation.setOrientation(this.value);" value="left" name="orientation">left
<input type="radio" onchange="navigator.orientation.setOrientation(this.value);" value="right" name="orientation">right
<input type="radio" onchange="navigator.orientation.setOrientation(this.value);" value="free" name="orientation">free
-
-
+
<p>navigator.orientation.getCurrentOrientation()</p>
- <input type="button" onclick="displayCurrentOrientation();" value="Get Current Orientation">
-
- <p>navigator.notification.alert();</p>
- <input type="button" onclick="navigator.notification.alert('alert');" value="Show Alert">
-
+ <button onclick="displayCurrentOrientation();">Get Current Orientation</button>
</div>
-<div id="info"></div>
+<div id="notifications" style="display: none;">
+ <p>navigator.notification.newDashboard();</p>
+ <button onclick="navigator.notification.newDashboard('dashboard.html');">Dashboard</button>
+
+ <p>navigator.notification.alert();</p>
+ <button onclick="navigator.notification.alert('alert');">Show Alert</button>
+
+ <p>navigator.notification.showBanner();</p>
+ <button onclick="navigator.notification.showBanner('Banner test','banner');">Show Banner Message</button>
+</div>
-<div id="net"></div>
+<div id="blank" width="100%" height="100%" style="background: #FFFFFF;"></div>
-<div id="camera"></div>
+<div id="info" style="display: none;"></div>
+
+<div id="net" style="display: none;"></div>
+
+<div id="camera" style="display: none;"></div>
+
+<div id="touchDemo" style="display: none;">
+ <p>Touch Events Demo</p>
+ <button id="btnTouchStart">Touch Start</button>
+ <button id="btnTouchEnd">Touch End</button>
+ <p>Run your finger/mouse along button to trigger touchmove</p>
+ <button id="btnTouchMove" width="250">Touch Move</button>
+ <p>Mouse Events Demo</p>
+ <button id="btnMouseDown">Mouse Down</button>
+ <button id="btnMouseUp">Mouse Up</button>
+ <p>Run your finger/mouse along button to trigger mousemove</p>
+ <button id="btnMouseMove" width="250">Mouse Move</button>
+</div>
<div id="storage" style="display: none">
<p>storage tests</p>
- <input type="button" onclick="createDB();" value="Test SQLite DB">
+ <button onclick="createDB();">Test SQLite DB</button>
<div id="storageResults"></div>
</div>
@@ -85,6 +101,33 @@
// PhoneGap is ready, do all your stuf here
}, false);
+// setup event listeners for touch events
+document.querySelector('#btnTouchStart').addEventListener('touchstart', onTouchEvent, false);
+document.querySelector('#btnTouchEnd').addEventListener('touchend', onTouchEvent, false);
+document.querySelector('#btnTouchMove').addEventListener('touchmove', onTouchEvent, false);
+// setup event listeners for mouse events
+document.querySelector('#btnMouseDown').addEventListener('mousedown', onTouchEvent, false);
+document.querySelector('#btnMouseUp').addEventListener('mouseup', onTouchEvent, false);
+document.querySelector('#btnMouseMove').addEventListener('mousemove', onTouchEvent, false);
+
+function onTouchEvent(event) {
+ navigator.notification.alert(event.type);
+}
+
+function callPhoneGapExec() {
+ //win, fail, clazz, action, args
+ PhoneGap.exec(success, fail, 'navigator.notification', 'alert', 'testing exec');
+
+ function success(msg) {
+ console.log(msg + ' exec succeeded');
+ }
+
+ function fail(msg) {
+ //navigator.notification.alert('exec failed');
+ console.log(msg + ' exec failed');
+ }
+}
+
function createDB() {
document.getElementById('storageResults').innerHTML = '';
db = window.openDatabase("test", "1.0", "Test DB", false);
@@ -122,10 +165,6 @@
}
}
-function dashboard() {
- navigator.notification.newDashboard("dashboard.html");
-}
-
function info() {
var deviceinfo = JSON.stringify(navigator.device.getDeviceInfo()).replace(/,/g, ', ');
page('info');
diff --git a/framework/phonegap.js b/framework/phonegap.js
index 790c72d..ee7bba1 100644
--- a/framework/phonegap.js
+++ b/framework/phonegap.js
@@ -4,8 +4,57 @@
function PhoneGap() {
ready = true;
available = true;
- sceneController = null;
-};
+ sceneController = null;
+};
+
+PhoneGap.exec = function(win, fail, clazz, action, args) {
+
+ setTimeout(function() {
+ PhoneGap.plugins[clazz].execute(action, args, win, fail);
+ }, 0);
+
+}
+
+// translates the action into an API call
+notifications = {
+ execute: function(action, args, win, fail) {
+ var actionFound = false;
+ switch(action) {
+ case 'alert':
+ navigator.notification.alert(args);
+ actionFound = true;
+ break;
+ case 'showBanner':
+ navigator.notification.showBanner(args);
+ actionFound = true;
+ break;
+ case 'newDashboard':
+ navigator.notification.newDashboard();
+ break;
+ case 'removeBannerMessage':
+ navigator.notification.removeBannerMessage();
+ break;
+ case 'clearBannerMessage':
+ navigator.notification.clearBannerMessage();
+ break;
+ case 'vibrate':
+ navigator.notification.vibrate();
+ break;
+ case 'beep':
+ navigator.notification.beep();
+ break;
+ }
+
+ if (actionFound)
+ win(args);
+ else
+ fail('action not found');
+ }
+}
+
+// this mapping acts as a shim to the webOS APIs
+PhoneGap.plugins = {};
+PhoneGap.plugins['navigator.notification'] = notifications;
document.addEventListener('DOMContentLoaded', function () {
window.phonegap = new PhoneGap();
@@ -424,6 +473,7 @@
this.version = null;
this.name = null;
this.uuid = null;
+ this.deviceInfo = null;
};
/*
@@ -432,7 +482,7 @@
* var deviceinfo = JSON.stringify(navigator.device.getDeviceInfo()).replace(/,/g, ', ');
*/
Device.prototype.getDeviceInfo = function() {
- return JSON.parse(PalmSystem.deviceInfo);
+ return this.deviceInfo;//JSON.parse(PalmSystem.deviceInfo);
};
/*
@@ -462,6 +512,15 @@
}, 10);
this.setUUID();
+ this.setDeviceInfo();
+};
+
+Device.prototype.setDeviceInfo = function() {
+ var parsedData = JSON.parse(PalmSystem.deviceInfo);
+
+ this.deviceInfo = parsedData;
+ this.version = parsedData.platformVersion;
+ this.name = parsedData.modelName;
};
Device.prototype.setUUID = function() {
@@ -1393,4 +1452,83 @@
fastAccelerometer = false;
};
-if (typeof navigator.windowProperties == 'undefined') navigator.windowProperties = new WindowProperties();
\ No newline at end of file
+if (typeof navigator.windowProperties == 'undefined') navigator.windowProperties = new WindowProperties();(function(window) {
+
+ /**
+ * Do not use thumbs.js on touch-enabled devices
+ *
+ * Thanks to Jesse MacFadyen (purplecabbage):
+ * https://gist.github.com/850593#gistcomment-22484
+ */
+ try {
+ document.createEvent('TouchEvent');
+ return;
+ }
+ catch(e) {
+ }
+
+ /**
+ * Map touch events to mouse events
+ */
+ var eventMap = {
+ 'mousedown': 'touchstart',
+ 'mouseup': 'touchend',
+ 'mousemove': 'touchmove'
+ };
+
+ /**
+ * Fire touch events
+ *
+ * Monitor mouse events and fire a touch event on the
+ * object broadcasting the mouse event. This approach
+ * likely has poorer performance than hijacking addEventListener
+ * but it is a little more browser friendly.
+ */
+ window.addEventListener('load', function() {
+ for (var key in eventMap) {
+ document.body.addEventListener(key, function(e) {
+ // Supports:
+ // - addEventListener
+ // - setAttribute
+ var event = createTouchEvent(eventMap[e.type], e);
+ e.target.dispatchEvent(event);
+
+ // Supports:
+ // - element.ontouchstart
+ var fn = e.target['on' + eventMap[e.type]];
+ if (typeof fn === 'function') fn(e);
+ }, false);
+ }
+ }, false);
+
+ /**
+ * Utility function to create a touch event.
+ *
+ * @param name {String} of the event
+ * @return event {Object}
+ */
+ var createTouchEvent = function(name, e) {
+ var event = document.createEvent('MouseEvents');
+
+ event.initMouseEvent(
+ name,
+ e.bubbles,
+ e.cancelable,
+ e.view,
+ e.detail,
+ e.screenX,
+ e.screenY,
+ e.clientX,
+ e.clientY,
+ e.ctrlKey,
+ e.altKey,
+ e.shiftKey,
+ e.metaKey,
+ e.button,
+ e.relatedTarget
+ );
+
+ return event;
+ };
+
+})(window);
diff --git a/js/phonegap-core.js b/js/phonegap-core.js
new file mode 100644
index 0000000..70e9c85
--- /dev/null
+++ b/js/phonegap-core.js
@@ -0,0 +1,62 @@
+if (typeof(DeviceInfo) != 'object')
+ DeviceInfo = {};
+
+function PhoneGap() {
+ ready = true;
+ available = true;
+ sceneController = null;
+};
+
+PhoneGap.exec = function(win, fail, clazz, action, args) {
+
+ setTimeout(function() {
+ PhoneGap.plugins[clazz].execute(action, args, win, fail);
+ }, 0);
+
+}
+
+// translates the action into an API call
+notifications = {
+ execute: function(action, args, win, fail) {
+ var actionFound = false;
+ switch(action) {
+ case 'alert':
+ navigator.notification.alert(args);
+ actionFound = true;
+ break;
+ case 'showBanner':
+ navigator.notification.showBanner(args);
+ actionFound = true;
+ break;
+ case 'newDashboard':
+ navigator.notification.newDashboard();
+ break;
+ case 'removeBannerMessage':
+ navigator.notification.removeBannerMessage();
+ break;
+ case 'clearBannerMessage':
+ navigator.notification.clearBannerMessage();
+ break;
+ case 'vibrate':
+ navigator.notification.vibrate();
+ break;
+ case 'beep':
+ navigator.notification.beep();
+ break;
+ }
+
+ if (actionFound)
+ win(args);
+ else
+ fail('action not found');
+ }
+}
+
+// this mapping acts as a shim to the webOS APIs
+PhoneGap.plugins = {};
+PhoneGap.plugins['navigator.notification'] = notifications;
+
+document.addEventListener('DOMContentLoaded', function () {
+ window.phonegap = new PhoneGap();
+ navigator.device.deviceReady();
+});
diff --git a/js/phonegap.js.base b/js/phonegap.js.base
deleted file mode 100644
index 0c79a0e..0000000
--- a/js/phonegap.js.base
+++ /dev/null
@@ -1,13 +0,0 @@
-if (typeof(DeviceInfo) != 'object')
- DeviceInfo = {};
-
-function PhoneGap() {
- ready = true;
- available = true;
- sceneController = null;
-};
-
-document.addEventListener('DOMContentLoaded', function () {
- window.phonegap = new PhoneGap();
- navigator.device.deviceReady();
-});
