<!DOCTYPE html> <!-- 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. --> <html> <head> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> <link rel="stylesheet" type="text/css" href="css/index.css"> <title>3D Touch</title> <script> window.onerror = function(a,b,c) { alert(a); alert(c); } </script> </head> <body> <div class="app"> <h1>3D Touch</h1> <div id="deviceready" class="blink"> <p class="event listening">Connecting to Device</p> <p class="event received">Device is Ready</p> <button onclick="avail()">avail?</button><br/><br/> <button onclick="watchForceTouches()">watchForceTouches</button><br/><br/> <button onclick="enableLinkPreview()">enable link preview</button><br/><br/> <button onclick="disableLinkPreview()">disable link preview</button><br/><br/> <button onclick="configureQuickActions()">configure home icons</button><br/><br/> <a href="https://www.telerik.com">link to telerik.com</a><br/><br/> <a href="checkin.html">link to checkin.html</a> </div> </div> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> <script> function avail() { ThreeDeeTouch.isAvailable(function(avail) {alert("avail? " + avail)}); } function watchForceTouches() { ThreeDeeTouch.watchForceTouches(function(result) { console.log("force touch % " + result.force); // 84 console.log("force touch timestamp " + result.timestamp); // 1449908744.706419 console.log("force touch x coordinate " + result.x); // 213 console.log("force touch y coordinate " + result.y); // 41 }); } function enableLinkPreview() { ThreeDeeTouch.enableLinkPreview(); } function disableLinkPreview() { ThreeDeeTouch.disableLinkPreview(); } function configureQuickActions() { ThreeDeeTouch.configureQuickActions([ { type: 'checkin', // optional, but can be used in the onHomeIconPressed callback title: 'Check in', // mandatory subtitle: 'Quickly check in', // optional iconType: 'compose' // optional }, { type: 'share', title: 'Share', subtitle: 'Share like you care', iconType: 'Share' // optional, case insensitive }, { type: 'search', title: 'Search', iconType: 'Search' // iconType is case insensitive }, { title: 'Show favorites', iconTemplate: 'HeartTemplate' // from Assets catalog, note that there's also an iconType 'Love' } ]); } // TODO should be in generic spot (index.js) so it will always be triggered, even on warm start from a page deep down in the app document.addEventListener('deviceready', function() { ThreeDeeTouch.onHomeIconPressed = function(payload) { console.log("Icon pressed. Type: " + payload.type + ". Title: " + payload.title + "."); if (payload.type == 'checkin') { document.location = 'checkin.html'; } else if (payload.type == 'share') { document.location = 'share.html'; } else { // wrapping in a timeout, otherwise it collides with the splashscreen setTimeout(function() { alert(JSON.stringify(payload)); }, 500); } } }, false); </script> </body> </html>