Create "compare view" test page for easier development
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…
Reference in New Issue