Changeset 3316

Timestamp:

06/07/2016 07:28:51 PM (9 years ago)

Author:

coffee2code

Message:

developer.wordpress.org: In textarea for user notes, make the 'tab' key insert a tab.

Adapts JS code, behavior, and help string from core. It is still possible to navigate out of the field by first pressing escape (sometimes twice), then tab.

Also sets tab-size to match that used on display.

Props afercia for insight.
Fixes #626.

Location:

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer

Files:

• comments.php (modified) (1 diff)
• js/user-notes.js (modified) (1 diff)
• scss/main.scss (modified) (1 diff)
• stylesheets/main.css (modified) (1 diff)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/comments.php

@@ -70 +70 @@
                 '</p><p>' .
                 __( 'You can enter text and code. Use the php, js, or inline code buttons to wrap code snippets.', 'wporg' ) .
+                '</p><p>' .
+                __( 'In the editing area the Tab key enters a tab character. To move below this area by pressing Tab, press the Esc key followed by the Tab key. In some cases the Esc key will need to be pressed twice before the Tab key will allow you to continue.', 'wporg' ) .
                 '</p><p class="user-notes-are-gpl">' .
                 sprintf( __( '<strong>NOTE:</strong> All contributions are licensed under <a href="%s">GFDL</a> and are moderated before appearing on the site.', 'wporg' ), 'https://gnu.org/licenses/fdl.html' ) .

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/js/user-notes.js

@@ -37 +37 @@
     QTags.addButton( 'inline-code', 'inline code', '<code>', '</code>' );
 
+    // Override tab within user notes textarea to actually insert a tab character.
+    // Copied from code within core's wp-admin/js/common.js.
+    $('.comment-form textarea').bind('keydown.wpevent_InsertTab', function(e) {
+        var el = e.target, selStart, selEnd, val, scroll, sel;
+
+        if ( e.keyCode == 27 ) { // escape key
+            // when pressing Escape: Opera 12 and 27 blur form fields, IE 8 clears them
+            e.preventDefault();
+            $(el).data('tab-out', true);
+            return;
+        }
+
+        if ( e.keyCode != 9 || e.ctrlKey || e.altKey || e.shiftKey ) // tab key
+            return;
+
+        if ( $(el).data('tab-out') ) {
+            $(el).data('tab-out', false);
+            return;
+        }
+
+        selStart = el.selectionStart;
+        selEnd = el.selectionEnd;
+        val = el.value;
+
+        if ( document.selection ) {
+            el.focus();
+            sel = document.selection.createRange();
+            sel.text = '\t';
+        } else if ( selStart >= 0 ) {
+            scroll = this.scrollTop;
+            el.value = val.substring(0, selStart).concat('\t', val.substring(selEnd) );
+            el.selectionStart = el.selectionEnd = selStart + 1;
+            this.scrollTop = scroll;
+        }
+
+        if ( e.stopPropagation )
+            e.stopPropagation();
+        if ( e.preventDefault )
+            e.preventDefault();
+    });
+
 } )( jQuery );

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss

@@ -243 +243 @@
         overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */
         padding-left: 3px;
+        tab-size: 4;
         vertical-align: top; /* Improves readability and alignment in all browsers */
         width: 98%;

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/main.css

@@ -556 +556 @@
   /* Removes default vertical scrollbar in IE6/7/8/9 */
   padding-left: 3px;
+  tab-size: 4;
   vertical-align: top;
   /* Improves readability and alignment in all browsers */