Modified for user generated scripts and css

1 files changed, 77 insertions, 51 deletions

diff --git a/assets/js/blogitem.js b/assets/js/blogitem.js
index a827970..b79b9e5 100644
--- a/assets/js/blogitem.js
+++ b/assets/js/blogitem.js
@@ -1,58 +1,84 @@
-const body = {
-    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>`
-}
+// ! I am struggling to get this to run properly
 
-const blogImage = () => {
-    body.content.style.opacity = 0
-    body.images.forEach((img, index) => {
-        img.addEventListener('click', () => {
-            body.content.innerHTML = `${body.buttons}<img src='${img.src}'/>`
-            body.content.style.opacity = 1
-            listener(index)
-        })
-    })
-}
-
-const drawImage = (src) => {
-    try {
-        body.content.innerHTML = `${body.buttons}<img src='${src}'>`
-    } catch (err) {
-        //console.log(src)
+class BlogItem {
+    constructor() {
+        this.body = {
+            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>`
+        }
     }
-}
 
-const listener = (index) => {
-    const buttons = {
-        close: document.getElementsByClassName('closeFullscreenImage')[0],
-        left: document.getElementsByClassName('navleft')[0],
-        right: document.getElementsByClassName('navright')[0]
+    Init() {
+        this.#BlogItem()
+        this.#Prism()
+        new Menu().Init()
     }
-    buttons.close.addEventListener('click', () => {
-        body.content.style.opacity = 0
-        setTimeout(() => {
-            body.content.innerHTML = ''
-        }, '1000')
-    })
-    buttons.left.addEventListener('click', () => {
-        if (index > 0) {
-            console.log(index)
-            drawImage(body.images[index - 1].src)
-            listener(index - 1)
-        } else {
-            drawImage(body.images[body.images.length - 1].src)
-            listener(body.images.length)
+
+    #EventListener(index) {
+        const buttons = {
+            close: document.getElementsByClassName('closeFullscreenImage')[0],
+            left: document.getElementsByClassName('navleft')[0],
+            right: document.getElementsByClassName('navright')[0]
         }
-    })
-    buttons.right.addEventListener('click', () => {
-        if (index < body.images.length - 1) {
-            drawImage(body.images[index + 1].src)
-            listener(index + 1)
-        } else {
-            drawImage(body.images[0].src)
-            listener(0)
+
+        buttons.close.addEventListener('click', () => {
+            this.body.content.style.opacity = 0
+            setTimeout(() => {
+                this.body.content.innerHTML = ''
+            }, '1000')
+        })
+        buttons.left.addEventListener('click', () => {
+            if (index > 0) {
+                this.#DrawImage(this.body.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)
+            }
+        })
+        buttons.right.addEventListener('click', () => {
+            if (index < this.body.images.length - 1) {
+                this.#DrawImage(this.body.images[index + 1].src)
+                this.#EventListener(index + 1)
+            } else {
+                this.#DrawImage(this.body.images[0].src)
+                this.#EventListener(0)
+            }
+        })
+    }
+    #DrawImage(src) {
+        try {
+            this.body.content.innerHTML = `${this.body.buttons}<img src='${src}'/>`
+        } catch (err) {
+            console.error(err)
         }
-    })
+    }
+    #BlogItem() {
+        this.body.content.style.opacity = 0
+        this.body.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.#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)
+    }
 }
-blogImage()
+
+new BlogItem().Init()
+