From 2f2e164bb60f551a73d730d0e04462eed6f7adbd Mon Sep 17 00:00:00 2001 From: Arne Hassel Date: Wed, 28 Aug 2019 19:33:23 +0200 Subject: [PATCH 1/3] Adds feature to add cancelButton to end of tabs By providing option onClose, tabs are extended with an extra, unstyled tab that contains a cancelButton. Once clicked it will call the given onClose-method. This is needed for providing the cancelButton for the global dashboard. Part of fix for https://github.com/solid/solid-panes/issues/154 --- src/tabs.js | 30 ++++++++++++++++++++++++++---- 1 file changed, 26 insertions(+), 4 deletions(-) diff --git a/src/tabs.js b/src/tabs.js index 41a1264c6..b9d06cd2a 100644 --- a/src/tabs.js +++ b/src/tabs.js @@ -26,6 +26,7 @@ const utils = require('./utils') // options.showMain(div, subject) function to show subject in div when tab selected // options.renderTabSettings function(subject, domContainer) // options.renderTabSettings like showMain but when user has held Alt down +// options.onClose if given, will present a cancelButton next to tabs that calls this optional method // UI.tabs.tabWidget = function (options) { @@ -41,6 +42,7 @@ UI.tabs.tabWidget = function (options) { var wholetable = box.appendChild(dom.createElement('table')) var mainTR, mainTD, tabTR var tabContainer, tabElement + var onClose = options.onClose var isLight = function (x) { var total = 0 @@ -140,7 +142,11 @@ UI.tabs.tabWidget = function (options) { var resetTabStyle = function () { for (var i = 0; i < tabContainer.children.length; i++) { - tabContainer.children[i].firstChild.setAttribute('style', unselectedStyle) + const tab = tabContainer.children[i] + if (tab.classList.contains('unstyled')) { + continue + } + tab.firstChild.setAttribute('style', unselectedStyle) } } var resetBodyStyle = function () { @@ -193,7 +199,7 @@ UI.tabs.tabWidget = function (options) { var orderedSync = function () { var items = getItems() if (!vertical) { - mainTD.setAttribute('colspan', items.length) + mainTD.setAttribute('colspan', items.length + (onClose ? 1 : 0)) } var slot, i, j, left, right var differ = false @@ -238,13 +244,16 @@ UI.tabs.tabWidget = function (options) { bodyContainer.insertBefore(newBodyTR, bodyContainer.children[left + i]) } } + if (onClose) { + addCancelButton(tabContainer) + } } -// UNMAINTAINED + // UNMAINTAINED var unorderedSync = function () { var items = getItems() if (!vertical) { - mainTD.setAttribute('colspan', items.length) + mainTD.setAttribute('colspan', items.length + (onClose ? 1 : 0)) } var slot, i, j, found, pair var missing = [] @@ -280,6 +289,10 @@ UI.tabs.tabWidget = function (options) { tabContainer.removeChild(slot) } } + + if (onClose) { + addCancelButton(tabContainer) + } } var sync = function () { @@ -310,4 +323,13 @@ UI.tabs.tabWidget = function (options) { tabContainer.children[0].firstChild.click() // Open first tab } return box + + function addCancelButton (tabContainer) { + const extraTab = dom.createElement('td') + extraTab.classList.add('unstyled') + extraTab.style.textAlign = 'right' + const cancelButton = UI.widgets.cancelButton(dom, onClose) + extraTab.appendChild(cancelButton) + tabContainer.appendChild(extraTab) + } } From c737fe15bf975361b83a6f8080f12728ded2e02f Mon Sep 17 00:00:00 2001 From: Arne Hassel Date: Wed, 28 Aug 2019 19:54:49 +0200 Subject: [PATCH 2/3] Making sure that cancelButton works with vertical tabs as well --- src/tabs.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/tabs.js b/src/tabs.js index b9d06cd2a..b9b8ff8da 100644 --- a/src/tabs.js +++ b/src/tabs.js @@ -325,9 +325,11 @@ UI.tabs.tabWidget = function (options) { return box function addCancelButton (tabContainer) { - const extraTab = dom.createElement('td') + const extraTab = dom.createElement(tabElement) extraTab.classList.add('unstyled') - extraTab.style.textAlign = 'right' + if (tabElement === 'td') { + extraTab.style.textAlign = 'right' + } const cancelButton = UI.widgets.cancelButton(dom, onClose) extraTab.appendChild(cancelButton) tabContainer.appendChild(extraTab) From 2b0260fd6ac27723bfbeaa4dea48fdde6160ad7d Mon Sep 17 00:00:00 2001 From: Arne Hassel Date: Mon, 2 Sep 2019 11:45:27 +0200 Subject: [PATCH 3/3] Making sure that tests work with the new cancelButton --- src/tabs.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/tabs.js b/src/tabs.js index b9b8ff8da..ee82cd641 100644 --- a/src/tabs.js +++ b/src/tabs.js @@ -206,7 +206,7 @@ UI.tabs.tabWidget = function (options) { // Find how many match at each end for (left = 0; left < tabContainer.children.length; left++) { slot = tabContainer.children[left] - if (left >= items.length || !slot.subject.sameTerm(items[left])) { + if (left >= items.length || (slot.subject && !slot.subject.sameTerm(items[left]))) { differ = true break } @@ -217,7 +217,7 @@ UI.tabs.tabWidget = function (options) { for (right = tabContainer.children.length - 1; right >= 0; right--) { slot = tabContainer.children[right] j = right - tabContainer.children.length + items.length - if (!slot.subject.sameTerm(items[j])) { + if (slot.subject && !slot.subject.sameTerm(items[j])) { break } } @@ -325,6 +325,12 @@ UI.tabs.tabWidget = function (options) { return box function addCancelButton (tabContainer) { + if (tabContainer.dataset.onCloseSet) { + // @@ TODO: this is only here to make the tests work + // Discussion at https://github.com/solid/solid-ui/pull/110#issuecomment-527080663 + const existingCancelButton = tabContainer.querySelector('.unstyled') + tabContainer.removeChild(existingCancelButton) + } const extraTab = dom.createElement(tabElement) extraTab.classList.add('unstyled') if (tabElement === 'td') { @@ -333,5 +339,6 @@ UI.tabs.tabWidget = function (options) { const cancelButton = UI.widgets.cancelButton(dom, onClose) extraTab.appendChild(cancelButton) tabContainer.appendChild(extraTab) + tabContainer.dataset.onCloseSet = 'true' } }