diff --git a/js/image.js b/js/image.js new file mode 100644 index 0000000..56bac49 --- /dev/null +++ b/js/image.js @@ -0,0 +1,18 @@ +export default class Image { + constructor(image) { + this.image = image; + } + + showImage() { + this.image.style.opacity = 1; + } + + fadeIn() { + this.image.style.opacity = 0; + this.attachLoadedEvent(); + } + + attachLoadedEvent() { + this.image.addEventListener('load', () => this.showImage()); + } +} diff --git a/js/image.spec.js b/js/image.spec.js new file mode 100644 index 0000000..41705b5 --- /dev/null +++ b/js/image.spec.js @@ -0,0 +1,35 @@ +import Image from './image'; + +const imageHtml = ''; + +describe('Image', () => { + let image; + + beforeEach(() => { + document.body.innerHTML = imageHtml; + image = document.querySelector('img'); + }); + + it('Should initialize', () => { + const img = new Image(image); + expect(img).toBeInstanceOf(Image); + }); + + it('Should store a reference to the image element', () => { + const img = new Image(image); + expect(img.image).toBe(image); + }); + + test('fadeIn should set the element opacity to 0', () => { + const img = new Image(image); + img.fadeIn(); + expect(img.image.style.opacity).toBe('0'); + }); + + test('showImage should set the element opacity to 1', () => { + const img = new Image(image); + img.showImage(); + expect(img.image.style.opacity).toBe('1'); + }); +}); + diff --git a/js/windy.js b/js/windy.js index 502cd5c..f39b896 100644 --- a/js/windy.js +++ b/js/windy.js @@ -1,9 +1,17 @@ import Menu from './menu'; import Navigation from './navigation'; +import Image from './image'; -const windy = {}; +const windy = { + images: [], +}; export default function init() { + document.querySelectorAll('img').forEach((image) => { + const img = new Image(image); + img.fadeIn(); + windy.images.push(img); + }); windy.menu = new Menu({ container: document.querySelector('.Menu'), });