Create "compare view" test page for easier development

pull/7/head
Margaret Leibovic 9 years ago
parent c0b1586190
commit 97762aff05

@ -1,4 +1,9 @@
# readability
A standalone version of the readability lib used in Firefox (desktop, Android, and iOS).
# Readability.js
A standalone version of the readability library used for Firefox Reader View.
For outstanding issues, see this bug list: https://bugzilla.mozilla.org/show_bug.cgi?id=1102450
For easy development, you can use the compare-view page to compare an original test page to its reader-ized content. Due to the same-origin policy, this will only work with pages hosted on the same domain as this compare-view page, so you should save testcases locally, and run a local http server to test.
For a simple node http server, see [http-server](https://github.com/nodeapps/http-server).

Binary file not shown.

@ -0,0 +1,18 @@
#inputs {
margin: 20px 0;
}
#url {
width: 400px;
}
#frames {
display: flex;
height: 600px;
margin: ;
}
.frame {
flex: 1;
}

@ -0,0 +1,31 @@
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById("compare").addEventListener("click", function compare(event) {
var original = document.getElementById("original");
original.addEventListener("load", function(event) {
var contentDoc = original.contentDocument;
var docStr = new XMLSerializer().serializeToString(contentDoc);
var doc = new DOMParser().parseFromString(docStr, "text/html");
var location = contentDoc.location;
var uri = {
spec: location.href,
host: location.host,
prePath: location.protocol + "//" + location.host, // TODO This is incomplete, needs username/password and port
scheme: location.protocol.substr(0, location.protocol.indexOf(":")),
pathBase: location.protocol + "//" + location.host + location.pathname.substr(0, location.pathname.lastIndexOf("/") + 1)
}
var readability = new Readability(uri, doc);
var result = readability.parse();
console.log(result);
var readerDoc = document.getElementById("readerized").contentWindow.document;
readerDoc.getElementById("title").textContent = result.title;
readerDoc.getElementById("byline").textContent = result.byline;
readerDoc.getElementById("content").innerHTML = result.content;
});
original.src = document.getElementById("url").value;
});
});

@ -0,0 +1,22 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Readability Compare View</title>
<link rel="stylesheet" href="compare.css">
</head>
<body>
<h1>Readability Compare View</h1>
<div id="inputs">
<input type="url" placeholder="http://localhost:8080/test-pages/margaret.html" id="url"/>
<input type="submit" value="Compare" id="compare"/>
</div>
<div id="frames">
<iframe id="original" class="frame"></iframe>
<iframe id="readerized" class="frame" src="reader-view.html"></iframe>
</div>
<script src="../Readability.js"></script>
<script src="compare.js"></script>
</body>
</html>

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<meta name="viewport" content="width=device-width; user-scalable=0" />
</head>
<body>
<h1 id="title"></h1>
<h2 id="byline"></h2>
<div id="content"></div>
</body>
</html>

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save