From 0e26143bf99a9c7a33aa55ffba7327176c03e74d Mon Sep 17 00:00:00 2001
From: Mhykol <mchaeldonald62@pm.me>
Date: Mon, 10 Jun 2024 04:38:00 -0400
Subject: Added loading screen

---
 assets/js/blogitem.js | 94 ++++++++++++++++++++++++++++++++-------------------
 1 file changed, 60 insertions(+), 34 deletions(-)

(limited to 'assets/js/blogitem.js')

diff --git a/assets/js/blogitem.js b/assets/js/blogitem.js
index b79b9e5..b56f1ac 100644
--- a/assets/js/blogitem.js
+++ b/assets/js/blogitem.js
@@ -1,18 +1,19 @@
-// ! I am struggling to get this to run properly
-
 class BlogItem {
     constructor() {
-        this.body = {
+        this.object = {
+            head: document.getElementsByTagName('head')[0],
+            body: document.getElementsByTagName('body')[0],
+            section: document.getElementById('main'),
             content: document.getElementsByClassName('fullscreenImg')[0],
             images: document.querySelectorAll('img:not([class])'),
             buttons: `<div class='closeFullscreenImage'>&#10005;</div><div class='navleft'>&#171;</div><div class='navright'>&#187;</div>`
         }
     }
 
-    Init() {
-        this.#BlogItem()
-        this.#Prism()
+    Init(x) {
+        this.#Prism(x)
         new Menu().Init()
+        new Footer().Init()
     }
 
     #EventListener(index) {
@@ -23,62 +24,87 @@ class BlogItem {
         }
 
         buttons.close.addEventListener('click', () => {
-            this.body.content.style.opacity = 0
+            this.object.content.style.opacity = 0
             setTimeout(() => {
-                this.body.content.innerHTML = ''
+                this.object.content.innerHTML = ''
             }, '1000')
         })
         buttons.left.addEventListener('click', () => {
             if (index > 0) {
-                this.#DrawImage(this.body.images[index - 1].src)
+                this.#DrawImage(this.object.images[index - 1].src)
                 this.#EventListener(index - 1)
             } else {
-                this.#DrawImage(this.body.images[this.body.images.length - 1].src)
-                this.#EventListener(this.body.images.length - 1)
+                this.#DrawImage(this.object.images[this.object.images.length - 1].src)
+                this.#EventListener(this.object.images.length - 1)
             }
         })
         buttons.right.addEventListener('click', () => {
-            if (index < this.body.images.length - 1) {
-                this.#DrawImage(this.body.images[index + 1].src)
+            if (index < this.object.images.length - 1) {
+                this.#DrawImage(this.object.images[index + 1].src)
                 this.#EventListener(index + 1)
             } else {
-                this.#DrawImage(this.body.images[0].src)
+                this.#DrawImage(this.object.images[0].src)
                 this.#EventListener(0)
             }
         })
     }
     #DrawImage(src) {
         try {
-            this.body.content.innerHTML = `${this.body.buttons}<img src='${src}'/>`
+            this.object.content.innerHTML = `${this.object.buttons}<img src='${src}'/>`
         } catch (err) {
             console.error(err)
         }
     }
     #BlogItem() {
-        this.body.content.style.opacity = 0
-        this.body.images.forEach((img, index) => {
+        this.object['content'] = document.getElementsByClassName('fullscreenImg')[0]
+        this.object['images'] = document.querySelectorAll('img:not([class])')
+        this.object['buttons'] = `
+            <div class='closeFullscreenImage'>&#10005;</div>
+            <div class='navleft'>&#171;</div>
+            <div class='navright'>&#187;</div>
+        `
+
+        this.object.content.style.opacity = 0
+        this.object.images.forEach((img, index) => {
             img.addEventListener('click', () => {
-                this.body.content.innerHTML = `${this.body.buttons}<img src='${img.src}'/>`
-                this.body.content.style.opacity = 1
+                this.object.content.innerHTML = `${this.object.buttons}<img src='${img.src}'/>`
+                this.object.content.style.opacity = 1
                 this.#EventListener(index)
             })
         })
     }
-    #Prism() {
-        const head = document.getElementsByTagName('head')[0]
-        const body = document.getElementsByTagName('body')[0]
-        const link = document.createElement('link')
-        const script = document.createElement('script')
-
-        link.rel = 'stylesheet'
-        link.type = 'text/css'
-        link.href = `${window.location.origin}/css/prism.css`
-        head.appendChild(link)
-
-        script.src = `${window.location.origin}/js/prism.js`
-        body.appendChild(script)
+    #Prism(x) {
+        this.#LoadBlogItem().then(output => {
+            this.object.section.innerHTML = DOMPurify.sanitize(x, {
+                ADD_TAGS: ['iframe'], ADD_ATTR: ['allow', 'allowfullscreen', 'frameborder', 'scrolling']
+            })
+            new Loading().Stop()
+            new Menu().ShowIcon()
+            new Menu().Init()
+            new Footer().Init()
+            this.#BlogItem()
+            window.scrollTo(0, 0)
+        })
+    }
+    async #LoadBlogItem() {
+        const promises = ['prism.css', 'prism.js'].map(file => {
+            return new Promise(res => {
+                if (file.replace('prism.', '') === 'css') {
+                    const link = document.createElement('link')
+                    link.rel = 'stylesheet'
+                    link.type = 'text/css'
+                    link.href = `${window.location.origin}/css/${file}`
+                    this.object.head.appendChild(link)
+                    link.onload = res
+                } else {
+                    const script = document.createElement('script')
+                    script.src = `${window.location.origin}/js/${file}`
+                    this.object.body.appendChild(script)
+                    script.onload = res
+                }
+            })
+        })
+        return Promise.all(promises)
     }
 }
 
-new BlogItem().Init()
-
-- 
cgit v1.2.3-70-g09d2