From c1c6ca201bb35bbde83108a0122599acdb0e6f3e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomasz=20G=C4=85sior?= Date: Sat, 26 Feb 2022 00:12:10 +0100 Subject: [PATCH] Get rid of tabbed UI Issue #116 --- assets/css/part/tabbed-ui.css | 107 ---------------------------- assets/js/my-account-settings.js | 3 - assets/js/radio-station-edit-add.js | 4 -- assets/js/radio-table-create.js | 3 - assets/js/radio-table-remove.js | 4 -- assets/js/radio-table-settings.js | 2 - assets/js/src/TabbedUI.js | 102 -------------------------- 7 files changed, 225 deletions(-) delete mode 100644 assets/css/part/tabbed-ui.css delete mode 100644 assets/js/src/TabbedUI.js diff --git a/assets/css/part/tabbed-ui.css b/assets/css/part/tabbed-ui.css deleted file mode 100644 index 7bbc3175..00000000 --- a/assets/css/part/tabbed-ui.css +++ /dev/null @@ -1,107 +0,0 @@ -.JS .tabbed-ui > div { - background: #FAFFF8; - padding: 0.5em 1.2em 0.8em; - border: 1px solid #D2D2D2; -} -.JS .tabbed-ui > div:not(.tabbed-ui-current) { - display: none; -} - -.tabbed-ui-navigator { - padding-left: 0; - list-style-type: none; - margin: 0 0 -1px; - - vertical-align: bottom; -} -@supports (-webkit-nbsp-mode: initial) -{ - .tabbed-ui-navigator { - /* needed for WebKit, not Blink */ - margin-bottom: 0; - } -} -.tabbed-ui-navigator li { - display: inline; -} -.tabbed-ui-navigator button { - margin-right: 0.4em; - padding: 0.2em 0.9em; - background: #FAFFF8; - border: 1px solid #D2D2D2; - opacity: 0.63; - - white-space: nowrap; - display: inline-block; - outline-style: none; - box-shadow: none; - color: inherit; - transition-property: opacity; - width: auto; - font-weight: normal; - margin-top: 0; -} -.tabbed-ui-navigator button:hover { - background: #fff; - color: inherit; -} -.tabbed-ui-navigator button:focus:not(:hover):not(:active) { - opacity: 1; - outline-style: dashed; -} -.tabbed-ui-navigator button.tabbed-ui-current { - opacity: 1; - border-bottom-color: #FAFFF8; - padding-top: 0.6em; - background: #FAFFF8; -} - -@media (max-width: 800px) -{ - .tabbed-ui-navigator { - margin-bottom: 0.4em; - } - - .tabbed-ui-navigator button { - margin-bottom: 0.5em; - } - .tabbed-ui-navigator button, .tabbed-ui-navigator button.tabbed-ui-current { - padding: 0.2em 0.9em; - border: 1px solid #D2D2D2; - } - .tabbed-ui-navigator li:last-child button { - margin-right: 0; - } - .tabbed-ui-navigator button.tabbed-ui-current { - font-weight: bold; - border-color: #aaa; - } -} - - -/* information paragraph in tabbed UI */ - -.JS .tabbed-ui .information { - box-shadow: none; - padding-top: 1.5em; - padding-bottom: 1.5em; -} - -@media (max-width: 800px) -{ - .JS .tabbed-ui .information { - padding-top: 0.9em; - padding-bottom: 0.9em; - } -} - - -/* button in tabbed UI */ - -.JS .tabbed-ui > div > form > button { - margin-top: 1.5em; - margin-bottom: 0.7em; -} -.JS .tabbed-ui + button { - margin-top: 1.3em; -} diff --git a/assets/js/my-account-settings.js b/assets/js/my-account-settings.js index cc7d7f3b..9d6d40cd 100644 --- a/assets/js/my-account-settings.js +++ b/assets/js/my-account-settings.js @@ -1,7 +1,4 @@ import '../css/my-account-settings.css'; -import { TabbedUI } from './src/TabbedUI.js'; - document.addEventListener('DOMContentLoaded', () => { - new TabbedUI(document.querySelector('.tabbed-ui')); }); diff --git a/assets/js/radio-station-edit-add.js b/assets/js/radio-station-edit-add.js index bc8a709c..5d27057b 100644 --- a/assets/js/radio-station-edit-add.js +++ b/assets/js/radio-station-edit-add.js @@ -1,7 +1,5 @@ import '../css/radio-station-edit-add.css'; -import { TabbedUI } from './src/TabbedUI.js'; - function setupFrequencyWithDabChannelSync() { let dabChannelInput = document.querySelector('.dab-channel-input'); @@ -19,7 +17,5 @@ function setupFrequencyWithDabChannelSync() } document.addEventListener('DOMContentLoaded', () => { - new TabbedUI(document.querySelector('.tabbed-ui')); - setupFrequencyWithDabChannelSync(); }); diff --git a/assets/js/radio-table-create.js b/assets/js/radio-table-create.js index a542dde7..1b21677b 100644 --- a/assets/js/radio-table-create.js +++ b/assets/js/radio-table-create.js @@ -1,7 +1,4 @@ import '../css/radio-table-create.css'; -import { TabbedUI } from './src/TabbedUI.js'; - document.addEventListener('DOMContentLoaded', () => { - new TabbedUI(document.querySelector('.tabbed-ui')); }); diff --git a/assets/js/radio-table-remove.js b/assets/js/radio-table-remove.js index 65827a00..2cd9e1cb 100644 --- a/assets/js/radio-table-remove.js +++ b/assets/js/radio-table-remove.js @@ -1,7 +1,5 @@ import '../css/radio-table-remove.css'; -import { TabbedUI } from './src/TabbedUI.js'; - function setupRemoveConfirmDialog() { let input = document.querySelector('.radio-table-remove-confirm'); @@ -19,7 +17,5 @@ function setupRemoveConfirmDialog() } document.addEventListener('DOMContentLoaded', () => { - new TabbedUI(document.querySelector('.tabbed-ui')); - setupRemoveConfirmDialog(); }); diff --git a/assets/js/radio-table-settings.js b/assets/js/radio-table-settings.js index d4f7a7fc..02e63ae6 100644 --- a/assets/js/radio-table-settings.js +++ b/assets/js/radio-table-settings.js @@ -1,6 +1,5 @@ import '../css/radio-table-settings.css'; -import { TabbedUI } from './src/TabbedUI.js'; import { RadioTableColumnsUI } from './src/RadioTableColumnsUI.js'; import Huebee from 'huebee'; @@ -50,7 +49,6 @@ function setupCustomWidthInput() } document.addEventListener('DOMContentLoaded', () => { - new TabbedUI(document.querySelector('.tabbed-ui')); new RadioTableColumnsUI(document.querySelector('.radio-table-columns')); setupColorInputs(); diff --git a/assets/js/src/TabbedUI.js b/assets/js/src/TabbedUI.js deleted file mode 100644 index 459370d1..00000000 --- a/assets/js/src/TabbedUI.js +++ /dev/null @@ -1,102 +0,0 @@ -import '../../css/part/tabbed-ui.css'; - -export class TabbedUI -{ - constructor(container) - { - this.container = container; - this.panels = [...container.children]; - this.navigator = null; - this.buttons = []; - - this.setupNavigator(); - this.setupPanels(); - } - - get LAST_PANEL_SESSION_KEY() - { - return 'tabbed-ui__' + location.pathname; - } - - setupNavigator() - { - this.navigator = document.createElement('ul'); - this.navigator.classList.add('tabbed-ui-navigator'); - this.navigator.setAttribute('role', 'tablist'); - - this.panels.forEach((panel, i) => { - let title = panel.querySelector('h2').innerHTML; - let item = document.createElement('li'); - let button = document.createElement('button'); - - button.innerHTML = title; - button.dataset.panelNumber = i; - button.type = 'button'; - button.addEventListener('click', this.onNavigatorButtonClick.bind(this)); - button.setAttribute('role', 'tab'); - - this.buttons[i] = button; - - item.appendChild(button); - this.navigator.appendChild(item); - }); - - this.container.insertBefore(this.navigator, this.panels[0]); - } - - setupPanels() - { - let defaultPanelNumber = 0; - - let currentHash = location.hash.replace('#', ''); - let savedPanelNumber = sessionStorage.getItem(this.LAST_PANEL_SESSION_KEY); - - if (null != savedPanelNumber) { - defaultPanelNumber = savedPanelNumber; - } - - this.panels.forEach((panel, i) => { - panel.setAttribute('role', 'tabpanel'); - - if (currentHash && panel.id == currentHash) { - defaultPanelNumber = i; - - // If default panel was determined by URL hash, scroll to - // the top of the page to prevent default browser behavior. - let scrollToTop = () => { - window.scroll(0, 0); - window.removeEventListener('scroll', scrollToTop); - }; - window.addEventListener('scroll', scrollToTop); - } - }); - - this.changePanel(defaultPanelNumber); - } - - changePanel(panelNumber) - { - this.panels.forEach((panel, i) => { - panel.classList.remove('tabbed-ui-current'); - this.buttons[i].classList.remove('tabbed-ui-current'); - - if (i == panelNumber) { - panel.classList.add('tabbed-ui-current'); - this.buttons[i].classList.add('tabbed-ui-current'); - } - }); - } - - onNavigatorButtonClick(event) - { - event.preventDefault(); - - let button = event.target; - let panelNumber = button.dataset.panelNumber; - - button.blur(); - - this.changePanel(panelNumber); - sessionStorage.setItem(this.LAST_PANEL_SESSION_KEY, panelNumber); - } -}