Code => endonym. */ function tlig_demo_languages(): array { return [ 'en' => 'English', 'fr' => 'Français', 'de' => 'Deutsch', 'es' => 'Español', 'it' => 'Italiano', 'pt' => 'Português', 'nl' => 'Nederlands', 'da' => 'Dansk', 'sv' => 'Svenska', 'pl' => 'Polski', 'cs' => 'Čeština', 'bg' => 'Български', 'ru' => 'Русский', 'el' => 'Ελληνικά', 'ar' => 'العربية', ]; } /** * The language currently being shown. */ function tlig_demo_lang(): string { $want = isset( $_GET['lang'] ) ? sanitize_key( wp_unslash( $_GET['lang'] ) ) : 'en'; return isset( tlig_demo_languages()[ $want ] ) ? $want : 'en'; } /** * Arabic is the reason the whole layout is written in logical properties. */ function tlig_demo_is_rtl(): bool { return 'ar' === tlig_demo_lang(); } /** * Points the primary location at the menu for the chosen language. * * @param array $args wp_nav_menu arguments. * @return array */ function tlig_demo_pick_menu( $args ) { if ( ( $args['theme_location'] ?? '' ) !== 'primary' ) { return $args; } $menu = wp_get_nav_menu_object( 'TLIG ' . strtoupper( tlig_demo_lang() ) ); if ( $menu ) { $args['menu'] = $menu; } return $args; } add_filter( 'wp_nav_menu_args', 'tlig_demo_pick_menu' ); /** * Flips the document for Arabic. * * @param string $output The attributes. * @return string */ function tlig_demo_html_dir( $output ) { if ( ! tlig_demo_is_rtl() ) { return $output; } return preg_replace( '/\bdir="[^"]*"/', '', $output ) . ' dir="rtl" lang="ar"'; } add_filter( 'language_attributes', 'tlig_demo_html_dir' ); /** * The switcher itself. */ function tlig_demo_language_bar(): void { $current = tlig_demo_lang(); echo '
'; echo '' . esc_html__( 'Language', 'tlig' ) . ''; echo '
    '; foreach ( tlig_demo_languages() as $code => $name ) { $is_current = ( $code === $current ); printf( '
  • %s
    • ', esc_attr( $is_current ? 'filter filter--sm is-active' : 'filter filter--sm' ), esc_url( add_query_arg( 'lang', $code, home_url( '/' ) ) ), esc_attr( $code ), $is_current ? ' aria-current="page"' : '', esc_html( $name ) ); } echo '
'; } /** * Demo scaffolding: force panels open, for screenshots and for the pitch. * * `?open=3` holds the third panel open; `?open=all` drops every panel into the * flow, one under another. The second is the argument in one picture — seven * panels of seven different heights, all drawn from the same 328px parchment * file, where the old site needs a separately cut bitmap for each. * * It is a stylesheet, not a change to the markup, so nothing about the menu * itself depends on it. */ function tlig_demo_open_panels(): void { $open = isset( $_GET['open'] ) ? sanitize_key( wp_unslash( $_GET['open'] ) ) : ''; if ( '' === $open ) { return; } if ( 'all' === $open ) { $css = '.site-nav__bar{display:block}' . '.site-nav__item{display:block}' . '.site-nav__panel{display:block;position:static;margin-block:0 1.5rem}'; } else { $n = max( 1, (int) $open ); $css = sprintf( // The bar too: below the tablet breakpoint it is hidden until the // toggle opens it, and a screenshot cannot press the toggle. '.site-nav__bar{display:flex}.site-nav__item:nth-child(%d) > .site-nav__panel{display:block}', $n ); } printf( "\n", $css ); } add_action( 'wp_head', 'tlig_demo_open_panels', 99 );