From d9cc3d598681f4a57de80a6cc25d6892904f62c3 Mon Sep 17 00:00:00 2001
From: Vedrana <vand@dtu.dk>
Date: Mon, 21 Sep 2020 20:55:12 +0200
Subject: [PATCH] changed js includes to html includes
---
about.html | 19 ++++++-------
example1.html | 11 +++++--
example2.html | 19 +++++++------
example3.html | 11 +++++--
footer.html | 34 ++++++++++++++++++++++
footer.js | 35 -----------------------
header.html | 8 ++++++
header.js | 9 ------
includeHTML.js | 27 ++++++++++++++++++
index.html | 11 +++++--
qim_repository_template.html | 12 +++++---
qim_repository_template_all.html | 10 +++----
sidebar.js => sidebar.html | 49 +++++++++++++++++---------------
13 files changed, 151 insertions(+), 104 deletions(-)
create mode 100644 footer.html
delete mode 100644 footer.js
create mode 100644 header.html
delete mode 100644 header.js
create mode 100644 includeHTML.js
rename sidebar.js => sidebar.html (58%)
diff --git a/about.html b/about.html
index a2e187e..b74da56 100644
--- a/about.html
+++ b/about.html
@@ -10,25 +10,22 @@
body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
</style>
<link rel="shortcut icon" href="favicon.ico">
+<script src="includeHTML.js"></script>
<body class="w3-light-grey w3-content" style="max-width:1600px">
<!-- Sidebar/menu and -->
<!-- Overlay effect when opening sidebar on small screens -->
-<script src='sidebar.js'></script>
+<div w3-include-html="sidebar.html"></div>
<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:300px">
<!-- Header -->
- <script src='header.js'></script>
+ <div w3-include-html="header.html"></div>
<!-- START OF INDIVIDUAL PAGE CONTENT -->
-
- <!-- Images -->
- <div class="w3-row-padding w3-padding-16">
-
<div class="w3-container w3-padding-large" style="margin-bottom:32px">
<h4><b>About</b></h4>
<p>The 3D Data repository contains...</p>
@@ -89,17 +86,17 @@ body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
</div>
</div>
</div>
-
</div>
-
-
<!-- Footer -->
- <script src='footer.js'></script>
-
+ <div w3-include-html="footer.html"></div>
<!-- End page content -->
</div>
+<script>
+ includeHTML();
+</script>
+
</body>
</html>
diff --git a/example1.html b/example1.html
index d1e0b9e..442e07f 100644
--- a/example1.html
+++ b/example1.html
@@ -10,18 +10,19 @@
body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
</style>
<link rel="shortcut icon" href="favicon.ico">
+<script src="includeHTML.js"></script>
<body class="w3-light-grey w3-content" style="max-width:1600px">
<!-- Sidebar/menu and -->
<!-- Overlay effect when opening sidebar on small screens -->
-<script src='sidebar.js'></script>
+<div w3-include-html="sidebar.html"></div>
<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:300px">
<!-- Header -->
- <script src='header.js'></script>
+ <div w3-include-html="header.html"></div>
<!-- START OF INDIVIDUAL PAGE CONTENT -->
@@ -89,10 +90,14 @@ body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
</div>
<!-- Footer -->
- <script src='footer.js'></script>
+ <div w3-include-html="footer.html"></div>
<!-- End page content -->
</div>
+<script>
+ includeHTML();
+</script>
+
</body>
</html>
diff --git a/example2.html b/example2.html
index b22ffc4..c72e1da 100644
--- a/example2.html
+++ b/example2.html
@@ -10,18 +10,19 @@
body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
</style>
<link rel="shortcut icon" href="favicon.ico">
+<script src="includeHTML.js"></script>
<body class="w3-light-grey w3-content" style="max-width:1600px">
<!-- Sidebar/menu and -->
<!-- Overlay effect when opening sidebar on small screens -->
-<script src='sidebar.js'></script>
+<div w3-include-html="sidebar.html"></div>
<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:300px">
<!-- Header -->
- <script src='header.js'></script>
+ <div w3-include-html="header.html"></div>
<!-- START OF INDIVIDUAL PAGE CONTENT -->
@@ -60,21 +61,23 @@ body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
<h4><b>Versions</b></h4>
<ul class="w3-ul w3-border">
- <li><b>Full.</b> Just as we got it from the scanner.</li>
- <li><b>Smaller.</b> Processing (from full): bit depth from 16 to 8-bit, cropping to keep only region of interest.</li>
- <li><b>Tiny.</b> Smaller, but downscaled 4 times.</li>
+ <li><span class="w3-large">Full</span><br> Just as we got it from the scanner.</li>
+ <li><span class="w3-large">Small</span><br> Processing (from full): bit depth from 16 to 8-bit, cropping to keep only region of interest.</li>
+ <li><span class="w3-large">Tiny</span><br> Processed as for smaller, and then downscaled with a factor of 4.</li>
</ul>
-
- <p> </p>
<hr>
</div>
<!-- Footer -->
- <script src='footer.js'></script>
+ <div w3-include-html="footer.html"></div>
<!-- End page content -->
</div>
+<script>
+ includeHTML();
+</script>
+
</body>
</html>
diff --git a/example3.html b/example3.html
index f588182..b9beeb0 100644
--- a/example3.html
+++ b/example3.html
@@ -10,18 +10,19 @@
body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
</style>
<link rel="shortcut icon" href="favicon.ico">
+<script src="includeHTML.js"></script>
<body class="w3-light-grey w3-content" style="max-width:1600px">
<!-- Sidebar/menu and -->
<!-- Overlay effect when opening sidebar on small screens -->
-<script src='sidebar.js'></script>
+<div w3-include-html="sidebar.html"></div>
<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:300px">
<!-- Header -->
- <script src='header.js'></script>
+ <div w3-include-html="header.html"></div>
<!-- START OF INDIVIDUAL PAGE CONTENT -->
@@ -74,10 +75,14 @@ body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
</div>
<!-- Footer -->
- <script src='footer.js'></script>
+ <div w3-include-html="footer.html"></div>
<!-- End page content -->
</div>
+<script>
+ includeHTML();
+</script>
+
</body>
</html>
diff --git a/footer.html b/footer.html
new file mode 100644
index 0000000..9d5bd33
--- /dev/null
+++ b/footer.html
@@ -0,0 +1,34 @@
+
+<!-- Footer -->
+<footer class="w3-container w3-padding-32 w3-dark-grey">
+ <div class="w3-row-padding">
+
+ <div class="w3-third">
+ <h3>3D DATA REPOSITORY</h3>
+ <p>QIM, October 2020.<br>
+ Powered by <a href="https://www.w3schools.com/w3css/default.asp">w3.css</a>.</p>
+ </div>
+
+ <div class="w3-third">
+ <h3>GET INVOLVED</h3>
+ <p>Contribute with data, tool or result.\
+ Stay updated.<br>
+ Send us a mail at <a href="mailto:info@qim.dk">info@qim.dk</a>.</p>
+ </div>
+
+ <div class="w3-third">
+ <h3>LINKS</h3>
+ <p>
+ <span class="w3-tag w3-grey w3-small w3-margin-bottom">
+ <a style="text-decoration: none;" href="http://qim.dk/sciencecases/" target="_blank">QIM science</a></span>
+ <span class="w3-tag w3-grey w3-small w3-margin-bottom">
+ <a style="text-decoration: none;" href="http://qim.dk/software-tools/" target="_blank">QIM tools</a></span>
+ <span class="w3-tag w3-grey w3-small w3-margin-bottom">
+ <a style="text-decoration: none;" href="https://imaging.dtu.dk/" target="_blank">3DIM@DTU</a></span>
+ <span class="w3-tag w3-grey w3-small w3-margin-bottom">
+ <a style="text-decoration: none;" href="https://www.maxiv.lu.se/" target="_blank">MAX IV</a></span>
+ </p>
+ </div>
+
+ </div>
+</footer>
diff --git a/footer.js b/footer.js
deleted file mode 100644
index 0977b20..0000000
--- a/footer.js
+++ /dev/null
@@ -1,35 +0,0 @@
-document.write('\
- <footer class="w3-container w3-padding-32 w3-dark-grey">\
- <div class="w3-row-padding">\
- \
- <div class="w3-third">\
- <h3>3D DATA REPOSITORY</h3>\
- <p>QIM, October 2020.<br>\
- Powered by <a href="https://www.w3schools.com/w3css/default.asp">w3.css</a>.</p>\
- </div>\
- \
- <div class="w3-third">\
- <h3>GET INVOLVED</h3>\
- <p>Contribute with data, tool or result.\
- Stay updated.<br>\
- Send us a mail at <a href="mailto:info@qim.dk">info@qim.dk</a>.</p>\
- </div>\
- \
- <div class="w3-third">\
- <h3>LINKS</h3>\
- <p>\
- <span class="w3-tag w3-grey w3-small w3-margin-bottom">\
- <a style="text-decoration: none;" href="http://qim.dk/sciencecases/" target="_blank">QIM science</a></span>\
- <span class="w3-tag w3-grey w3-small w3-margin-bottom">\
- <a style="text-decoration: none;" href="http://qim.dk/software-tools/" target="_blank">QIM tools</a></span>\
- <span class="w3-tag w3-grey w3-small w3-margin-bottom">\
- <a style="text-decoration: none;" href="https://imaging.dtu.dk/" target="_blank">3DIM@DTU</a></span>\
- <span class="w3-tag w3-grey w3-small w3-margin-bottom">\
- <a style="text-decoration: none;" href="https://www.maxiv.lu.se/" target="_blank">MAX IV</a>\
- </span>\
- </p>\
- </div>\
- \
- </div>\
- </footer>\
-');
diff --git a/header.html b/header.html
new file mode 100644
index 0000000..654a2fc
--- /dev/null
+++ b/header.html
@@ -0,0 +1,8 @@
+<!-- Header -->
+<header>
+ <a href="http://qim.dk/"><img src="common/logo_square.png" style="width:65px;" class="w3-circle w3-right w3-margin w3-hide-large w3-hover-opacity"></a>
+ <span class="w3-button w3-hide-large w3-xxlarge w3-hover-text-grey" onclick="w3_open()"><i class="fa fa-bars"></i></span>
+ <div class="w3-container w3-bottombar w3-padding-16">
+ <h1><b>3D DATA REPOSITORY</b></h1>
+ </div>
+</header>
diff --git a/header.js b/header.js
deleted file mode 100644
index 1bdd2a3..0000000
--- a/header.js
+++ /dev/null
@@ -1,9 +0,0 @@
-document.write('\
-<header>\
- <a href="http://qim.dk/"><img src="common/logo_square.png" style="width:65px;" class="w3-circle w3-right w3-margin w3-hide-large w3-hover-opacity"></a>\
- <span class="w3-button w3-hide-large w3-xxlarge w3-hover-text-grey" onclick="w3_open()"><i class="fa fa-bars"></i></span>\
- <div class="w3-container w3-bottombar w3-padding-16">\
- <h1><b>3D DATA REPOSITORY</b></h1>\
- </div>\
-</header>\
-');
diff --git a/includeHTML.js b/includeHTML.js
new file mode 100644
index 0000000..822855c
--- /dev/null
+++ b/includeHTML.js
@@ -0,0 +1,27 @@
+function includeHTML() {
+ var z, i, elmnt, file, xhttp;
+ /*loop through a collection of all HTML elements:*/
+ z = document.getElementsByTagName("*");
+ for (i = 0; i < z.length; i++) {
+ elmnt = z[i];
+ /*search for elements with a certain atrribute:*/
+ file = elmnt.getAttribute("w3-include-html");
+ if (file) {
+ /*make an HTTP request using the attribute value as the file name:*/
+ xhttp = new XMLHttpRequest();
+ xhttp.onreadystatechange = function() {
+ if (this.readyState == 4) {
+ if (this.status == 200) {elmnt.innerHTML = this.responseText;}
+ if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
+ /*remove the attribute, and call this function once more:*/
+ elmnt.removeAttribute("w3-include-html");
+ includeHTML();
+ }
+ }
+ xhttp.open("GET", file, true);
+ xhttp.send();
+ /*exit the function:*/
+ return;
+ }
+ }
+};
diff --git a/index.html b/index.html
index 3843796..f8c434b 100644
--- a/index.html
+++ b/index.html
@@ -10,18 +10,19 @@
body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
</style>
<link rel="shortcut icon" href="favicon.ico">
+<script src="includeHTML.js"></script>
<body class="w3-light-grey w3-content" style="max-width:1600px">
<!-- Sidebar/menu and -->
<!-- Overlay effect when opening sidebar on small screens -->
-<script src='sidebar.js'></script>
+<div w3-include-html="sidebar.html"></div>
<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:300px">
<!-- Header -->
- <script src='header.js'></script>
+ <div w3-include-html="header.html"></div>
<!-- START OF INDIVIDUAL PAGE CONTENT -->
@@ -82,10 +83,14 @@ body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
</div>
<!-- Footer -->
- <script src='footer.js'></script>
+ <div w3-include-html="footer.html"></div>
<!-- End page content -->
</div>
+<script>
+ includeHTML();
+</script>
+
</body>
</html>
diff --git a/qim_repository_template.html b/qim_repository_template.html
index 0a2425d..c5ef289 100644
--- a/qim_repository_template.html
+++ b/qim_repository_template.html
@@ -10,18 +10,19 @@
body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
</style>
<link rel="shortcut icon" href="favicon.ico">
+<script src="includeHTML.js"></script>
<body class="w3-light-grey w3-content" style="max-width:1600px">
<!-- Sidebar/menu and -->
<!-- Overlay effect when opening sidebar on small screens -->
-<script src='sidebar.js'></script>
+<div w3-include-html="sidebar.html"></div>
<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:300px">
<!-- Header -->
- <script src='header.js'></script>
+ <div w3-include-html="header.html"></div>
<!-- START OF INDIVIDUAL PAGE CONTENT -->
@@ -201,11 +202,14 @@ body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
</div>
<!-- Footer -->
- <script src='footer.js'></script>
-
+ <div w3-include-html="footer.html"></div>
<!-- End page content -->
</div>
+<script>
+ includeHTML();
+</script>
+
</body>
</html>
diff --git a/qim_repository_template_all.html b/qim_repository_template_all.html
index 6c897e1..9112a87 100644
--- a/qim_repository_template_all.html
+++ b/qim_repository_template_all.html
@@ -158,19 +158,19 @@ footer a {
<li class="w3-padding-16">Size</li>
<li class="w3-padding-16">1GB Storage</li>
<li class="w3-light-grey w3-padding-24">
- <button class="w3-button w3-teal w3-padding-large w3-hover-black">Download
+ <button class="w3-button w3-orange w3-padding-large w3-hover-black">Download
</li>
</ul>
</div>
<div class="w3-third w3-margin-bottom">
<ul class="w3-ul w3-border w3-white w3-center w3-opacity w3-hover-opacity-off">
- <li class="w3-teal w3-xlarge w3-padding-32">Medium</li>
+ <li class="w3-orange w3-xlarge w3-padding-32">Medium</li>
<li class="w3-padding-16">Type</li>
<li class="w3-padding-16">Size</li>
<li class="w3-padding-16">50GB Storage</li>
<li class="w3-light-grey w3-padding-24">
- <button class="w3-button w3-teal w3-padding-large w3-hover-black">Download
+ <button class="w3-button w3-orange w3-padding-large w3-hover-black">Download
</li>
</ul>
</div>
@@ -182,7 +182,7 @@ footer a {
<li class="w3-padding-16">Size</li>
<li class="w3-padding-16">Unlimited Storage</li>
<li class="w3-light-grey w3-padding-24">
- <button class="w3-button w3-teal w3-padding-large w3-hover-black">Download
+ <button class="w3-button w3-orange w3-padding-large w3-hover-black">Download
</li>
</ul>
</div>
@@ -198,7 +198,7 @@ footer a {
<p><i class="fa fa-envelope w3-xxlarge w3-text-light-grey"></i></p>
<p>qim_center@dtu.dk</p>
</div>
- <div class="w3-third w3-teal">
+ <div class="w3-third w3-orange">
<p><i class="fa fa-map-marker w3-xxlarge w3-text-light-grey"></i></p>
<p>Lyngby, DK</p>
</div>
diff --git a/sidebar.js b/sidebar.html
similarity index 58%
rename from sidebar.js
rename to sidebar.html
index 5c7a047..e84d7df 100644
--- a/sidebar.js
+++ b/sidebar.html
@@ -1,27 +1,29 @@
-document.write('\
-<nav class="w3-sidebar w3-collapse w3-white w3-animate-left" style="z-index:3;width:300px;" id="mySidebar"><br>\
- <div class="w3-container">\
- <a href="#" onclick="w3_close()" class="w3-hide-large w3-right w3-jumbo w3-padding w3-hover-grey" title="close menu">\
- <i class="fa fa-remove"></i>\
- </a>\
- <a href="http://qim.dk/">\
- <img src="common/logo_name.png" style="width:90%;" class="w3-round"></a>\
- <br><br>\
- </div>\
- \
- <div class="w3-bar-block w3-text-grey">\
- <a href="index.html" onclick="w3_close()" class="w3-bar-item w3-button w3-padding" class="w3-text-grey"><i class="fa fa-home fa-fw w3-margin-right"></i>HOME</a>\
- </div>\
- <div class="w3-bar-block w3-text-grey">\
- <a href="about.html" onclick="w3_close()" class="w3-bar-item w3-button w3-padding" class="w3-text-grey"><i class="fa fa-info fa-fw w3-margin-right"></i>ABOUT</a>\
- </div>\
- <!--div class="w3-bar-block w3-text-grey">\
- <a href="about.html" onclick="w3_close()" class="w3-bar-item w3-button w3-padding" class="w3-text-grey"><i class="fa fa-exclamation fa-fw w3-margin-right"></i>USE</a>\
- </div-->\
-</nav>\
-<div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>\
-');
+<!-- Sidebar/menu -->
+<nav class="w3-sidebar w3-collapse w3-white w3-animate-left" style="z-index:3;width:300px;" id="mySidebar"><br>
+ <div class="w3-container">
+ <a href="#" onclick="w3_close()" class="w3-hide-large w3-right w3-jumbo w3-padding w3-hover-grey" title="close menu">
+ <i class="fa fa-remove"></i></a>
+ <a href="http://qim.dk/">
+ <img src="common/logo_name.png" style="width:90%;" class="w3-round"></a>
+ <br><br>
+ </div>
+ <div class="w3-bar-block w3-text-grey">
+ <a href="index.html" onclick="w3_close()" class="w3-bar-item w3-button w3-padding" class="w3-text-grey"><i class="fa fa-home fa-fw w3-margin-right"></i>HOME</a>
+ </div>
+ <div class="w3-bar-block w3-text-grey">
+ <a href="about.html" onclick="w3_close()" class="w3-bar-item w3-button w3-padding" class="w3-text-grey"><i class="fa fa-info fa-fw w3-margin-right"></i>ABOUT</a>
+ </div>
+ <!--div class="w3-bar-block w3-text-grey">
+ <a href="about.html" onclick="w3_close()" class="w3-bar-item w3-button w3-padding" class="w3-text-grey"><i class="fa fa-exclamation fa-fw w3-margin-right"></i>USE</a>
+ </div-->
+</nav>
+
+<!-- Overlay effect when opening sidebar on small screens -->
+<div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
+
+
+<script>
// Script to open and close sidebar
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
@@ -32,3 +34,4 @@ function w3_close() {
document.getElementById("mySidebar").style.display = "none";
document.getElementById("myOverlay").style.display = "none";
}
+</script>
--
GitLab