blankie
/
userscripts
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update Elements with ID lister to 1.0.6 

- CTRL+Clicking links no longer closes the dialog box
- Tapping on the background on older browsers will now close the dialog box
- Fix the dialog box from clipping out of the screen on older browsers
This commit is contained in:
blankie 2023-05-21 18:53:25 +07:00
parent 3e73f5a70e
commit fd0c945552
Signed by: blankie
GPG Key ID: CC15FC822C7F61F5
1 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
Elements with ID lister.user.js
View File

@ -6,7 +6,7 @@
// @grant GM_getResourceURL // @grant GM_getResourceURL
// @require https://cdn.jsdelivr.net/npm/dialog-polyfill@0.5.6/dist/dialog-polyfill.min.js#sha256-cec1a2e320aab77e28bad4ad6bc5e532a6ef5757345c19bb5158aa880b7162a6 // @require https://cdn.jsdelivr.net/npm/dialog-polyfill@0.5.6/dist/dialog-polyfill.min.js#sha256-cec1a2e320aab77e28bad4ad6bc5e532a6ef5757345c19bb5158aa880b7162a6
// @resource dialogPolyfillCSS https://cdn.jsdelivr.net/npm/dialog-polyfill@0.5.6/dist/dialog-polyfill.min.css#sha256-4dcb3ab62e545f30bf06a4824c253641ee889ca85ca28d5447590557922496ab // @resource dialogPolyfillCSS https://cdn.jsdelivr.net/npm/dialog-polyfill@0.5.6/dist/dialog-polyfill.min.css#sha256-4dcb3ab62e545f30bf06a4824c253641ee889ca85ca28d5447590557922496ab
// @version 1.0.5 // @version 1.0.6
// @author blankie // @author blankie
// @description A userscript that adds a "Show elements popup" option to the Monkey Menu which lists all elements with an ID // @description A userscript that adds a "Show elements popup" option to the Monkey Menu which lists all elements with an ID
// @inject-into content // @inject-into content
@ -18,12 +18,22 @@ const DIALOG_WRAPPER_ID = "element_lister-dialog_wrapper";
const ACCENT_COLOR = "#962AC3"; const ACCENT_COLOR = "#962AC3";
const BRIGHT_ACCENT_COLOR = "#DE6DE6"; const BRIGHT_ACCENT_COLOR = "#DE6DE6";
const DIALOG_WRAPPER_CSS = `
position: fixed;
top: 0;
width: 100%;
height: 100%;
`;
const CSS = ` const CSS = `
dialog { dialog {
position: fixed; position: fixed;
min-width: 25em; min-width: 25em;
max-height: 90%;
font-size: 11pt; font-size: 11pt;
color-scheme: dark; color-scheme: dark;
overflow-y: auto;
}
dialog, dialog.polyfilled button {
color: white; color: white;
background-color: black; background-color: black;
} }
@ -57,6 +67,7 @@ function showElementList() {
let dialogWrapper = document.createElement("div"); let dialogWrapper = document.createElement("div");
dialogWrapper.id = DIALOG_WRAPPER_ID; dialogWrapper.id = DIALOG_WRAPPER_ID;
dialogWrapper.style = DIALOG_WRAPPER_CSS;
let shadowRoot = dialogWrapper.attachShadow({mode: "closed"}); let shadowRoot = dialogWrapper.attachShadow({mode: "closed"});
let link = document.createElement("link"); let link = document.createElement("link");
@ -74,7 +85,7 @@ function showElementList() {
} }
dialogPolyfill.registerDialog(dialog); dialogPolyfill.registerDialog(dialog);
dialog.addEventListener("close", hideElementList, {once: true, passive: true}); dialog.addEventListener("close", hideElementList, {once: true, passive: true});
dialog.addEventListener("click", function(e) { dialogWrapper.addEventListener("click", function(e) {
let rect = dialog.getBoundingClientRect(); let rect = dialog.getBoundingClientRect();
if (rect.top <= e.clientY && rect.left <= e.clientX && rect.bottom >= e.clientY && rect.right >= e.clientX) { if (rect.top <= e.clientY && rect.left <= e.clientX && rect.bottom >= e.clientY && rect.right >= e.clientX) {
return; return;
@ -157,7 +168,12 @@ function getElementListItem(element) {
let a = document.createElement("a"); let a = document.createElement("a");
a.href = a.innerText = "#" + element.id; a.href = a.innerText = "#" + element.id;
a.addEventListener("click", hideElementList, {once: true, passive: true}); a.addEventListener("click", function(e) {
if (e.ctrlKey) {
return;
}
hideElementList();
}, {passive: true});
li.append(a); li.append(a);
let description = getElementDescription(element); let description = getElementDescription(element);