1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
class BlogItem {
constructor() {
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(x) {
this.#Prism(x)
new Menu().Init()
new Footer().Init()
}
#EventListener(index) {
const buttons = {
close: document.getElementsByClassName('closeFullscreenImage')[0],
left: document.getElementsByClassName('navleft')[0],
right: document.getElementsByClassName('navright')[0]
}
buttons.close.addEventListener('click', () => {
this.object.content.style.opacity = 0
setTimeout(() => {
this.object.content.innerHTML = ''
}, '1000')
})
buttons.left.addEventListener('click', () => {
if (index > 0) {
this.#DrawImage(this.object.images[index - 1].src)
this.#EventListener(index - 1)
} else {
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.object.images.length - 1) {
this.#DrawImage(this.object.images[index + 1].src)
this.#EventListener(index + 1)
} else {
this.#DrawImage(this.object.images[0].src)
this.#EventListener(0)
}
})
}
#DrawImage(src) {
try {
this.object.content.innerHTML = `${this.object.buttons}<img src='${src}'/>`
} catch (err) {
console.error(err)
}
}
#BlogItem() {
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.object.content.innerHTML = `${this.object.buttons}<img src='${img.src}'/>`
this.object.content.style.opacity = 1
this.#EventListener(index)
})
})
}
#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)
}
}
|
