changeset 10:a42497c3964c default tip

Move scripts & CSS to files to play nicely with CSP
author IBBoard <dev@ibboard.co.uk>
date Wed, 26 Jun 2019 20:41:10 +0100
parents db2811ebfbd2
children
files exif-graphr.css exif-graphr.js index.html
diffstat 3 files changed, 40 insertions(+), 38 deletions(-) [+]
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/exif-graphr.css	Wed Jun 26 20:41:10 2019 +0100
@@ -0,0 +1,35 @@
+.axis path,
+.axis line {
+	fill: none;
+	stroke: black;
+	shape-rendering: crispEdges;
+}
+
+.axis text {
+	font-family: sans-serif;
+	font-size: 11px;
+}
+
+.d3-tip {
+	background-color: rgba(51, 51, 51, 0.9);
+	border-radius: 5px;
+	border: 1px solid #000;
+	color: #f0f0f0;
+	font-size: 80%;
+	padding: 0.5em;
+	max-width: 25em;
+}
+.d3-tip:after {
+	display: block;
+	content: " ";
+	position: absolute;
+	top: 100%;
+	left: 50%;
+	margin-left: -5px;
+	border: 5px solid transparent;
+	border-width: 10px 5px 0 5px;
+	border-top-color: #000;
+}
+table { border-collapse: collapse; width: 100% }
+td, th { border: 1px solid #aaa }
+th { background-color: #ddd }
--- a/exif-graphr.js	Sat Jun 03 21:00:48 2017 +0100
+++ b/exif-graphr.js	Wed Jun 26 20:41:10 2019 +0100
@@ -1,6 +1,9 @@
 var debug = false;
 var photo_data = {};
 
+document.getElementById('submit').onclick = visualise;
+document.getElementById('username').onkeypress = function() { if (event.keyCode==13) { visualise(); return false; } }
+
 /* Helper functions */
 function byID(d) { return d.id; }
 function byValue(d) { return d; }
--- a/index.html	Sat Jun 03 21:00:48 2017 +0100
+++ b/index.html	Wed Jun 26 20:41:10 2019 +0100
@@ -8,43 +8,7 @@
 <!--<script type="text/javascript" src="./d3.min.js"></script>-->
 <script type="text/javascript" src="./d3.tip.js"></script>
 <script type="text/javascript" src="./d3.beeswarm.js"></script>
-<style type="text/css">
-.axis path,
-.axis line {
-	fill: none;
-	stroke: black;
-	shape-rendering: crispEdges;
-}
-
-.axis text {
-	font-family: sans-serif;
-	font-size: 11px;
-}
-
-.d3-tip {
-	background-color: rgba(51, 51, 51, 0.9);
-	border-radius: 5px;
-	border: 1px solid #000;
-	color: #f0f0f0;
-	font-size: 80%;
-	padding: 0.5em;
-	max-width: 25em;
-}
-.d3-tip:after {
-	display: block;
-	content: " ";
-	position: absolute;
-	top: 100%;
-	left: 50%;
-	margin-left: -5px;
-	border: 5px solid transparent;
-	border-width: 10px 5px 0 5px;
-	border-top-color: #000;
-}
-table { border-collapse: collapse; width: 100% }
-td, th { border: 1px solid #aaa }
-th { background-color: #ddd }
-</style>
+<link rel="stylesheet" href="./exif-graphr.css" />
 </head>
 <body>
 <h1>Exif Graphr</h1>
@@ -57,7 +21,7 @@
 <li>Colour saturation is based on ISO (higher ISO is more sensitive, so the colour is brighter)</li>
 </ul>
 <form action="">
-<input type="text" id="username" value="ibboard" onkeypress="if (event.keyCode==13) { visualise(); return false; }" /> <input type="button" value="Visualise" onclick="visualise()" />
+<input type="text" id="username" value="ibboard" /> <input type="button" value="Visualise" id="submit" />
 </form>
 <div id="graph"></div>
 <div id="legend"></div>