Modified for user generated scripts and css

2 files changed, 116 insertions, 186 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()
+
diff --git a/assets/js/main.js b/assets/js/main.js
index f0910eb..bcd6af6 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -1,145 +1,49 @@
-const main = {
-    body: document.getElementById('main'),
-    url: window.location.href
-}
-const test = () => {
-    const links = document.getElementsByClassName('footer-links')
-
-    for (let i = 0; i < links.length; i++) {
-        links[i].addEventListener('click', () => {
-            copy(links[i].textContent)
-        })
-    }
-}
-const copy = (x) => {
-    navigator.clipboard.writeText(x).then(() => {
-        console.log('copied')
-    }).catch((err) => {
-        console.error(err)
-    })
-}
+class Main {
+    constructor() {}
 
-const getPage = async () => {
-    const object = {
-        session: document.cookie,
-        url: window.location.href
+    async Init() {
+        await this.Get()
     }
-    await fetch('/', {
-        method: 'post',
-        body: JSON.stringify(object),
-        headers: new Headers({
-            'Content-Type': 'application/json'
-        })
-    })
-    .then(response => response.text())
-    .then(text => {
-        main.body.innerHTML = DOMPurify.sanitize(text)
-        test()
-    })
-}
-
-// ! Loading screen
-const loading = () => {}
 
-// ! Add event listener and loading screen
-const init = () => {
-    loading()
-    getPage().then(output => {
-        eventListener()
-    })
-}
-init()
+    #Loading() {}
+    async Get(x) {
+        this.object = {
+            session: document.cookie,
+            url: window.location.href
+        }
+        this.fetch = '/'
+        if (x) this.fetch = x
 
-// ! Menu
-const openMenu = (menuList, menuIcon, closeButton, list) => {
-    menuIcon.style.opacity = 0
-    setTimeout(() => {
-        menuList.style.display = 'flex'
-        menuList.style.zindex = 999
-        setTimeout(() => {
-            menuList.style.opacity = 0.9
-        }, '250')
-    }, '250')
-}
-const closeMenu = (menuList, menuIcon, closeButton, list) => {
-    //closeButton.style.fontSize = '15rem'
-    menuList.style.opacity = 0
-    setTimeout(() => {
-        menuList.style.display = 'none'
-        menuList.style.zIndex = -9999
-        setTimeout(() => {
-            menuIcon.style.opacity = 1
-        }, '250')
-    }, '500')
-}
+        await fetch(this.fetch, {
+            method: 'post',
+            body: JSON.stringify(this.object),
+            headers: new Headers({
+                'Content-Type': 'application/json'
+            })
+        })
+            .then(res => res.json())
+            .then(output => {
+                const head = document.getElementsByTagName('head')[0]
+                const body = document.getElementsByTagName('body')[0]
+                const section = document.getElementById('main')
 
-// Blog
-const blogButtonList = document.getElementsByClassName('bloglistbutton')
+                for (let i = 0; i < output.css.length; i++) {
+                    const link = document.createElement('link')
+                    link.rel = 'stylesheet'
+                    link.type = 'text/css'
+                    link.href = `${window.location.origin}/css/${output.css[i]}`
+                    head.appendChild(link)
+                }
+                for (let i = 0; i < output.js.length; i++) {
+                    const script = document.createElement('script')
+                    script.src = `${window.location.origin}/js/${output.js[i]}`
+                    body.appendChild(script)
+                }
 
-const getUrl = () => {
-    if (window.location.href.endsWith('/')) {
-        return `${window.location.href}item`
-    } else {
-        return `${window.location.href}/item`
+                section.innerHTML = DOMPurify.sanitize(output.html)
+            })
     }
 }
 
-const getBlog = async (x) => {
-    const object = {
-        session: document.cookie,
-        url: getUrl(),
-        value: x
-    }
-    await fetch('/blog/item', {
-        method: 'post',
-        body: JSON.stringify(object),
-        headers: new Headers({
-            'Content-Type': 'application/json'
-        })
-    })
-    .then(response => response.text())
-    .then(text => {
-        const prism = new Promise((res, rej) => {
-            const script = document.createElement('script')
-            script.src = `${window.location.origin}/js/prism.js`
-            document.head.appendChild(script)
-            res('success')
-        })
-        prism.then(output => {
-            const script = document.createElement('script')
-            main.body.innerHTML = DOMPurify.sanitize(text, { ADD_TAGS: ["iframe"], ADD_ATTR: ['allow', 'allowfullscreen', 'frameborder', 'scrolling'] })
-            script.src = `${window.location.origin}/js/blogitem.js`
-            document.head.appendChild(script)
-            eventListener()
-            window.scrollTo(0, 0)
-        })
-    })
-}
-
-// Event listeners
-const eventListener = () => {
-    const menuList = document.getElementById('menu-list')
-    const menuIcon = document.getElementById('menu-icon')
-    const closeButton = document.getElementsByClassName('close')
-    const list = document.getElementsByClassName('list')
-    const readblogs = document.getElementsByClassName('index-readblogs')
-    const about = document.getElementById('index-about')
-    const websites = {
-        helpinghands: document.getElementById('helpinghands'),
-        goodhandhauling: document.getElementById('goodhandhauling')
-    }
-    console.log(readblogs)
-
-    menuIcon.addEventListener('click', () => openMenu(menuList, menuIcon, closeButton, list))
-    closeButton[0].addEventListener('click', () => closeMenu(menuList, menuIcon, closeButton, list))
-    try{
-        for (let i = 0; i < readblogs.length; i++) readblogs[i].addEventListener('click', () => window.location.href = '/blog')
-        about.addEventListener('click', () => window.location.href = '/about')
-        websites.helpinghands.addEventListener('click', () => window.location.href = 'https://helpinghandsadultcare.org/')
-        websites.goodhandhauling.addEventListener('click', () => window.location.href = 'https://goodhandhauling.com/')
-
-    } catch (err) {}
-    for (let i = 0; i < list.length; i++) list[i].addEventListener('click', () => closeMenu(menuList, menuIcon, closeButton, list))
-    for (let i = 0; i < blogButtonList.length; i++) blogButtonList[i].addEventListener('click', () => getBlog(blogButtonList[i].value))
-}
+new Main().Init()