Skip to content

Commit 5a1c4d1

Browse files
midzermidzer
committed
refactor ImageType class
1 parent 7b45817 commit 5a1c4d1

File tree

1 file changed

+54
-63
lines changed

1 file changed

+54
-63
lines changed

‎src/js/types/image.js‎

Lines changed: 54 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ class ImageType {
88
this.userSettings = userSettings
99

1010
const FIGURE = document.createElement('figure')
11-
const FIGCAPTION = document.createElement('figcaption')
1211
const IMAGE = document.createElement('img')
1312
const THUMBNAIL = el.querySelector('img')
1413
const LOADING_INDICATOR = document.createElement('div')
@@ -26,7 +25,6 @@ class ImageType {
2625
IMAGE.alt = THUMBNAIL.alt || ''
2726
}
2827

29-
IMAGE.setAttribute('src', '')
3028
IMAGE.setAttribute('data-src', el.href)
3129

3230
if (el.hasAttribute('data-srcset')) {
@@ -41,68 +39,63 @@ class ImageType {
4139
FIGURE.appendChild(IMAGE)
4240

4341
// Create figcaption
44-
if (this.userSettings.captions) {
45-
let captionContent
46-
if (typeof this.userSettings.captionText === 'function') {
47-
captionContent = this.userSettings.captionText(el)
48-
} else if (this.userSettings.captionsSelector === 'self' &&
49-
el.getAttribute(this.userSettings.captionAttribute)) {
50-
captionContent = el.getAttribute(this.userSettings.captionAttribute)
51-
} else if (this.userSettings.captionsSelector === 'img' && THUMBNAIL &&
52-
THUMBNAIL.getAttribute(this.userSettings.captionAttribute)) {
53-
captionContent = THUMBNAIL.getAttribute(this.userSettings.captionAttribute)
54-
}
55-
42+
let captionContent
43+
if (typeof this.userSettings.captionText === 'function') {
44+
captionContent = this.userSettings.captionText(el)
45+
} else if (this.userSettings.captionsSelector === 'self' &&
46+
el.getAttribute(this.userSettings.captionAttribute)) {
47+
captionContent = el.getAttribute(this.userSettings.captionAttribute)
48+
} else if (this.userSettings.captionsSelector === 'img' && THUMBNAIL &&
49+
THUMBNAIL.getAttribute(this.userSettings.captionAttribute)) {
50+
captionContent = THUMBNAIL.getAttribute(this.userSettings.captionAttribute)
51+
}
52+
if (this.userSettings.captions && captionContent) {
53+
const FIGCAPTION = document.createElement('figcaption')
5654
FIGCAPTION.id = `tobii-figcaption-${this.figcaptionId}`
5755

58-
if (captionContent) {
59-
const SPAN = document.createElement('span')
60-
if (this.userSettings.captionHTML) {
61-
SPAN.innerHTML = captionContent
62-
} else {
63-
SPAN.textContent = captionContent
64-
}
65-
FIGCAPTION.appendChild(SPAN)
66-
67-
if (this.userSettings.captionToggle) {
68-
const BUTTON = document.createElement('button')
69-
BUTTON.className = 'caption-toggle'
70-
BUTTON.title = this.userSettings.captionToggleLabel[0]
71-
BUTTON.innerText = this.userSettings.captionToggleLabel[0]
72-
BUTTON.setAttribute('aria-controls', FIGCAPTION.id)
73-
BUTTON.setAttribute('aria-expanded', true)
74-
BUTTON.addEventListener('pointerdown', (event) => {
75-
event.preventDefault()
76-
event.stopPropagation()
77-
})
78-
BUTTON.addEventListener('pointerup', (event) => {
79-
event.preventDefault()
80-
event.stopPropagation()
81-
})
82-
BUTTON.addEventListener('click', (event) => {
83-
event.preventDefault()
84-
event.stopPropagation()
85-
const isExpanded = BUTTON.getAttribute('aria-expanded') === 'true'
86-
const buttonLabel = isExpanded
87-
? this.userSettings.captionToggleLabel[1]
88-
: this.userSettings.captionToggleLabel[0]
89-
BUTTON.title = buttonLabel
90-
BUTTON.innerText = buttonLabel
91-
BUTTON.setAttribute('aria-expanded', !isExpanded)
92-
SPAN.setAttribute('aria-hidden', isExpanded)
93-
})
94-
FIGCAPTION.appendChild(BUTTON)
56+
const SPAN = document.createElement('span')
57+
if (this.userSettings.captionHTML) {
58+
SPAN.innerHTML = captionContent
59+
} else {
60+
SPAN.textContent = captionContent
61+
}
62+
FIGCAPTION.appendChild(SPAN)
63+
64+
if (this.userSettings.captionToggle) {
65+
const BUTTON = document.createElement('button')
66+
BUTTON.className = 'caption-toggle'
67+
BUTTON.textContent = BUTTON.title = this.userSettings.captionToggleLabel[0]
68+
BUTTON.setAttribute('aria-controls', FIGCAPTION.id)
69+
BUTTON.setAttribute('aria-expanded', true)
70+
71+
const preventAndStopEvent = (event) => {
72+
event.preventDefault()
73+
event.stopPropagation()
9574
}
75+
BUTTON.addEventListener('pointerdown', (event) => preventAndStopEvent(event))
76+
BUTTON.addEventListener('pointerup', (event) => preventAndStopEvent(event))
77+
BUTTON.addEventListener('click', (event) => {
78+
preventAndStopEvent(event)
79+
const isExpanded = BUTTON.getAttribute('aria-expanded') === 'true'
80+
const buttonLabel = isExpanded
81+
? this.userSettings.captionToggleLabel[1]
82+
: this.userSettings.captionToggleLabel[0]
83+
BUTTON.textContent = BUTTON.title = buttonLabel
84+
BUTTON.setAttribute('aria-expanded', !isExpanded)
85+
SPAN.setAttribute('aria-hidden', isExpanded)
86+
})
87+
88+
FIGCAPTION.appendChild(BUTTON)
89+
}
9690

97-
FIGURE.appendChild(FIGCAPTION)
91+
FIGURE.appendChild(FIGCAPTION)
9892

99-
IMAGE.setAttribute('aria-labelledby', FIGCAPTION.id)
93+
IMAGE.setAttribute('aria-labelledby', FIGCAPTION.id)
10094

101-
// Add aria-label to the figure containing the caption content
102-
FIGURE.setAttribute('aria-label', SPAN.textContent)
95+
// Add aria-label to the figure containing the caption content
96+
FIGURE.setAttribute('aria-label', SPAN.textContent)
10397

104-
++this.figcaptionId
105-
}
98+
++this.figcaptionId
10699
}
107100

108101
// Add figure to container
@@ -136,15 +129,13 @@ class ImageType {
136129
const FIGURE = container.querySelector('figure')
137130
const LOADING_INDICATOR = container.querySelector('.tobii__loader')
138131

139-
IMAGE.addEventListener('load', () => {
132+
const handleImageEvent = () => {
140133
container.removeChild(LOADING_INDICATOR)
141134
FIGURE.style.opacity = '1'
142-
})
135+
}
143136

144-
IMAGE.addEventListener('error', () => {
145-
container.removeChild(LOADING_INDICATOR)
146-
FIGURE.style.opacity = '1'
147-
})
137+
IMAGE.addEventListener('load', handleImageEvent)
138+
IMAGE.addEventListener('error', handleImageEvent)
148139

149140
if (IMAGE.hasAttribute('data-srcset')) {
150141
IMAGE.setAttribute('srcset', IMAGE.getAttribute('data-srcset'))

0 commit comments

Comments
 (0)