diff options
| -rw-r--r-- | assets/js/blog.js | 56 | ||||
| -rw-r--r-- | assets/js/blogitem.js | 94 | ||||
| -rw-r--r-- | assets/js/main.js | 9 |
3 files changed, 121 insertions, 38 deletions
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: `<div class='closeFullscreenImage'>✕</div><div class='navleft'>«</div><div class='navright'>»</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'>✕</div> + <div class='navleft'>«</div> + <div class='navright'>»</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() - 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') |