https://cellphoneboosterstore.com/js/new-blog/tabs.js

1
2const tabs = document.querySelectorAll('[data-tabs]')
3let tabsActiveHash = []
4
5if (tabs.length > 0) {
6	// const hash = getHash()
7	// if (hash && hash.startsWith('tab-')) {
8	// 	tabsActiveHash = hash.replace('tab-', '').split('-')
9	// }
10	tabs.forEach((tabsBlock, index) => {
11		tabsBlock.classList.add('_tab-init')
12		tabsBlock.setAttribute('data-tabs-index', index)
13		tabsBlock.addEventListener("click", setTabsAction)
14		initTabs(tabsBlock)
15	})
16
17	// Отримання слойлерів з медіа-запитами
18	// let mdQueriesArray = dataMediaQueries(tabs, "tabs")
19	// if (mdQueriesArray && mdQueriesArray.length) {
20	// 	mdQueriesArray.forEach(mdQueriesItem => {
21	// 		// Подія
22	// 		mdQueriesItem.matchMedia.addEventListener("change", function () {
23	// 			setTitlePosition(mdQueriesItem.itemsArray, mdQueriesItem.matchMedia)
24	// 		})
25	// 		setTitlePosition(mdQueriesItem.itemsArray, mdQueriesItem.matchMedia)
26	// 	})
27	// }
28}
29// Встановлення позицій Заголовоків
30function setTitlePosition(tabsMediaArray, matchMedia) {
31	tabsMediaArray.forEach(tabsMediaItem => {
32		tabsMediaItem = tabsMediaItem.item
33		let tabsTitles = tabsMediaItem.querySelector('[data-tabs-titles]')
34		let tabsTitleItems = tabsMediaItem.querySelectorAll('[data-tabs-title]')
35		let tabsContent = tabsMediaItem.querySelector('[data-tabs-body]')
36		let tabsContentItems = tabsMediaItem.querySelectorAll('[data-tabs-item]')
37		tabsTitleItems = Array.from(tabsTitleItems).filter(item => item.closest('[data-tabs]') === tabsMediaItem)
38		tabsContentItems = Array.from(tabsContentItems).filter(item => item.closest('[data-tabs]') === tabsMediaItem)
39		tabsContentItems.forEach((tabsContentItem, index) => {
40			if (matchMedia.matches) {
41				tabsContent.append(tabsTitleItems[index])
42				tabsContent.append(tabsContentItem)
43				tabsMediaItem.classList.add('_tab-spoller')
44			} else {
45				tabsTitles.append(tabsTitleItems[index])
46				tabsMediaItem.classList.remove('_tab-spoller')
47			}
48		})
49	})
50}
51// Робота з контентом
52function initTabs(tabsBlock) {
53	let tabsTitles = tabsBlock.querySelectorAll('[data-tabs-titles]>*')
54	let tabsContent = tabsBlock.querySelectorAll('[data-tabs-body]>*')
55	const tabsBlockIndex = tabsBlock.dataset.tabsIndex
56	const tabsActiveHashBlock = tabsActiveHash[0] == tabsBlockIndex
57
58	if (tabsActiveHashBlock) {
59		const tabsActiveTitle = tabsBlock.querySelector('[data-tabs-titles]>._tab-active')
60		tabsActiveTitle ? tabsActiveTitle.classList.remove('_tab-active') : null
61	}
62	if (tabsContent.length) {
63		tabsContent = Array.from(tabsContent).filter(item => item.closest('[data-tabs]') === tabsBlock)
64		tabsTitles = Array.from(tabsTitles).filter(item => item.closest('[data-tabs]') === tabsBlock)
65		tabsContent.forEach((tabsContentItem, index) => {
66			tabsTitles[index].setAttribute('data-tabs-title', '')
67			tabsContentItem.setAttribute('data-tabs-item', '')
68
69			if (tabsActiveHashBlock && index == tabsActiveHash[1]) {
70				tabsTitles[index].classList.add('_tab-active')
71			}
72			tabsContentItem.hidden = !tabsTitles[index].classList.contains('_tab-active')
73		})
74	}
75}
76function setTabsStatus(tabsBlock) {
77	let tabsTitles = tabsBlock.querySelectorAll('[data-tabs-title]')
78	let tabsContent = tabsBlock.querySelectorAll('[data-tabs-item]')
79	const tabsBlockIndex = tabsBlock.dataset.tabsIndex
80	function isTabsAnamate(tabsBlock) {
81		if (tabsBlock.hasAttribute('data-tabs-animate')) {
82			return tabsBlock.dataset.tabsAnimate > 0 ? Number(tabsBlock.dataset.tabsAnimate) : 500
83		}
84	}
85	const tabsBlockAnimate = isTabsAnamate(tabsBlock)
86	if (tabsContent.length > 0) {
87		const isHash = tabsBlock.hasAttribute('data-tabs-hash')
88		tabsContent = Array.from(tabsContent).filter(item => item.closest('[data-tabs]') === tabsBlock)
89		tabsTitles = Array.from(tabsTitles).filter(item => item.closest('[data-tabs]') === tabsBlock)
90		tabsContent.forEach((tabsContentItem, index) => {
91			if (tabsTitles[index].classList.contains('_tab-active')) {
92				if (tabsBlockAnimate) {
93					_slideDown(tabsContentItem, tabsBlockAnimate)
94				} else {
95					tabsContentItem.hidden = false
96				}
97				if (isHash && !tabsContentItem.closest('.popup')) {
98					setHash(`tab-${tabsBlockIndex}-${index}`)
99				}
100			} else {

101				if (tabsBlockAnimate) {
102					_slideUp(tabsContentItem, tabsBlockAnimate)
103				} else {
104					tabsContentItem.hidden = true
105				}
106			}
107		})
108	}
109}
110function setTabsAction(e) {
111	const el = e.target
112	if (el.closest('[data-tabs-title]')) {
113		const tabTitle = el.closest('[data-tabs-title]')
114		const tabsBlock = tabTitle.closest('[data-tabs]')
115		if (!tabTitle.classList.contains('_tab-active') && !tabsBlock.querySelector('._slide')) {
116			let tabActiveTitle = tabsBlock.querySelectorAll('[data-tabs-title]._tab-active')
117			tabActiveTitle.length ? tabActiveTitle = Array.from(tabActiveTitle).filter(item => item.closest('[data-tabs]') === tabsBlock) : null
118			tabActiveTitle.length ? tabActiveTitle[0].classList.remove('_tab-active') : null
119			tabTitle.classList.add('_tab-active')
120			setTabsStatus(tabsBlock)
121		}
122		e.preventDefault()
123	}
124}