import UserPreference from './user_preference'
export default class VoltaTabbedExamples {
constructor() { this.userPreference = new UserPreference(true); if ($('.Vlt-tabs').length) { this.context = $('.Vlt-tabs'); this.restoreTabs = this.restoreTabs.bind(this) this.setupEvents = this.setupEvents.bind(this) this.onTabClick = this.onTabClick.bind(this) this.onPopState = this.onPopState.bind(this) this.persistLanguage = this.persistLanguage.bind(this) this.activateTabFromURLHash = this.activateTabFromURLHash.bind(this); this.restoreTabs() this.setupEvents() } } shouldRestoreTabs() { return !this.context.find('.Vlt-tabs__header--bordered').data('has-initial-tab'); } languages() { let obj = {} $(this.context).find(`[data-language]`).each(function(index, el) { $(el).data('language').split(',').forEach(function(language) { obj[language] = { platform: $(el).data('platform') || false } }) }) return obj } restoreTabs() { if (this.shouldRestoreTabs()) { let languages = this.languages() const language = this.userPreference.topMatch(Object.keys(languages)) if (language) { if (languages[language]['platform']) { this.setPlatform(languages[language]['platform'], this.context) } else { this.setLanguage(language); } } } else { const selectedLanguage = this.context.find('li.Vlt-tabs__link_active').data('language'); this.setLanguage(selectedLanguage); } } setupEvents() { $('.Vlt-tabs__link').click(this.onTabClick) $(window).on('popstate', this.onPopState) window.addEventListener("load", this.activateTabFromURLHash); window.addEventListener("hashchange", this.activateTabFromURLHash); } onPopState(event) { if (window.history.state && window.history.state.language) { this.setLanguage(window.history.state.language) } } onTabClick(event) { if (document.body.classList.contains('Adp-homepage')) { return; } const target = $(event.currentTarget); // Prevent nested tabs from changing the url if ($(event.target).parents('.Vlt-tabs').length > 1) { return; } const language = target.data('language') const languageType = target.data('language-type') const linkable = target.data('language-linkable') const tabId = target.attr('id'); if (language) { if (linkable) { if ($(".skip-pushstate").length == 0) { document.dispatchEvent(new CustomEvent('codeLanguageChange', { "detail": { "language": language } })); const rootPath = $('body').data('push-state-root') window.history.pushState({language}, 'language', `${rootPath}/${language}`) } } this.persistLanguage(language, languageType, linkable) } else if (tabId) { window.location.hash = tabId; } } persistLanguage(language, languageType) { if (language) { this.userPreference.promote(languageType, language) } } setLanguage(language) { setTimeout(() => { $(`[data-language='${language}']`).click(); // Remove skip pushstate after the first load. This is a bit of a hack, but it works to stop breaking // the back button $(".skip-pushstate").removeClass('skip-pushstate'); }, 0); } setPlatform(platform) { setTimeout(() => { $(`[data-platform='${platform}']`).click(); }, 0); } activateTabFromURLHash() { let tabId = window.location.hash; if (tabId !== "") { let tab = document.querySelector(`.Vlt-tabs__link${tabId}`); if (tab) { tab.focus({ preventScroll: true }); tab.click(); } } }
}