Convert to Unix linebreaks

This commit is contained in:
Jason Barnabe 2015-01-30 11:05:06 -06:00
parent 7747cab98f
commit c4750a47b2

670
edit.js
View File

@ -1,335 +1,335 @@
var styleId = null; var styleId = null;
var dirty = false; var dirty = false;
var appliesToTemplate = document.createElement("li"); var appliesToTemplate = document.createElement("li");
appliesToTemplate.innerHTML = '<select name="applies-type" class="applies-type"><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"><button class="remove-applies-to">' + t("appliesRemove") + '</button><button class="add-applies-to">' + t("appliesAdd") + '</button>'; appliesToTemplate.innerHTML = '<select name="applies-type" class="applies-type"><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"><button class="remove-applies-to">' + t("appliesRemove") + '</button><button class="add-applies-to">' + t("appliesAdd") + '</button>';
var appliesToEverythingTemplate = document.createElement("li"); var appliesToEverythingTemplate = document.createElement("li");
appliesToEverythingTemplate.className = "applies-to-everything"; appliesToEverythingTemplate.className = "applies-to-everything";
appliesToEverythingTemplate.innerHTML = t("appliesToEverything") + ' <button class="add-applies-to">' + t("appliesSpecify") + '</button>' appliesToEverythingTemplate.innerHTML = t("appliesToEverything") + ' <button class="add-applies-to">' + t("appliesSpecify") + '</button>'
var sectionTemplate = document.createElement("div"); 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>'; 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 editors = [] // array of all CodeMirror instances var editors = [] // array of all CodeMirror instances
// replace given textarea with the CodeMirror editor // replace given textarea with the CodeMirror editor
function setupCodeMirror(textarea) { function setupCodeMirror(textarea) {
var cm = CodeMirror.fromTextArea(textarea, { var cm = CodeMirror.fromTextArea(textarea, {
mode: 'css', mode: 'css',
lineNumbers: true, lineNumbers: true,
lineWrapping: true lineWrapping: true
}); });
editors.push(cm); editors.push(cm);
} }
function makeDirty() { function makeDirty() {
dirty = true; dirty = true;
} }
window.onbeforeunload = function() { window.onbeforeunload = function() {
return dirty ? t('styleChangesNotSaved') : null; return dirty ? t('styleChangesNotSaved') : null;
} }
function addAppliesTo(list, name, value) { function addAppliesTo(list, name, value) {
var showingEverything = list.querySelector(".applies-to-everything") != null; var showingEverything = list.querySelector(".applies-to-everything") != null;
// blow away "Everything" if it's there // blow away "Everything" if it's there
if (showingEverything) { if (showingEverything) {
list.removeChild(list.firstChild); list.removeChild(list.firstChild);
} }
var e; var e;
if (name && value) { if (name && value) {
e = appliesToTemplate.cloneNode(true); e = appliesToTemplate.cloneNode(true);
e.querySelector("[name=applies-type]").value = name; e.querySelector("[name=applies-type]").value = name;
e.querySelector("[name=applies-value]").value = value; e.querySelector("[name=applies-value]").value = value;
e.querySelector(".remove-applies-to").addEventListener("click", removeAppliesTo, false); e.querySelector(".remove-applies-to").addEventListener("click", removeAppliesTo, false);
e.querySelector(".applies-value").addEventListener("change", makeDirty, false); e.querySelector(".applies-value").addEventListener("change", makeDirty, false);
e.querySelector(".applies-type").addEventListener("change", makeDirty, false); e.querySelector(".applies-type").addEventListener("change", makeDirty, false);
} else if (showingEverything || list.hasChildNodes()) { } else if (showingEverything || list.hasChildNodes()) {
e = appliesToTemplate.cloneNode(true); e = appliesToTemplate.cloneNode(true);
if (list.hasChildNodes()) { if (list.hasChildNodes()) {
e.querySelector("[name=applies-type]").value = list.querySelector("li:last-child [name='applies-type']").value; e.querySelector("[name=applies-type]").value = list.querySelector("li:last-child [name='applies-type']").value;
} }
e.querySelector(".remove-applies-to").addEventListener("click", removeAppliesTo, false); e.querySelector(".remove-applies-to").addEventListener("click", removeAppliesTo, false);
e.querySelector(".applies-value").addEventListener("change", makeDirty, false); e.querySelector(".applies-value").addEventListener("change", makeDirty, false);
e.querySelector(".applies-type").addEventListener("change", makeDirty, false); e.querySelector(".applies-type").addEventListener("change", makeDirty, false);
} else { } else {
e = appliesToEverythingTemplate.cloneNode(true); e = appliesToEverythingTemplate.cloneNode(true);
} }
e.querySelector(".add-applies-to").addEventListener("click", function() {addAppliesTo(this.parentNode.parentNode)}, false); e.querySelector(".add-applies-to").addEventListener("click", function() {addAppliesTo(this.parentNode.parentNode)}, false);
list.appendChild(e); list.appendChild(e);
} }
function addSection(section) { function addSection(section) {
var div = sectionTemplate.cloneNode(true); var div = sectionTemplate.cloneNode(true);
div.querySelector(".applies-to-help").addEventListener("click", showAppliesToHelp, false); div.querySelector(".applies-to-help").addEventListener("click", showAppliesToHelp, false);
div.querySelector(".remove-section").addEventListener("click", removeSection, false); div.querySelector(".remove-section").addEventListener("click", removeSection, false);
div.querySelector(".add-section").addEventListener("click", function() {addSection()}, false); div.querySelector(".add-section").addEventListener("click", function() {addSection()}, false);
var appliesTo = div.querySelector(".applies-to-list"); var appliesTo = div.querySelector(".applies-to-list");
if (section) { if (section) {
var codeElement = div.querySelector(".code"); var codeElement = div.querySelector(".code");
codeElement.value = section.code; codeElement.value = section.code;
codeElement.addEventListener("change", makeDirty, false); codeElement.addEventListener("change", makeDirty, false);
if (section.urls) { if (section.urls) {
section.urls.forEach(function(url) { section.urls.forEach(function(url) {
addAppliesTo(appliesTo, "url", url); addAppliesTo(appliesTo, "url", url);
}); });
} }
if (section.urlPrefixes) { if (section.urlPrefixes) {
section.urlPrefixes.forEach(function(url) { section.urlPrefixes.forEach(function(url) {
addAppliesTo(appliesTo, "url-prefix", url); addAppliesTo(appliesTo, "url-prefix", url);
}); });
} }
if (section.domains) { if (section.domains) {
section.domains.forEach(function(d) { section.domains.forEach(function(d) {
addAppliesTo(appliesTo, "domain", d); addAppliesTo(appliesTo, "domain", d);
}); });
} }
if (section.regexps) { if (section.regexps) {
section.regexps.forEach(function(d) { section.regexps.forEach(function(d) {
addAppliesTo(appliesTo, "regexp", d); addAppliesTo(appliesTo, "regexp", d);
}); });
} }
if (!section.urls && !section.urlPrefixes && !section.domains && !section.regexps) { if (!section.urls && !section.urlPrefixes && !section.domains && !section.regexps) {
addAppliesTo(appliesTo); addAppliesTo(appliesTo);
} }
} else { } else {
addAppliesTo(appliesTo); addAppliesTo(appliesTo);
} }
var sections = document.getElementById("sections"); var sections = document.getElementById("sections");
sections.appendChild(div); sections.appendChild(div);
setupCodeMirror(div.querySelector('.code')); setupCodeMirror(div.querySelector('.code'));
} }
function removeAppliesTo(event) { function removeAppliesTo(event) {
var appliesToList = event.target.parentNode.parentNode; var appliesToList = event.target.parentNode.parentNode;
appliesToList.removeChild(event.target.parentNode); appliesToList.removeChild(event.target.parentNode);
if (!appliesToList.hasChildNodes()) { if (!appliesToList.hasChildNodes()) {
var e = appliesToEverythingTemplate.cloneNode(true); var e = appliesToEverythingTemplate.cloneNode(true);
e.querySelector(".add-applies-to").addEventListener("click", function() {addAppliesTo(this.parentNode.parentNode)}, false); e.querySelector(".add-applies-to").addEventListener("click", function() {addAppliesTo(this.parentNode.parentNode)}, false);
appliesToList.appendChild(e); appliesToList.appendChild(e);
} }
makeDirty(); makeDirty();
} }
function removeSection(event) { function removeSection(event) {
event.target.parentNode.parentNode.removeChild(event.target.parentNode); event.target.parentNode.parentNode.removeChild(event.target.parentNode);
makeDirty(); makeDirty();
} }
window.addEventListener("load", init, false); window.addEventListener("load", init, false);
function init() { function init() {
tE("sections-help", "helpAlt", "alt"); tE("sections-help", "helpAlt", "alt");
var idMatch = /[&\?]id=([0-9]+)/.exec(location.href) 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 if (idMatch == null || idMatch.length != 2) { // match should be 2 - one for the whole thing, one for the parentheses
// This is an add // This is an add
addSection(); addSection();
// default to enabled // default to enabled
document.getElementById("enabled").checked = true document.getElementById("enabled").checked = true
document.title = t("addStyleTitle"); document.title = t("addStyleTitle");
tE("heading", "addStyleTitle"); tE("heading", "addStyleTitle");
return; return;
} }
// This is an edit // This is an edit
var id = idMatch[1]; var id = idMatch[1];
chrome.extension.sendMessage({method: "getStyles", id: id}, function(styles) { chrome.extension.sendMessage({method: "getStyles", id: id}, function(styles) {
var style = styles[0]; var style = styles[0];
styleId = style.id; styleId = style.id;
initWithStyle(style); initWithStyle(style);
}); });
} }
function initWithStyle(style) { function initWithStyle(style) {
document.getElementById("name").value = style.name; document.getElementById("name").value = style.name;
document.getElementById("enabled").checked = style.enabled == "true"; document.getElementById("enabled").checked = style.enabled == "true";
document.getElementById("heading").innerHTML = t("editStyleHeading"); document.getElementById("heading").innerHTML = t("editStyleHeading");
initTitle(style.name); initTitle(style.name);
// if this was done in response to an update, we need to clear existing sections // if this was done in response to an update, we need to clear existing sections
Array.prototype.forEach.call(document.querySelectorAll("#sections > div"), function(div) { Array.prototype.forEach.call(document.querySelectorAll("#sections > div"), function(div) {
div.parentNode.removeChild(div); div.parentNode.removeChild(div);
}); });
style.sections.forEach(addSection); style.sections.forEach(addSection);
} }
function initTitle(name) { function initTitle(name) {
document.title = t('editStyleTitle', [name]); document.title = t('editStyleTitle', [name]);
} }
function validate() { function validate() {
var name = document.getElementById("name").value; var name = document.getElementById("name").value;
if (name == "") { if (name == "") {
return t("styleMissingName"); return t("styleMissingName");
} }
// validate the regexps // validate the regexps
if (Array.prototype.some.call(document.querySelectorAll(".applies-to-list"), function(list) { if (Array.prototype.some.call(document.querySelectorAll(".applies-to-list"), function(list) {
return Array.prototype.some.call(list.childNodes, function(li) { return Array.prototype.some.call(list.childNodes, function(li) {
if (li.className == appliesToEverythingTemplate.className) { if (li.className == appliesToEverythingTemplate.className) {
return false; return false;
} }
var valueElement = li.querySelector("[name=applies-value]"); var valueElement = li.querySelector("[name=applies-value]");
var a = li.querySelector("[name=applies-type]").value; var a = li.querySelector("[name=applies-type]").value;
var b = valueElement.value; var b = valueElement.value;
if (a && b) { if (a && b) {
if (a == "regexp") { if (a == "regexp") {
try { try {
new RegExp(b); new RegExp(b);
} catch (ex) { } catch (ex) {
valueElement.focus(); valueElement.focus();
return true; return true;
} }
} }
} }
return false; return false;
}); });
})) { })) {
return t("styleBadRegexp"); return t("styleBadRegexp");
} }
return null; return null;
} }
function save() { function save() {
// save the contents of the CodeMirror editors back into the textareas // save the contents of the CodeMirror editors back into the textareas
for(var i=0; i < editors.length; i++) { for(var i=0; i < editors.length; i++) {
editors[i].save(); editors[i].save();
} }
var error = validate(); var error = validate();
if (error) { if (error) {
alert(error); alert(error);
return; return;
} }
var name = document.getElementById("name").value; var name = document.getElementById("name").value;
var enabled = document.getElementById("enabled").checked; var enabled = document.getElementById("enabled").checked;
var request = { var request = {
method: "saveStyle", method: "saveStyle",
id: styleId, id: styleId,
name: name, name: name,
enabled: enabled, enabled: enabled,
sections: getSections(), sections: getSections(),
}; };
chrome.extension.sendMessage(request, saveComplete); chrome.extension.sendMessage(request, saveComplete);
} }
function getSections() { function getSections() {
var sections = []; var sections = [];
Array.prototype.forEach.call(document.querySelectorAll("#sections > div"), function(div) { Array.prototype.forEach.call(document.querySelectorAll("#sections > div"), function(div) {
var code = div.querySelector(".code").value; var code = div.querySelector(".code").value;
if (/^\s*$/.test(code)) { if (/^\s*$/.test(code)) {
return; return;
} }
var meta = getMeta(div); var meta = getMeta(div);
meta.code = code; meta.code = code;
sections.push(meta); sections.push(meta);
}); });
return sections; return sections;
} }
function getMeta(e) { function getMeta(e) {
var meta = {urls: [], urlPrefixes: [], domains: [], regexps: []}; var meta = {urls: [], urlPrefixes: [], domains: [], regexps: []};
Array.prototype.forEach.call(e.querySelector(".applies-to-list").childNodes, function(li) { Array.prototype.forEach.call(e.querySelector(".applies-to-list").childNodes, function(li) {
if (li.className == appliesToEverythingTemplate.className) { if (li.className == appliesToEverythingTemplate.className) {
return; return;
} }
var a = li.querySelector("[name=applies-type]").value; var a = li.querySelector("[name=applies-type]").value;
var b = li.querySelector("[name=applies-value]").value; var b = li.querySelector("[name=applies-value]").value;
if (a && b) { if (a && b) {
switch (a) { switch (a) {
case "url": case "url":
meta.urls.push(b); meta.urls.push(b);
break; break;
case "url-prefix": case "url-prefix":
meta.urlPrefixes.push(b); meta.urlPrefixes.push(b);
break; break;
case "domain": case "domain":
meta.domains.push(b); meta.domains.push(b);
break; break;
case "regexp": case "regexp":
meta.regexps.push(b); meta.regexps.push(b);
break; break;
} }
} }
}); });
return meta; return meta;
} }
function saveComplete(style) { function saveComplete(style) {
dirty = false; dirty = false;
// Go from new style URL to edit style URL // Go from new style URL to edit style URL
if (location.href.indexOf("id=") == -1) { if (location.href.indexOf("id=") == -1) {
// give the code above a moment before we kill the page // give the code above a moment before we kill the page
setTimeout(function() {location.href = "edit.html?id=" + style.id;}, 200); setTimeout(function() {location.href = "edit.html?id=" + style.id;}, 200);
} else { } else {
initTitle(document.getElementById("name").value); initTitle(document.getElementById("name").value);
} }
} }
function showMozillaFormat() { function showMozillaFormat() {
var w = window.open("data:text/plain;charset=UTF-8," + encodeURIComponent(toMozillaFormat())); var w = window.open("data:text/plain;charset=UTF-8," + encodeURIComponent(toMozillaFormat()));
} }
function toMozillaFormat() { function toMozillaFormat() {
return getSections().map(function(section) { return getSections().map(function(section) {
if (section.urls.length == 0 && section.urlPrefixes.length == 0 && section.domains.length == 0 && section.regexps.length == 0) { if (section.urls.length == 0 && section.urlPrefixes.length == 0 && section.domains.length == 0 && section.regexps.length == 0) {
return section.code; return section.code;
} }
var propertyToCss = {"urls": "url", "urlPrefixes": "url-prefix", "domains": "domain", "regexps": "regexp"}; var propertyToCss = {"urls": "url", "urlPrefixes": "url-prefix", "domains": "domain", "regexps": "regexp"};
var cssMds = []; var cssMds = [];
for (var i in propertyToCss) { for (var i in propertyToCss) {
cssMds = cssMds.concat(section[i].map(function(v) { cssMds = cssMds.concat(section[i].map(function(v) {
return propertyToCss[i] + "(\"" + v.replace(/\\/g, "\\\\") + "\")"; return propertyToCss[i] + "(\"" + v.replace(/\\/g, "\\\\") + "\")";
})); }));
} }
return "@-moz-document " + cssMds.join(", ") + " {\n" + section.code + "\n}"; return "@-moz-document " + cssMds.join(", ") + " {\n" + section.code + "\n}";
}).join("\n\n"); }).join("\n\n");
} }
function showSectionHelp() { function showSectionHelp() {
showHelp(t("sectionHelp")); showHelp(t("sectionHelp"));
} }
function showAppliesToHelp() { function showAppliesToHelp() {
showHelp(t("appliesHelp")); showHelp(t("appliesHelp"));
} }
function showToMozillaHelp() { function showToMozillaHelp() {
showHelp(t("styleToMozillaFormatHelp")); showHelp(t("styleToMozillaFormatHelp"));
} }
function showHelp(text) { function showHelp(text) {
alert(text); alert(text);
} }
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) { chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
var installed = document.getElementById("installed"); var installed = document.getElementById("installed");
switch(request.name) { switch(request.name) {
case "styleUpdated": case "styleUpdated":
if (styleId == request.id) { if (styleId == request.id) {
initWithStyle(request.style); initWithStyle(request.style);
dirty = false; dirty = false;
} }
break; break;
case "styleDeleted": case "styleDeleted":
if (styleId == request.id) { if (styleId == request.id) {
window.close(); window.close();
break; break;
} }
} }
}); });
tE("name-label", "styleNameLabel"); tE("name-label", "styleNameLabel");
tE("enabled-label", "styleEnabledLabel"); tE("enabled-label", "styleEnabledLabel");
tE("to-mozilla", "styleToMozillaFormat"); tE("to-mozilla", "styleToMozillaFormat");
tE("save-button", "styleSaveLabel"); tE("save-button", "styleSaveLabel");
tE("cancel-button", "styleCancelEditLabel"); tE("cancel-button", "styleCancelEditLabel");
tE("sections-heading", "styleSectionsTitle"); tE("sections-heading", "styleSectionsTitle");
document.getElementById("name").addEventListener("change", makeDirty, false); document.getElementById("name").addEventListener("change", makeDirty, false);
document.getElementById("enabled").addEventListener("change", makeDirty, false); document.getElementById("enabled").addEventListener("change", makeDirty, false);
document.getElementById("to-mozilla").addEventListener("click", showMozillaFormat, false); document.getElementById("to-mozilla").addEventListener("click", showMozillaFormat, false);
document.getElementById("to-mozilla-help").addEventListener("click", showToMozillaHelp, false); document.getElementById("to-mozilla-help").addEventListener("click", showToMozillaHelp, false);
document.getElementById("save-button").addEventListener("click", save, false); document.getElementById("save-button").addEventListener("click", save, false);
document.getElementById("sections-help").addEventListener("click", showSectionHelp, false); document.getElementById("sections-help").addEventListener("click", showSectionHelp, false);