Make WordPress Core

Changeset 32999


Ignore:
Timestamp:
06/30/2015 03:57:42 AM (9 years ago)
Author:
azaozz
Message:

Press This:

  • Add support for the Text editor.
  • Add auto-scrolling when the caret moves out of the viewport while the user is typing (similarly to editor-expand).
  • Add auto-resize for the textarea.

See #32706.

Location:
trunk/src/wp-admin
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/press-this.css

    r32983 r32999  
    21732173    margin-left: 11px;
    21742174}
     2175
     2176/* Text editor */
     2177#pressthis {
     2178    color: #404040;
     2179    resize: none;
     2180    padding-top: 30px;
     2181}
     2182
     2183.wp-editor-wrap .quicktags-toolbar {
     2184    background: transparent;
     2185    border: none;
     2186}
     2187
     2188/* Switch editor buttons */
     2189.wp-editor-wrap .wp-editor-tools {
     2190    z-index: 0;
     2191}
     2192
     2193.wp-editor-wrap .wp-editor-tabs {
     2194    padding: 2px;
     2195}
     2196
     2197.wp-editor-wrap .wp-switch-editor {
     2198    top: 0;
     2199    margin: 3px 0 0 5px;
     2200    background: #f5f5f5;
     2201    color: #555;
     2202    border-color: #ccc;
     2203}
     2204
     2205.wp-editor-wrap .wp-switch-editor:hover {
     2206    background: #fafafa;
     2207    border-color: #999;
     2208    color: #23282d;
     2209}
     2210
     2211.wp-editor-wrap.tmce-active .switch-tmce,
     2212.wp-editor-wrap.html-active .switch-html {
     2213    background: #fff;
     2214    border-color: #d8d8d8;
     2215}
  • trunk/src/wp-admin/includes/class-wp-press-this.php

    r32983 r32999  
    13881388                        'toolbar2'              => 'undo,redo',
    13891389                    ),
    1390                     'quicktags' => false,
     1390                    'quicktags' => array(
     1391                        'buttons' => 'strong,em,link,block,del,ins,img,ul,ol,li,code,more',
     1392                    ),
    13911393                ) );
    13921394
  • trunk/src/wp-admin/js/press-this.js

    r32986 r32999  
    66    var PressThis = function() {
    77        var editor, $mediaList, $mediaThumbWrap,
     8            $window               = $( window ),
     9            $document             = $( document ),
    810            saveAlert             = false,
    911            textarea              = document.createElement( 'textarea' ),
     
    1820            offscreenHidden       = isOffScreen + ' ' + isHidden,
    1921            iOS                   = /iPad|iPod|iPhone/.test( window.navigator.userAgent ),
     22            $textEditor           = $( '#pressthis' ),
     23            textEditor            = $textEditor[0],
     24            textEditorMinHeight   = 600,
     25            textLength            = 0,
    2026            transitionEndEvent    = ( function() {
    2127                var style = document.documentElement.style;
     
    113119            $( '.spinner' ).removeClass( 'is-active' );
    114120            $( '.post-actions button' ).removeAttr( 'disabled' );
     121        }
     122
     123        function textEditorResize( reset ) {
     124            var pageYOffset, height;
     125
     126            if ( editor && ! editor.isHidden() ) {
     127                return;
     128            }
     129
     130            reset = ( reset === 'reset' ) || ( textLength && textLength > textEditor.value.length );
     131            height = textEditor.style.height;
     132
     133            if ( reset ) {
     134                pageYOffset = window.pageYOffset;
     135
     136                textEditor.style.height = 'auto';
     137                textEditor.style.height = Math.max( textEditor.scrollHeight, textEditorMinHeight ) + 'px';
     138                window.scrollTo( window.pageXOffset, pageYOffset );
     139            } else if ( parseInt( textEditor.style.height, 10 ) < textEditor.scrollHeight ) {
     140                textEditor.style.height = textEditor.scrollHeight + 'px';
     141            }
     142
     143            textLength = textEditor.value.length;
     144        }
     145
     146        function mceGetCursorOffset() {
     147            if ( ! editor ) {
     148                return false;
     149            }
     150
     151            var node = editor.selection.getNode(),
     152                range, view, offset;
     153
     154            if ( editor.wp && editor.wp.getView && ( view = editor.wp.getView( node ) ) ) {
     155                offset = view.getBoundingClientRect();
     156            } else {
     157                range = editor.selection.getRng();
     158
     159                try {
     160                    offset = range.getClientRects()[0];
     161                } catch( er ) {}
     162
     163                if ( ! offset ) {
     164                    offset = node.getBoundingClientRect();
     165                }
     166            }
     167
     168            return offset.height ? offset : false;
     169        }
     170
     171        // Make sure the caret is always visible.
     172        function mceKeyup( event ) {
     173            var VK = window.tinymce.util.VK,
     174                key = event.keyCode;
     175
     176            // Bail on special keys.
     177            if ( key <= 47 && ! ( key === VK.SPACEBAR || key === VK.ENTER || key === VK.DELETE || key === VK.BACKSPACE || key === VK.UP || key === VK.LEFT || key === VK.DOWN || key === VK.UP ) ) {
     178                return;
     179            // OS keys, function keys, num lock, scroll lock
     180            } else if ( ( key >= 91 && key <= 93 ) || ( key >= 112 && key <= 123 ) || key === 144 || key === 145 ) {
     181                return;
     182            }
     183
     184            mceScroll( key );
     185        }
     186
     187        function mceScroll( key ) {
     188            var cursorTop, cursorBottom, editorBottom,
     189                offset = mceGetCursorOffset(),
     190                bufferTop = 50,
     191                bufferBottom = 65,
     192                VK = window.tinymce.util.VK;
     193
     194            if ( ! offset ) {
     195                return;
     196            }
     197
     198            cursorTop = offset.top + editor.iframeElement.getBoundingClientRect().top;
     199            cursorBottom = cursorTop + offset.height;
     200            cursorTop = cursorTop - bufferTop;
     201            cursorBottom = cursorBottom + bufferBottom;
     202            editorBottom = $window.height();
     203
     204            // Don't scroll if the node is taller than the visible part of the editor
     205            if ( editorBottom < offset.height ) {
     206                return;
     207            }
     208
     209            if ( cursorTop < 0 && ( key === VK.UP || key === VK.LEFT || key === VK.BACKSPACE ) ) {
     210                window.scrollTo( window.pageXOffset, cursorTop + window.pageYOffset );
     211            } else if ( cursorBottom > editorBottom ) {
     212                window.scrollTo( window.pageXOffset, cursorBottom + window.pageYOffset - editorBottom );
     213            }
    115214        }
    116215
     
    217316            var src, link, newContent = '';
    218317
    219             if ( ! editor ) {
    220                 return;
    221             }
    222 
    223318            src = checkUrl( $element.attr( 'data-wp-src' ) || '' );
    224319            link = checkUrl( data.u );
     
    234329            }
    235330
    236             if ( ! hasSetFocus ) {
    237                 editor.setContent( '<p>' + newContent + '</p>' + editor.getContent() );
    238             } else {
    239                 editor.execCommand( 'mceInsertContent', false, newContent );
     331            if ( editor && ! editor.isHidden() ) {
     332                if ( ! hasSetFocus ) {
     333                    editor.setContent( '<p>' + newContent + '</p>' + editor.getContent() );
     334                } else {
     335                    editor.execCommand( 'mceInsertContent', false, newContent );
     336                }
     337            } else if ( window.QTags ) {
     338                window.QTags.insertContent( newContent );
    240339            }
    241340        }
     
    637736            var $splitButton = $( '.split-button' );
    638737
    639             $( document ).on( 'tinymce-editor-init', function( event, ed ) {
     738            $document.on( 'tinymce-editor-init', function( event, ed ) {
    640739                editor = ed;
    641740
     
    647746                    splitButtonClose();
    648747                });
     748
     749                editor.on( 'show', function() {
     750                    setTimeout( function() {
     751                        editor.execCommand( 'wpAutoResize' );
     752                    }, 300 );
     753                });
     754
     755                editor.on( 'hide', function() {
     756                    setTimeout( function() {
     757                        textEditorResize( 'reset' );
     758                    }, 100 );
     759                });
     760
     761                editor.on( 'keyup', mceKeyup );
     762                editor.on( 'undo redo', mceScroll );
     763
    649764            }).on( 'click.press-this keypress.press-this', '.suggested-media-thumbnail', function( event ) {
    650765                if ( event.type === 'click' || event.keyCode === 13 ) {
     
    728843            } );
    729844
    730             $( window ).on( 'beforeunload.press-this', function() {
     845            $window.on( 'beforeunload.press-this', function() {
    731846                if ( saveAlert || ( editor && editor.isDirty() ) ) {
    732847                    return __( 'saveAlert' );
    733848                }
    734             } );
     849            } ).on( 'resize.press-this', function() {
     850                if ( ! editor || editor.isHidden() ) {
     851                    textEditorResize( 'reset' );
     852                }
     853            });
    735854
    736855            $( 'button.add-cat-toggle' ).on( 'click.press-this', function() {
     
    767886            } );
    768887
     888            $textEditor.on( 'focus.press-this input.press-this propertychange.press-this', textEditorResize );
     889
    769890            return true;
    770891        }
     
    783904
    784905        // Let's go!
    785         $( document ).ready( function() {
     906        $document.ready( function() {
    786907            render();
    787908            monitor();
Note: See TracChangeset for help on using the changeset viewer.