demo/index.html

<!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>