-
-class TriLayout {
-
- setup() {
- this.container = this.$refs.container;
- this.tabs = this.$manyRefs.tab;
-
- this.lastLayoutType = 'none';
- this.onDestroy = null;
- this.scrollCache = {
- 'content': 0,
- 'info': 0,
- };
- this.lastTabShown = 'content';
-
- // Bind any listeners
- this.mobileTabClick = this.mobileTabClick.bind(this);
-
- // Watch layout changes
- this.updateLayout();
- window.addEventListener('resize', event => {
- this.updateLayout();
- }, {passive: true});
- }
-
- updateLayout() {
- let newLayout = 'tablet';
- if (window.innerWidth <= 1000) newLayout = 'mobile';
- if (window.innerWidth >= 1400) newLayout = 'desktop';
- if (newLayout === this.lastLayoutType) return;
-
- if (this.onDestroy) {
- this.onDestroy();
- this.onDestroy = null;
- }
-
- if (newLayout === 'desktop') {
- this.setupDesktop();
- } else if (newLayout === 'mobile') {
- this.setupMobile();
- }
-
- this.lastLayoutType = newLayout;
- }
-
- setupMobile() {
- for (const tab of this.tabs) {
- tab.addEventListener('click', this.mobileTabClick);
- }
-
- this.onDestroy = () => {
- for (const tab of this.tabs) {
- tab.removeEventListener('click', this.mobileTabClick);
- }
- }
- }
-
- setupDesktop() {
- //
- }
-
-
- /**
- * Action to run when the mobile info toggle bar is clicked/tapped
- * @param event
- */
- mobileTabClick(event) {
- const tab = event.target.dataset.tab;
- this.showTab(tab);
- }
-
- /**
- * Show the content tab.
- * Used by the page-display component.
- */
- showContent() {
- this.showTab('content', false);
- }
-
- /**
- * Show the given tab
- * @param {String} tabName
- * @param {Boolean }scroll
- */
- showTab(tabName, scroll = true) {
- this.scrollCache[this.lastTabShown] = document.documentElement.scrollTop;
-
- // Set tab status
- for (const tab of this.tabs) {
- const isActive = (tab.dataset.tab === tabName);
- tab.setAttribute('aria-selected', isActive ? 'true' : 'false');
- }
-
- // Toggle section
- const showInfo = (tabName === 'info');
- this.container.classList.toggle('show-info', showInfo);
-
- // Set the scroll position from cache
- if (scroll) {
- const pageHeader = document.querySelector('header');
- const defaultScrollTop = pageHeader.getBoundingClientRect().bottom;
- document.documentElement.scrollTop = this.scrollCache[tabName] || defaultScrollTop;
- setTimeout(() => {
- document.documentElement.scrollTop = this.scrollCache[tabName] || defaultScrollTop;
- }, 50);
- }
-
- this.lastTabShown = tabName;
- }
-
-}
-
-export default TriLayout;
\ No newline at end of file