Initial Commit

1 files changed, 102 insertions, 0 deletions

diff --git a/assets/js/page-init.js b/assets/js/page-init.js
new file mode 100644
index 0000000..207393a
--- /dev/null
+++ b/assets/js/page-init.js
@@ -0,0 +1,102 @@
+class Init {
+    constructor() {
+        this.object = {}
+        this.settings = {
+            scroll: 0
+        }
+        this.html = {}
+    }
+
+    GetSettings() {return this.settings}
+    async Start() {
+        this.fetch = `${window.location.pathname}?page=index`
+
+        await fetch(this.fetch, {
+            method: 'GET',
+            headers: new Headers({
+                'Content-Type': 'application/json'
+            })
+        })
+            .then(res => res.json())
+            .then(output => {
+                this.output = output
+                this.object.head = document.getElementsByTagName('head')[0]
+                this.object.body = document.getElementsByTagName('body')[0]
+                this.object.header = document.getElementsByTagName('header')[0]
+                this.object.main = document.getElementsByTagName('main')[0]
+                this.object.footer = document.getElementsByTagName('footer')[0]
+                
+                this.object.header.innerHTML += output.html.header
+                this.object.main.innerHTML = output.html.main
+                this.object.footer.innerHTML += output.html.footer
+                this.object.nav = document.getElementById('header')
+                this.object.nav.style.opacity = 0
+
+                this.#LoadCSS(output.css).then(() => {
+                    this.output.js.map(file => {
+                        const script = document.createElement('script')
+                        script.src = `${window.location.origin}/js/${file}`
+                        this.object.body.appendChild(script)
+                    })
+                })
+                this.#Scroll()
+            })
+    }
+
+    #LoadElements() {
+        setTimeout(() => {
+            this.object.nav.style.opacity = 1
+        }, 750)
+    }
+
+    async Startup(data) {
+        const promise = new Promise((res, rej) => {
+            const map = new Map()
+
+            try {
+                data.Stop()
+                map.set('status', 'success')
+                map.set('msg', 'success')
+                this.#LoadElements()
+                res(map)
+            } catch (err) {
+                map.set('status', 'error')
+                map.set('msg', err)
+                // ! Dev mode
+                rej(map)
+            }
+        })
+        return await promise
+    }
+
+
+
+    #Scroll() {window.addEventListener('scroll', () => this.settings.scroll = window.scrollY)}
+    async #Error() {
+        this.fetch = `${window.location.pathname}?page=index`;
+        await fetch(this.fetch, {
+            method: 'POST',
+            headers: new Headers({
+                'Content-Type': 'application/json'
+            })
+        })
+            .then(res => console.log(res))
+    }
+    async #LoadCSS(files) {
+        const promises = files.map(file => {
+            return new Promise(res => {
+                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
+            })
+        })
+        return Promise.all(promises)
+    }
+}
+
+const app = new Init()
+app.Start()
+