Thanks to visit codestin.com
Credit goes to github.com

Skip to content

instructions for how to update positioning #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
khiga8 merged 1 commit into from
Feb 14, 2022
Merged

instructions for how to update positioning #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,9 @@ This extension will only run on GitHub domain and does the folowing on all markd

<img width="916" alt="Example screenshots of purple heading levels appended in at end of heading text line inside a GitHub markdown" src="https://user-images.githubusercontent.com/16447748/153683612-1b7d5975-ed45-4985-892d-6fd64545d18d.png">

### Customization note

**Note**: This is currently not customizable and the styling I've set may not be suitable for all users. Feel free to customize this however you like when you download these files. You can do this by modifying `styles.css` to your preferred styling. Then press `Update` on `chrome://extensions/` so changes are reflected in extension.
This is currently not customizable and the styling I've set may not be suitable for all users. Feel free to customize this however you like when you download these files. You can do this by modifying `styles.css` to your preferred styling. If you'd prefer the headings to be positioned at front, follow the notes in `contentScript.js`. Then press `Update` on `chrome://extensions/` so changes are reflected in extension.

## Resources

Expand Down
37 changes: 27 additions & 10 deletions contentScript.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,21 @@
/* ATTENTION: Based on heading position preference, swap `addHeadingToBack` with `addHeadingToFront` in line 45. */

function appendAccessibilityInfo() {
/* Places heading at end of line */
function addHeadingToBack(heading, headingPrefix) {
headingPrefix.classList.add('github-a11y-heading-prefix', 'github-a11y-heading-prefix-after');
headingPrefix.textContent = ` ${heading.tagName.toLowerCase()}`;
heading.classList.add('github-a11y-heading', 'github-a11y-heading-after');
heading.append(headingPrefix);
}

/* Places heading in front of line */
function addHeadingToFront(heading, headingPrefix) {
headingPrefix.textContent = `${heading.tagName.toLowerCase()} `;
headingPrefix.classList.add('github-a11y-heading-prefix');
heading.insertBefore(headingPrefix, heading.firstChild);
}

function appendAccessibilityInfo() {
document.querySelectorAll('.markdown-body').forEach(function(commentBody) {
// Adds alt image overlay. This is hidden from accesibility tree.
commentBody.querySelectorAll('img').forEach(function(image) {
Expand All @@ -8,7 +24,7 @@
image.classList.add('github-a11y-img-missing-alt')
} else {
const closestParagraph = image.closest('p');
if (!closestParagraph) return; // TODO: handle when image is nested in elements like a table cell.
if (!closestParagraph) return;

closestParagraph.classList.add('github-a11y-img-container');

Expand All @@ -21,23 +37,24 @@
}
});

// Appends heading level to headings. This is hidden from accesibility tree.
// Appends heading level to headings. This is hidden from accesibility tree
commentBody.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach(function(heading) {
heading.classList.add('github-a11y-heading');
const headingPrefix = document.createElement('span');

headingPrefix.setAttribute('aria-hidden', 'true');
headingPrefix.classList.add('github-a11y-heading-prefix');
headingPrefix.textContent = ` ${heading.tagName.toLowerCase()}`;

heading.append(headingPrefix);

addHeadingToBack(heading, headingPrefix); // Swappable with `addHeadingToFront`
});
});
}

chrome.runtime.onMessage.addListener(async (message) => {
function cleanup() {
document.querySelectorAll(".github-a11y-img-caption").forEach(el => el.remove());
document.querySelectorAll(".github-a11y-heading-prefix").forEach(el => el.remove());
}

/* Listen for messages from the background script */
chrome.runtime.onMessage.addListener(async () => {
cleanup();
appendAccessibilityInfo();
});

Expand Down
20 changes: 11 additions & 9 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
/* Necessary for image overlay positioning */
/* For image overlay positioning */
.github-a11y-img-container {
position: relative;
padding: 0;
margin: 0;
}

/* For when image is missing alt text */
/* Styling for when image is missing alt text */
.github-a11y-img-missing-alt {
border: 10px solid red;
}

/* For image overlay */
/* Styling for image overlay */
.github-a11y-img-caption {
display: block;
background-color: #121212;
Expand All @@ -26,15 +26,17 @@
opacity: 0.6;
}

/* Necessary for heading positioning */
.github-a11y-heading {
/* Styling for heading level text. */
.github-a11y-heading-prefix {
color: purple;
}

/* Used to position heading at end of line. See `contentScript.js` if you'd like heading at front */
.github-a11y-heading-after {
display: table;
width: 100%;
}

/* For appended heading text */
.github-a11y-heading-prefix {
color: purple;
.github-a11y-heading-prefix-after {
display: table-cell;
text-align: right;
}