From 70ef2634e61ca254077c537fb43fd346652e3cf1 Mon Sep 17 00:00:00 2001 From: Jamie Thompson Date: Fri, 13 May 2022 11:36:51 +0200 Subject: [PATCH] JS not required to operate tabs or alt-details --- _includes/alt-details.html | 5 ++- _includes/tabsection.html | 33 +++++++++++----- _install_tabs/1-macos.html | 1 + _install_tabs/4-other.html | 4 +- _install_tabs/fr-1-macos.html | 1 + _install_tabs/fr-4-other.html | 4 +- _install_tabs/ja-1-macos.html | 1 + _install_tabs/ja-4-other.html | 4 +- _sass/components/alt-details.scss | 30 ++++++++++++--- _sass/components/tab.scss | 62 +++++++++++++++++++++++++------ _sass/layout/inner-main.scss | 12 +++--- resources/js/functions.js | 45 +--------------------- 12 files changed, 118 insertions(+), 84 deletions(-) diff --git a/_includes/alt-details.html b/_includes/alt-details.html index 457544612e..fc2d94c85e 100644 --- a/_includes/alt-details.html +++ b/_includes/alt-details.html @@ -1,5 +1,6 @@ -
- +
+ +
{{include.detail}}
diff --git a/_includes/tabsection.html b/_includes/tabsection.html index ad62625e63..f779ce2efb 100644 --- a/_includes/tabsection.html +++ b/_includes/tabsection.html @@ -1,19 +1,32 @@ -
-
    +
    + {% for tabRoot in include.collection %} + {% if tabRoot.language == include.language %} + + {% endif %} + {% endfor %} + - {% for tabRoot in include.collection %} - {% if tabRoot.language == include.language %} -
    - {{tabRoot.content}} +
    + {% for tabRoot in include.collection %} + {% if tabRoot.language == include.language %} +
    + {{tabRoot.content}} +
    + {% endif %} + {% endfor %}
    - {% endif %} - {% endfor %}
    diff --git a/_install_tabs/1-macos.html b/_install_tabs/1-macos.html index 2f34dcbe3b..f8caa80c19 100644 --- a/_install_tabs/1-macos.html +++ b/_install_tabs/1-macos.html @@ -13,6 +13,7 @@
    {% endcapture %} {% include alt-details.html + id='cs-setup-macos-nobrew' title="Alternatively, if you don't use Homebrew:" detail=homebrewDetail %} diff --git a/_install_tabs/4-other.html b/_install_tabs/4-other.html index 638409d939..8332bba359 100644 --- a/_install_tabs/4-other.html +++ b/_install_tabs/4-other.html @@ -1,13 +1,13 @@ --- tabId: other tabLabel: Other -fallbackNoJS: true +defaultTab: true language: en ---

    Follow the documentation from Coursier on how to install and run cs setup.

    diff --git a/_install_tabs/fr-1-macos.html b/_install_tabs/fr-1-macos.html index 2aa67ed447..99fc4aaa34 100644 --- a/_install_tabs/fr-1-macos.html +++ b/_install_tabs/fr-1-macos.html @@ -12,6 +12,7 @@
    {% endcapture %} {% include alt-details.html + id='cs-setup-macos-nobrew' title="Alternativement, si vous n'utilisez pas Homebrew:" detail=homebrewDetail %} diff --git a/_install_tabs/fr-4-other.html b/_install_tabs/fr-4-other.html index 770366796e..c54fd24c27 100644 --- a/_install_tabs/fr-4-other.html +++ b/_install_tabs/fr-4-other.html @@ -1,13 +1,13 @@ --- tabId: other tabLabel: Other -fallbackNoJS: true +defaultTab: true language: fr ---

    Suivez les instructions pour installer la commande cspuis exécutez ./cs setup.

    diff --git a/_install_tabs/ja-1-macos.html b/_install_tabs/ja-1-macos.html index acb2ae7798..553508b039 100644 --- a/_install_tabs/ja-1-macos.html +++ b/_install_tabs/ja-1-macos.html @@ -12,6 +12,7 @@
    {% endcapture %} {% include alt-details.html + id='cs-setup-macos-nobrew' title="または、Homebrewを使用しない場合は" detail=homebrewDetail %} diff --git a/_install_tabs/ja-4-other.html b/_install_tabs/ja-4-other.html index 5a4b39e484..b923a3b164 100644 --- a/_install_tabs/ja-4-other.html +++ b/_install_tabs/ja-4-other.html @@ -1,13 +1,13 @@ --- tabId: other tabLabel: Other -fallbackNoJS: true +defaultTab: true language: ja ---

    手順に従って cs ランチャーをインストールし、その次に以下を実行します。./cs setup

    diff --git a/_sass/components/alt-details.scss b/_sass/components/alt-details.scss index bacb1f2b3d..b058364039 100644 --- a/_sass/components/alt-details.scss +++ b/_sass/components/alt-details.scss @@ -7,6 +7,9 @@ .alt-details-toggle { @include span-columns(12); + font-family: $base-font-family; + line-height: normal; + text-align: center; border: none; background-color: $brand-tertiary; padding: 5px 10px; @@ -21,7 +24,8 @@ } &:after { - content: "\f13a"; // + // show a right arrow at the end of the toggle element + content: "\f138"; // font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 15px; @@ -29,15 +33,31 @@ margin-top: 2px; } - &.alt-details-closed:after { - content: "\f138"; // - } + } + + .alt-details-control+.alt-details-toggle+.alt-details-detail { + // by default, hide the details + position: absolute; + top: -999em; + left: -999em; + } + + .alt-details-control:checked+.alt-details-toggle+.alt-details-detail { + // show the details when the control is checked + position: static; + } + + .alt-details-control:checked+.alt-details-toggle:after { + // change the marker on the toggle label to a down arrow + content: "\f13a"; // } .alt-details-detail { // The detail box appears to be underneath the toggle button // so we add a padding to the top and push it up. - border: $base-border-gray; + border-bottom: $base-border-gray; + border-left: $base-border-gray; + border-right: $base-border-gray; padding-top: 15px; margin-top: 15px; } diff --git a/_sass/components/tab.scss b/_sass/components/tab.scss index cbd5010d79..00309cd483 100755 --- a/_sass/components/tab.scss +++ b/_sass/components/tab.scss @@ -2,6 +2,8 @@ //------------------------------------------------ //------------------------------------------------ +// dynamic tab switching based on https: //levelup.gitconnected.com/tabbed-interfaces-without-javascript-661bab1eaec8 + .nav-tab { border-bottom: $base-border-gray; @include display(flex); @@ -10,6 +12,7 @@ .item-tab { + label, a { transition: none; // do not animate the transition to active color: $base-font-color-light; @@ -27,13 +30,15 @@ &:hover { cursor: pointer; } + } - &.active { - border-bottom: 2px solid $brand-primary; - padding: 0 20px 8px; // so text does not jump up when active - color: $brand-primary; - pointer-events: none; - } + label { + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } } @@ -42,6 +47,7 @@ @include justify-content(space-between); .item-tab { + label, a { transition: none; // do not animate the transition to active padding: 0 10px 10px; @@ -51,6 +57,22 @@ } } +.nav-tab>.item-tab>a.active, // used in the blog +.tabsection>input:nth-child(1):checked~.nav-tab .item-tab:nth-child(1) label, +.tabsection>input:nth-child(2):checked~.nav-tab .item-tab:nth-child(2) label, +.tabsection>input:nth-child(3):checked~.nav-tab .item-tab:nth-child(3) label, +.tabsection>input:nth-child(4):checked~.nav-tab .item-tab:nth-child(4) label, +.tabsection>input:nth-child(5):checked~.nav-tab .item-tab:nth-child(5) label, +.tabsection>input:nth-child(6):checked~.nav-tab .item-tab:nth-child(6) label, +.tabsection>input:nth-child(7):checked~.nav-tab .item-tab:nth-child(7) label, +.tabsection>input:nth-child(8):checked~.nav-tab .item-tab:nth-child(8) label, +.tabsection>input:nth-child(9):checked~.nav-tab .item-tab:nth-child(9) label { + border-bottom: 2px solid $brand-primary; + padding: 0 20px 8px; // so text does not jump up when active + color: $brand-primary; + pointer-events: none; +} + .tabsection { border-bottom: $base-border-gray; border-left: $base-border-gray; @@ -67,12 +89,30 @@ list-style: none; } } -} -.tabcontent { - display: none; + input { // hide the input because they are not interactive + display: block; /* "enable" hidden elements in IE/edge */ + position: absolute; /* then hide them off-screen */ + left: -100%; + } - &.active { - display: block; + .tabcontent { + section { // by default, hide all sections until the user clicks on the associated label + position: absolute; + top: -999em; + left: -999em; + } } } + +.tabsection>input:nth-child(1):checked~.tabcontent section:nth-child(1), +.tabsection>input:nth-child(2):checked~.tabcontent section:nth-child(2), +.tabsection>input:nth-child(3):checked~.tabcontent section:nth-child(3), +.tabsection>input:nth-child(4):checked~.tabcontent section:nth-child(4), +.tabsection>input:nth-child(5):checked~.tabcontent section:nth-child(5), +.tabsection>input:nth-child(6):checked~.tabcontent section:nth-child(6), +.tabsection>input:nth-child(7):checked~.tabcontent section:nth-child(7), +.tabsection>input:nth-child(8):checked~.tabcontent section:nth-child(8), +.tabsection>input:nth-child(9):checked~.tabcontent section:nth-child(9) { + position: static; +} diff --git a/_sass/layout/inner-main.scss b/_sass/layout/inner-main.scss index 6233be6fdb..3e145637bc 100755 --- a/_sass/layout/inner-main.scss +++ b/_sass/layout/inner-main.scss @@ -2,16 +2,16 @@ //------------------------------------------------ //------------------------------------------------ +#inner-main>section:nth-child(2) { + // corresponds to area with the content below the title + position: relative; + margin-top: -80px; // have it overlap with the title area +} + #inner-main { background: $gray-lighter; padding-bottom: $padding-xlarge; - - section:nth-child(2) { - position: relative; - top: -80px; - } - .inner-box { padding: $padding-medium; background: #fff; diff --git a/resources/js/functions.js b/resources/js/functions.js index 4d55b546dd..d6524a72f4 100644 --- a/resources/js/functions.js +++ b/resources/js/functions.js @@ -392,21 +392,6 @@ function getOS() { return osname; } -$(document).ready(function () { - // for each .alt-details div, find the .alt-details-toggle button, - // and add a click handler to toggle the visibility of the .alt-details-detail - - $('.alt-details').each(function () { - var toggle = $(this).find('.alt-details-toggle'); - var details = $(this).find('.alt-details-detail'); - toggle.click(function () { - details.css('display') === 'none' ? details.show() : details.hide(); - toggle.toggleClass('alt-details-closed'); - }); - toggle.click(); - }); -}); - $(document).ready(function () { // for each code snippet area, find the copy button, // and add a click listener that will copy text from @@ -420,29 +405,6 @@ $(document).ready(function () { }); }); -$(document).ready(function () { - $('.tabsection').each(function () { - var tabsection = this; - $(tabsection).find('.nav-tab > .item-tab > .item-tab-link').each(function () { - var tabLink = this; - var targetTab = $(tabLink).attr('data-target'); - $(tabLink).click(function () { - console.log("clicked on " + targetTab); - $(tabsection).find('.nav-tab > .item-tab > .item-tab-link').each(function () { - var otherTab = this; - var otherTarget = $(otherTab).attr('data-target'); - otherTarget === targetTab ? $(otherTab).addClass('active') : $(otherTab).removeClass('active'); - }) - $(tabsection).children('.tabcontent').each(function () { - var tabContent = this; - var tabId = $(tabContent).attr('data-tab'); - targetTab === tabId ? $(tabContent).addClass('active') : $(tabContent).removeClass('active'); - }); - }); - }); - }); -}); - $(document).ready(function () { // click the get-started tab corresponding to the users OS. if ($(".main-download").length) { @@ -450,12 +412,7 @@ $(document).ready(function () { if (os === 'unix') { os = 'linux'; } - $("#install-cs-setup-tabs").find('.nav-tab > .item-tab > .item-tab-link').each(function () { - var targetTab = $(this).attr("data-target"); - if (targetTab === os) { - $(this).click(); - } - }); + $("#install-cs-setup-tabs").find('input[data-target=' + os + ']').prop("checked", true); } });