Changeset 8751 for sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/helper-functions.php

Timestamp:

05/08/2019 07:33:18 PM (5 years ago)

Author:

ocean90

Message:

Translate: Update editor interface for translations.

• Increase focus on translation by moving original, context and translation into the same column.
• Add tabs for plural forms.
• Move action buttons more closely to textarea.
• Increase size for textareas.
• Automatically resize textarea heights.
• Provide an area for suggestions, see #4430.
• Add help dialog with support for locale resources, see #3522.
• Stack columns on mobile.

See #4431.

File:

• sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/helper-functions.php (modified) (2 diffs)

sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-customizations/templates/helper-functions.php

@@ -1 +1 @@
 <?php
-wp_register_style( 'wporg-translate', plugins_url( 'style.css', __FILE__ ), array( 'gp-base' ), '20190324' );
+wp_register_style(
+        'wporg-translate',
+        plugins_url( 'style.css', __FILE__ ),
+        [ 'gp-base' ],
+        '20190324'
+);
 gp_enqueue_style( 'wporg-translate' );
 
-gp_enqueue_script( 'jquery' );
-
-wp_register_style( 'chartist', plugins_url( 'css/chartist.min.css', __FILE__ ), array(), '0.9.5' );
-wp_register_script( 'chartist', plugins_url( 'js/chartist.min.js', __FILE__ ), array(), '0.9.5' );
+wp_register_script(
+    'details-element-polyfill',
+    plugins_url( 'js/details-element-polyfill.min.js', __FILE__ ),
+    [],
+    '2.3.1'
+);
+
+gp_enqueue_script( 'details-element-polyfill' );
+
+wp_register_script(
+    'autosize',
+    plugins_url( 'js/autosize.min.js', __FILE__ ),
+    [],
+    '4.0.2'
+);
+
+wp_register_script(
+        'wporg-translate-editor',
+        plugins_url( 'js/editor.js', __FILE__ ),
+        [ 'gp-editor', 'autosize' ],
+        '20190506'
+);
+
+wp_register_style(
+        'chartist',
+        plugins_url( 'css/chartist.min.css', __FILE__ ),
+        [],
+        '0.9.5'
+);
+wp_register_script(
+        'chartist',
+        plugins_url( 'js/chartist.min.js', __FILE__ ),
+        [],
+        '0.9.5'
+);
+
+if ( isset( $template ) && 'translations' === $template ) {
+    gp_enqueue_script( 'wporg-translate-editor' );
+}
+
+/**
+ * Prints markup for translations help modal in footer.
+ */
+add_action( 'gp_footer', static function() use ( $template, $args ) {
+    if ( 'translations' === $template && ! empty( $args['locale_slug'] ) ) {
+        $locale = GP_Locales::by_slug( $args['locale_slug'] );
+        wporg_translation_help_modal( $locale );
+    }
+} );
+
+/**
+ * Prints markup for the translation help dialog.
+ *
+ * @param \GP_Locale $locale Locale of the current translation set.
+ */
+function wporg_translation_help_modal( $locale ) {
+    $locale_resources = wporg_get_locale_resources( $locale )
+    ?>
+    <div id="wporg-translation-help-modal" class="wporg-translate-modal">
+        <div class="wporg-translate-modal__overlay">
+            <div class="wporg-translate-modal__frame" role="dialog" aria-labelledby="wporg-translation-help-modal-headline">
+                <div class="wporg-translate-modal__header">
+                    <h1 id="wporg-translation-help-modal-headline" class="wporg-translate-modal__headline">Help</h1>
+                    <button type="button" aria-label="Close modal" class="wporg-translate-modal__close"><span class="screen-reader-text">Close</span><span aria-hidden="true" class="dashicons dashicons-no-alt"></span></button>
+                </div>
+
+                <div class="wporg-translate-modal__content">
+                    <div class="wporg-translate-modal__content_primary">
+                        <h2>Validating Translations</h2>
+                        <p>After a contributor suggests a string, the string gets a status of “suggested”. In order to transform them into “approved” strings (which will be used in WordPress), a Translation Editor needs to accept (or reject) those suggestions.<br>
+                            Please give editors a reasonable time to validate suggestions — We are all volunteers.</p>
+
+                        <h2>Translation Status</h2>
+                        <ul class="no-list">
+                            <li><span style="color: #c1e1b9">◼︎</span> <strong>Current:</strong> Indicates an approved string.</li>
+                            <li><span style="color: #ffe399">◼︎</span> <strong>Waiting:</strong> Indicates a string that was suggested, but not yet approved by a Translation Editor.</li>
+                            <li><span style="color: #fbc5a9">◼︎</span> <strong>Fuzzy:</strong> Indicates a “fuzzy” string. Those translations need to be reviewed for accuracy and edited or approved.</li>
+                            <li><span style="color: #cdc5e1">◼︎</span> <strong>Old:</strong> Indicates a string that was obsoleted by a newer, approved translation.</li>
+                            <li><span style="color: #dc3232">◼︎</span> <strong>Warning:</strong> Indicates validation warnings. These translations either need to be corrected or their warnings explicitly discarded by a Translation Editor.</li>
+                        </ul>
+                    </div>
+                    <div class="wporg-translate-modal__content_secondary">
+                        <?php if ( $locale_resources ) : ?>
+                            <h2><span aria-hidden="true" class="dashicons dashicons-info"></span> Locale Resources for <?php echo esc_html( $locale->english_name ); ?></h2>
+                            <?php echo wp_kses_post( $locale_resources ); ?>
+                        <?php endif; ?>
+
+                        <h2><span aria-hidden="true" class="dashicons dashicons-admin-page"></span> Global Handbook Resources</h2>
+                        <?php
+                        add_filter( 'walker_nav_menu_start_el', 'wporg_add_nav_description', 10, 4 );
+                        wp_nav_menu( [
+                            'theme_location' => 'wporg_translate_global_resources',
+                            'fallback_cb'    => false,
+                            'container'      => false,
+                            'menu_id'        => 'global-resources',
+                            'depth'          => 2,
+                        ] );
+                        remove_filter( 'walker_nav_menu_start_el', 'wporg_add_nav_description' );
+                        ?>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <?php
+}
+
+/**
+ * Adds descriptions to navigation items.
+ *
+ * @param string  $item_output The menu item output.
+ * @param WP_Post $item        Menu item object.
+ * @param int     $depth       Depth of the menu.
+ * @param array   $args        wp_nav_menu() arguments.
+ * @return string Menu item with possible description.
+ */
+function wporg_add_nav_description( $item_output, $item, $depth, $args ) {
+    if ( $item->description ) {
+        $item_output = str_replace(
+            $args->link_after . '</a>',
+            $args->link_after . '</a>: <span class="menu-item-description">' . $item->description . '</span>',
+            $item_output
+        );
+    }
+
+    return $item_output;
+}
+
+/**
+ * Retrieves the navigation menu from the assigned Rosetta site.
+ *
+ * Output is cached for an hour.
+ *
+ * @param \GP_Locale $locale
+ * @return string The HTML markup of the navigation menu.
+ */
+function wporg_get_locale_resources( $locale ) {
+    if ( empty( $locale->wp_locale ) ) {
+        return '';
+    }
+
+    $transient_key = 'locale-resources-' . $locale->wp_locale;
+    $cache         = get_transient( $transient_key );
+
+    if ( false !== $cache ) {
+        return $cache;
+    }
+
+    $result = get_sites( [
+        'locale'     => $locale->wp_locale,
+        'network_id' => WPORG_GLOBAL_NETWORK_ID,
+        'path'       => '/',
+        'fields'     => 'ids',
+        'number'     => '1',
+    ] );
+    $site_id = array_shift( $result );
+    if ( ! $site_id ) {
+        set_transient( $transient_key, '', HOUR_IN_SECONDS );
+        return '';
+    }
+
+    switch_to_blog( $site_id );
+
+    add_filter( 'walker_nav_menu_start_el', 'wporg_add_nav_description', 10, 4 );
+
+    $menu = wp_nav_menu( [
+        'theme_location' => 'rosetta_translation_contributor_resources',
+        'fallback_cb'    => false,
+        'container'      => false,
+        'menu_id'        => 'locale-resources',
+        'depth'          => 2,
+        'echo'           => false,
+    ] );
+
+    remove_filter( 'walker_nav_menu_start_el', 'wporg_add_nav_description' );
+
+    restore_current_blog();
+
+    set_transient( $transient_key, $menu, HOUR_IN_SECONDS );
+
+    return $menu;
+}
 
 /**
@@ -51 +234 @@
     <?php
 } );
+
+/**
+ * Prints HTML markup for translation textareas.
+ *
+ * @param object $entry Current translation entry.
+ * @param array $permissions User's permissions.
+ * @param int $index Plural index.
+ */
+function wporg_gp_translate_textarea( $entry, $permissions, $index = 0 ) {
+    list( $can_edit, $can_approve ) = $permissions;
+    $disabled = $can_edit ? '' : 'disabled="disabled"';
+    ?>
+    <div class="textareas<?php echo ( 0 === $index ) ? ' active' : ''; ?>" data-plural-index="<?php echo $index; ?>">
+        <?php
+        if ( isset( $entry->warnings[ $index ] ) ) :
+            $warnings = $entry->warnings[ $index ];
+            foreach ( $warnings as $key => $value ) :
+                ?>
+                <div class="warning secondary">
+                    <strong><?php _e( 'Warning:', 'glotpress' ); ?></strong> <?php echo esc_html( $value ); ?>
+
+                    <?php if ( $can_approve ) : ?>
+                        <a href="#" class="discard-warning" data-nonce="<?php echo esc_attr( wp_create_nonce( 'discard-warning_' . $index . $key ) ); ?>" data-key="<?php echo esc_attr( $key ); ?>" data-index="<?php echo esc_attr( $index ); ?>"><?php _e( 'Discard', 'glotpress' ); ?></a>
+                    <?php endif; ?>
+                </div>
+                <?php
+            endforeach;
+        endif;
+        ?>
+        <textarea placeholder="Enter translation here" class="foreign-text" name="translation[<?php echo esc_attr( $entry->original_id ); ?>][]" id="translation_<?php echo esc_attr( $entry->original_id ); ?>_<?php echo esc_attr( $index ); ?>" <?php echo $disabled; // WPCS: XSS ok. ?>><?php echo esc_translation( gp_array_get( $entry->translations, $index ) ); // WPCS: XSS ok. ?></textarea>
+    </div>
+    <?php
+}
+
+/**
+ * Counts the number of warnings.
+ *
+ * @param object $entry Current translation entry.
+ * @return int Number of warnings.
+ */
+function wporg_gp_count_warnings( $entry ) {
+    $count = 0;
+
+    if ( empty( $entry->warnings ) ) {
+        return $count;
+    }
+
+    foreach ( $entry->warnings as $warnings ) {
+        $count += count( $warnings );
+    }
+
+    return $count;
+}