Skip to content

GitHub image preview: better compatibility with other extensions #171

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
merged 1 commit into from
Jul 17, 2022
Merged

GitHub image preview: better compatibility with other extensions #171

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
29 changes: 9 additions & 20 deletions github-image-preview.user.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// ==UserScript==
// @name GitHub Image Preview
// @version 2.0.6
// @version 2.0.7
// @description A userscript that adds clickable image thumbnails
// @license MIT
// @author Rob Garrison
Expand Down Expand Up @@ -29,8 +29,9 @@
background-color:transparent !important; }
.ghip-show-previews .Box-row:not(.ghsc-header):not(.hidden) > div[role] {
display:none !important; }
.ghip-wrapper.ghip-show-previews img.ghip-non-image { height:80px;
margin-top:15px; opacity:.2; }
.ghip-wrapper.ghip-show-previews svg.ghip-non-image,
.ghip-wrapper.ghip-show-previews img.ghip-non-image { height:80px; width:80px;
margin-top:15px; }
.ghip-wrapper.ghip-show-previews .image { width:100%; position:relative;
overflow:hidden; text-align:center; }

Expand Down Expand Up @@ -185,7 +186,7 @@
let content = "";
// not every submodule includes a link; reference examples from
// see https://github.com/electron/electron/tree/v1.1.1/vendor
const el = $("a", row) || $("div[role='rowheader'] span[title]", row);
const el = $("div[role='rowheader'] a, div[role='rowheader'] span[title]", row);
Copy link
Contributor Author

@kidonng kidonng Jul 16, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the one line fix for Refined GitHub

Copy link
Owner

@Mottie Mottie Jul 17, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

const url = el && el.nodeName === "A" ? el.href : "";
// use innerHTML because some links include path - see "third_party/lss"
const fileName = el && el.textContent.trim() || "";
Expand Down Expand Up @@ -215,28 +216,16 @@
content = updateTemplate(url, `${title()}${svgPlaceholder(url)}`);
} else {
// *** non-images (file/folder icons) ***
const svg = $("svg", row);
const svg = $("[role='gridcell'] svg, [role='gridcell'] img", row);
if (svg) {
// non-files svg class: "directory", "submodule" or "symlink"
// add "ghip-folder" class for file-filters userscript
const noExt = svg.matches(folderIconClasses) ? " ghip-folder" : "";
// add xmlns otherwise the svg won't work inside an img
// GitHub doesn't include this attribute on any svg octicons
const svgHTML = svg.outerHTML.replace("<svg", "<svg xmlns='http://www.w3.org/2000/svg'");
const clone = svg.cloneNode(true);
clone.classList.add("ghip-non-image");
// include "leaflet-tile-container" to invert icon for GitHub-Dark
content = `${title("non-image")}<span class="leaflet-tile-container${noExt}">` +
`<img class="ghip-non-image" src="data:image/svg+xml;base64,` +
window.btoa(svgHTML) + `"/>`;
// get file name + extension
const str = url.substring(url.lastIndexOf("/") + 1, url.length);
// don't include extension for folders, or files with no extension,
// or files starting with a "." (e.g. ".gitignore")
content += (!noExt && str.indexOf(".") > 0) ?
"<h4 class='ghip-file-type'>" +
str
.substring(str.lastIndexOf(".") + 1, str.length)
.toUpperCase() +
"</h4></span>" : "</span>";
Comment on lines -231 to -239
Copy link
Contributor Author

@kidonng kidonng Jul 16, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This does not look good with file icon extensions, so I dropped it. However, it makes it a little worse for those who don't use them. I believe the tradeoff is worth it, let me know your thoughts.

Copy link
Owner

@Mottie Mottie Jul 17, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I think you're right.. I'm going to go ahead and merge your work, but I'm going to tweak it a bit to show the full file name. Thanks again!

clone.outerHTML + "</span>";
content = url ?
updateTemplate(url, content) :
// empty url; use non-link template
Expand Down