Skip to content

Instantly share code, notes, and snippets.

@joshkehn

joshkehn/force_touch.html

Created October 22, 2015 04:24
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save joshkehn/3ed6b535408162fe94ae to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save joshkehn/3ed6b535408162fe94ae to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. joshkehn created this gist Oct 22, 2015.
    64 changes: 64 additions & 0 deletions force_touch.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,64 @@
    <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>