sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Auto-resize the Quick Draft textarea. props lessbloat, markjaquith, helen. fixes #26053.

Browse Source 
git-svn-id: https://develop.svn.wordpress.org/trunk@26564 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Helen Hou-Sandi 2013-12-03 17:34:46 +00:00
parent 6e77a372e2
commit 6c3f6cad42
2 changed files with 67 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/wp-admin/css/wp-admin.css
View File

@ -3101,6 +3101,12 @@ form.initial-form.quickpress-open input#title {
padding: 6px 7px;
}
#quick-press textarea#content {
min-height: 90px;
max-height: 1300px;
resize: none;
}
/* Dashboard Quick Draft - Drafts list */
.js #dashboard_quick_press .drafts {

65
src/wp-admin/js/dashboard.js
View File

@ -2,11 +2,9 @@
var ajaxWidgets, ajaxPopulateWidgets, quickPressLoad;
jQuery(document).ready( function($) {
var $window = $( window ),
welcomePanel = $( '#welcome-panel' ),
var welcomePanel = $( '#welcome-panel' ),
welcomePanelHide = $('#wp_welcome_panel-hide'),
updateWelcomePanel,
metaboxHolder = $( '.metabox-holder' );
updateWelcomePanel;
updateWelcomePanel = function( visible ) {
$.post( ajaxurl, {
@ -120,6 +118,8 @@ jQuery(document).ready( function($) {
$('#description-wrap, p.submit').slideDown(200);
wpActiveEditor = 'content';
});
autoResizeTextarea();
};
quickPressLoad();
@ -131,4 +131,61 @@ jQuery(document).ready( function($) {
e.preventDefault();
});
function autoResizeTextarea() {
// Add a hidden div. We'll copy over the text from the textarea to measure its height.
$('body').append( '<div class="quick-draft-textarea-clone" style="display: none;"></div>' );
var clone = $('.quick-draft-textarea-clone'),
editor = $('#content'),
editorHeight = editor.height(),
// 100px roughly accounts for browser chrome and allows the
// save draft button to show on-screen at the same time.
editorMaxHeight = $(window).height() - 100;
// Match up textarea and clone div as much as possible.
// Padding cannot be reliably retrieved using shorthand in all browsers.
clone.css({
'font-family': editor.css('font-family'),
'font-size': editor.css('font-size'),
'line-height': editor.css('line-height'),
'padding-bottom': editor.css('paddingBottom'),
'padding-left': editor.css('paddingLeft'),
'padding-right': editor.css('paddingRight'),
'padding-top': editor.css('paddingTop'),
'white-space': 'pre-wrap',
'word-wrap': 'break-word',
'display': 'none'
});
// propertychange is for IE < 9
editor.on('focus input propertychange', function() {
var $this = $(this),
// &nbsp; is to ensure that the height of a final trailing newline is included.
textareaContent = $this.val().replace(/\n/g, '<br>') + '&nbsp;',
// 2px is for border-top & border-bottom
cloneHeight = clone.css('width', $this.css('width')).html(textareaContent).outerHeight() + 2;
// Default to having scrollbars
editor.css('overflow-y', 'auto');
// Only change the height if it has indeed changed and both heights are below the max.
if ( cloneHeight === editorHeight || ( cloneHeight >= editorMaxHeight && editorHeight >= editorMaxHeight ) ) {
return;
}
// Don't allow editor to exceed height of window.
// This is also bound in CSS to a max-height of 1300px to be extra safe.
if ( cloneHeight > editorMaxHeight ) {
editorHeight = editorMaxHeight;
} else {
editorHeight = cloneHeight;
}
// No scrollbars as we change height
editor.css('overflow-y', 'hidden');
$this.css('height', editorHeight + 'px');
});
}
} );