From 878af3c07620c9b86c246ae15cd3116dcfb48112 Mon Sep 17 00:00:00 2001
From: Vladyslav Tymofeiev <“vladyslavty@softwareplanetgroup.com”>
Date: Tue, 13 Aug 2024 18:43:05 +0300
Subject: [PATCH] Add handler of iframe rendering

---
 common/static/js/src/iframe-render.js | 13 +++++++++++++
 lms/static/sass/shared-v2/_base.scss  |  5 +++++
 lms/templates/main.html               |  1 +
 3 files changed, 19 insertions(+)
 create mode 100644 common/static/js/src/iframe-render.js

diff --git a/common/static/js/src/iframe-render.js b/common/static/js/src/iframe-render.js
new file mode 100644
index 00000000000..a66debfe8b9
--- /dev/null
+++ b/common/static/js/src/iframe-render.js
@@ -0,0 +1,13 @@
+// List of the classes to hide while rendered in an iframe
+const classesToHide = ['.global-header', '.wrapper-course-material', 'a--footer'];
+
+document.addEventListener('DOMContentLoaded', function () {
+  // Check if rendered in iframe
+  if (window.self !== window.top) {
+    classesToHide.forEach(function (className) {
+      document.querySelectorAll(className).forEach(function (element) {
+        element.classList.add('hidden-in-iframe');
+      });
+    });
+  }
+});
diff --git a/lms/static/sass/shared-v2/_base.scss b/lms/static/sass/shared-v2/_base.scss
index 584cf5799fa..a90a065b38d 100644
--- a/lms/static/sass/shared-v2/_base.scss
+++ b/lms/static/sass/shared-v2/_base.scss
@@ -24,3 +24,8 @@
   @extend .sr-only;
 }
 
+// Hide element when rendered in iFrame
+.hidden-in-iframe {
+    display: none !important;
+}
+
diff --git a/lms/templates/main.html b/lms/templates/main.html
index 48edc767a13..fd826785eef 100644
--- a/lms/templates/main.html
+++ b/lms/templates/main.html
@@ -211,6 +211,7 @@
   <script type="text/javascript" src="${static.url('js/header/header.js')}"></script>
   <%static:optional_include_mako file="body-extra.html" is_theming_enabled="True" />
   <script type="text/javascript" src="${static.url('js/src/jquery_extend_patch.js')}"></script>
+  <script type="text/javascript" src="${static.url('js/src/iframe-render.js')}"></script>
 </body>
 </html>