Merge pull request #94 from tophf/localization-embed
Localization: embed in html, autorun, apply earlier
This commit is contained in:
Jason Barnabe
commit
2e02b73c77
|
|
@ -205,6 +205,14 @@
|
|||
"message": "Show number of styles active for the current site on the toolbar button",
|
||||
"description": "Label for the checkbox controlling toolbar badge text."
|
||||
},
|
||||
"search": {
|
||||
"message": "Search",
|
||||
"description": "Label before the search input field in the editor shown on Ctrl-F"
|
||||
},
|
||||
"searchRegexp": {
|
||||
"message": "Use /re/ syntax for regexp search",
|
||||
"description": "Label after the search input field in the editor shown on Ctrl-F"
|
||||
},
|
||||
"sectionAdd": {
|
||||
"message": "Add another section",
|
||||
"description": "Label for the button to add a section"
|
||||
|
|
|
|||
26
edit.html
26
edit.html
|
|
@ -285,47 +285,47 @@
|
|||
</head>
|
||||
<body id="stylish-edit">
|
||||
<div id="header">
|
||||
<h1 id="heading"></h1>
|
||||
<h1 id="heading"> </h1> <!-- nbsp allocates the actual height which prevents page shift -->
|
||||
<section id="basic-info">
|
||||
<div id="basic-info-name">
|
||||
<input id="name" class="style-contributor">
|
||||
<input id="name" class="style-contributor" i18n-placeholder="styleMissingName">
|
||||
</div>
|
||||
<div id="basic-info-enabled">
|
||||
<input type="checkbox" id="enabled" class="style-contributor">
|
||||
<label for="enabled" id="enabled-label"></label>
|
||||
<label for="enabled" id="enabled-label" i18n-text="styleEnabledLabel"></label>
|
||||
</div>
|
||||
</section>
|
||||
<section id="actions">
|
||||
<div><button id="to-mozilla"></button><img id="to-mozilla-help" src="help.png"></div>
|
||||
<div><a href="manage.html"><button id="cancel-button"></button></a></div>
|
||||
<div><button id="save-button" title="Ctrl-S"></button></div>
|
||||
<div><button id="to-mozilla" i18n-text="styleToMozillaFormat"></button><img id="to-mozilla-help" src="help.png"></div>
|
||||
<div><a href="manage.html"><button id="cancel-button" i18n-text="styleCancelEditLabel"></button></a></div>
|
||||
<div><button id="save-button" title="Ctrl-S" i18n-text="styleSaveLabel"></button></div>
|
||||
</section>
|
||||
<section id="options">
|
||||
<h2 id="options-heading"></h2>
|
||||
<h2 id="options-heading" i18n-text="optionsHeading"></h2>
|
||||
<div class="option">
|
||||
<input data-option="lineWrapping" id="editor.lineWrapping" type="checkbox">
|
||||
<label id="lineWrapping-label" for="editor.lineWrapping"></label>
|
||||
<label id="lineWrapping-label" for="editor.lineWrapping" i18n-text="cm_lineWrapping"></label>
|
||||
</div>
|
||||
<div class="option">
|
||||
<input data-option="smartIndent" id="editor.smartIndent" type="checkbox">
|
||||
<label id="smartIndent-label" for="editor.smartIndent"></label>
|
||||
<label id="smartIndent-label" for="editor.smartIndent" i18n-text="cm_smartIndent"></label>
|
||||
</div>
|
||||
<div class="option">
|
||||
<input data-option="indentWithTabs" id="editor.indentWithTabs" type="checkbox">
|
||||
<label id="indentWithTabs-label" for="editor.indentWithTabs"></label>
|
||||
<label id="indentWithTabs-label" for="editor.indentWithTabs" i18n-text="cm_indentWithTabs"></label>
|
||||
</div>
|
||||
<div class="option aligned">
|
||||
<label id="tabSize-label" for="editor.tabSize"></label>
|
||||
<label id="tabSize-label" for="editor.tabSize" i18n-text="cm_tabSize"></label>
|
||||
<input data-option="tabSize" id="editor.tabSize" type="number" min="0">
|
||||
</div>
|
||||
<div class="option aligned">
|
||||
<label id="keyMap-label" for="editor.keyMap"></label>
|
||||
<label id="keyMap-label" for="editor.keyMap" i18n-text="cm_keyMap"></label>
|
||||
<select data-option="keyMap" id="editor.keyMap"></select>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section id="sections">
|
||||
<h2><span id="sections-heading"></span> <img id="sections-help" src="help.png"></h2>
|
||||
<h2><span id="sections-heading" i18n-text="styleSectionsTitle"></span><img id="sections-help" src="help.png" i18n-alt="helpAlt"></h2>
|
||||
</section>
|
||||
<script src="edit.js"></script>
|
||||
</body>
|
||||
|
|
|
|||
56
edit.js
56
edit.js
|
|
@ -11,16 +11,44 @@ var propertyToCss = {urls: "url", urlPrefixes: "url-prefix", domains: "domain",
|
|||
var CssToProperty = {"url": "urls", "url-prefix": "urlPrefixes", "domain": "domains", "regexp": "regexps"};
|
||||
|
||||
// templates
|
||||
var appliesToTemplate = document.createElement("li");
|
||||
appliesToTemplate.innerHTML = '<select name="applies-type" class="applies-type style-contributor"><option value="url">' + t("appliesUrlOption") + '</option><option value="url-prefix">' + t("appliesUrlPrefixOption") + '</option><option value="domain">' + t("appliesDomainOption") + '</option><option value="regexp">' + t("appliesRegexpOption") + '</option></select><input name="applies-value" class="applies-value style-contributor"><button class="remove-applies-to">' + t("appliesRemove") + '</button><button class="add-applies-to">' + t("appliesAdd") + '</button>';
|
||||
var appliesToTemplate = tHTML('\
|
||||
<li>\
|
||||
<select name="applies-type" class="applies-type style-contributor">\
|
||||
<option value="url" i18n-text="appliesUrlOption"></option>\
|
||||
<option value="url-prefix" i18n-text="appliesUrlPrefixOption"></option>\
|
||||
<option value="domain" i18n-text="appliesDomainOption"></option>\
|
||||
<option value="regexp" i18n-text="appliesRegexpOption"></option>\
|
||||
</select>\
|
||||
<input name="applies-value" class="applies-value style-contributor">\
|
||||
<button class="remove-applies-to" i18n-text="appliesRemove"></button>\
|
||||
<button class="add-applies-to" i18n-text="appliesAdd"></button>\
|
||||
</li>\
|
||||
');
|
||||
|
||||
var appliesToEverythingTemplate = document.createElement("li");
|
||||
appliesToEverythingTemplate.className = "applies-to-everything";
|
||||
appliesToEverythingTemplate.innerHTML = t("appliesToEverything") + ' <button class="add-applies-to">' + t("appliesSpecify") + '</button>';
|
||||
var appliesToEverythingTemplate = tHTML('\
|
||||
<li class="applies-to-everything" i18n-html="appliesToEverything")>\
|
||||
<button class="add-applies-to" i18n-text="appliesSpecify"></button>\
|
||||
</li>\
|
||||
');
|
||||
|
||||
var sectionTemplate = document.createElement("div");
|
||||
sectionTemplate.innerHTML = '<label>' + t('sectionCode') + '</label><textarea class="code"></textarea><br><div class="applies-to"><label>' + t("appliesLabel") + ' <img class="applies-to-help" src="help.png" alt="' + t('helpAlt') + '"></label><ul class="applies-to-list"></ul></div><button class="remove-section">' + t('sectionRemove') + '</button><button class="add-section">' + t('sectionAdd') + '</button>';
|
||||
var sectionTemplate = tHTML('\
|
||||
<div>\
|
||||
<label i18n-text="sectionCode"></label>\
|
||||
<textarea class="code"></textarea>\
|
||||
<br>\
|
||||
<div class="applies-to">\
|
||||
<label i18n-text="appliesLabel">\
|
||||
<img class="applies-to-help" src="help.png" i18n-alt="helpAlt">\
|
||||
</label>\
|
||||
<ul class="applies-to-list"></ul>\
|
||||
</div>\
|
||||
<button class="remove-section" i18n-text="sectionRemove"></button>\
|
||||
<button class="add-section" i18n-text="sectionAdd"></button>\
|
||||
</div>\
|
||||
');
|
||||
|
||||
var findTemplate = t("search") + ': <input type="text" style="width: 10em" class="CodeMirror-search-field"/> ' +
|
||||
'<span style="color: #888" class="CodeMirror-search-hint">(' + t("searchRegexp") + ')</span>';
|
||||
|
||||
// make querySelectorAll enumeration code readable
|
||||
["forEach", "some", "indexOf"].forEach(function(method) {
|
||||
|
|
@ -153,7 +181,6 @@ function initCodeMirror() {
|
|||
controlOptions = ["smartIndent", "indentWithTabs", "tabSize", "keyMap", "lineWrapping"];
|
||||
controlOptions.forEach(function(option) {
|
||||
controlPrefs["editor." + option] = CM.defaults[option];
|
||||
tE(option + "-label", "cm_" + option);
|
||||
});
|
||||
loadPrefs(controlPrefs);
|
||||
|
||||
|
|
@ -417,7 +444,7 @@ function setupGlobalSearch() {
|
|||
function find(activeCM) {
|
||||
var originalOpenDialog = activeCM.openDialog;
|
||||
activeCM.openDialog = function(template, callback, options) {
|
||||
originalOpenDialog.call(activeCM, template, function(query) {
|
||||
originalOpenDialog.call(activeCM, findTemplate, function(query) {
|
||||
activeCM.openDialog = originalOpenDialog;
|
||||
callback(query);
|
||||
var state = activeCM.state.search;
|
||||
|
|
@ -554,7 +581,6 @@ function nextPrevBuffer(cm, direction) {
|
|||
window.addEventListener("load", init, false);
|
||||
|
||||
function init() {
|
||||
tE("sections-help", "helpAlt", "alt");
|
||||
var params = getParams();
|
||||
if (!params.id) { // match should be 2 - one for the whole thing, one for the parentheses
|
||||
// This is an add
|
||||
|
|
@ -582,7 +608,7 @@ function init() {
|
|||
function initWithStyle(style) {
|
||||
document.getElementById("name").value = style.name;
|
||||
document.getElementById("enabled").checked = style.enabled == "true";
|
||||
document.getElementById("heading").innerHTML = t("editStyleHeading");
|
||||
tE("heading", "editStyleHeading", null, false);
|
||||
// if this was done in response to an update, we need to clear existing sections
|
||||
document.querySelectorAll("#sections > div").forEach(function(div) {
|
||||
div.parentNode.removeChild(div);
|
||||
|
|
@ -781,14 +807,6 @@ chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
|
|||
}
|
||||
});
|
||||
|
||||
tE("name", "styleMissingName", "placeholder");
|
||||
tE("enabled-label", "styleEnabledLabel");
|
||||
tE("to-mozilla", "styleToMozillaFormat");
|
||||
tE("save-button", "styleSaveLabel");
|
||||
tE("cancel-button", "styleCancelEditLabel");
|
||||
tE("sections-heading", "styleSectionsTitle");
|
||||
tE("options-heading", "optionsHeading");
|
||||
|
||||
document.getElementById("to-mozilla").addEventListener("click", showMozillaFormat, false);
|
||||
document.getElementById("to-mozilla-help").addEventListener("click", showToMozillaHelp, false);
|
||||
document.getElementById("save-button").addEventListener("click", save, false);
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
tDocLoader();
|
||||
|
||||
function t(key, params) {
|
||||
var s = chrome.i18n.getMessage(key, params)
|
||||
if (s == "") {
|
||||
|
|
@ -17,3 +19,55 @@ function tE(id, key, attr, esc) {
|
|||
document.getElementById(id).innerHTML = t(key);
|
||||
}
|
||||
}
|
||||
|
||||
function tHTML(html) {
|
||||
var node = document.createElement("div");
|
||||
node.innerHTML = html.replace(/>\s+</g, '><'); // spaces are removed; use for an explicit space
|
||||
tNodeList(node.querySelectorAll("*"));
|
||||
var child = node.removeChild(node.firstElementChild);
|
||||
node.remove();
|
||||
return child;
|
||||
}
|
||||
|
||||
function tNodeList(nodes) {
|
||||
for (var n = 0; n < nodes.length; n++) {
|
||||
var node = nodes[n];
|
||||
if (node.nodeType != 1) { // not an ELEMENT_NODE
|
||||
continue;
|
||||
}
|
||||
for (var a = 0; a < node.attributes.length; a++) {
|
||||
var name = node.attributes[a].nodeName;
|
||||
if (name.indexOf("i18n-") != 0) {
|
||||
continue;
|
||||
}
|
||||
name = name.substr(5); // "i18n-".length
|
||||
var value = t(node.attributes[a].nodeValue);
|
||||
switch (name) {
|
||||
case "text":
|
||||
node.insertBefore(document.createTextNode(value), node.firstChild);
|
||||
break;
|
||||
case "html":
|
||||
node.insertAdjacentHTML("afterbegin", value);
|
||||
break;
|
||||
default:
|
||||
node.setAttribute(name, value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function tDocLoader() {
|
||||
// localize HEAD
|
||||
tNodeList(document.querySelectorAll("*"));
|
||||
|
||||
// localize BODY
|
||||
var observer = new MutationObserver(function(mutations) {
|
||||
for (var m = 0; m < mutations.length; m++) {
|
||||
tNodeList(mutations[m].addedNodes);
|
||||
}
|
||||
});
|
||||
observer.observe(document, {subtree: true, childList: true});
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
observer.disconnect();
|
||||
});
|
||||
}
|
||||
|
|
|
|||
27
manage.html
27
manage.html
|
|
@ -1,6 +1,6 @@
|
|||
<html>
|
||||
<head>
|
||||
<title></title>
|
||||
<title i18n-text="manageTitle"></title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
|
|
@ -127,25 +127,24 @@
|
|||
<script src="apply.js"></script>
|
||||
</head>
|
||||
<body id="stylish-manage">
|
||||
|
||||
<div id="header">
|
||||
<h1 id="manage-heading"></h1>
|
||||
<p id="manage-text"></p>
|
||||
<h1 id="manage-heading" i18n-text="manageHeading"></h1>
|
||||
<p id="manage-text" i18n-html="manageText"></p>
|
||||
<fieldset>
|
||||
<legend id="filters"></legend>
|
||||
<div><input id="manage.onlyEnabled" type="checkbox"><label id="manage.onlyEnabled-label" for="manage.onlyEnabled"></label></div>
|
||||
<div><input id="manage.onlyEdited" type="checkbox"><label id="manage.onlyEdited-label" for="manage.onlyEdited"></label></div>
|
||||
<legend id="filters" i18n-text="manageFilters"></legend>
|
||||
<div><input id="manage.onlyEnabled" type="checkbox"><label id="manage.onlyEnabled-label" for="manage.onlyEnabled" i18n-text="manageOnlyEnabled"></label></div>
|
||||
<div><input id="manage.onlyEdited" type="checkbox"><label id="manage.onlyEdited-label" for="manage.onlyEdited" i18n-text="manageOnlyEdited"></label></div>
|
||||
</fieldset>
|
||||
<p><button id="check-all-updates"></button></p>
|
||||
<p><button id="check-all-updates" i18n-text="checkAllUpdates"></button></p>
|
||||
<p>
|
||||
<button id="apply-all-updates" class="hidden"></button>
|
||||
<span id="update-all-no-updates" class="hidden"></span>
|
||||
<button id="apply-all-updates" class="hidden" i18n-text="applyAllUpdates"></button>
|
||||
<span id="update-all-no-updates" class="hidden" i18n-text="updateAllCheckSucceededNoUpdate"></span>
|
||||
</p>
|
||||
<p><a href="edit.html"><button id="add-style-label"></button></a></p>
|
||||
<p><a href="edit.html"><button id="add-style-label" i18n-text="addStyleLabel"></button></a></p>
|
||||
<div id="options">
|
||||
<h2 id="options-heading"></h2>
|
||||
<input id="show-badge" type="checkbox"><label id="show-badge-label" for="show-badge"></label>
|
||||
<div><input id="popup.stylesFirst" type="checkbox"><label id="stylesFirst-label" for="popup.stylesFirst"></label></div>
|
||||
<h2 id="options-heading" i18n-text="optionsHeading"></h2>
|
||||
<input id="show-badge" type="checkbox"><label id="show-badge-label" for="show-badge" i18n-text="prefShowBadge"></label>
|
||||
<div><input id="popup.stylesFirst" type="checkbox"><label id="stylesFirst-label" for="popup.stylesFirst" i18n-text="popupStylesFirst"></label></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="installed"></div>
|
||||
|
|
|
|||
31
manage.js
31
manage.js
|
|
@ -1,5 +1,18 @@
|
|||
var styleTemplate = document.createElement("div");
|
||||
styleTemplate.innerHTML = "<h2 class='style-name'></h2><p class='applies-to'></p><p class='actions'><a class='style-edit-link' href='edit.html?id='><button>" + t('editStyleLabel') + "</button></a><button class='enable'>" + t('enableStyleLabel') + "</button><button class='disable'>" + t('disableStyleLabel') + "</button><button class='delete'>" + t('deleteStyleLabel') + "</button><button class='check-update'>" + t('checkForUpdate') + "</button><button class='update'>" + t('installUpdate') + "</button><span class='update-note'></span></p>";
|
||||
var styleTemplate = tHTML('\
|
||||
<div>\
|
||||
<h2 class="style-name"></h2>\
|
||||
<p class="applies-to"></p>\
|
||||
<p class="actions">\
|
||||
<a class="style-edit-link" href="edit.html?id="><button i18n-text="editStyleLabel"></button></a>\
|
||||
<button class="enable" i18n-text="enableStyleLabel"></button>\
|
||||
<button class="disable" i18n-text="disableStyleLabel"></button>\
|
||||
<button class="delete" i18n-text="deleteStyleLabel"></button>\
|
||||
<button class="check-update" i18n-text="checkForUpdate"></button>\
|
||||
<button class="update" i18n-text="installUpdate"></button>\
|
||||
<span class="update-note"></span>\
|
||||
</p>\
|
||||
</div>\
|
||||
');
|
||||
|
||||
var lastUpdatedStyleId = null;
|
||||
|
||||
|
|
@ -415,20 +428,6 @@ function jsonEquals(a, b, property) {
|
|||
}
|
||||
}
|
||||
|
||||
document.title = t("manageTitle");
|
||||
tE("manage-heading", "manageHeading");
|
||||
tE("manage-text", "manageText", null, false);
|
||||
tE("check-all-updates", "checkAllUpdates");
|
||||
tE("apply-all-updates", "applyAllUpdates");
|
||||
tE("update-all-no-updates", "updateAllCheckSucceededNoUpdate");
|
||||
tE("add-style-label", "addStyleLabel");
|
||||
tE("options-heading", "optionsHeading");
|
||||
tE("show-badge-label", "prefShowBadge");
|
||||
tE("manage.onlyEnabled-label", "manageOnlyEnabled");
|
||||
tE("manage.onlyEdited-label", "manageOnlyEdited");
|
||||
tE("filters", "manageFilters");
|
||||
tE("stylesFirst-label", "popupStylesFirst");
|
||||
|
||||
document.getElementById("check-all-updates").addEventListener("click", checkUpdateAll, false);
|
||||
document.getElementById("apply-all-updates").addEventListener("click", applyUpdateAll, false);
|
||||
|
||||
|
|
|
|||
14
popup.html
14
popup.html
|
|
@ -60,6 +60,9 @@
|
|||
#installed.disabled .style-name {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
#installed .actions a {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
body > .actions {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
|
@ -73,6 +76,7 @@
|
|||
|
||||
#unavailable {
|
||||
border: none;
|
||||
display: none;
|
||||
}
|
||||
body.blocked #installed,
|
||||
body.blocked #find-styles,
|
||||
|
|
@ -134,7 +138,7 @@
|
|||
</head>
|
||||
<body id="stylish-popup">
|
||||
|
||||
<div id="unavailable"><div class="left-gutter"></div><div class="main-controls"><span id="unavailable-message"></span></div></div>
|
||||
<div id="unavailable"><div class="left-gutter"></div><div class="main-controls"><span id="unavailable-message" i18n-text="stylishUnavailableForURL"></span></div></div>
|
||||
|
||||
<div id="installed"></div>
|
||||
|
||||
|
|
@ -144,14 +148,14 @@
|
|||
<input id="disableAll" type="checkbox">
|
||||
</div>
|
||||
<div class="main-controls">
|
||||
<label id="disableAll-label" for="disableAll"></label>
|
||||
<label id="disableAll-label" for="disableAll" i18n-text="disableAllStyles"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left-gutter"></div>
|
||||
<div class="main-controls">
|
||||
<div id="find-styles"><a id="find-styles-link" href="#"></a></div>
|
||||
<div id="manage-styles"><a id="open-manage-link" href="manage.html"></a></div>
|
||||
<div id="write-style"><span id="write-style-for"></span></div>
|
||||
<div id="find-styles"><a id="find-styles-link" href="#" i18n-text="findStylesForSite"></a></div>
|
||||
<div id="manage-styles"><a id="open-manage-link" href="manage.html" i18n-text="openManage"></a></div>
|
||||
<div id="write-style"><span id="write-style-for" i18n-text="writeStyleFor"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
25
popup.js
25
popup.js
|
|
@ -1,5 +1,19 @@
|
|||
var styleTemplate = document.createElement("div");
|
||||
styleTemplate.innerHTML = "<div class='left-gutter'><input class='checker' type='checkbox'></div><div class='main-controls'><label class='style-name'></label><div class='actions'><a href='#' class='enable'>" + t('enableStyleLabel') + "</a> <a href='#' class='disable'>" + t('disableStyleLabel') + "</a> <a class='style-edit-link' href='edit.html?id='>" + t('editStyleLabel') + "</a> <a href='#' class='delete'>" + t('deleteStyleLabel') + "</a></div></div>";
|
||||
var styleTemplate = tHTML('\
|
||||
<div>\
|
||||
<div class="left-gutter">\
|
||||
<input class="checker" type="checkbox">\
|
||||
</div>\
|
||||
<div class="main-controls">\
|
||||
<label class="style-name"></label>\
|
||||
<div class="actions">\
|
||||
<a href="#" class="enable" i18n-text="enableStyleLabel"></a>\
|
||||
<a href="#" class="disable" i18n-text="disableStyleLabel"></a>\
|
||||
<a class="style-edit-link" href="edit.html?id=" i18n-text="editStyleLabel"></a>\
|
||||
<a href="#" class="delete" i18n-text="deleteStyleLabel"></a>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
');
|
||||
|
||||
var writeStyleTemplate = document.createElement("a");
|
||||
writeStyleTemplate.className = "write-style-link";
|
||||
|
|
@ -26,7 +40,7 @@ function updatePopUp(url) {
|
|||
var urlWillWork = /^(file|http|https|chrome\-extension):/.exec(url);
|
||||
if (!urlWillWork) {
|
||||
document.body.classList.add("blocked");
|
||||
tE("unavailable-message", "stylishUnavailableForURL");
|
||||
document.getElementById("unavailable").style.display = "block";
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -214,11 +228,6 @@ chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
|
|||
}
|
||||
});
|
||||
|
||||
tE("open-manage-link", "openManage");
|
||||
tE("write-style-for", "writeStyleFor");
|
||||
tE("find-styles-link", "findStylesForSite");
|
||||
tE("disableAll-label", "disableAllStyles");
|
||||
|
||||
["find-styles-link", "open-manage-link"].forEach(function(id) {
|
||||
document.getElementById(id).addEventListener("click", openLink, false);
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user