| <!doctype html> |
| <meta charset=utf-8> |
| <html> |
| <head> |
| <title>Test Actions</title> |
| <style> |
| div { padding:0px; margin: 0px; } |
| #trackPointer { position: fixed; } |
| #resultContainer { width: 600px; height: 60px; } |
| .area { width: 100px; height: 50px; background-color: #ccc; } |
| .block { width: 5px; height: 5px; border: solid 1px red; } |
| .box { display: flex;} |
| #dragArea { position: relative; } |
| #dragTarget { position: absolute; top:22px; left:47px;} |
| </style> |
| <script> |
| "use strict"; |
| var els = {}; |
| var allEvents = { events: [] }; |
| function displayMessage(message) { |
| document.getElementById("events").innerHTML = "<p>" + message + "</p>"; |
| } |
| |
| function appendMessage(message) { |
| document.getElementById("events").innerHTML += "<p>" + message + "</p>"; |
| } |
| |
| /** |
| * Escape |key| if it's in a surrogate-half character range. |
| * |
| * Example: given "\ud83d" return "U+d83d". |
| * |
| * Otherwise JSON.stringify will convert it to U+FFFD (REPLACEMENT CHARACTER) |
| * when returning a value from executeScript, for example. |
| */ |
| function escapeSurrogateHalf(key) { |
| if (typeof key !== "undefined" && key.length === 1) { |
| var charCode = key.charCodeAt(0); |
| var highSurrogate = charCode >= 0xD800 && charCode <= 0xDBFF; |
| var surrogate = highSurrogate || (charCode >= 0xDC00 && charCode <= 0xDFFF); |
| if (surrogate) { |
| key = "U+" + charCode.toString(16); |
| } |
| } |
| return key; |
| } |
| |
| function recordKeyboardEvent(event) { |
| var key = escapeSurrogateHalf(event.key); |
| allEvents.events.push({ |
| "code": event.code, |
| "key": key, |
| "which": event.which, |
| "location": event.location, |
| "ctrl": event.ctrlKey, |
| "meta": event.metaKey, |
| "shift": event.shiftKey, |
| "repeat": event.repeat, |
| "type": event.type |
| }); |
| appendMessage(event.type + " " + |
| "code: " + event.code + ", " + |
| "key: " + key + ", " + |
| "which: " + event.which + ", " + |
| "keyCode: " + event.keyCode); |
| } |
| |
| function recordPointerEvent(event) { |
| if (event.type === "contextmenu") { |
| event.preventDefault(); |
| } |
| allEvents.events.push({ |
| "type": event.type, |
| "button": event.button, |
| "buttons": event.buttons, |
| "pageX": event.pageX, |
| "pageY": event.pageY, |
| "ctrlKey": event.ctrlKey, |
| "metaKey": event.metaKey, |
| "altKey": event.altKey, |
| "shiftKey": event.shiftKey, |
| "target": event.target.id |
| }); |
| appendMessage(event.type + " " + |
| "button: " + event.button + ", " + |
| "pageX: " + event.pageX + ", " + |
| "pageY: " + event.pageY + ", " + |
| "button: " + event.button + ", " + |
| "buttons: " + event.buttons + ", " + |
| "ctrlKey: " + event.ctrlKey + ", " + |
| "altKey: " + event.altKey + ", " + |
| "metaKey: " + event.metaKey + ", " + |
| "shiftKey: " + event.shiftKey + ", " + |
| "target id: " + event.target.id); |
| } |
| |
| function recordFirstPointerMove(event) { |
| recordPointerEvent(event); |
| window.removeEventListener("mousemove", recordFirstPointerMove); |
| } |
| |
| function grabOnce(event) { |
| grab(event); |
| els.dragTarget.removeEventListener("mousedown", grabOnce); |
| } |
| |
| function dropOnce(moveHandler) { |
| return function (event) { |
| moveHandler(event); |
| els.dragArea.removeEventListener("mouseup", dropOnce); |
| } |
| } |
| |
| function resetEvents() { |
| allEvents.events.length = 0; |
| displayMessage(""); |
| } |
| |
| function drop(moveHandler) { |
| return function (event) { |
| els.dragArea.removeEventListener("mousemove", moveHandler); |
| els.dragTarget.style.backgroundColor = "yellow"; |
| els.dragTarget.addEventListener("mousedown", grab); |
| recordPointerEvent(event); |
| }; |
| } |
| |
| function move(el, offsetX, offsetY, timeout) { |
| return function(event) { |
| setTimeout(function() { |
| el.style.top = event.clientY + offsetY + "px"; |
| el.style.left = event.clientX + offsetX + "px"; |
| }, timeout); |
| }; |
| } |
| |
| function grab(event) { |
| event.target.style.backgroundColor = "red"; |
| let boxRect = event.target.getBoundingClientRect(); |
| let areaRect = event.target.parentElement.getBoundingClientRect(); |
| let moveHandler = move( |
| event.target, |
| // coordinates of dragTarget must be relative to dragArea such that |
| // dragTarget remains under the pointer |
| -(areaRect.left + (event.clientX - boxRect.left)), |
| -(areaRect.top + (event.clientY - boxRect.top)), |
| 20); |
| els.dragArea.addEventListener("mousemove", moveHandler); |
| els.dragArea.addEventListener("mouseup", dropOnce(drop(moveHandler))); |
| } |
| |
| document.addEventListener("DOMContentLoaded", function() { |
| var keyReporter = document.getElementById("keys"); |
| keyReporter.addEventListener("keyup", recordKeyboardEvent); |
| keyReporter.addEventListener("keypress", recordKeyboardEvent); |
| keyReporter.addEventListener("keydown", recordKeyboardEvent); |
| |
| var outer = document.getElementById("outer"); |
| outer.addEventListener("click", recordPointerEvent); |
| outer.addEventListener("dblclick", recordPointerEvent); |
| outer.addEventListener("mousedown", recordPointerEvent); |
| outer.addEventListener("mouseup", recordPointerEvent); |
| outer.addEventListener("contextmenu", recordPointerEvent); |
| |
| window.addEventListener("mousemove", recordFirstPointerMove); |
| //visual cue for mousemove |
| var pointer = document.getElementById("trackPointer"); |
| window.addEventListener("mousemove", move(pointer, 15, 15, 30)); |
| // drag and drop |
| els.dragArea = document.getElementById("dragArea"); |
| els.dragArea.addEventListener("dragstart", recordPointerEvent); |
| els.dragTarget = document.getElementById("dragTarget"); |
| els.dragTarget.addEventListener("mousedown", grabOnce); |
| |
| var draggable = document.getElementById("draggable"); |
| draggable.addEventListener("dragstart", recordPointerEvent); |
| draggable.addEventListener("dragenter", recordPointerEvent); |
| draggable.addEventListener("dragend", recordPointerEvent); |
| draggable.addEventListener("dragleave", recordPointerEvent); |
| draggable.addEventListener("dragover", recordPointerEvent); |
| |
| var droppable = document.getElementById("droppable"); |
| droppable.addEventListener("drop", recordPointerEvent); |
| }); |
| </script> |
| </head> |
| <body> |
| <div id="trackPointer" class="block"></div> |
| <div> |
| <h2>KeyReporter</h2> |
| <input type="text" id="keys" size="80"> |
| </div> |
| <div> |
| <h2>ClickReporter</h2> |
| <div id="outer" class="area"> |
| </div> |
| </div> |
| <div> |
| <h2>DragReporter</h2> |
| <div id="dragArea" class="area"> |
| <div id="dragTarget" class="block"></div> |
| </div> |
| </div> |
| <div> |
| <h2>draggable</h2> |
| <div class=box> |
| <div id=draggable draggable="true" class="area"></div> |
| <div id=droppable dropzone="true" class="area"></div> |
| </div> |
| </div> |
| <div id="resultContainer"> |
| <h2>Events</h2> |
| <div id="events"></div> |
| </div> |
| </body> |
| </html> |
