Changeset 47572

Timestamp:

04/12/2020 02:24:38 PM (5 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',