${guideTextCn}
${guideTextEn}
`; + const guideStyle = document.head.appendChild(document.createElement("style")); + guideStyle.textContent = ` + .mainonly-guide { + position: fixed; + top: 0; + left: 50%; /* center the box horizontally */ + transform: translate(-50%, 0); /* center the box horizontally */ + padding: 0.5rem; + font-size: 1rem; + font-family: sans-serif; + text-align: center; + color: white; + background-color: rgba(0, 0, 0, 0.5); + border-radius: 0.5em; + z-index: 999999999; + kbd { + display: inline-block; + padding: 0.1em 0.3em; + font-size: 0.8em; + line-height: 1; + color: #24292e; + vertical-align: middle; + background-color: #fafbfc; + border: 1px solid #d1d5da; + border-radius: 3px; + box-shadow: inset 0 -1px 0 #d1d5da; + } + }`; + /** @param {*} element */ function outlineElement(element) { if (element instanceof HTMLElement) { // Ignores non-HTMLElements @@ -67,25 +102,46 @@ function mainonly() { /** @param {MouseEvent} event */ function onClick(event) { event.preventDefault(); + markParents(); if (lastStrategy === 'id') { // id - style.textContent = `* { visibility: hidden; } #mainonly, #mainonly * { visibility: visible; }`; + style.textContent = `* { visibility: hidden; } #mainonly, #mainonly *, .mainonly_parents { visibility: visible; }`; } else { // class - style.textContent = `* { visibility: hidden; } .mainonly, .mainonly * { visibility: visible; }`; + style.textContent = `* { visibility: hidden; } .mainonly, .mainonly *, .mainonly_parents { visibility: visible; }`; } cleanupEventListeners(); + hideGuideOverlay(); + } + + function hideGuideOverlay() { + guide.remove(); + guideStyle.remove(); + } + + function markParents() { + var parents = selectedElement; + while (parents.parentElement) { + parents = parents.parentElement; + parents.classList.add("mainonly_parents"); + } + } + + function removeParents() { + var parents = document.querySelectorAll(".mainonly_parents"); + for (var i = 0; i < parents.length; i++) { + parents[i].classList.remove("mainonly_parents"); + } } /** @param {KeyboardEvent} event */ function onKeydown(event) { if (event.key === "Escape") { - // Prevent the default action of the escape key - event.preventDefault(); // Recover the hidden elements style.remove(); document.removeEventListener("keydown", onKeydown); cleanupEventListeners(); + hideGuideOverlay(); // Restore the selected element to its original state if (lastStrategy === 'id') { // id @@ -94,6 +150,16 @@ function mainonly() { // class selectedElement.classList.remove("mainonly"); } + removeParents(); + } else if (event.key === ',' || event.key === '-') { + // up, select parent element + outlineElement(selectedElement.parentElement); + } else if (event.key === '.' || event.key === '=') { + // down, select first child element + var childElement = selectedElement.querySelector(":hover"); + if (childElement) { + outlineElement(childElement); + } } } @@ -104,8 +170,11 @@ function mainonly() { // Scrolling up, select parent element outlineElement(selectedElement.parentElement); } else { - // Scrolling down, select first child element - outlineElement(selectedElement.firstElementChild); + // Scrolling down, select child element containing the cursor + var childElement = selectedElement.querySelector(":hover"); + if (childElement) { + outlineElement(childElement); + } } } diff --git a/README.md b/README.md index 9c71472..3d6afd8 100644 --- a/README.md +++ b/README.md @@ -58,7 +58,7 @@ Yes, it is safe. The code is executed locally on the user's device and does not 1. 复制以下代码： ```JavaScript - javascript:(function(){document.getElementById("mainonly")&&document.dispatchEvent(new KeyboardEvent("keydown",{key:"Escape"}));var e=document.body,n=null;e.id?(n="class",e.classList.add("mainonly")):(n="id",e.id="mainonly");let t=document.head.appendChild(document.createElement("style"));t.textContent="#mainonly { outline: 2px solid red; } .mainonly { outline: 2px solid red; }";let i=document.body.appendChild(document.createElement("div"));i.className="mainonly-guide",i.innerHTML=`正在选择元素。按 Esc 键取消选择。向下滚动，或按下 =/. 键缩小选区。向上滚动，或按下 -/, 键扩大选区。
Selecting element. Press Esc to cancel selection. Scroll down, or press =/. to shrink the selection. Scroll up, or press -/,, to expand the selection.
`;let o=document.head.appendChild(document.createElement("style"));function l(t){t instanceof HTMLElement&&("id"===n?e.removeAttribute("id"):e.classList.remove("mainonly"),(e=t).id?(n="class",e.classList.add("mainonly")):(n="id",e.id="mainonly"))}function d(e){l(e.target)}function a(i){i.preventDefault(),function n(){for(var t=e;t.parentElement;)(t=t.parentElement).classList.add("mainonly_parents")}(),"id"===n?t.textContent="* { visibility: hidden; } #mainonly, #mainonly *, .mainonly_parents { visibility: visible; }":t.textContent="* { visibility: hidden; } .mainonly, .mainonly *, .mainonly_parents { visibility: visible; }",m(),r()}function r(){i.remove(),o.remove()}function s(i){if(i.preventDefault(),"Escape"===i.key)t.remove(),document.removeEventListener("keydown",s),m(),r(),"id"===n?e.removeAttribute("id"):e.classList.remove("mainonly"),function e(){for(var n=document.querySelectorAll(".mainonly_parents"),t=0;tSelecting element. Press Esc to cancel selection. Scroll down, or press =/. to shrink the selection. Scroll up, or press -/,, to expand the selection.
`;let o=document.head.appendChild(document.createElement("style"));function l(t){t instanceof HTMLElement&&("id"===n?e.removeAttribute("id"):e.classList.remove("mainonly"),(e=t).id?(n="class",e.classList.add("mainonly")):(n="id",e.id="mainonly"))}function d(e){l(e.target)}function a(i){i.preventDefault(),function n(){for(var t=e;t.parentElement;)(t=t.parentElement).classList.add("mainonly_parents")}(),"id"===n?t.textContent="* { visibility: hidden; } #mainonly, #mainonly *, .mainonly_parents { visibility: visible; }":t.textContent="* { visibility: hidden; } .mainonly, .mainonly *, .mainonly_parents { visibility: visible; }",m(),r()}function r(){i.remove(),o.remove()}function s(i){if("Escape"===i.key)t.remove(),document.removeEventListener("keydown",s),m(),r(),"id"===n?e.removeAttribute("id"):e.classList.remove("mainonly"),function e(){for(var n=document.querySelectorAll(".mainonly_parents"),t=0;t⬇️ Just drag the "mainonly" button to your bookmarks bar.
- mainonly + mainonly