Adding pointer-events_touch-events recipe. #3
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| /* | ||
| RECIPE: Pointer events and touch events | ||
| ------------------------------------------------------------- | ||
| Author: joevery | ||
| Description: Find instances of listening for pointer and touch events. | ||
| */ | ||
|
|
||
| void function() { | ||
| window.CSSUsage.StyleWalker.recipesToRun.push( | ||
| function pointer_events_touch_events(/*HTML DOM Element*/ element, results) { | ||
| var nodeName = element.nodeName; | ||
| // We want to catch all instances of listening for these events. | ||
|
|
||
| var eventsToCheckFor = ["pointerup", "pointerdown", "pointermove", "pointercancel", "pointerout", "pointerleave", "pointerenter", "pointerover", | ||
| "touchstart", "touchend", "touchmove", "touchcancel"]; | ||
|
|
||
| var isExternalJSAndNotRecipeJS = (element.src !== undefined && element.src !== "" && !element.src.includes("Recipe.min.js")); | ||
| var xhr; | ||
| if (isExternalJSAndNotRecipeJS) | ||
| { | ||
| xhr = new XMLHttpRequest(); | ||
| xhr.open("GET", element.src, false); | ||
| xhr.send(); | ||
| } | ||
|
|
||
| for (const event of eventsToCheckFor) { | ||
|
|
||
| // Attribute specified on element, although this does not work at present. | ||
| if (element.getAttribute(".on" + event)) { | ||
| results[event] = results[event] || { count: 0, }; | ||
| results[event].count++; | ||
| } | ||
|
|
||
| if (nodeName === "SCRIPT") { | ||
| // if inline script. ensure that it's not our recipe script and look for string of interest | ||
| if ((element.text !== undefined) && (element.text.indexOf(event) !== -1)) { | ||
| var regex = new RegExp(event, 'g'); | ||
| var instances = element.text.match(regex); | ||
|
|
||
| results[event] = results[event] || { count: 0, }; | ||
| results[event].count += instances.length; | ||
| } | ||
| // if external script, then we have to go and get it and ensure it is not our recipe script. | ||
| else if (isExternalJSAndNotRecipeJS) | ||
| { | ||
| if (xhr.status === 200 && xhr.responseText.indexOf(event) !== -1) { | ||
| var regex = new RegExp(event, 'g'); | ||
| var instances = xhr.responseText.match(regex); | ||
|
|
||
| results[event] = results[event] || { count: 0, }; | ||
| results[event].count += instances.length; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| return results; | ||
| }); | ||
| }(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> | ||
| <head> | ||
| <title>Pointer and touch events listening test</title> | ||
| <link type="text/css" href="../test-page/style.css" media="all" rel="stylesheet" /> | ||
| <script src="../../Recipe.min.js"></script> | ||
| <style> | ||
| .square { | ||
| position: absolute; | ||
| left: 20px; | ||
| top: 10px; | ||
| bottom: 0px; | ||
| height: 200px; | ||
| width: 200px; | ||
| border: 5px blue solid; | ||
| -webkit-filter: blur(10px); | ||
| filter: blur(10px); | ||
| } | ||
| #square1 { | ||
| background-color: yellow; | ||
| left: 500px; | ||
| } | ||
| #square2 { | ||
| background-color: blue; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <!--Cannot test onpointerup on tag, but can test everything else.--> | ||
| <div class="wrapper"> | ||
| <h1>Pointer and touch events listening test</h1> | ||
| <div id="shapes"> | ||
| <div class="square" id="square1"></div> | ||
| <div class="square" id="square2" onload="func"></div> | ||
| </div> | ||
| </div> | ||
| <script src="../test-page/pointerevents.js"></script> | ||
| <script> | ||
| var square1 = document.getElementById("square1"); | ||
| square1.ontouchstart = func2; | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| function func() | ||
| { | ||
| var square2 = document.getElementById("square2"); | ||
|
|
||
| square2.addEventListener("pointerup", func2); | ||
| } | ||
|
|
||
| function func2() | ||
| { | ||
| alert("Point!!") | ||
| } |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Isn't this making XHRs for every single element with a src? (An image from an img tag, for example, would be pulled down as part of this). I think you'll want to do a check for nodeName == "SCRIPT" here as well.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Or move this into the block of code where we know for sure we have an external script
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah that's a good spot, I did not think of that case at all.