Changeset 47572

Timestamp:

04/12/2020 02:24:38 PM (6 years ago)

Author:

SergeyBiryukov

Message:

Privacy: Add an indication when the Copy action in Privacy Policy Guide is complete.

This adds a "Copied!" text near the "Copy this section to clipboard" button to provide direct feedback that the action was completed.

Props garrett-eclipse, nickylimjj, xkon, desrosj, birgire.
Fixes #44588.

Location:

trunk/src

Files:

• js/_enqueues/admin/privacy-tools.js (modified) (3 diffs)
• wp-admin/css/edit.css (modified) (1 diff)
• wp-admin/includes/class-wp-privacy-policy-content.php (modified) (5 diffs)
• wp-includes/script-loader.php (modified) (1 diff)

trunk/src/js/_enqueues/admin/privacy-tools.js

@@ -260 +260 @@
         });
 
-        // Privacy policy page, copy button.
+        // Privacy Policy page, copy action.
         $( document ).on( 'click', function( event ) {
-                var $target = $( event.target );
-                var $parent, $container, range;
+                var $parent,
+                        $container,
+                        range,
+                        __ = wp.i18n.__,
+                        $target = $( event.target ),
+                        copiedNotice = $target.siblings( '.success' );
 
                 if ( $target.is( 'button.privacy-text-copy' ) ) {
@@ -278 +282 @@
                                                 bodyPosition     = document.body.scrollTop;
 
+                                        // Setup copy.
                                         window.getSelection().removeAllRanges();
+
+                                        // Hide tutorial content to remove from copied content.
                                         range = document.createRange();
                                         $container.addClass( 'hide-privacy-policy-tutorial' );
 
+                                        // Copy action.
                                         range.selectNodeContents( $container[0] );
                                         window.getSelection().addRange( range );
                                         document.execCommand( 'copy' );
 
+                                        // Reset section.
                                         $container.removeClass( 'hide-privacy-policy-tutorial' );
                                         window.getSelection().removeAllRanges();
 
+                                        // Return scroll position - see #49540.
                                         if ( documentPosition > 0 && documentPosition !== document.documentElement.scrollTop ) {
                                                 document.documentElement.scrollTop = documentPosition;
@@ -294 +304 @@
                                                 document.body.scrollTop = bodyPosition;
                                         }
+
+                                        // Display and speak notice to indicate action complete.
+                                        copiedNotice.addClass( 'visible' );
+                                        wp.a11y.speak( __( 'The section has been copied to your clipboard.' ) );
+
+                                        // Delay notice dismissal.
+                                        setTimeout( function(){ copiedNotice.removeClass( 'visible' ); }, 3000 );
                                 } catch ( er ) {}
                         }

trunk/src/wp-admin/css/edit.css

@@ -727 +727 @@
         line-height: 2.46153846;
         padding-bottom: 6px;
+}
+
+.privacy-text-actions .success {
+        display: none;
+        color: #40860a;
+        float: right;
+        padding-right: 1em;
+}
+
+.privacy-text-actions .success.visible {
+        display: inline-block;
+        height: 32px;
 }
 

trunk/src/wp-admin/includes/class-wp-privacy-policy-content.php

@@ -373 +373 @@
 
                 $content_array = self::get_suggested_policy_text();
-
                 $content       = '';
                 $toc           = array( '<li><a href="#wp-privacy-policy-guide-introduction">' . __( 'Introduction' ) . '</a></li>' );
                 $date_format   = __( 'F j, Y' );
-                $copy          = __( 'Copy this section to clipboard' );
-                $return_to_top = '<a href="#" class="return-to-top">' . __( '&uarr; Return to Top' ) . '</a>';
 
                 foreach ( $content_array as $section ) {
@@ -386 +383 @@
 
                         if ( ! empty( $section['removed'] ) ) {
-                                $class = ' text-removed';
+                                $class = 'text-removed';
                                 $date  = date_i18n( $date_format, $section['removed'] );
                                 /* translators: %s: Date of plugin deactivation. */
@@ -395 +392 @@
                                 $removed = '<div class="error inline"><p>' . sprintf( $removed, $date ) . '</p></div>';
                         } elseif ( ! empty( $section['updated'] ) ) {
-                                $class = ' text-updated';
+                                $class = 'text-updated';
                                 $date  = date_i18n( $date_format, $section['updated'] );
                                 /* translators: %s: Date of privacy policy text update. */
@@ -409 +406 @@
                         $toc[]       = sprintf( '<li><a href="#%1$s">%2$s</a>' . $meta . '</li>', $toc_id, $plugin_name );
 
-                        $content .= '<div class="privacy-text-section' . $class . '">';
+                        $content .= '<div class="privacy-text-section ' . $class . '">';
                         $content .= '<a id="' . $toc_id . '">&nbsp;</a>';
                         /* translators: %s: Plugin name. */
@@ -416 +413 @@
 
                         $content .= '<div class="policy-text">' . $section['policy_text'] . '</div>';
-                        $content .= $return_to_top;
+                        $content .= '<a href="#" class="return-to-top">' . __( '&uarr; Return to Top' ) . '</a>';
 
                         if ( empty( $section['removed'] ) ) {
-                                $content         .= '<div class="privacy-text-actions">';
-                                        $content     .= '<button type="button" class="privacy-text-copy button">';
-                                                $content .= $copy;
-                                                $content .= '<span class="screen-reader-text">';
-                                                /* translators: %s: Plugin name. */
-                                                $content .= sprintf( __( 'Copy suggested policy text from %s.' ), $plugin_name );
-                                                $content .= '</span>';
-                                        $content     .= '</button>';
-                                $content         .= '</div>';
-                        }
-
-                        $content .= "</div>\n"; // End of .privacy-text-section.
+                                $content .= '<div class="privacy-text-actions">';
+                                $content .= '<button type="button" class="privacy-text-copy button">';
+                                $content .= __( 'Copy this section to clipboard' );
+                                $content .= '<span class="screen-reader-text">';
+                                /* translators: %s: Plugin name. */
+                                $content .= sprintf( __( 'Copy suggested policy text from %s.' ), $plugin_name );
+                                $content .= '</span>';
+                                $content .= '</button>';
+                                $content .= '<span class="success" aria-hidden="true">' . __( 'Copied!' ) . '</span>';
+                                $content .= '</div>';
+                        }
+
+                        $content .= '</div>'; // End of .privacy-text-section.
                 }
 
                 if ( count( $toc ) > 2 ) {
                         ?>
-                        <div  class="privacy-text-box-toc">
+                        <div class="privacy-text-box-toc">
                                 <p><?php _e( 'Table of Contents' ); ?></p>
                                 <ol>
-                                        <?php echo implode( "\n", $toc ); ?>
+                                        <?php echo implode( $toc ); ?>
                                 </ol>
                         </div>

trunk/src/wp-includes/script-loader.php

@@ -1418 +1418 @@
                 $scripts->set_translations( 'site-health' );
 
-                $scripts->add( 'privacy-tools', "/wp-admin/js/privacy-tools$suffix.js", array( 'jquery' ), false, 1 );
+                $scripts->add( 'privacy-tools', "/wp-admin/js/privacy-tools$suffix.js", array( 'jquery', 'wp-a11y', 'wp-i18n' ), false, 1 );
                 did_action( 'init' ) && $scripts->localize(
                         'privacy-tools',