WordPress.org

Making WordPress.org

Changeset 9391


Ignore:
Timestamp:
01/11/2020 01:38:37 AM (7 months ago)
Author:
coffee2code
Message:

Developer: Refactor dynamic min-height calculation for preview tab.

Now at minimum it has the same height as the write tab, preventing drastic tab size differences with short input text. Also now fires on tab view.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/js/user-notes-preview.js

    r9390 r9391  
    66( function( $ ) {
    77
    8     var textarea, textareaHeight, text, preview, previewContent, tabs, processing, spinner;
     8    var textarea, tabContentHeight, text, preview, previewContent, tabs, processing, spinner;
    99
    1010    function init() {
     
    4646        tabs.on( "keydown.note_preview, click.note_preview", function( e ) {
    4747
     48            // Preview tab should be at least as tall input tab to prevent resizing wonkiness.
     49            tabContentHeight = $( '#comment-form-comment' ).outerHeight( false );
     50
     51            if ( 0 < tabContentHeight ) {
     52                preview.css( 'min-height', tabContentHeight + 'px' );
     53            }
     54
    4855            if ( 'comment-preview' === $( this ).attr( 'aria-controls' ) ) {
    4956
     
    6976                textarea.focus();
    7077            }
    71         } );
    72 
    73         // Set preview heigth when the textarea is visible
    74         $( '.table-of-contents a[href="#add-note-or-feedback"]' ).click( function( e ) {
    75             e.preventDefault();
    76             tabs.parents( '.tablist' ).show();
    77             setTimeout( function() {
    78                 textareaHeight = textarea.outerHeight( true );
    79                 if ( 0 < textareaHeight ) {
    80                     preview.css( 'min-height', textareaHeight + 'px' );
    81                 }
    82             }, 500 );
    8378        } );
    8479    }
Note: See TracChangeset for help on using the changeset viewer.