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

Add write new style options to toolbar pop-up #14

Browse Source
This commit is contained in:
Jason Barnabe 2015-01-30 11:28:05 -06:00
parent c6ab6ab169
commit 0756f2d2b8
6 changed files with 96 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
_locales/en/messages.json
View File

@ -227,6 +227,10 @@
}
}
},
"stylishUnavailableForURL": {
"message": "(Stylish does not work on pages like this.)",
"description": "Note in the toolbar pop-up when on a URL Stylish can't affect"
},
"updateCheckFailBadResponseCode": {
"message": "Update failed - server responded with code $code$.",
"description": "Text that displays when an update check failed because the response code indicates an error",
@ -247,5 +251,13 @@
"updateCompleted": {
"message": "Update completed.",
"description": "Text that displays when an update completed"
},
"writeStyleFor": {
"message": "Write style for: ",
"description": "Label for toolbar pop-up that precedes the links to write a new style"
},
"writeStyleForURL": {
"message": "this URL",
"description": "Text for link in toolbar pop-up to write a new style for the current URL"
}
}

13
background.js
View File

@ -295,18 +295,5 @@ function saveFromJSONStyleReloaded(updateType, style, callback) {
}
}
function getDomains(url) {
if (url.indexOf("file:") == 0) {
return [];
}
var d = /.*?:\/*([^\/]+)/.exec(url)[1];
var domains = [d];
while (d.indexOf(".") != -1) {
d = d.substring(d.indexOf(".") + 1);
domains.push(d);
}
return domains;
}
// Get the DB so that any first run actions will be performed immediately when the background page loads.
getDatabase(function() {}, reportError);

28
edit.js
View File

@ -125,10 +125,16 @@ window.addEventListener("load", init, false);
function init() {
tE("sections-help", "helpAlt", "alt");
var idMatch = /[&\?]id=([0-9]+)/.exec(location.href)
if (idMatch == null || idMatch.length != 2) { // match should be 2 - one for the whole thing, one for the parentheses
var params = getParams();
if (!params.id) { // match should be 2 - one for the whole thing, one for the parentheses
// This is an add
addSection();
var section = {code: ""}
if (params.domain) {
section.domains = [params.domain];
} else if (params.url) {
section.urls = [params.url];
}
addSection(section);
// default to enabled
document.getElementById("enabled").checked = true
document.title = t("addStyleTitle");
@ -136,8 +142,7 @@ function init() {
return;
}
// This is an edit
var id = idMatch[1];
chrome.extension.sendMessage({method: "getStyles", id: id}, function(styles) {
chrome.extension.sendMessage({method: "getStyles", id: params.id}, function(styles) {
var style = styles[0];
styleId = style.id;
initWithStyle(style);
@ -304,6 +309,19 @@ function showHelp(text) {
alert(text);
}
function getParams() {
var params = {};
var urlParts = location.href.split("?", 2);
if (urlParts.length == 1) {
return params;
}
urlParts[1].split("&").forEach(function(keyValue) {
var splitKeyValue = keyValue.split("=", 2);
params[decodeURIComponent(splitKeyValue[0])] = decodeURIComponent(splitKeyValue[1]);
});
return params;
}
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
var installed = document.getElementById("installed");
switch(request.name) {

1
manifest.json
View File

@ -11,6 +11,7 @@
},
"permissions": [
"tabs",
"webNavigation",
"http://userstyles.org/",
"https://userstyles.org/"
],

12
popup.html
View File

@ -26,11 +26,14 @@
margin-bottom: 0.5em;
border-bottom: 1px solid black;
}
#find-styles, #manage-styles {
#find-styles, #write-style, #manage-styles {
font-size: smaller;
}
#find-styles {
margin-bottom: 0.5em;
#find-styles, #write-style, #unavailable {
margin-bottom: 0.75em;
}
#unavailable {
display: none;
}
</style>
@ -41,9 +44,12 @@
</head>
<body id="stylish-popup">
<div id="unavailable"></div>
<div id="installed"></div>
<div id="find-styles"><a id="find-styles-link" href="#"></a></div>
<div id="write-style"><span id="write-style-for"></span></div>
<div id="manage-styles"><a id="open-manage-link" href="manage.html"></a></div>
<script src="popup.js"></script>

54
popup.js
View File

@ -1,9 +1,54 @@
var styleTemplate = document.createElement("div");
styleTemplate.innerHTML = "<input class='checker' type='checkbox'><div class='style-name'></div><div class='actions'><a class='style-edit-link' href='edit.html?id='>" + t('editStyleLabel') + "</a> <a href='#' class='delete'>" + t('deleteStyleLabel') + "</a></div>";
var writeStyleTemplate = document.createElement("a");
writeStyleTemplate.className = "write-style-link";
chrome.tabs.getSelected(null, function(tab) {
var urlWillWork = /^(file|http|https):.*/.test(tab.url);
if (!urlWillWork) {
["installed", "find-styles", "write-style"].forEach(function(id) {
document.getElementById(id).style.display = "none";
});
document.getElementById("unavailable").style.display = "block";
return;
}
chrome.extension.sendMessage({method: "getStyles", matchUrl: tab.url}, showStyles);
document.querySelector("#find-styles a").href = "http://userstyles.org/styles/browse/all/" + encodeURIComponent(tab.url);
document.querySelector("#find-styles a").href = "https://userstyles.org/styles/browse/all/" + encodeURIComponent(tab.url);
// Write new style links
var writeStyleLinks = []
// For this URL
var urlLink = writeStyleTemplate.cloneNode(true);
urlLink.href = "edit.html?url=" + encodeURIComponent(tab.url);
urlLink.appendChild(document.createTextNode(t("writeStyleForURL")));
writeStyleLinks.push(urlLink);
document.querySelector("#write-style").appendChild(urlLink)
// For domain
var domains = getDomains(tab.url)
domains.forEach(function(domain) {
// Don't include TLD
if (domains.length > 1 && domain.indexOf(".") == -1) {
return;
}
var domainLink = writeStyleTemplate.cloneNode(true);
domainLink.href = "edit.html?domain=" + encodeURIComponent(domain);
domainLink.appendChild(document.createTextNode(domain));
writeStyleLinks.push(domainLink);
});
var writeStyle = document.querySelector("#write-style");
writeStyleLinks.forEach(function(link, index) {
if (index > 0) {
writeStyle.appendChild(document.createTextNode(" "));
}
link.addEventListener("click", openLink, false);
writeStyle.appendChild(link);
});
});
function showStyles(styles) {
@ -89,7 +134,10 @@ function handleDelete(id) {
}
tE("open-manage-link", "openManage");
tE("write-style-for", "writeStyleFor");
tE("find-styles-link", "findStylesForSite");
tE("unavailable", "stylishUnavailableForURL");
document.getElementById("find-styles-link").addEventListener("click", openLink, false);
document.getElementById("open-manage-link").addEventListener("click", openLink, false);
["find-styles-link", "open-manage-link"].forEach(function(id) {
document.getElementById(id).addEventListener("click", openLink, false);
});