diff options
Diffstat (limited to 'assets/js/blogitem.js')
| -rw-r--r-- | assets/js/blogitem.js | 94 |
1 files changed, 60 insertions, 34 deletions
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() - |