gamv/ds2-core
1
0
Fork 0
Code Issues 12 Releases 8 Activity

Focusing the tab seems to have improved the reliability of the click happening.

Browse Source
This commit is contained in:
A McIlwraith 2025-02-04 13:06:52 -05:00
parent a204f7fc98
commit d5cbcb5807
6 changed files with 16 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/assets/scaffolding-min.js vendored
View File

@ -3290,6 +3290,7 @@ function init() {
if (document.location.hash != "" && document.location.hash.substring(0, 5) == "#tab-") { if (document.location.hash != "" && document.location.hash.substring(0, 5) == "#tab-") {
waitForElement(document.location.hash).then(function (el) { waitForElement(document.location.hash).then(function (el) {
el.scrollIntoView(); el.scrollIntoView();
el.focus();
el.dispatchEvent(click); el.dispatchEvent(click);
}); });
} }

2
public/assets/scaffolding.css
View File

File diff suppressed because one or more lines are too long

60
public/patterns/core/tabs/index.html
View File

@ -42,58 +42,7 @@
div(tab="[tab title]") div(tab="[tab title]")
div(tab="[tab title]") div(tab="[tab title]")
</pre> </pre>
<pre class="language-css" tab="css">tabset, .tab-group { <pre class="language-css" tab="css">.tab-group,tabset{margin:2rem 0 1rem 0}.tab-group>ul,tabset>ul{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;padding:0}.tab-group>ul li.separator,tabset>ul li.separator{border-bottom:1px solid #7f7f7f;border-left:1px solid #7f7f7f;display:inline-block;margin:0.45rem 0 0 0;width:100%}.tab-group .tab-hidden,tabset .tab-hidden{display:none}.tab-group [role=tab],tabset [role=tab]{background-color:#FFF;border-left:1px solid #7f7f7f;border-top:1px solid #7f7f7f;border-radius:0.5rem 0.5rem 0 0;color:#000;cursor:pointer;margin:0;display:inline;padding:1rem 1.5rem 0.14rem 1.5rem;z-index:2}.tab-group [role=tab]:last-of-type,tabset [role=tab]:last-of-type{border-right:1px solid #7f7f7f}.tab-group [role=tab]:not(.selected),tabset [role=tab]:not(.selected){background-color:#f0f0f0;border-bottom:1px solid #7f7f7f;color:#000}.tab-group [role=tab] span,tabset [role=tab] span{display:block;margin:0 0 0.5rem 0}.tab-group [role=tabpanel],tabset [role=tabpanel]{background-color:#FFF;border:1px solid #7f7f7f;border-top:none;padding:1rem;z-index:1}.tab-group [role=tabpanel]:not(.open),tabset [role=tabpanel]:not(.open){display:none}</pre>
margin: 2rem 0 1rem 0;
}
tabset > ul, .tab-group > ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0;
padding: 0;
}
tabset > ul li.separator, .tab-group > ul li.separator {
border-bottom: 1px solid #7f7f7f;
border-left: 1px solid #7f7f7f;
display: inline-block;
margin: 0.45rem 0 0 0;
width: 100%;
}
tabset .tab-hidden, .tab-group .tab-hidden {
display: none;
}
tabset [role=tab], .tab-group [role=tab] {
background-color: #FFF;
border-left: 1px solid #7f7f7f;
border-top: 1px solid #7f7f7f;
border-radius: 0.5rem 0.5rem 0 0;
cursor: pointer;
margin: 0;
display: inline;
padding: 1rem 1.5rem 0.14rem 1.5rem;
z-index: 2;
}
tabset [role=tab]:last-of-type, .tab-group [role=tab]:last-of-type {
border-right: 1px solid #7f7f7f;
}
tabset [role=tab]:not(.selected), .tab-group [role=tab]:not(.selected) {
background-color: #f0f0f0;
border-bottom: 1px solid #7f7f7f;
}
tabset [role=tab] span, .tab-group [role=tab] span {
display: block;
margin: 0 0 0.5rem 0;
}
tabset [role=tabpanel], .tab-group [role=tabpanel] {
background-color: #FFF;
border: 1px solid #7f7f7f;
border-top: none;
padding: 1rem;
z-index: 1;
}
tabset [role=tabpanel]:not(.open), .tab-group [role=tabpanel]:not(.open) {
display: none;
}</pre>
<div tab="scss"> <div tab="scss">
<pre class="language-sass">@import "scss/core/tabs/_tabs"; <pre class="language-sass">@import "scss/core/tabs/_tabs";
@include tabs{ @include tabs{
@ -105,7 +54,9 @@ tabset [role=tabpanel]:not(.open), .tab-group [role=tabpanel]:not(.open) {
$tab-border: #7f7f7f !default; $tab-border: #7f7f7f !default;
$tab-selected: #FFF !default; $tab-selected: #FFF !default;
$tab-selected-text: #000 !default;
$tab-notselected: #f0f0f0 !default; $tab-notselected: #f0f0f0 !default;
$tab-notselected-text: #000 !default;
@mixin tabs { @mixin tabs {
tabset, .tab-group { tabset, .tab-group {
@ -133,7 +84,8 @@ $tab-notselected: #f0f0f0 !default;
border-left: 1px solid $tab-border; border-left: 1px solid $tab-border;
border-top: 1px solid $tab-border; border-top: 1px solid $tab-border;
border-radius: .5rem .5rem 0 0; border-radius: .5rem .5rem 0 0;
cursor:pointer; color: $tab-selected-text;
cursor: pointer;
margin: 0; margin: 0;
display: inline; display: inline;
padding: 1rem 1.5rem .14rem 1.5rem; padding: 1rem 1.5rem .14rem 1.5rem;
@ -146,6 +98,7 @@ $tab-notselected: #f0f0f0 !default;
&:not(.selected) { &:not(.selected) {
background-color: $tab-notselected; background-color: $tab-notselected;
border-bottom: 1px solid $tab-border; border-bottom: 1px solid $tab-border;
color: $tab-notselected-text;
} }
span { span {
@ -272,6 +225,7 @@ export function init(container = document, spacer = true, args = {}) {
if (document.location.hash != "" && document.location.hash.substring(0,5) == "#tab-") { if (document.location.hash != "" && document.location.hash.substring(0,5) == "#tab-") {
waitForElement(document.location.hash).then((el) => { waitForElement(document.location.hash).then((el) => {
el.scrollIntoView(); el.scrollIntoView();
el.focus();
el.dispatchEvent(click); el.dispatchEvent(click);
}); });

1
src/pg/patterns/core/tabs/_tabs.js
View File

@ -97,6 +97,7 @@ export function init(container = document, spacer = true, args = {}) {
if (document.location.hash != "" && document.location.hash.substring(0,5) == "#tab-") { if (document.location.hash != "" && document.location.hash.substring(0,5) == "#tab-") {
waitForElement(document.location.hash).then((el) => { waitForElement(document.location.hash).then((el) => {
el.scrollIntoView(); el.scrollIntoView();
el.focus();
el.dispatchEvent(click); el.dispatchEvent(click);
}); });

6
src/pg/patterns/core/tabs/_tabs.scss
View File

@ -3,7 +3,9 @@
$tab-border: #7f7f7f !default; $tab-border: #7f7f7f !default;
$tab-selected: #FFF !default; $tab-selected: #FFF !default;
$tab-selected-text: #000 !default;
$tab-notselected: #f0f0f0 !default; $tab-notselected: #f0f0f0 !default;
$tab-notselected-text: #000 !default;
@mixin tabs { @mixin tabs {
tabset, .tab-group { tabset, .tab-group {
@ -31,7 +33,8 @@ $tab-notselected: #f0f0f0 !default;
border-left: 1px solid $tab-border; border-left: 1px solid $tab-border;
border-top: 1px solid $tab-border; border-top: 1px solid $tab-border;
border-radius: .5rem .5rem 0 0; border-radius: .5rem .5rem 0 0;
cursor:pointer; color: $tab-selected-text;
cursor: pointer;
margin: 0; margin: 0;
display: inline; display: inline;
padding: 1rem 1.5rem .14rem 1.5rem; padding: 1rem 1.5rem .14rem 1.5rem;
@ -44,6 +47,7 @@ $tab-notselected: #f0f0f0 !default;
&:not(.selected) { &:not(.selected) {
background-color: $tab-notselected; background-color: $tab-notselected;
border-bottom: 1px solid $tab-border; border-bottom: 1px solid $tab-border;
color: $tab-notselected-text;
} }
span { span {

53
src/pg/patterns/core/tabs/tabs.css
View File

@ -1,52 +1 @@
tabset, .tab-group { .tab-group,tabset{margin:2rem 0 1rem 0}.tab-group>ul,tabset>ul{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;padding:0}.tab-group>ul li.separator,tabset>ul li.separator{border-bottom:1px solid #7f7f7f;border-left:1px solid #7f7f7f;display:inline-block;margin:0.45rem 0 0 0;width:100%}.tab-group .tab-hidden,tabset .tab-hidden{display:none}.tab-group [role=tab],tabset [role=tab]{background-color:#FFF;border-left:1px solid #7f7f7f;border-top:1px solid #7f7f7f;border-radius:0.5rem 0.5rem 0 0;color:#000;cursor:pointer;margin:0;display:inline;padding:1rem 1.5rem 0.14rem 1.5rem;z-index:2}.tab-group [role=tab]:last-of-type,tabset [role=tab]:last-of-type{border-right:1px solid #7f7f7f}.tab-group [role=tab]:not(.selected),tabset [role=tab]:not(.selected){background-color:#f0f0f0;border-bottom:1px solid #7f7f7f;color:#000}.tab-group [role=tab] span,tabset [role=tab] span{display:block;margin:0 0 0.5rem 0}.tab-group [role=tabpanel],tabset [role=tabpanel]{background-color:#FFF;border:1px solid #7f7f7f;border-top:none;padding:1rem;z-index:1}.tab-group [role=tabpanel]:not(.open),tabset [role=tabpanel]:not(.open){display:none}
margin: 2rem 0 1rem 0;
}
tabset > ul, .tab-group > ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0;
padding: 0;
}
tabset > ul li.separator, .tab-group > ul li.separator {
border-bottom: 1px solid #7f7f7f;
border-left: 1px solid #7f7f7f;
display: inline-block;
margin: 0.45rem 0 0 0;
width: 100%;
}
tabset .tab-hidden, .tab-group .tab-hidden {
display: none;
}
tabset [role=tab], .tab-group [role=tab] {
background-color: #FFF;
border-left: 1px solid #7f7f7f;
border-top: 1px solid #7f7f7f;
border-radius: 0.5rem 0.5rem 0 0;
cursor: pointer;
margin: 0;
display: inline;
padding: 1rem 1.5rem 0.14rem 1.5rem;
z-index: 2;
}
tabset [role=tab]:last-of-type, .tab-group [role=tab]:last-of-type {
border-right: 1px solid #7f7f7f;
}
tabset [role=tab]:not(.selected), .tab-group [role=tab]:not(.selected) {
background-color: #f0f0f0;
border-bottom: 1px solid #7f7f7f;
}
tabset [role=tab] span, .tab-group [role=tab] span {
display: block;
margin: 0 0 0.5rem 0;
}
tabset [role=tabpanel], .tab-group [role=tabpanel] {
background-color: #FFF;
border: 1px solid #7f7f7f;
border-top: none;
padding: 1rem;
z-index: 1;
}
tabset [role=tabpanel]:not(.open), .tab-group [role=tabpanel]:not(.open) {
display: none;
}