[ADD] Iframe for library

kiwix · Sep 20, 2023 · feb0cf8 · feb0cf8
1 parent 53ccd0f
commit feb0cf8
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/www/index.html b/www/index.html
@@ -6,7 +6,8 @@
         <title>Kiwix</title>
         <meta name="description" content="Offline Wikipedia reader">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: https://download.kiwix.org https://master.download.kiwix.org https://browser-extension.kiwix.org https://kiwix.github.io 'unsafe-inline' 'unsafe-eval'; frame-src 'self' moz-extension: chrome-extension:; object-src 'none';">
+        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: https://download.kiwix.org https://master.download.kiwix.org https://browser-extension.kiwix.org https://kiwix.github.io 'unsafe-inline' 'unsafe-eval'; frame-src 'self' moz-extension: chrome-extension: https://library.kiwix.org/; object-src 'none';">
+        <!-- <meta http-equiv="Content-Security-Policy" content="frame-src 'self' moz-extension: chrome-extension: library.kiwix.org;"> -->
         <meta name="referrer" content="none">
         <!--
         Kiwix (offline Wikipedia reader) - HTML5/Javascript version
@@ -441,7 +442,7 @@ <h3 id="other" data-i18n="about-other-platforms">Other platforms/versions</h3>
                     <br/>
                 </div>
                 <div id='library' style="display: none; color: white;">
-                    Hello there for library
+                    <iframe src="https://library.kiwix.org" frameborder="0" width="100%" id="libraryIframe"></iframe>
                 </div>
                 <div id="configuration" style="display: none;">
                     <div class="container">

diff --git a/www/js/app.js b/www/js/app.js
@@ -153,11 +153,25 @@ function resizeIFrame () {
         }, 100);
     }
 }
+
+/**
+ * Resize the IFrame height, so that it fills the whole available height in the window
+ */
+function resizeLibrary () {
+    var headerStyles = getComputedStyle(document.getElementById('top'));
+    var iframe = document.getElementById('libraryIframe');
+
+    iframe.style.height = window.innerHeight + 'px';
+    var headerHeight = parseFloat(headerStyles.height) + parseFloat(headerStyles.marginBottom) + 10;
+    iframe.style.height = window.innerHeight - headerHeight + 'px';
+}
 document.addEventListener('DOMContentLoaded', function () {
     getDefaultLanguageAndTranslateApp();
     resizeIFrame();
+    resizeLibrary();
 });
 window.addEventListener('resize', resizeIFrame);
+window.addEventListener('resize', resizeLibrary);
 
 // Define behavior of HTML elements
 var searchArticlesFocused = false;