SHARE
TWEET

surface-pen.js

a guest Nov 3rd, 2019 89 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // ==UserScript==
  2. // @name         Fix stylus input on Surface
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Also allows you to draw the character with your finger :/
  6. // @author       Me
  7. // @match        https://skritter.com/study
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.   "use strict";
  13.  
  14.   var touchHandled;
  15.  
  16.   /**
  17.    * Simulate a mouse event based on a corresponding touch event
  18.    * @param {Object} event A touch event
  19.    * @param {String} simulatedType The corresponding mouse event
  20.    */
  21.   function simulateMouseEvent(event, simulatedType) {
  22.     // Ignore multi-touch events
  23.     if (event.touches.length > 1) {
  24.       return;
  25.     }
  26.  
  27.     event.preventDefault();
  28.  
  29.     var touch = event.changedTouches[0],
  30.       simulatedEvent = document.createEvent("MouseEvents");
  31.     // Initialize the simulated mouse event using the touch event's coordinates
  32.     simulatedEvent.initMouseEvent(
  33.       simulatedType, // type
  34.       true, // bubbles
  35.       true, // cancelable
  36.       window, // view
  37.       1, // detail
  38.       touch.screenX, // screenX
  39.       touch.screenY, // screenY
  40.       touch.clientX, // clientX
  41.       touch.clientY, // clientY
  42.       false, // ctrlKey
  43.       false, // altKey
  44.       false, // shiftKey
  45.       false, // metaKey
  46.       0, // button
  47.       null // relatedTarget
  48.     );
  49.  
  50.     // Dispatch the simulated event to the target element
  51.     event.target.dispatchEvent(simulatedEvent);
  52.   }
  53.  
  54.   var _touchStart = function(event) {
  55.     var self = this;
  56.     // Ignore the event if another widget is already being handled
  57.     if (touchHandled) {
  58.       return;
  59.     }
  60.  
  61.     // Set the flag to prevent other widgets from inheriting the touch event
  62.     touchHandled = true;
  63.  
  64.     // Track movement to determine if interaction was a click
  65.     self._touchMoved = false;
  66.  
  67.     // Simulate the mouseover event
  68.     simulateMouseEvent(event, "mouseover");
  69.  
  70.     // Simulate the mousemove event
  71.     simulateMouseEvent(event, "mousemove");
  72.  
  73.     // Simulate the mousedown event
  74.     simulateMouseEvent(event, "mousedown");
  75.   };
  76.  
  77.   var _touchMove = function(event) {
  78.     // Ignore event if not handled
  79.     if (!touchHandled) {
  80.       return;
  81.     }
  82.  
  83.     // Interaction was not a click
  84.     this._touchMoved = true;
  85.  
  86.     // Simulate the mousemove event
  87.     simulateMouseEvent(event, "mousemove");
  88.   };
  89.  
  90.   var _touchEnd = function(event) {
  91.     // Ignore event if not handled
  92.     if (!touchHandled) {
  93.       return;
  94.     }
  95.  
  96.     // Simulate the mouseup event
  97.     simulateMouseEvent(event, "mouseup");
  98.  
  99.     // Simulate the mouseout event
  100.     simulateMouseEvent(event, "mouseout");
  101.  
  102.     // If the touch interaction did not move, it should trigger a click
  103.     if (!this._touchMoved) {
  104.       // Simulate the click event
  105.       simulateMouseEvent(event, "click");
  106.     }
  107.  
  108.     // Unset the flag to allow other widgets to inherit the touch event
  109.     touchHandled = false;
  110.   };
  111.   function addEvent() {
  112.     var elem = document.getElementById("input-canvas");
  113.     if (!elem) return setTimeout(addEvent, 250);
  114.  
  115.     elem.addEventListener("touchstart", _touchStart);
  116.     elem.addEventListener("touchmove", _touchMove);
  117.     elem.addEventListener("touchend", _touchEnd);
  118.   }
  119.   addEvent();
  120. })();
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top