Last active
February 16, 2023 07:20
-
-
Save thisbit/0196d6f322bc1c835207ac8f2cd63d11 to your computer and use it in GitHub Desktop.
New and improoved Tabs for GenerateBlocks
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Buttons as TABS */ | |
.site .triggers .gb-button { | |
color: var(--contrast-2); | |
background-color: var(--base-2); | |
} | |
.site .triggers .gb-button:hover, | |
.site .triggers .gb-button:focus, | |
.site .triggers .gb-button:target, | |
.site .triggers .gb-button[aria-selected="true"] { | |
color: var(--base); | |
background-color: var(--accent); | |
cursor: pointer; | |
} | |
/* END Buttons a TABS */ | |
/* Containers as TABS */ | |
.site .triggers .gb-grid-column .gb-container{ | |
color: var(--contrast-2); | |
background-color: var(--base-2); | |
} | |
.site .triggers .gb-grid-column .gb-container:hover, | |
.site .triggers .gb-grid-column .gb-container:focus, | |
.site .triggers .gb-grid-column .gb-container:target, | |
.site .triggers .gb-grid-column[aria-selected="true"] .gb-container { | |
color: var(--base); | |
background-color: var(--accent); | |
cursor: pointer; | |
} | |
/* END Containers a TABS */ | |
.site .containers [role="tabpanel"] { | |
display: none; | |
} | |
.site .containers [role="tabpanel"][open="true"] { | |
display: block; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
window.addEventListener("DOMContentLoaded", (event) => { | |
const tabSection = Array.from(document.querySelectorAll(".tabs")); // wrapper | |
tabSection.forEach((section) => { // scoping all to wrapper | |
/* | |
* IF you wish to use Buttons as tabs USE the following three lines | |
* and make sure the three that follow right after are commented out | |
// */ | |
section.querySelectorAll(".gb-button-wrapper").forEach((element) => element.setAttribute("role", "tablist")); | |
let tabButtons = Array.from(section.querySelectorAll(".triggers .gb-button ")); | |
let tabContents = Array.from(section.querySelectorAll(".containers > .gb-inside-container > .gb-container")); | |
/* | |
* IF you wish to use Containers as tabs USE the following three lines | |
* and make sure the three lines above this comment are commented out | |
*/ | |
// section.querySelectorAll(".gb-grid-wrapper").forEach((element) => element.setAttribute("role", "tablist")); | |
// let tabButtons = Array.from(section.querySelectorAll(".triggers .gb-grid-column ")); | |
// let tabContents = Array.from(section.querySelectorAll(".containers > .gb-inside-container .gb-container")); | |
function clearActive(element) { // if already active make non active on click or keyborad tab | |
let ifActiveBtn = Array.from(section.querySelectorAll("[aria-selected=true]")); | |
ifActiveBtn.forEach((element) => element.setAttribute("aria-selected", false)); | |
let ifOpen = Array.from(section.querySelectorAll("[open=true]")); | |
ifOpen.forEach((element) => element.removeAttribute("open", true)); | |
} | |
let attributes = { "aria-selected": false, role: "tab", tabindex: 0 }; // tabs initial values | |
function setAttributes(element, attributes) { | |
Object.keys(attributes).forEach((attr) => { | |
element.setAttribute(attr, attributes[attr]); | |
}); | |
} | |
tabButtons.forEach((element) => setAttributes(element, attributes)); // set tabs initial values | |
tabContents.forEach((element) => element.setAttribute("role", "tabpanel")); | |
for (let i = 0; i < tabButtons.length; i++) { | |
tabButtons[0].setAttribute("aria-selected", true); // first element state on load | |
tabContents[0].setAttribute("open", true); // first element state on load | |
function tabEvents(event) { // do on click or keyboard | |
event.preventDefault(); | |
// [tab-key] travels over tab-buttons | |
// [click] or [enter/return] opens tab content | |
// then [tab] key to enter into content | |
if (event.keyCode === 13 || event.button == 0) { | |
clearActive(); | |
tabContents[i].setAttribute("tabindex", 0); | |
tabContents[i].setAttribute("open", true); | |
tabButtons.forEach((element) => element.setAttribute("tabindex", -1)); | |
tabButtons[i].setAttribute("tabindex", 0); | |
tabButtons[i].setAttribute("aria-selected", true); | |
// [shift] + [tab] takes you back to tab-buttons | |
} if ( event.keyCode === 9 ) { | |
tabButtons.forEach((element) => element.setAttribute("tabindex", 0)); | |
} | |
} | |
["click", "keyup"].forEach((event) => tabButtons[i].addEventListener(event, tabEvents)); | |
} | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
function thisbit_tabs_for_generateblocks() { | |
global $post; | |
$blocks = parse_blocks( $post->post_content ); | |
foreach( $blocks as $block ) { | |
$block['attrs']['className'] = ""; // initiate className to fix error reporting index undefined | |
if( $block['attrs']['className'] && $block['attrs']['className'] !== 'tabs' ) { return; | |
} else { | |
wp_enqueue_style( 'thisbit-tabs', get_stylesheet_directory_uri() . '/assets/css/tabs.css', false, '0.0.1', 'all'); | |
wp_enqueue_script( 'thisbit-tabs', get_stylesheet_directory_uri() . '/assets/js/tabs.js', '', '0.0.1', true ); | |
return; | |
} | |
} | |
} | |
add_action( 'wp_enqueue_scripts', 'thisbit_tabs_for_generateblocks', 9999 ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks. Fixed that.