diff --git a/src/js/auto-height.js b/src/js/auto-height.js new file mode 100644 index 0000000..c6821c9 --- /dev/null +++ b/src/js/auto-height.js @@ -0,0 +1,51 @@ +class AutoHeight { + static instance; + elements; + + constructor(breakpoint) { + if (AutoHeight.instance) { + throw new Error('New instance cannot be created!'); + } + AutoHeight.instance = this; + this.breakpoint = breakpoint; + } + + setElements = elements => { + this.elements = elements; + }; + + set = () => { + this.elements.forEach(element => { + element.maxHeight = this.getMaxHeight(element.nodeList); + this.setHeight(element.nodeList, element.maxHeight); + }); + + if (window.innerWidth < this.breakpoint) { + this.elements.forEach(el => this.resetHeight(el.nodeList)); + } + }; + + getMaxHeight = nodes => { + return Math.max( + ...Array.from(nodes).map(node => { + node.style.height = 'auto'; + return node.offsetHeight; + }), + ); + }; + + resetHeight = nodes => { + nodes.forEach(node => { + node.style.height = 'auto'; + }); + }; + + setHeight = (nodes, maxHeight) => { + nodes.forEach(node => { + node.style.height = `${maxHeight}px`; + }); + }; +} + +const autoHeight = new AutoHeight(768); +export default autoHeight; diff --git a/src/js/bootstrap.js b/src/js/bootstrap.js index 3ab8ef1..89fc7f6 100644 --- a/src/js/bootstrap.js +++ b/src/js/bootstrap.js @@ -1,5 +1,26 @@ -import setWrappersHeight from './utils'; +import autoHeight from './auto-height'; -window.addEventListener('resize', setWrappersHeight); +window.addEventListener('DOMContentLoaded', () => { + const elements = [ + { + nodeList: document.querySelectorAll('.education-list__time'), + maxHeight: -1, + }, + { + nodeList: document.querySelectorAll('.education-list__specialty'), + maxHeight: -1, + }, + { + nodeList: document.querySelectorAll('.education-list__university'), + maxHeight: -1, + }, + { + nodeList: document.querySelectorAll('.education-list__description'), + maxHeight: -1, + }, + ]; + autoHeight.setElements(elements); + autoHeight.set(); +}); -window.addEventListener('DOMContentLoaded', setWrappersHeight); +window.addEventListener('resize', () => autoHeight.set()); diff --git a/src/js/language.js b/src/js/language.js index e12f8f9..2f7f4ba 100644 --- a/src/js/language.js +++ b/src/js/language.js @@ -1,4 +1,5 @@ import i18next from 'i18next'; +import autoHeight from './auto-height'; const DEFAULT_LANG = 'en'; @@ -11,6 +12,7 @@ const updateContent = () => { const translation = i18next.t(key); element.innerHTML = translation; }); + autoHeight.set(); }; const initLocalization = async () => { @@ -48,7 +50,6 @@ const switchLanguage = () => { localStorage.setItem('lang', nextLang); setLanguageIcon(nextLang); i18next.changeLanguage(nextLang); - setWrappersHeight(); }; const hideNonDefaultIcons = () => { diff --git a/src/js/utils.js b/src/js/utils.js deleted file mode 100644 index d6eeaa2..0000000 --- a/src/js/utils.js +++ /dev/null @@ -1,54 +0,0 @@ -const BREAKPOINT = 768; - -const getMaxHeight = elements => { - return Math.max( - ...Array.from(elements).map(e => { - e.style.height = 'auto'; - return e.offsetHeight; - }), - ); -}; - -const setHeight = (wrappers, maxHeight) => { - wrappers.forEach(w => { - w.style.height = `${maxHeight}px`; - }); -}; - -const resetHeight = wrappers => { - wrappers.forEach(w => { - w.style.height = 'auto'; - }); -}; - -const setWrappersHeight = () => { - const elements = [ - { - nodeList: document.querySelectorAll('.education-list__time'), - maxHeight: -1, - }, - { - nodeList: document.querySelectorAll('.education-list__specialty'), - maxHeight: -1, - }, - { - nodeList: document.querySelectorAll('.education-list__university'), - maxHeight: -1, - }, - { - nodeList: document.querySelectorAll('.education-list__description'), - maxHeight: -1, - }, - ]; - - elements.forEach(element => { - element.maxHeight = getMaxHeight(element.nodeList); - setHeight(element.nodeList, element.maxHeight); - }); - - if (window.innerWidth < BREAKPOINT) { - elements.forEach(el => resetHeight(el.nodeList)); - } -}; - -export default setWrappersHeight;