Skip to content

Commit

Permalink
docs: fix docs desync
Browse files Browse the repository at this point in the history
  • Loading branch information
@jerrylususu
jerrylususu authored Aug 11, 2024
1 parent 8b91e16 commit 1b6030e
Show file tree
Hide file tree
Showing 3 changed files with 77 additions and 8 deletions.
81 changes: 75 additions & 6 deletions Chrome_Extension/content-script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,41 @@ function mainonly() {
const style = document.head.appendChild(document.createElement("style"));
style.textContent = "#mainonly { outline: 2px solid red; } .mainonly { outline: 2px solid red; }";

// selection guide overlay
const guideTextCn = '正在选择元素。按 <kbd>Esc</kbd> 键取消选择。向下滚动，或按下 <kbd>=</kbd>/<kbd>.</kbd> 键缩小选区。向上滚动，或按下 <kbd>-</kbd>/<kbd>,</kbd> 键扩大选区。'
const guideTextEn = 'Selecting element. Press <kbd>Esc</kbd> to cancel selection. Scroll down, or press <kbd>=</kbd>/<kbd>.</kbd> to shrink the selection. Scroll up, or press <kbd>-</kbd>/<kbd>,</kbd>, to expand the selection.'
const guide = document.body.appendChild(document.createElement("div"));
guide.className = "mainonly-guide";
guide.innerHTML = `<p>${guideTextCn}</p><p>${guideTextEn}</p>`;
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
Expand Down Expand Up @@ -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
Expand All @@ -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);
}
}
}

Expand All @@ -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);
}
}
}

Expand Down
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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=`<p>正在选择元素。按 <kbd>Esc</kbd> 键取消选择。向下滚动，或按下 <kbd>=</kbd>/<kbd>.</kbd> 键缩小选区。向上滚动，或按下 <kbd>-</kbd>/<kbd>,</kbd> 键扩大选区。</p><p>Selecting element. Press <kbd>Esc</kbd> to cancel selection. Scroll down, or press <kbd>=</kbd>/<kbd>.</kbd> to shrink the selection. Scroll up, or press <kbd>-</kbd>/<kbd>,</kbd>, to expand the selection.</p>`;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;t<n.length;t++)n[t].classList.remove("mainonly_parents")}();else if(","===i.key||"-"===i.key)l(e.parentElement);else if("."===i.key||"="===i.key){var o=e.querySelector(":hover");o&&l(o)}}function c(n){if(n.preventDefault(),n.deltaY<0)l(e.parentElement);else{var t=e.querySelector(":hover");t&&l(t)}}function m(){document.removeEventListener("mouseover",d),document.removeEventListener("click",a),document.removeEventListener("wheel",c)}o.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; } }`,document.addEventListener("mouseover",d),document.addEventListener("click",a),document.addEventListener("wheel",c,{passive:!1}),document.addEventListener("keydown",s)}())
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=`<p>正在选择元素。按 <kbd>Esc</kbd> 键取消选择。向下滚动，或按下 <kbd>=</kbd>/<kbd>.</kbd> 键缩小选区。向上滚动，或按下 <kbd>-</kbd>/<kbd>,</kbd> 键扩大选区。</p><p>Selecting element. Press <kbd>Esc</kbd> to cancel selection. Scroll down, or press <kbd>=</kbd>/<kbd>.</kbd> to shrink the selection. Scroll up, or press <kbd>-</kbd>/<kbd>,</kbd>, to expand the selection.</p>`;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<n.length;t++)n[t].classList.remove("mainonly_parents")}();else if(","===i.key||"-"===i.key)l(e.parentElement);else if("."===i.key||"="===i.key){var o=e.querySelector(":hover");o&&l(o)}}function c(n){if(n.preventDefault(),n.deltaY<0)l(e.parentElement);else{var t=e.querySelector(":hover");t&&l(t)}}function m(){document.removeEventListener("mouseover",d),document.removeEventListener("click",a),document.removeEventListener("wheel",c)}o.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; }}`,document.addEventListener("mouseover",d),document.addEventListener("click",a),document.addEventListener("wheel",c,{passive:!1}),document.addEventListener("keydown",s)}())
```
2. 右键点击您的浏览器书签栏，选择“添加书签”。
Expand Down
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@
<div class="step-content">
<div class="step-hint">Install</div>
<p>⬇️ Just drag the "mainonly" button to your bookmarks bar. </p>
<a class="button bookmarklet-button" href='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=`<p>正在选择元素。按 <kbd>Esc</kbd> 键取消选择。向下滚动，或按下 <kbd>=</kbd>/<kbd>.</kbd> 键缩小选区。向上滚动，或按下 <kbd>-</kbd>/<kbd>,</kbd> 键扩大选区。</p><p>Selecting element. Press <kbd>Esc</kbd> to cancel selection. Scroll down, or press <kbd>=</kbd>/<kbd>.</kbd> to shrink the selection. Scroll up, or press <kbd>-</kbd>/<kbd>,</kbd>, to expand the selection.</p>`;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;t<n.length;t++)n[t].classList.remove("mainonly_parents")}();else if(","===i.key||"-"===i.key)l(e.parentElement);else if("."===i.key||"="===i.key){var o=e.querySelector(":hover");o&&l(o)}}function c(n){if(n.preventDefault(),n.deltaY<0)l(e.parentElement);else{var t=e.querySelector(":hover");t&&l(t)}}function m(){document.removeEventListener("mouseover",d),document.removeEventListener("click",a),document.removeEventListener("wheel",c)}o.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; } }`,document.addEventListener("mouseover",d),document.addEventListener("click",a),document.addEventListener("wheel",c,{passive:!1}),document.addEventListener("keydown",s)}())'>mainonly</a>
<a class="button bookmarklet-button" href='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=`<p>正在选择元素。按 <kbd>Esc</kbd> 键取消选择。向下滚动，或按下 <kbd>=</kbd>/<kbd>.</kbd> 键缩小选区。向上滚动，或按下 <kbd>-</kbd>/<kbd>,</kbd> 键扩大选区。</p><p>Selecting element. Press <kbd>Esc</kbd> to cancel selection. Scroll down, or press <kbd>=</kbd>/<kbd>.</kbd> to shrink the selection. Scroll up, or press <kbd>-</kbd>/<kbd>,</kbd>, to expand the selection.</p>`;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<n.length;t++)n[t].classList.remove("mainonly_parents")}();else if(","===i.key||"-"===i.key)l(e.parentElement);else if("."===i.key||"="===i.key){var o=e.querySelector(":hover");o&&l(o)}}function c(n){if(n.preventDefault(),n.deltaY<0)l(e.parentElement);else{var t=e.querySelector(":hover");t&&l(t)}}function m(){document.removeEventListener("mouseover",d),document.removeEventListener("click",a),document.removeEventListener("wheel",c)}o.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; }}`,document.addEventListener("mouseover",d),document.addEventListener("click",a),document.addEventListener("wheel",c,{passive:!1}),document.addEventListener("keydown",s)}())'>mainonly</a>
</div>
</div>
<div class="step">
Expand Down

0 comments on commit 1b6030e

Please sign in to comment.