From 0e26143bf99a9c7a33aa55ffba7327176c03e74d Mon Sep 17 00:00:00 2001 From: Mhykol Date: Mon, 10 Jun 2024 04:38:00 -0400 Subject: Added loading screen --- assets/js/blog.js | 56 ++++++++++++++++++++++++++++++ assets/js/blogitem.js | 94 ++++++++++++++++++++++++++++++++------------------- assets/js/main.js | 9 ++--- 3 files changed, 121 insertions(+), 38 deletions(-) create mode 100644 assets/js/blog.js diff --git a/assets/js/blog.js b/assets/js/blog.js new file mode 100644 index 0000000..21d9e27 --- /dev/null +++ b/assets/js/blog.js @@ -0,0 +1,56 @@ +class Blog { + constructor() { + this.object = { + body: document.getElementsByTagName('body')[0], + section: document.getElementById('main'), + blogButtonList: document.getElementsByClassName('bloglistbutton') + } + } + + Init() {this.#EventListener()} + #EventListener() { + for (let i = 0; i < this.object.blogButtonList.length; i++) { + this.object.blogButtonList[i].addEventListener('click', () => { + new Loading().Start() + new Menu().HideIcon() + this.#GetBlog(this.object.blogButtonList[i].value) + }) + } + } + #GetUrl() { + if (window.location.href.endsWith('/')) { + return `${window.location.href}item` + } else { + return `${window.location.href}/item` + } + } + async #GetBlog(x) { + const object = { + url: this.#GetUrl(), + value: x + } + + await fetch(this.fetch, { + method: 'post', + body: JSON.stringify(object), + headers: new Headers({ + 'Content-Type': 'application/json' + }) + }) + .then(res => res.json()) + .then(output => { + const object = output.html + new Promise(res => { + const script = document.createElement('script') + script.src = `${window.location.origin}/js/blogitem.js` + this.object.body.appendChild(script) + script.onload = res + }).then(output => { + new BlogItem().Init(object) + }) + }) + } +} + +new Blog().Init() + 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: `
✕
«
»
` } } - 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}` + this.object.content.innerHTML = `${this.object.buttons}` } 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'] = ` +
✕
+
«
+
»
+ ` + + this.object.content.style.opacity = 0 + this.object.images.forEach((img, index) => { img.addEventListener('click', () => { - this.body.content.innerHTML = `${this.body.buttons}` - this.body.content.style.opacity = 1 + this.object.content.innerHTML = `${this.object.buttons}` + 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() - diff --git a/assets/js/main.js b/assets/js/main.js index 5da93ed..936bf37 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -10,7 +10,9 @@ class Main { await this.Get() } - #Loading() {} + #Loading() { + new Loading().Stop() + } async Get(x) { const object = { session: document.cookie, @@ -32,6 +34,7 @@ class Main { const section = document.getElementById('main') this.#LoadCSS(output.css).then(output => { + this.#Loading() section.innerHTML = DOMPurify.sanitize(this.output.html) this.output.js.map(file => { const script = document.createElement('script') @@ -39,11 +42,9 @@ class Main { this.object.body.appendChild(script) }) }) - - //section.innerHTML = DOMPurify.sanitize(output.html) }) } - async #LoadCSS (files) { + async #LoadCSS(files) { const promises = files.map(file => { return new Promise(res => { const link = document.createElement('link') -- cgit v1.2.3-70-g09d2