Changeset 6677

Timestamp:

02/17/2018 01:40:56 PM (7 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;