assets/js/blogitem.js


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

// ! I am struggling to get this to run properly

class BlogItem {
    constructor() {
        this.body = {
            content: document.getElementsByClassName('fullscreenImg')[0],
            images: document.querySelectorAll('img:not([class])'),
            buttons: `<div class='closeFullscreenImage'>&#10005;</div><div class='navleft'>&#171;</div><div class='navright'>&#187;</div>`
        }
    }

    Init() {
        this.#BlogItem()
        this.#Prism()
        new Menu().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.body.content.style.opacity = 0
            setTimeout(() => {
                this.body.content.innerHTML = ''
            }, '1000')
        })
        buttons.left.addEventListener('click', () => {
            if (index > 0) {
                this.#DrawImage(this.body.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)
            }
        })
        buttons.right.addEventListener('click', () => {
            if (index < this.body.images.length - 1) {
                this.#DrawImage(this.body.images[index + 1].src)
                this.#EventListener(index + 1)
            } else {
                this.#DrawImage(this.body.images[0].src)
                this.#EventListener(0)
            }
        })
    }
    #DrawImage(src) {
        try {
            this.body.content.innerHTML = `${this.body.buttons}<img src='${src}'/>`
        } catch (err) {
            console.error(err)
        }
    }
    #BlogItem() {
        this.body.content.style.opacity = 0
        this.body.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.#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)
    }
}

new BlogItem().Init()