LUT-25131 : Modernize the markup language used

Author: eriatataserp00

webapp/js/plugins/wiki/wiki_pages/view_page.js

@@ -28,6 +28,19 @@ window.addEventListener("load", (event) => {
             document.body.classList.remove('darkmode');
         }
 });
+window.addEventListener("load", (event) => {
+  // if there is a wiki-nav then we need to remove the class assigned by default to let more space for the content
+    let wikiNavContentWrapper = document.getElementsByClassName('wiki-nav-content-wrapper').length;
+    if(wikiNavContentWrapper > 0){
+        console.log('wiki-nav-content-wrapper found');
+        document.getElementsByClassName('container mt-5 p-5')[0].classList.remove('container');
+        document.getElementsByClassName('container mt-5 p-5')[0].classList.remove('p-5');
+        document.getElementsByClassName('container mt-5 p-5')[0].classList.remove('mt-5');
+        document.getElementsByClassName('text-right')[0].parentElement.classList.add('container');
+        document.getElementsByClassName('text-right')[0].parentElement.classList.add('mt-5');
+        document.getElementsByClassName('text-right')[0].parentElement.classList.add('p-5');
+    }
+});
 function toggleDarkMode() {
     let darkMode = localStorage.getItem('darkMode');
     let darkModeId = document.getElementById('darkModeId');
@@ -50,15 +63,29 @@ window.addEventListener("load", (event) => {
         for (let i = 0; i < pre.length; i++) {
                 let button = document.createElement('button');
                 button.className = 'btn btn-primary btn-xs';
-                button.style.float = 'right';
-                button.style.marginTop = '10px';
-                button.style.marginLeft = '-150px';
+                button.style.cssFloat = 'right';
                 button.textContent = 'Copy';
-                button.onclick = function () {
-                    copyToClipboard(this.nextElementSibling.textContent);
-                };
-                pre[i].insertAdjacentElement('beforebegin', button)
+            button.onclick = function () {
+                copyToClipboard(this.nextSibling.textContent);
+                this.textContent = 'Copied';
+                this.className = 'btn btn-success btn-xs';
+                setTimeout(() => {
+                    this.textContent = 'Copy';
+                    this.className = 'btn btn-primary btn-xs';
+                }, 2000);
+            };
+            // this condition is for code blocks that have not been published since upgrade to v3.0.2
+            if(pre[i].firstChild.tagName === 'SPAN'){
+                // we put all the span elements in a code element so it can be copied
+                let code = document.createElement('code');
+                while (pre[i].firstChild) {
+                    code.appendChild(pre[i].firstChild);
+                    pre[i].removeChild(pre[i].firstChild);
+                }
+                pre[i].appendChild(code);
             }
+                pre[i].firstChild.before(button);
+        }
 });
 
 function copyToClipboard(text) {
@@ -68,4 +95,4 @@ function copyToClipboard(text) {
     dummy.select();
     document.execCommand('copy');
     document.body.removeChild(dummy);
-}
+}