open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #37 from hideheader/new-style-links-grr

Browse Source 
Support "breadcrumbs" new style links
This commit is contained in:
Jason Barnabe 2015-03-03 20:23:53 -06:00
commit 0fe0707e02
2 changed files with 62 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
popup.html
View File

@ -36,6 +36,45 @@
.enable, .disable {
display: none;
}
/* 'New style' links */
#write-style-for {margin-right: .6ex}
.write-style-link {margin-left: .6ex}
.write-style-link::before, .write-style-link::after {font-size: x-small}
.write-style-link::before {content: "\00ad"} /* "soft" hyphen */
#match {overflow-wrap: break-word;}
/* "breadcrumbs" 'new style' links */
.breadcrumbs > .write-style-link {margin-left: 0}
.breadcrumbs:hover a {color: #bbb; text-decoration: none}
/* use just the subdomain name instead of the full domain name */
.breadcrumbs > .write-style-link[subdomain]:not(:nth-last-child(2)) {font-size: 0}
.breadcrumbs > .write-style-link[subdomain]:not(:nth-last-child(2))::before {
content: attr(subdomain);
}
/* "dot" after each subdomain name */
.breadcrumbs > .write-style-link[subdomain]::after {content: "."}
/* no "dot" after top-level domain */
.breadcrumbs > .write-style-link:nth-last-child(2)::after {content: none}
/* "forward slash" before path ("this URL") */
.breadcrumbs > .write-style-link:last-child::before {content: "\200b/"}
.breadcrumbs > .write-style-link:last-child:first-child::before,
.breadcrumbs > .write-style-link[subdomain=""] + .write-style-link::before {content: none}
/* suppress TLD-only link */
.breadcrumbs > .write-style-link[subdomain=""] {display: none}
/* :hover style */
.breadcrumbs.url\(\) > .write-style-link, /* :hover or :focus on "this URL" sets class="url()" */
.breadcrumbs > .write-style-link:hover,
.breadcrumbs > .write-style-link:focus,
.breadcrumbs > .write-style-link:hover ~ .write-style-link[subdomain],
.breadcrumbs > .write-style-link:focus ~ .write-style-link[subdomain] {
color: inherit;
text-decoration: underline;
}
</style>
<script src="localization.js"></script>

29
popup.js
View File

@ -19,14 +19,27 @@ chrome.tabs.getSelected(null, function(tab) {
document.querySelector("#find-styles a").href = "https://userstyles.org/styles/browse/all/" + encodeURIComponent("file" === urlWillWork[1] ? "file:" : tab.url);
// Write new style links
var writeStyleLinks = []
var writeStyleLinks = [],
container = document.createElement('span');
container.id = "match";
// For this URL
var urlLink = writeStyleTemplate.cloneNode(true);
urlLink.href = "edit.html?url=" + encodeURIComponent(tab.url);
urlLink.appendChild(document.createTextNode(t("writeStyleForURL")));
urlLink.appendChild(document.createTextNode( // switchable; default="this&nbsp;URL"
localStorage["popup.breadcrumbs.usePath"] !== "true"
? t("writeStyleForURL").replace(/ /g, "\u00a0")
: /\/\/[^/]+\/(.*)/.exec(tab.url)[1]
));
urlLink.title = "url(\"$\")".replace("$", tab.url);
writeStyleLinks.push(urlLink);
document.querySelector("#write-style").appendChild(urlLink)
if (localStorage["popup.breadcrumbs"] !== "false") { // switchable; default=enabled
urlLink.addEventListener("mouseenter", function(event) { this.parentNode.classList.add("url()") }, false);
urlLink.addEventListener("focus", function(event) { this.parentNode.classList.add("url()") }, false);
urlLink.addEventListener("mouseleave", function(event) { this.parentNode.classList.remove("url()") }, false);
urlLink.addEventListener("blur", function(event) { this.parentNode.classList.remove("url()") }, false);
}
// For domain
var domains = getDomains(tab.url)
@ -38,17 +51,21 @@ chrome.tabs.getSelected(null, function(tab) {
var domainLink = writeStyleTemplate.cloneNode(true);
domainLink.href = "edit.html?domain=" + encodeURIComponent(domain);
domainLink.appendChild(document.createTextNode(domain));
domainLink.title = "domain(\"$\")".replace("$", domain);
domainLink.setAttribute("subdomain", domain.substring(0, domain.indexOf(".")));
writeStyleLinks.push(domainLink);
});
var writeStyle = document.querySelector("#write-style");
writeStyleLinks.forEach(function(link, index) {
if (index > 0) {
writeStyle.appendChild(document.createTextNode(" "));
}
link.addEventListener("click", openLinkInTabOrWindow, false);
writeStyle.appendChild(link);
container.appendChild(link);
});
if (localStorage["popup.breadcrumbs"] !== "false") {
container.classList.add("breadcrumbs");
container.appendChild(container.removeChild(container.firstChild));
}
writeStyle.appendChild(container);
});
function showStyles(styles) {