Create a gist now

Instantly share code, notes, and snippets.

<pre id="forcelog">Waiting for force touch...</pre>
<div id="forceclick">&#x261e;</div>
<style type="text/css">
#forcelog { font-family: "Source Code Pro", Consolas, Monaco, "Andale Mono", "Lucida Sans Typewriter", Courier, "Courier New", monospace; }
#forceclick { display: block; width: 50%; padding: 10px; margin: 1em auto; background: gray; color: white; text-align: center; font-size: 3em; line-height: 3em; }
#forceclick[mouse-down] { background: red; }
#forceclick[force-down] { background: green; }
</style>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
!(function ($) {
var FORCE_BEGIN = "webkitmouseforcewillbegin"
var FORCE_DOWN = "webkitmouseforcedown"
var FORCE_UP = "webkitmouseforceup"
var FORCE_CHANGE = "webkitmouseforcechanged"
var obj = $("#forceclick")
var output = $("#forcelog")
var is_force_down = false;
function handle_mouse_down (e) {
e.preventDefault()
obj.attr("mouse-down", true)
}
function handle_mouse_up () {
obj.removeAttr("mouse-down")
}
function handle_force_down (e) {
console.log("Caught force down")
e.stopPropagation()
obj.attr("force-down", true)
}
function handle_force_up () {
console.log("Caught force up")
obj.removeAttr("force-down")
}
function handle_force_change (e) {
var force = e.originalEvent["webkitForce"]
setTimeout(update_force.bind(force), 10)
}
function update_force () {
var force = this;
var is_force = !!obj.attr("force-down")
var padding = Math.max(10, 15 * force) | 0
output.text("is_force=" + is_force + " force=" + (((force * 100) | 0) / 100))
obj.css({ "padding": padding + "px"})
}
function handle_force_begin (e) {
console.log("Starting force")
}
obj.on("mousedown", handle_mouse_down)
obj.on("mouseup", handle_mouse_up)
obj.on(FORCE_BEGIN, handle_force_begin)
obj.on(FORCE_DOWN, handle_force_down)
obj.on(FORCE_UP, handle_force_up)
obj.on(FORCE_CHANGE, handle_force_change)
}(jQuery))
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment