Skip to content

Commit 28d7614

Browse files
n1k0n1k0
committed
Updated Web UI to render extracted metadata; improved styling.
1 parent f64f411 commit 28d7614

File tree

5 files changed

+97
-46
lines changed

5 files changed

+97
-46
lines changed

‎index.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ var html2md = require("html-md");
55
var markdown = require("markdown");
66

77
var app = express();
8-
app.use(express.static('static'));
8+
app.use(express.static("static"));
9+
app.use(express.static("node_modules/bootstrap/dist/css"));
910

1011
/**
1112
* Casts a qs string arg into an actual boolean.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"license": "MPL",
1717
"dependencies": {
1818
"bluebird": "^2.9.12",
19+
"bootstrap": "^3.3.2",
1920
"express": "^4.11.2",
2021
"html-md": "^3.0.2",
2122
"markdown": "^0.5.0",

‎static/index.html

Lines changed: 55 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -3,52 +3,62 @@
33
<head>
44
<meta charset="utf-8">
55
<title>Readability.js test page</title>
6-
<style>
7-
body {
8-
background-color: #ffe;
9-
font-size: 18px;
10-
}
11-
form { margin: 1em 0; }
12-
input { font-size: 16px; }
13-
iframe {
14-
width: 49%;
15-
height: 640px;
16-
background: #fff;
17-
}
18-
iframe body {
19-
font-size: 22px;
20-
}
21-
</style>
6+
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
7+
<link rel="stylesheet" type="text/css" href="style.css">
228
</head>
239
<body>
24-
<h1>Readability.js test page</h1>
25-
<form id="form">
26-
<p><label>URL
27-
<input type="url" id="url" size="120" placeholder="http://">
28-
</label></p>
29-
<p><label>
30-
<input type="checkbox" id="sanitize"> Sanitize output
31-
</label></p>
32-
<input type="submit">
33-
</form>
34-
<iframe id="source"></iframe>
35-
<iframe id="target"></iframe>
36-
<script>
37-
var q = document.querySelector.bind(document);
38-
39-
function injectReadableContents(url, sanitize, target) {
40-
var req = new XMLHttpRequest();
41-
req.open("GET", "/api/get?sanitize=" + (sanitize ? "yes" : "no") + "&url=" + encodeURIComponent(url), false);
42-
req.send(null);
43-
target.contentDocument.body.innerHTML = JSON.parse(req.responseText).content;
44-
}
45-
46-
q("form").addEventListener("submit", function(event) {
47-
event.preventDefault();
48-
var url = q("#url").value;
49-
q("#source").src = url;
50-
injectReadableContents(url, q("#sanitize").checked, q("#target"));
51-
});
52-
</script>
10+
<div class="container-fluid">
11+
<div class="page-header">
12+
<h1>Readability.js <small>test page</small></h1>
13+
</div>
14+
<div class="row">
15+
<div class="col-md-6">
16+
<form class="form-horizontal" id="form">
17+
<div class="form-group">
18+
<label class="col-sm-1 control-label">URL</label>
19+
<div class="col-sm-11">
20+
<input type="url" class="form-control" id="url" placeholder="http://">
21+
</div>
22+
</div>
23+
<div class="form-group">
24+
<div class="col-sm-offset-1 col-sm-11">
25+
<div class="checkbox">
26+
<label><input type="checkbox" id="sanitize">Sanitize output</label>
27+
</div>
28+
</div>
29+
</div>
30+
<div class="form-group">
31+
<div class="col-sm-offset-1 col-sm-10">
32+
<input class="btn btn-info" type="submit">
33+
</div>
34+
</div>
35+
</form>
36+
</div>
37+
<div class="col-md-6">
38+
<table class="table table-striped">
39+
<tr><th>Title</th><td id="title"></td></tr>
40+
<tr><th>Dir</th><td id="dir"></td></tr>
41+
<tr><th>Byline</th><td id="byline"></td></tr>
42+
<tr><th>Length</th><td id="length"></td></tr>
43+
<tr><th>Excerpt</th><td id="excerpt"></td></tr>
44+
</table>
45+
</div>
46+
</div>
47+
<div class="row">
48+
<div class="col-md-6">
49+
<div class="panel panel-default">
50+
<div class="panel-heading">Original</div>
51+
<iframe id="source"></iframe>
52+
</div>
53+
</div>
54+
<div class="col-md-6">
55+
<div class="panel panel-default">
56+
<div class="panel-heading">Readable</div>
57+
<iframe id="target"></iframe>
58+
</div>
59+
</div>
60+
</div>
61+
</div>
62+
<script src="main.js"></script>
5363
</body>
5464
</html>

‎static/main.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
(function() {
2+
"use strict";
3+
4+
var q = document.querySelector.bind(document);
5+
6+
function injectReadableContents(url, sanitize, target) {
7+
var req = new XMLHttpRequest();
8+
req.open("GET", "/api/get?sanitize=" + (sanitize ? "yes" : "no") + "&url=" + encodeURIComponent(url), false);
9+
req.send(null);
10+
var jsonResponse = JSON.parse(req.responseText);
11+
console.log(jsonResponse);
12+
q("#title").textContent = jsonResponse.title;
13+
q("#byline").textContent = jsonResponse.byline;
14+
q("#length").textContent = jsonResponse.length;
15+
q("#dir").textContent = jsonResponse.dir;
16+
q("#excerpt").textContent = jsonResponse.excerpt;
17+
target.contentDocument.body.innerHTML = jsonResponse.content;
18+
}
19+
20+
function init() {
21+
q("form").addEventListener("submit", function(event) {
22+
event.preventDefault();
23+
var url = q("#url").value;
24+
q("#source").src = url;
25+
injectReadableContents(url, q("#sanitize").checked, q("#target"));
26+
});
27+
}
28+
29+
window.addEventListener("DOMContentLoaded", init);
30+
})();

‎static/style.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
iframe {
2+
border: none;
3+
width: 100%;
4+
height: 640px;
5+
background: #fff;
6+
}
7+
iframe body {
8+
font-size: 22px;
9+
}

0 commit comments

Comments
 (0)