зеркало из https://github.com/mozilla/slowparse.git
83 строки
2.7 KiB
JavaScript
83 строки
2.7 KiB
JavaScript
var xhr = new XMLHttpRequest();
|
|
xhr.open("GET", "locale/en_US.json", true);
|
|
xhr.onreadystatechange = function() {
|
|
if(xhr.readyState !== 4 || (xhr.status !== 0 && xhr.status !== 200)) return;
|
|
|
|
var strings = xhr.responseText;
|
|
var stringmap = JSON.parse(strings);
|
|
|
|
var input = document.querySelector(".text.pane"),
|
|
errors = document.querySelector(".error.pane"),
|
|
preview = document.querySelector(".preview.pane");
|
|
|
|
var frame = document.createElement("iframe");
|
|
preview.innerHTML = "";
|
|
preview.appendChild(frame);
|
|
var fdoc = frame.contentDocument;
|
|
|
|
var bePre = function(v) { return v.replace(/</g,'<').replace(/>/g,'>'); };
|
|
var unPre = function(v) { return v.replace(/</g,'<').replace(/>/g,'>'); };
|
|
|
|
var hoverHandler = function(basedata) {
|
|
return function(evt) {
|
|
var target = evt.target;
|
|
var hl = target.getAttribute("data-highlight");
|
|
if(!hl) return;
|
|
var values = hl.split(",").map(function(v) { return parseInt(v,10); });
|
|
var start = values[0];
|
|
var end = values[1];
|
|
var pre = fdoc.querySelector("pre");
|
|
var marked = basedata;
|
|
var marked = bePre(marked.slice(0,start) + "<highlight>" + marked.slice(start, end) + "</highlight>" + marked.slice(end));
|
|
marked = marked.replace("<highlight>", "<span class='highlight'>");
|
|
marked = marked.replace("</highlight>", "</span>");
|
|
pre.innerHTML = marked;
|
|
};
|
|
};
|
|
|
|
|
|
var setPreview = function(data, original) {
|
|
fdoc.open();
|
|
fdoc.write(data);
|
|
fdoc.write("<style>hr { border: solid grey; width: 100%; margin: 0; border-width: 1px 0 0 0; } span.highlight { background: pink; } em[data-highlight] { cursor: pointer; }</style>");
|
|
fdoc.close();
|
|
fdoc.addEventListener("mouseover", hoverHandler(original));
|
|
};
|
|
|
|
var resolveError = function(data, error, map) {
|
|
var template = map[error.type];
|
|
var errorHTML = template.replace(/\[\[([^\]]+)\]\]/g, function(_, term) {
|
|
var terms = term.indexOf(".") > -1 ? term.split(".") : [term];
|
|
var value = error;
|
|
while(terms.length > 0) {
|
|
value = value[terms.splice(0,1)[0]];
|
|
}
|
|
return value;
|
|
});
|
|
var suffix = "\n<hr>\n<pre class='hl-target'>\n" + bePre(data) + "</pre>";
|
|
errorHTML += suffix;
|
|
return errorHTML
|
|
};
|
|
|
|
var timeout = false;
|
|
|
|
var update = function() {
|
|
var data = input.value;
|
|
var result = Slowparse.HTML(document, data);
|
|
if (result.error) {
|
|
errors.textContent = JSON.stringify(result.error, false, 2);
|
|
setPreview(resolveError(data, result.error, stringmap), data);
|
|
} else {
|
|
errors.textContent = '';
|
|
setPreview(data);
|
|
}
|
|
};
|
|
|
|
input.addEventListener("keyup", function(evt) {
|
|
setTimeout(update, 100);
|
|
});
|
|
|
|
update();
|
|
}
|
|
xhr.send(null);
|