You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by lo...@apache.org on 2019/09/12 11:18:07 UTC
[myfaces-tobago] branch master updated: TabGroup: using new tag:
tobago-tab-content instead of div Fix tests: TabGroup
This is an automated email from the ASF dual-hosted git repository.
lofwyr pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
The following commit(s) were added to refs/heads/master by this push:
new 82576c6 TabGroup: using new tag: tobago-tab-content instead of div Fix tests: TabGroup
82576c6 is described below
commit 82576c658e9de86f41a11325b232315e0ed1dac8
Author: Udo Schnurpfeil <lo...@apache.org>
AuthorDate: Thu Sep 12 13:17:50 2019 +0200
TabGroup: using new tag: tobago-tab-content instead of div
Fix tests: TabGroup
issue: TOBAGO-1633: TS refactoring
---
.../renderkit/renderer/TabGroupRenderer.java | 14 ++----
.../myfaces/tobago/renderkit/css/TobagoClass.java | 1 -
.../tobago/renderkit/html/HtmlElements.java | 1 +
tobago-core/src/main/resources/scss/_tobago.scss | 8 ++--
.../content/20-component/070-tab/Tab_Group.test.js | 51 ++++++++++----------
.../40-test/2500-tab/Tabgroup_Style.test.js | 55 +++++++++++-----------
.../src/main/scss/_speyside-overwrites.scss | 12 ++---
.../src/main/npm/ts/tobago-tab.ts | 15 ++++++
8 files changed, 82 insertions(+), 75 deletions(-)
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/TabGroupRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/TabGroupRenderer.java
index 9049d0e..a37dfc3 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/TabGroupRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/TabGroupRenderer.java
@@ -223,7 +223,6 @@ public class TabGroupRenderer extends RendererBase implements ComponentSystemEve
writer.writeClassAttribute(BootstrapClass.CARD_HEADER);
writer.startElement(HtmlElements.UL);
writer.writeClassAttribute(
- TobagoClass.TAB_GROUP__HEADER,
BootstrapClass.NAV,
BootstrapClass.NAV_TABS,
BootstrapClass.CARD_HEADER_TABS);
@@ -242,9 +241,6 @@ public class TabGroupRenderer extends RendererBase implements ComponentSystemEve
final String tabId = tab.getClientId(facesContext);
Markup markup = tab.getMarkup() != null ? tab.getMarkup() : Markup.NULL;
- if (selectedIndex == index) {
- markup = markup.add(Markup.SELECTED);
- }
final FacesMessage.Severity maxSeverity
= ComponentUtils.getMaximumSeverityOfChildrenMessages(facesContext, tab);
if (maxSeverity != null) {
@@ -254,9 +250,8 @@ public class TabGroupRenderer extends RendererBase implements ComponentSystemEve
writer.startElement(HtmlElements.TOBAGO_TAB);
writer.writeIdAttribute(tabId);
writer.writeClassAttribute(
- TobagoClass.TAB,
- TobagoClass.TAB.createMarkup(markup),
BootstrapClass.NAV_ITEM,
+ TobagoClass.TAB.createMarkup(markup),
barFacet != null ? TobagoClass.TAB__BAR_FACET : null,
tab.getCustomClass());
writer.writeAttribute(HtmlAttributes.FOR, tabGroupClientId, true);
@@ -348,11 +343,10 @@ public class TabGroupRenderer extends RendererBase implements ComponentSystemEve
if (tab.isRendered() && (switchType == SwitchType.client || index == selectedIndex) && !tab.isDisabled()) {
final Markup markup = tab.getMarkup();
- writer.startElement(HtmlElements.DIV);
+ writer.startElement(HtmlElements.TOBAGO_TAB_CONTENT);
writer.writeClassAttribute(
- TobagoClass.TAB__CONTENT,
- TobagoClass.TAB__CONTENT.createMarkup(markup),
BootstrapClass.TAB_PANE,
+ TobagoClass.TAB__CONTENT.createMarkup(markup),
index == selectedIndex ? BootstrapClass.ACTIVE : null);
writer.writeAttribute(HtmlAttributes.ROLE, HtmlRoleValues.TABPANEL.toString(), false);
writer.writeIdAttribute(getTabPanelId(facesContext, tab));
@@ -361,7 +355,7 @@ public class TabGroupRenderer extends RendererBase implements ComponentSystemEve
tab.encodeAll(facesContext);
- writer.endElement(HtmlElements.DIV);
+ writer.endElement(HtmlElements.TOBAGO_TAB_CONTENT);
}
index++;
}
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/TobagoClass.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/TobagoClass.java
index e8ac261..33abe3a 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/TobagoClass.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/TobagoClass.java
@@ -210,7 +210,6 @@ public enum TobagoClass implements CssItem {
TAB__BAR_FACET("tobago-tab-barFacet"),
TAB__CONTENT("tobago-tab-content"),
TAB_GROUP("tobago-tabGroup"),
- TAB_GROUP__HEADER("tobago-tabGroup-header"),
TEXTAREA("tobago-textarea"),
TREE("tobago-tree"),
TREE__EXPANDED("tobago-tree-expanded"),
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java
index b7efb4d..fd2dc46 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/html/HtmlElements.java
@@ -141,6 +141,7 @@ public enum HtmlElements {
TOBAGO_STARS("tobago-stars"),
TOBAGO_SUGGEST("tobago-suggest"),
TOBAGO_TAB("tobago-tab"),
+ TOBAGO_TAB_CONTENT("tobago-tab-content"),
TOBAGO_TAB_GROUP("tobago-tab-group");
private final String value;
diff --git a/tobago-core/src/main/resources/scss/_tobago.scss b/tobago-core/src/main/resources/scss/_tobago.scss
index 906256d..046b925 100644
--- a/tobago-core/src/main/resources/scss/_tobago.scss
+++ b/tobago-core/src/main/resources/scss/_tobago.scss
@@ -1429,10 +1429,10 @@ tobago-suggest {
}
/* tab / tab-group ----------------------------------------------------------------- */
-.tobago-tabGroup-header, .tobago-tab-content {
+.tobago-tabGroup, .tobago-tab, .tobago-tab-content {
}
-.tobago-tab {
+tobago-tab {
.nav-link:not([href]):not([tabindex]) {
/* fix .nav-links without 'href'; bootstrap tab only works if 'href' is set */
@@ -1459,7 +1459,7 @@ tobago-suggest {
}
}
-.tobago-tab.tobago-tab-barFacet {
+tobago-tab.tobago-tab-barFacet {
display: flex;
> .nav-link {
@@ -1493,7 +1493,7 @@ tobago-suggest {
}
}
-.tobago-tabGroup {
+tobago-tab-group {
margin-bottom: $form-group-margin-bottom;
}
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/070-tab/Tab_Group.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/070-tab/Tab_Group.test.js
index b5acd10..97d9081 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/070-tab/Tab_Group.test.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/070-tab/Tab_Group.test.js
@@ -19,26 +19,25 @@ import {testFrameQuerySelectorFn} from "/script/tobago-test.js";
import {TobagoTestTool} from "/tobago/test/tobago-test-tool.js";
QUnit.test("Client: Select Tab 3", function (assert) {
- let hiddenInputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tabGroupClient\\:\\:activeIndex");
+ let tabGroupFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tabGroupClient");
let tab1Fn = testFrameQuerySelectorFn("#page\\:mainForm\\:tab1Client");
let tab3Fn = testFrameQuerySelectorFn("#page\\:mainForm\\:tab3Client");
- let tab3linkFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tab3Client .nav-link");
let TTT = new TobagoTestTool(assert);
TTT.asserts(5, function () {
- assert.equal(hiddenInputFn().value, 0);
- assert.ok(tab1Fn().classList.contains("tobago-tab-markup-selected"));
- assert.notOk(tab3Fn().classList.contains("tobago-tab-markup-selected"));
+ assert.equal(tabGroupFn().hiddenInput.value, 0);
+ assert.ok(tab1Fn().querySelector(".nav-link").classList.contains("active"));
+ assert.notOk(tab3Fn().querySelector(".nav-link").classList.contains("active"));
assert.ok(tab1Fn().classList.contains("tobago-tab-markup-one"));
assert.ok(tab3Fn().classList.contains("tobago-tab-markup-three"));
});
TTT.action(function () {
- tab3linkFn().click();
+ tab3Fn().querySelector(".nav-link").click();
});
TTT.asserts(5, function () {
- assert.equal(hiddenInputFn().value, 3);
- assert.notOk(tab1Fn().classList.contains("tobago-tab-markup-selected"));
- assert.ok(tab3Fn().classList.contains("tobago-tab-markup-selected"));
+ assert.equal(tabGroupFn().hiddenInput.value, 3);
+ assert.notOk(tab1Fn().querySelector(".nav-link").classList.contains("active"));
+ assert.ok(tab3Fn().querySelector(".nav-link").classList.contains("active"));
assert.ok(tab1Fn().classList.contains("tobago-tab-markup-one"));
assert.ok(tab3Fn().classList.contains("tobago-tab-markup-three"));
});
@@ -46,27 +45,26 @@ QUnit.test("Client: Select Tab 3", function (assert) {
});
QUnit.test("Ajax: Select Tab 3", function (assert) {
- let hiddenInputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tabGroupAjax\\:\\:activeIndex");
+ let tabGroupFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tabGroupAjax");
let tab1Fn = testFrameQuerySelectorFn("#page\\:mainForm\\:tab1Ajax");
let tab3Fn = testFrameQuerySelectorFn("#page\\:mainForm\\:tab3Ajax");
- let tab3linkFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tab3Ajax .nav-link");
let TTT = new TobagoTestTool(assert);
TTT.asserts(5, function () {
- assert.equal(hiddenInputFn().value, 0);
- assert.ok(tab1Fn().classList.contains("tobago-tab-markup-selected"));
- assert.notOk(tab3Fn().classList.contains("tobago-tab-markup-selected"));
+ assert.equal(tabGroupFn().hiddenInput.value, 0);
+ assert.ok(tab1Fn().querySelector(".nav-link").classList.contains("active"));
+ assert.notOk(tab3Fn().querySelector(".nav-link").classList.contains("active"));
assert.ok(tab1Fn().classList.contains("tobago-tab-markup-one"));
assert.ok(tab3Fn().classList.contains("tobago-tab-markup-three"));
});
TTT.action(function () {
- tab3linkFn().click();
+ tab3Fn().querySelector(".nav-link").click();
});
TTT.waitForResponse();
TTT.asserts(5, function () {
- assert.equal(hiddenInputFn().value, 3);
- assert.notOk(tab1Fn().classList.contains("tobago-tab-markup-selected"));
- assert.ok(tab3Fn().classList.contains("tobago-tab-markup-selected"));
+ assert.equal(tabGroupFn().hiddenInput.value, 3);
+ assert.notOk(tab1Fn().querySelector(".nav-link").classList.contains("active"));
+ assert.ok(tab3Fn().querySelector(".nav-link").classList.contains("active"));
assert.ok(tab1Fn().classList.contains("tobago-tab-markup-one"));
assert.ok(tab3Fn().classList.contains("tobago-tab-markup-three"));
});
@@ -74,27 +72,26 @@ QUnit.test("Ajax: Select Tab 3", function (assert) {
});
QUnit.test("FullReload: Select Tab 3", function (assert) {
- let hiddenInputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tabGroupFullReload\\:\\:activeIndex");
+ let tabGroupFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tabGroupFullReload");
let tab1Fn = testFrameQuerySelectorFn("#page\\:mainForm\\:tab1FullReload");
let tab3Fn = testFrameQuerySelectorFn("#page\\:mainForm\\:tab3FullReload");
- let tab3linkFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tab3FullReload .nav-link");
let TTT = new TobagoTestTool(assert);
TTT.asserts(5, function () {
- assert.equal(hiddenInputFn().value, 0);
- assert.ok(tab1Fn().classList.contains("tobago-tab-markup-selected"));
- assert.notOk(tab3Fn().classList.contains("tobago-tab-markup-selected"));
+ assert.equal(tabGroupFn().hiddenInput.value, 0);
+ assert.ok(tab1Fn().querySelector(".nav-link").classList.contains("active"));
+ assert.notOk(tab3Fn().querySelector(".nav-link").classList.contains("active"));
assert.ok(tab1Fn().classList.contains("tobago-tab-markup-one"));
assert.ok(tab3Fn().classList.contains("tobago-tab-markup-three"));
});
TTT.action(function () {
- tab3linkFn().click();
+ tab3Fn().querySelector(".nav-link").click();
});
TTT.waitForResponse();
TTT.asserts(5, function () {
- assert.equal(hiddenInputFn().value, 3);
- assert.notOk(tab1Fn().classList.contains("tobago-tab-markup-selected"));
- assert.ok(tab3Fn().classList.contains("tobago-tab-markup-selected"));
+ assert.equal(tabGroupFn().hiddenInput.value, 3);
+ assert.notOk(tab1Fn().querySelector(".nav-link").classList.contains("active"));
+ assert.ok(tab3Fn().querySelector(".nav-link").classList.contains("active"));
assert.ok(tab1Fn().classList.contains("tobago-tab-markup-one"));
assert.ok(tab3Fn().classList.contains("tobago-tab-markup-three"));
});
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/2500-tab/Tabgroup_Style.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/2500-tab/Tabgroup_Style.test.js
index bafbe61..2c76580 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/2500-tab/Tabgroup_Style.test.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/2500-tab/Tabgroup_Style.test.js
@@ -18,35 +18,36 @@
import {testFrameQuerySelectorFn} from "/script/tobago-test.js";
QUnit.test("test numbers of tab-group-index", function (assert) {
- let tabOneFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tabOne");
- let tabTwoFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tabTwo");
- let tabThreeFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tabThree");
- let tabFourFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tabFour");
- let tabFiveFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tabFive");
- let tabOneContentFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tabOne\\:\\:content");
- let tabTwoContentFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tabTwo\\:\\:content");
- let tabThreeContentFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tabThree\\:\\:content");
- let tabFourContentFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tabFour\\:\\:content");
- let tabFiveContentFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tabFive\\:\\:content");
+ let tab1Fn = testFrameQuerySelectorFn("#page\\:mainForm\\:tabOne");
+ let tab2Fn = testFrameQuerySelectorFn("#page\\:mainForm\\:tabTwo");
+ let tab3Fn = testFrameQuerySelectorFn("#page\\:mainForm\\:tabThree");
+ let tab4Fn = testFrameQuerySelectorFn("#page\\:mainForm\\:tabFour");
+ let tab5Fn = testFrameQuerySelectorFn("#page\\:mainForm\\:tabFive");
+ let tabContent1Fn = testFrameQuerySelectorFn("#page\\:mainForm\\:tabOne\\:\\:content");
+ let tabContent2Fn = testFrameQuerySelectorFn("#page\\:mainForm\\:tabTwo\\:\\:content");
+ let tabContent3Fn = testFrameQuerySelectorFn("#page\\:mainForm\\:tabThree\\:\\:content");
+ let tabContent4Fn = testFrameQuerySelectorFn("#page\\:mainForm\\:tabFour\\:\\:content");
+ let tabContent5Fn = testFrameQuerySelectorFn("#page\\:mainForm\\:tabFive\\:\\:content");
- assert.equal(tabOneFn().dataset.tobagoTabGroupIndex, "0");
- assert.equal(tabTwoFn().dataset.tobagoTabGroupIndex, "1");
- assert.equal(tabThreeFn(), null, "Tab three is not rendered");
- assert.equal(tabFourFn().dataset.tobagoTabGroupIndex, "3");
- assert.equal(tabFiveFn().dataset.tobagoTabGroupIndex, "4");
+ assert.equal(tab1Fn().index, 0);
+ assert.equal(tab2Fn().index, 1);
+ assert.equal(tab3Fn(), null, "Tab three is not rendered");
+ assert.equal(tab4Fn().index, 3);
+ assert.equal(tab5Fn().index, 4);
- assert.equal(tabOneContentFn().dataset.tobagoTabGroupIndex, "0");
- assert.equal(tabTwoContentFn().dataset.tobagoTabGroupIndex, "1");
- assert.equal(tabThreeContentFn(), null, "Tab three content is not rendered");
- assert.equal(tabFiveContentFn().dataset.tobagoTabGroupIndex, "4");
+ assert.equal(tabContent1Fn().index, 0);
+ assert.equal(tabContent2Fn().index, 1);
+ assert.equal(tabContent3Fn(), null, "Tab three content is not rendered");
+ assert.equal(tabContent4Fn(), null, "Tab four content is not rendered (disabled)");
+ assert.equal(tabContent5Fn().index, 4);
- assert.ok(tabOneFn().classList.contains("tobago-tab-markup-selected"));
- assert.notOk(tabTwoFn().classList.contains("tobago-tab-markup-selected"));
- assert.notOk(tabFourFn().classList.contains("tobago-tab-markup-selected"));
- assert.notOk(tabFiveFn().classList.contains("tobago-tab-markup-selected"));
+ assert.ok(tab1Fn().querySelector(".nav-link").classList.contains("active"));
+ assert.notOk(tab2Fn().querySelector(".nav-link").classList.contains("active"));
+ assert.notOk(tab4Fn().querySelector(".nav-link").classList.contains("active"));
+ assert.notOk(tab5Fn().querySelector(".nav-link").classList.contains("active"));
- assert.ok(tabOneContentFn().classList.contains("active"));
- assert.notOk(tabTwoContentFn().classList.contains("active"));
- assert.equal(tabFourContentFn(), null);
- assert.notOk(tabFiveContentFn().classList.contains("active"));
+ assert.ok(tabContent1Fn().classList.contains("active"));
+ assert.notOk(tabContent2Fn().classList.contains("active"));
+ assert.equal(tabContent4Fn(), null);
+ assert.notOk(tabContent5Fn().classList.contains("active"));
});
diff --git a/tobago-theme/tobago-theme-speyside/src/main/scss/_speyside-overwrites.scss b/tobago-theme/tobago-theme-speyside/src/main/scss/_speyside-overwrites.scss
index eadd9d0..03d31c3 100644
--- a/tobago-theme/tobago-theme-speyside/src/main/scss/_speyside-overwrites.scss
+++ b/tobago-theme/tobago-theme-speyside/src/main/scss/_speyside-overwrites.scss
@@ -522,7 +522,7 @@ p, .control-label {
}
}
-.tobago-tabGroup.card {
+tobago-tab-group.card {
border: 0;
> .card-header {
@@ -533,11 +533,11 @@ p, .control-label {
}
}
-.tobago-tab {
+tobago-tab {
margin-left: 0.2rem;
}
-.tobago-tabGroup .nav-tabs .nav-item {
+tobago-tab-group .nav-tabs .nav-item {
.nav-link {
color: $darkgreen;
@@ -556,7 +556,7 @@ p, .control-label {
}
}
-.tobago-tab .nav-link:not([href]):not([tabindex]):not(.active):not(.disabled) {
+tobago-tab .nav-link:not([href]):not([tabindex]):not(.active):not(.disabled) {
/* fix style form standard theme */
color: $darkgreen;
@@ -565,7 +565,7 @@ p, .control-label {
}
}
-.tobago-tab.tobago-tab-barFacet {
+tobago-tab.tobago-tab-barFacet {
.nav-link.disabled + div {
background-color: $gray-100;
}
@@ -617,7 +617,7 @@ p, .control-label {
}
}
-.tobago-box, .tobago-tabGroup {
+.tobago-box, tobago-tab-group {
.tobago-box {
.tobago-box-header {
// second level boxes
diff --git a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-tab.ts b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-tab.ts
index fcb822c..47a1606 100644
--- a/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-tab.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/npm/ts/tobago-tab.ts
@@ -114,7 +114,22 @@ export class Tab extends HTMLElement {
}
}
+export class TabContent extends HTMLElement {
+
+ constructor() {
+ super();
+ }
+
+ connectedCallback() {
+ }
+
+ get index(): number {
+ return parseInt(this.getAttribute("index"));
+ }
+}
+
document.addEventListener("DOMContentLoaded", function (event) {
window.customElements.define('tobago-tab', Tab);
+ window.customElements.define('tobago-tab-content', TabContent);
window.customElements.define('tobago-tab-group', TabGroup);
});