Merge pull request #1411 from appsembler/vladyslav/hide-html-elements…

…-in-iframe Hide html elements if the parameter is set
appsembler · Aug 19, 2024 · 3914714 · 3914714
2 parents 6290527 + 71f0978
commit 3914714
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 16 deletions.
diff --git a/common/static/js/src/iframe-render.js b/common/static/js/src/iframe-render.js
diff --git a/lms/static/js/student_account/views/FinishAuthView.js b/lms/static/js/student_account/views/FinishAuthView.js
@@ -51,7 +51,8 @@
                     courseId: $.url('?course_id'),
                     courseMode: $.url('?course_mode'),
                     emailOptIn: $.url('?email_opt_in'),
-                    purchaseWorkflow: $.url('?purchase_workflow')
+                    purchaseWorkflow: $.url('?purchase_workflow'),
+                    hideElements: $.url('?hide_elements')
                 };
                 for (var key in queryParams) {
                     if (queryParams[key]) {
@@ -64,6 +65,7 @@
                 this.emailOptIn = queryParams.emailOptIn;
                 this.nextUrl = this.urls.defaultNextUrl;
                 this.purchaseWorkflow = queryParams.purchaseWorkflow;
+                this.hideElements = queryParams.hideElements;
                 if (queryParams.next) {
                     // Ensure that the next URL is internal for security reasons
                     if (! window.isExternal(queryParams.next)) {
@@ -76,6 +78,9 @@
                 try {
                     var next = _.bind(this.enrollment, this);
                     this.checkEmailOptIn(next);
+                    if (this.hideElements) {
+                        document.cookie = 'hideElements=' + this.hideElements + '; path=/';
+                    }
                 } catch (err) {
                     this.updateTaskDescription(gettext('Error') + ': ' + err.message);
                     this.redirect(this.nextUrl);

diff --git a/lms/static/lms/js/iframe-render.js b/lms/static/lms/js/iframe-render.js
@@ -0,0 +1,31 @@
+// List of the classes to hide while rendered in an iframe
+const classesToHide = ['.global-header', '.wrapper-course-material', '.a--footer'];
+
+// Function to get a cookie by name
+function getCookieByName(name) {
+  let cname = name + "=";
+  let decodedCookie = decodeURIComponent(document.cookie);
+  let cookies = decodedCookie.split(';');
+  for (let i = 0; i < cookies.length; i++) {
+    let c = cookies[i];
+    while (c.charAt(0) == ' ') {
+      c = c.substring(1);
+    }
+    if (c.indexOf(name) == 0) {
+      return c.substring(name.length, c.length);
+    }
+  }
+  return "";
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+  const hideElements = getCookieByName('hideElements');
+
+  if (hideElements) {
+    classesToHide.forEach(function (className) {
+      document.querySelectorAll(className).forEach(function (element) {
+        element.classList.add('hidden-element');
+      });
+    });
+  }
+});
diff --git a/lms/static/sass/shared-v2/_base.scss b/lms/static/sass/shared-v2/_base.scss
@@ -25,7 +25,7 @@
 }
 
 // Hide element when rendered in iFrame
-.hidden-in-iframe {
+.hidden-element {
     display: none !important;
 }
 
diff --git a/lms/templates/main.html b/lms/templates/main.html
@@ -123,6 +123,7 @@
     }).call(this, require || RequireJS.require);
   </script>
   <script type="text/javascript" src="${static.url("lms/js/require-config.js")}"></script>
+  <script type="text/javascript" src="${static.url("lms/js/iframe-render.js")}"></script>
   <%block name="js_overrides">
     ${render_require_js_path_overrides(settings.REQUIRE_JS_PATH_OVERRIDES) | n, decode.utf8}
   </%block>
@@ -211,7 +212,6 @@
   <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>