Changeset 42992

Timestamp:

04/19/2018 12:38:44 PM (7 years ago)

Author:

azaozz

Message:

Privacy: make the sections in the suggested privacy policy text postbox foldable. Add Read More/Read Less buttons. Fix copying of the suggested text by pressing the button.

Props melchoyce, xkon, azaozz.
See #43620.

Location:

trunk/src/wp-admin

Files:

• css/edit.css (modified) (5 diffs)
• includes/misc.php (modified) (6 diffs)
• js/post.js (modified) (3 diffs)

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

@@ -650 +650 @@
 .privacy-text-box {
     margin: 10px 0 0;
-    
 }
 
@@ -657 +656 @@
     border-bottom: 1px solid #e5e5e5;
     box-shadow: 0 1px 1px rgba(0,0,0,0.04);
-    
 }
 
@@ -672 +670 @@
     height: 320px;
     overflow: auto;
-    
 }
 
@@ -681 +678 @@
 .privacy-text-box h3 {
     font-size: 1em;
-    margin: 1em 0;
-}
-
-.privacy-text-section .privacy-text-copy-button {
+    margin: 1em 0 0.5em;
+}
+
+.privacy-text-section .privacy-text-copy {
     float: right;
-    margin-top: -1.8em;
 }
 
 .privacy-text-section {
+    position: relative;
     padding: 1px 14px 1px 12px;
     border-top: 1px solid #e3e3e3;
@@ -705 +702 @@
 }
 
+.privacy-text-meta {
+    font-size: 11px;
+    color: #555D66;
+    font-weight: 600;
+}
+
 .closed .privacy-text-box-body {
     display: none;
 }
+
+.privacy-text-section.folded {
+    height: 150px;
+    overflow: hidden;
+}
+
+.privacy-text-actions {
+    line-height: 32px;
+    padding-bottom: 6px;
+}
+
+.folded .privacy-text-actions {
+    position: absolute;
+    bottom: 0;
+    background-color: white;
+    width: calc(100% - 24px);
+    box-shadow: 0px -5px 10px 5px rgba(255, 255, 255, .8);
+}
+
+.text-removed .privacy-text-actions {
+    background-color: #fbeaea;
+    box-shadow: 0px -5px 10px 5px rgba(251, 234, 234, .8);
+}
+
+.text-updated .privacy-text-actions {
+    background-color: #ecf7ed;
+    box-shadow: 0px -5px 10px 5px rgba(236, 247, 237, .8);
+}
+
+.policy-text-more,
+.folded .privacy-text-copy,
+.folded .policy-text-less {
+    display: none;
+}
+
+.folded .policy-text-more {
+    display: inline;
+}
+
 
 /*------------------------------------------------------------------------------

trunk/src/wp-admin/includes/misc.php

@@ -1550 +1550 @@
         $date_format = get_option( 'date_format' );
         $copy = __( 'Copy' );
+        $more = __( 'Read More' );
+        $less = __( 'Read Less' );
 
         foreach ( $content_array as $section ) {
@@ -1568 +1570 @@
             }
 
-            $content .= '<div class="privacy-text-section' . $class . '">';
-            $content .= '<h3>' . $section['plugin_name'] . '</h3>';
-            $content .= '<button type="button" class="privacy-text-copy-button button">';
-            $content .= $copy;
-            $content .= '<span class="screen-reader-text">' . sprintf( __( 'Copy suggested policy text from %s.' ), $section['plugin_name'] ) . '</span>';
-            $content .= '</button>';
+            $plugin_name = esc_html( $section['plugin_name'] );
+
+            $content .= '<div class="privacy-text-section folded' . $class . '">';
+            $content .= '<h3>' . $plugin_name . '</h3>';
 
             if ( ! empty( $meta ) ) {
@@ -1579 +1579 @@
             }
 
-            $content .= '<div class="policy-text">' . $section['policy_text'] . '</div>';
-            $content .= "</div>\n";
+            $content .= '<div class="policy-text" aria-expanded="false">' . $section['policy_text'] . '</div>';
+
+            $content .= '<div class="privacy-text-actions">';
+                $content .= '<button type="button" class="button-link policy-text-more">';
+                    $content .= $more;
+                    $content .= '<span class="screen-reader-text">' . sprintf( __( 'Expand suggested policy text section from %s.' ), $plugin_name ) . '</span>';
+                $content .= '</button>';
+
+                $content .= '<button type="button" class="button-link policy-text-less">';
+                    $content .= $less;
+                    $content .= '<span class="screen-reader-text">' . sprintf( __( 'Collapse suggested policy text section from %s.' ), $plugin_name ) . '</span>';
+                $content .= '</button>';
+
+                if ( empty( $section['removed'] ) ) {
+                    $content .= '<button type="button" class="privacy-text-copy button">';
+                        $content .= $copy;
+                        $content .= '<span class="screen-reader-text">' . sprintf( __( 'Copy suggested policy text from %s.' ), $plugin_name ) . '</span>';
+                    $content .= '</button>';
+                }
+
+            $content .= '</div>'; // End of .privacy-text-actions.
+            $content .= "</div>\n"; // End of .privacy-text-section.
         }
 
@@ -1590 +1610 @@
             </button>
             <div class="privacy-text-box-head hndle">
-                <h2><?php _e( 'This suggested privacy policy text comes from plugins you have installed.' ); ?></h2>
+                <h2><?php _e( 'This suggested privacy policy text comes from plugins and themes you have installed.' ); ?></h2>
                 <p>
                     <?php _e( 'We suggest reviewing this text then copying and pasting it into your privacy policy page.' ); ?>
@@ -1607 +1627 @@
      * Return the default suggested privacy policy content.
      *
-     * @since 4.9.6      
+     * @since 4.9.6
      *
      * @return string The defauld policy content.
@@ -1634 +1654 @@
     public static function add_suggested_content() {
         $content = self::get_default_content();
-        wp_add_privacy_policy_content(  'WordPress', $content );
-    }
-}
+        wp_add_privacy_policy_content( 'WordPress', $content );
+    }
+}

trunk/src/wp-admin/js/post.js

@@ -1269 +1269 @@
     } );
 
+} )( jQuery, new wp.utils.WordCounter() );
+
+( function( $ ) {
     // Privacy policy postbox, copy button.
     $( document ).on( 'click', function( event ) {
@@ -1274 +1277 @@
         var node, range;
 
-        if ( $target.is( 'button.privacy-text-copy-button' ) ) {
-            node = $target.parent().find( 'div.policy-text' )[0];
+        if ( $target.is( 'button.privacy-text-copy' ) ) {
+            node = $target.parent().parent().find( 'div.policy-text' )[0];
 
             if ( node ) {
                 try {
                     window.getSelection().removeAllRanges();
-                    range = document.createRange();  
-                    range.selectNode( node );  
+                    range = document.createRange();
+                    range.selectNodeContents( node );
                     window.getSelection().addRange( range );
 
@@ -1288 +1291 @@
                 } catch ( er ) {}
             }
+        } else if ( $target.is( 'button.policy-text-more' ) ) {
+            $target.parents( '.privacy-text-section' ).removeClass( 'folded' )
+                .find( '.policy-text' ).attr( 'aria-expanded', 'true' );
+        } else if ( $target.is( 'button.policy-text-less' ) ) {
+            $target.parents( '.privacy-text-section' ).addClass( 'folded' )
+                .find( '.policy-text' ).attr( 'aria-expanded', 'false' );
         }
     });
 
-} )( jQuery, new wp.utils.WordCounter() );
+} )( jQuery );