Add CSS class "removeIfDocumentRenderedInFrame" for <header> and <footer>

All DOM nodes of the CSS class "removeIfDocumentRenderedInFrame" are
removed from the DOM tree on DOMContentLoaded using JS.

We use this to hide/remove the <header> and <footer> from HTML pages
if they are rendered within a frame, for example an <iframe>.

Without this, our error pages look ugly and confusing in some
circumstances (for example, if /uv/uv.html is missing for some reason).

Signed-off-by: Pascal Ernster <pascal.ernster@rub.de>

hyrax/app/assets/javascripts/application.js

@@ -9,7 +9,10 @@
 //
 // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
 // about supported directives.
-//
+
+// Implement CSS class "removeIfDocumentRenderedInFrame"
+//= require 'removeIfDocumentRenderedInFrame'
+
 //= require jquery
 //= require jquery_ujs
 //= require dataTables/jquery.dataTables

hyrax/app/assets/javascripts/removeIfDocumentRenderedInFrame.js

+//"use strict";
+// We can't use JS strict mode because other libraries included in application.js are not strict mode compatible.
+document.addEventListener("DOMContentLoaded", (event) => {
+	function documentRenderedInFrame() {
+		try {
+			return window.self !== window.top;
+		} catch (Exception) {
+			console.log("Failed to determine whether page is rendered within a frame or not. Assuming no frame by default.");
+			return false;
+		}
+	}
+	
+	if (documentRenderedInFrame()) {
+		console.log('Frame detected. Removing all DOM nodes of CSS class "removeIfDocumentRenderedInFrame"…');
+		let DOMnodesToBeRemoved = document.getElementsByClassName("removeIfDocumentRenderedInFrame");
+		let currentIndex = DOMnodesToBeRemoved.length - 1;
+		for(currentIndex; currentIndex >= 0; currentIndex--) {
+			DOMnodesToBeRemoved[currentIndex].remove();
+		}
+	}
+});

hyrax/app/views/_masthead.html.erb

-<header>
+<header class="removeIfDocumentRenderedInFrame">
   <nav id="masthead" class="navbar navbar-inverse navbar-static-top" role="navigation">
     <div class="container-fluid">
       <!-- Brand and toggle get grouped for better mobile display -->

hyrax/app/views/shared/_footer.html.erb

-<footer class="site-footer">
+<footer class="site-footer removeIfDocumentRenderedInFrame">
   <div class="row">
     <div class="col-sm-4 text-left">
       <a id="logo" class="navbar-brand" href="<%= hyrax.root_path %>">