Changeset 6677

Timestamp:

02/17/2018 01:40:56 PM (8 years ago)

Author:

ocean90

Message:

Login: Add a simple language switcher.

See #1673.

Location:

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-login

Files:

• functions.php (modified) (1 diff)
• stylesheets/login.css (modified) (3 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-login/functions.php

@@ -147 +147 @@
 }
 add_filter( 'insert_user_meta', 'wporg_login_limit_user_meta', 1 );
+
+/**
+ * Retreives all avaiable locales with their native names.
+ *
+ * @return array Locales with their native names.
+ */
+function wporg_login_get_locales() {
+        wp_cache_add_global_groups( [ 'locale-associations' ] );
+
+        $wp_locales = wp_cache_get( 'locale-list', 'locale-associations' );
+        if ( false === $wp_locales ) {
+                $wp_locales = (array) $GLOBALS['wpdb']->get_col( 'SELECT locale FROM wporg_locales' );
+                wp_cache_set( 'locale-list', $wp_locales, 'locale-associations' );
+        }
+
+        $wp_locales[] = 'en_US';
+
+        require_once GLOTPRESS_LOCALES_PATH;
+
+        $locales = [];
+
+        foreach ( $wp_locales as $locale ) {
+                $gp_locale = GP_Locales::by_field( 'wp_locale', $locale );
+                if ( ! $gp_locale ) {
+                        continue;
+                }
+
+                $locales[ $locale ] = $gp_locale->native_name;
+        }
+
+        natsort( $locales );
+
+        return $locales;
+}
+
+/**
+ * Prints markup for a simple language switcher.
+ */
+function wporg_login_language_switcher() {
+        $current_locale = get_locale();
+
+        ?>
+        <div class="language-switcher">
+                <form id="language-switcher" action="" method="GET">
+                        <label for="language-switcher-locales">
+                                <span aria-hidden="true" class="dashicons dashicons-translation"></span>
+                                <span class="screen-reader-text"><?php _e( 'Select the language:', 'wporg' ); ?></span>
+                        </label>
+                        <select id="language-switcher-locales" name="locale">
+                                <?php
+                                foreach ( wporg_login_get_locales() as $locale => $locale_name ) {
+                                        printf(
+                                                '<option value="%s"%s>%s</option>',
+                                                esc_attr( $locale ),
+                                                selected( $locale, $current_locale, false ),
+                                                esc_html( $locale_name )
+                                        );
+                                }
+                                ?>
+                        </select>
+                </form>
+        </div>
+        <script>
+                var switcherForm  = document.getElementById( 'language-switcher' );
+                var localesSelect = document.getElementById( 'language-switcher-locales' );
+                localesSelect.addEventListener( 'change', function() {
+                        switcherForm.submit()
+                } );
+        </script>
+        <?php
+}
+add_action( 'login_footer', 'wporg_login_language_switcher' );

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-login/stylesheets/login.css

@@ -13 +13 @@
         -ms-flex-align: center;
         align-items: center;
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+        flex-direction: column;
+        -webkit-box-pack: center;
+        -ms-flex-pack: center;
+        justify-content: center;
         height: auto;
         min-height: 100%;
@@ -482 +489 @@
 }
 
+.screen-reader-text {
+        border: 0;
+        clip: rect(1px, 1px, 1px, 1px);
+        -webkit-clip-path: inset(50%);
+        clip-path: inset(50%);
+        height: 1px;
+        margin: -1px;
+        overflow: hidden;
+        padding: 0;
+        position: absolute;
+        width: 1px;
+        word-wrap: normal !important;
+}
+
+.language-switcher {
+        width: 350px;
+        margin: 0 auto 24px;
+        text-align: center;
+}
+
+.language-switcher label {
+        margin-right: .5em;
+}
+
+.rtl .language-switcher label {
+        margin-right: 0;
+        margin-left: .5em;
+}
+
+.language-switcher span.dashicons {
+        line-height: 30px;
+}
+
+.language-switcher select {
+        height: 30px;
+}
+
 @media (max-width: 375px) {
         body, html {
@@ -541 +585 @@
         }
 
+        .language-switcher {
+                width: 100%;
+        }
+
         #login h1 {
                 padding: 0 24px 24px;