From 6eb8220d6e3e04ae715f89edeb2726c5322424ca Mon Sep 17 00:00:00 2001 From: Pk11 Date: Fri, 12 Mar 2021 19:45:57 -0600 Subject: [PATCH] Improve tabs - They now work as tabs without JS - Use an include for cleaner markdown - A little bit nicer code overall, annoying that the split is needed, but otherwise pretty nice now --- _includes/tabs.html | 7 ++ assets/css/style.scss | 33 ++++++++ assets/js/tabs.js | 84 ++++++------------- pages/_en-US/ds-index/3ds-forwarders.md | 21 ++--- .../twilightmenu/installing-3ds-manual.md | 2 +- pages/_en-US/twilightmenu/installing-3ds.md | 29 +++---- .../twilightmenu/updating-3ds-manual.md | 2 +- pages/_en-US/twilightmenu/updating-3ds.md | 22 ++--- 8 files changed, 93 insertions(+), 107 deletions(-) create mode 100644 _includes/tabs.html diff --git a/_includes/tabs.html b/_includes/tabs.html new file mode 100644 index 00000000..ee537a80 --- /dev/null +++ b/_includes/tabs.html @@ -0,0 +1,7 @@ +
+ {% for tab in page.tabs[include.index] %} + + +
{{ include.tabs[forloop.index0] | markdownify }}
+ {% endfor %} +
diff --git a/assets/css/style.scss b/assets/css/style.scss index c3f1a253..e064c0f5 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -432,6 +432,39 @@ a.footnote::after { right: unset; } +// Tabs +.tab-container { + display: flex; + flex-wrap: wrap; +} + +.tab-container > .tab { + display: none; + order: 99; + padding-top: 1rem; + width: 100%; +} + +input:checked+label+.tab { + display: block; +} + +.tab-container > label { + margin-right: 0.25rem; +} + +input:checked+label.btn-outline-secondary { + color: #fff; + background-color: #6c757d; + border-color: #6c757d; +} + +input:checked+label.btn-outline-secondary:hover, input:checked+label.btn-outline-secondary:active, input:checked+label.btn-outline-secondary:focus { + color: #fff; + background-color: #5c636a; + border-color: #565e64; +} + @media only screen and (min-width: 576px) { // Version of .position-absolute that only triggers for sm+ .position-absolute-sm { diff --git a/assets/js/tabs.js b/assets/js/tabs.js index 2931c558..59bfc96a 100644 --- a/assets/js/tabs.js +++ b/assets/js/tabs.js @@ -1,64 +1,32 @@ -function openTab(event, target) { - for(let element of target.parentNode.parentNode.children) { - if (element.id.includes("tab")) { - element.style.display = "none"; - } - } +const platforms = { + "Win32": "tab-windows", + "MacIntel": "tab-macos" +}; - for(let element of target.parentNode.children) { - element.classList.remove("btn-secondary"); - element.classList.add("btn-outline-secondary"); - } - - document.getElementById(`tab-${target.dataset.tabName}`).style.display = "block"; - target.classList.remove("btn-outline-secondary"); - target.classList.add("btn-secondary"); - - if(event) { - let url = new URL(window.location); - url.searchParams.set("tab", target.dataset.tabName); - history.pushState({}, "", url); - } +function setTab(tab) { + let url = new URL(window.location); + url.searchParams.set("tab", tab); + history.pushState({}, "", url); } -// Remove links from tab buttons -for(a of document.getElementsByClassName("tab-link")) { - a.href = "javascript:void(0);"; -} - -// Open the tabs for the current OS or the default +// Open the tabs for the current OS or the one in the URL for(let tabGroup of document.getElementsByClassName("tab-container")) { - let tab = new URL(window.location).searchParams.get("tab"); - if(tab) { - openTab(null, Array.from(tabGroup.children[0].children).filter(r => r.dataset.tabName ==tab)[0]); - break; - } + let tab = null; - for(let tab of tabGroup.children[0].children) { - if(tabGroup.classList.contains("tab-os")) { - if(navigator.platform.includes("Win")) { - if(tab.classList.contains("tab-windows")) { - openTab(null, tab); - break; - } else if(tab.classList.contains("other")) { - openTab(null, tab); - } - } else if(navigator.platform.includes("Mac")) { - if(tab.classList.contains("tab-macos")) { - openTab(null, tab); - break; - } else if(tab.classList.contains("other")) { - openTab(null, tab); - } - } else { - if(tab.classList.contains("tab-other")) { - openTab(null, tab); - break; - } - } - } else if(tab.classList.contains("tab-default")) { - openTab(null, tab); - break; - } - } + // Try get tab from URL + let urlTab = new URL(window.location).searchParams.get("tab"); + if(urlTab) + tab = Array.from(tabGroup.children).filter(r => r.id == `tab-${urlTab}`)[0]; + + // Try get tab for OS + if(!tab) + tab = Array.from(tabGroup.children).filter(r => r.id == platforms[navigator.platform])[0]; + + // Fall back to "other" tab + if(!tab) + tab = Array.from(tabGroup.children).filter(r => r.id == "tab-other")[0]; + + // If a tab was found, open it + if(tab) + tab.click(); } diff --git a/pages/_en-US/ds-index/3ds-forwarders.md b/pages/_en-US/ds-index/3ds-forwarders.md index 606a5948..4ea3f002 100644 --- a/pages/_en-US/ds-index/3ds-forwarders.md +++ b/pages/_en-US/ds-index/3ds-forwarders.md @@ -5,6 +5,9 @@ section: ds-index category: guides title: DS Game Forwarders (3DS) description: How to create CIA forwarders to have your DS games on your 3DS's home menu +tabs: + - tab-sd-card: SD card + tab-flashcard: Flashcard --- If you have any issues, check the FAQs on the [GBAtemp thread](https://gbatemp.net/threads/nds-forwarder-cias-for-your-home-menu.426174/). @@ -85,6 +88,7 @@ After you extract the pack, you can edit `sd:/_nds/nds-bootstrap.ini` and change - `BOOST_CPU`: If set to 1, TWL clock speed is used, so lags begone - `SOUND_FREQ`: If set to 1, sound will play at 48 kHz, instead of 32 kHz {% endcapture%} +{% assign tab-sd-card = tab-sd-card | split: "" %} {% capture tab-flashcard %} 1. Download one of these packs: @@ -103,21 +107,10 @@ After you extract the pack for your card, you can edit `sd:/_nds/ntr_forwarder.i - `DISABLEANIMATION`: If set to `1` or B is held, the DS / DSi boot screen is skipped - `HEALTHSAFETYMSG`: If set to `1`, the boot screen's health and safety message will appear on the bottom screen, otherwise the bottom screen stays white with no health and safety message {% endcapture %} +{% assign tab-flashcard = tab-flashcard | split: "" %} -
-
- SD card - Flashcard -
-
- - {{ tab-sd-card | markdownify }} -
-
- - {{ tab-flashcard | markdownify }} -
-
+{% assign tabs = tab-sd-card | concat: tab-flashcard %} +{% include tabs.html index=0 tabs=tabs %} ### Part 2: Getting the AP fix files from TWiLight Menu++ If you already have TWiLight Menu++, skip to the next section. diff --git a/pages/_en-US/twilightmenu/installing-3ds-manual.md b/pages/_en-US/twilightmenu/installing-3ds-manual.md index e6c03529..75df17d3 100644 --- a/pages/_en-US/twilightmenu/installing-3ds-manual.md +++ b/pages/_en-US/twilightmenu/installing-3ds-manual.md @@ -1,7 +1,7 @@ --- lang: en-US layout: redirect -destination: installing-3ds?tab=manual#tab-manual +destination: installing-3ds?tab=manual title: Installing (3DS, Manual) --- diff --git a/pages/_en-US/twilightmenu/installing-3ds.md b/pages/_en-US/twilightmenu/installing-3ds.md index b9dea60b..51e518dc 100644 --- a/pages/_en-US/twilightmenu/installing-3ds.md +++ b/pages/_en-US/twilightmenu/installing-3ds.md @@ -5,6 +5,10 @@ section: twilightmenu category: installing title: Installing (3DS) description: How to install TWiLight Menu++ on the Nintendo 3DS +tabs: + - working-camera: Working camera + non-working-camera: Non-working camera + manual: Manual --- You will first need to have Custom Firmware on your 3DS, follow [3ds.hacks.guide](https://3ds.hacks.guide) to install it @@ -21,6 +25,7 @@ You will first need to have Custom Firmware on your 3DS, follow [3ds.hacks.guide 1. Press A or tap the download icon in the sidebar and select `TWiLight Menu++` to install it - This will take a while {% endcapture %} +{% assign tab-working-camera = tab-working-camera | split: "" %} {% capture tab-non-working-camera %} 1. Download the `Universal-Updater.cia` file from the [Universal-Updater release page](https://github.com/Universal-Team/Universal-Updater/releases) @@ -35,6 +40,7 @@ You will first need to have Custom Firmware on your 3DS, follow [3ds.hacks.guide 1. Press A or tap the download icon in the sidebar and select `TWiLight Menu++` to install it - This will take a while {% endcapture %} +{% assign tab-non-working-camera = tab-non-working-camera | split: "" %} {% capture tab-manual %} 1. Download the latest version of `TWiLightMenu-3DS.7z` from [the releases page](https://github.com/DS-Homebrew/TWiLightMenu/releases) @@ -45,24 +51,9 @@ You will first need to have Custom Firmware on your 3DS, follow [3ds.hacks.guide 1. Copy the two `.cia` files to your SD card root 1. On your 3DS, install the two CIAs with FBI {% endcapture %} +{% assign tab-manual = tab-manual | split: "" %} ### Installing -
-
- Working camera - Non-working camera - Manual -
-
- - {{ tab-working-camera | markdownify }} -
-
- - {{ tab-non-working-camera | markdownify }} -
-
- - {{ tab-manual | markdownify }} -
-
+ +{% assign tabs = tab-working-camera | concat: tab-non-working-camera | concat: tab-manual %} +{% include tabs.html index=0 tabs=tabs %} diff --git a/pages/_en-US/twilightmenu/updating-3ds-manual.md b/pages/_en-US/twilightmenu/updating-3ds-manual.md index b143b60e..97337727 100644 --- a/pages/_en-US/twilightmenu/updating-3ds-manual.md +++ b/pages/_en-US/twilightmenu/updating-3ds-manual.md @@ -1,6 +1,6 @@ --- lang: en-US layout: redirect -destination: updating-3ds?tab=manual#tab-manual +destination: updating-3ds?tab=manual title: Updating (3DS, Manual) --- diff --git a/pages/_en-US/twilightmenu/updating-3ds.md b/pages/_en-US/twilightmenu/updating-3ds.md index 4e777817..ec9a14f1 100644 --- a/pages/_en-US/twilightmenu/updating-3ds.md +++ b/pages/_en-US/twilightmenu/updating-3ds.md @@ -5,6 +5,9 @@ section: twilightmenu category: updating title: Updating (3DS) description: How to update TWiLight Menu++ on the Nintendo 3DS +tabs: + - universal-updater: Universal-Updater + manual: Manual --- If updating from a version older than v16.4.0, please move your `.sav` files for DS games to a new folder called `saves`, with the `saves` folder being in the same place as the DS roms. @@ -17,6 +20,7 @@ If updating from a version older than v16.4.0, please move your `.sav` files for 1. Press A or tap the download icon in the sidebar and select `TWiLight Menu++` to install it - This will take a while {% endcapture %} +{% assign tab-universal-updater = tab-universal-updater | split: "" %} {% capture tab-manual %} 1. Download the latest version of `TWiLightMenu-3DS.7z` from [the releases page](https://github.com/DS-Homebrew/TWiLightMenu/releases) @@ -26,22 +30,12 @@ If updating from a version older than v16.4.0, please move your `.sav` files for 1. Copy the two `.cia` files to your SD card root 1. On your 3DS, install the two CIAs with FBI {% endcapture %} +{% assign tab-manual = tab-manual | split: "" %} ### Updating -
-
- Universal-Updater - Manual -
-
- - {{ tab-universal-updater | markdownify }} -
-
- - {{ tab-manual | markdownify }} -
-
+ +{% assign tabs = tab-universal-updater | concat: tab-manual %} +{% include tabs.html index=0 tabs=tabs %} ### More steps for the flashcard side