From 88072fd6c2c3ec6cc6d2a880bd76a9c601fd0767 Mon Sep 17 00:00:00 2001 From: Vjacheslav Trushkin Date: Tue, 9 Apr 2013 18:38:59 +0300 Subject: [PATCH 1/5] [ticket/10741] Function to resize textarea elements New function to automatically resize textarea elements as user types text PHPBB3-10741 --- phpBB/assets/javascript/core.js | 85 +++++++++++++++++++++++++++++++++ 1 file changed, 85 insertions(+) diff --git a/phpBB/assets/javascript/core.js b/phpBB/assets/javascript/core.js index 8bbea8b8c9..6fe71d141a 100644 --- a/phpBB/assets/javascript/core.js +++ b/phpBB/assets/javascript/core.js @@ -568,4 +568,89 @@ phpbb.addAjaxCallback('toggle_link', function() { el.parent().attr('class', toggleClass); }); +/** +* Automatically resize textarea +* +* This function automatically resizes textarea elements when user +* types text. +* +* @param jQuery item jQuery object to resize +* @param object options Optional parameter that adjusts default +* configuration. See configuration variable +*/ +phpbb.resizeTextArea = function(items) { + // Configuration + var configuration = { + minWindowHeight: 500, // Minimum browser window height when textareas are resized + minHeight: 200, // Minimum height of textarea + maxHeight: 500, // Maximum height of textarea + heightDiff: 200, // Minimum difference between window and textarea height + // In following callbacks parameter "item" is jQuery object. "this" points to DOM object + resizeCallback: function(item) { }, // Function to call after resizing textarea. + resetCallback: function(item) { } // Function to call when resize has been canceled + } + + if (arguments.length > 1) + { + configuration = $.extend(configuration, arguments[1]); + } + + function resetAutoResize(item) + { + var $item = $(item); + if ($item.hasClass('auto-resized')) + { + $(item).css('height', '').removeClass('auto-resized'); + configuration.resetCallback.call(item, $item); + } + }; + + function autoResize(item) + { + function setHeight(height) + { + $item.css('height', height + 'px').addClass('auto-resized'); + configuration.resizeCallback.call(item, $item); + } + + var windowHeight = $(window).height(); + + if (windowHeight < configuration.minWindowHeight) + { + resetAutoResize(item); + return; + } + + var maxHeight = Math.min(Math.max(windowHeight - configuration.heightDiff, configuration.minHeight), configuration.maxHeight), + $item = $(item), + height = parseInt($item.height()), + scrollHeight = (item.scrollHeight) ? item.scrollHeight : 0; + + if (height > maxHeight) + { + setHeight(maxHeight); + } + else if (scrollHeight > (height + 5)) + { + setHeight(Math.min(maxHeight, scrollHeight)); + } + }; + + items.bind('focus change keyup', function() { + $(this).each(function() { + autoResize(this); + }); + }).css('resize', 'none').change(); + + $(window).resize(function() { + items.each(function() { + if ($(this).hasClass('auto-resized')) + { + autoResize(this); + } + }); + }); +}; + + })(jQuery); // Avoid conflicts with other libraries From 316efcbbbb72058bb9986be08af3d11173817386 Mon Sep 17 00:00:00 2001 From: Vjacheslav Trushkin Date: Tue, 9 Apr 2013 18:39:47 +0300 Subject: [PATCH 2/5] [ticket/10741] Automatically resize textareas in prosilver and ACP Automatically resize textareas in prosilver and ACP. PHPBB3-10741 --- phpBB/adm/style/ajax.js | 6 ++++++ phpBB/styles/prosilver/template/ajax.js | 9 +++++++++ 2 files changed, 15 insertions(+) diff --git a/phpBB/adm/style/ajax.js b/phpBB/adm/style/ajax.js index 8f7c210e00..8211bdd014 100644 --- a/phpBB/adm/style/ajax.js +++ b/phpBB/adm/style/ajax.js @@ -148,6 +148,12 @@ $('[data-ajax]').each(function() { } }); +/** +* Automatically resize textarea +*/ +$(document).ready(function() { + phpbb.resizeTextArea($('textarea'), {minHeight: 75}); +}); })(jQuery); // Avoid conflicts with other libraries diff --git a/phpBB/styles/prosilver/template/ajax.js b/phpBB/styles/prosilver/template/ajax.js index 8dd1f58c97..e7dfe95009 100644 --- a/phpBB/styles/prosilver/template/ajax.js +++ b/phpBB/styles/prosilver/template/ajax.js @@ -225,4 +225,13 @@ $('#member_search').click(function () { return false; }); +/** +* Automatically resize textarea +*/ +$(document).ready(function() { + phpbb.resizeTextArea($('textarea:not(#message-box textarea)'), {minHeight: 75, maxHeight: 250}); + phpbb.resizeTextArea($('#message-box textarea')); +}); + + })(jQuery); // Avoid conflicts with other libraries From 67f0e19128415210f0ece4a8cd3df12e4b35eaf6 Mon Sep 17 00:00:00 2001 From: Vjacheslav Trushkin Date: Tue, 9 Apr 2013 18:47:08 +0300 Subject: [PATCH 3/5] [ticket/10741] Do not resize textarea.no-auto-resize Do not auto-resize textareas with class .no-auto-resize PHPBB3-10741 --- phpBB/adm/style/ajax.js | 2 +- phpBB/styles/prosilver/template/ajax.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/phpBB/adm/style/ajax.js b/phpBB/adm/style/ajax.js index 8211bdd014..6f21dfa6ac 100644 --- a/phpBB/adm/style/ajax.js +++ b/phpBB/adm/style/ajax.js @@ -152,7 +152,7 @@ $('[data-ajax]').each(function() { * Automatically resize textarea */ $(document).ready(function() { - phpbb.resizeTextArea($('textarea'), {minHeight: 75}); + phpbb.resizeTextArea($('textarea:not(.no-auto-resize)'), {minHeight: 75}); }); diff --git a/phpBB/styles/prosilver/template/ajax.js b/phpBB/styles/prosilver/template/ajax.js index e7dfe95009..2528b96ece 100644 --- a/phpBB/styles/prosilver/template/ajax.js +++ b/phpBB/styles/prosilver/template/ajax.js @@ -229,7 +229,7 @@ $('#member_search').click(function () { * Automatically resize textarea */ $(document).ready(function() { - phpbb.resizeTextArea($('textarea:not(#message-box textarea)'), {minHeight: 75, maxHeight: 250}); + phpbb.resizeTextArea($('textarea:not(#message-box textarea, .no-auto-resize)'), {minHeight: 75, maxHeight: 250}); phpbb.resizeTextArea($('#message-box textarea')); }); From cbb9f084fce0fd42ed1481233f417c79e8a0abfa Mon Sep 17 00:00:00 2001 From: Vjacheslav Trushkin Date: Wed, 10 Apr 2013 09:08:25 +0300 Subject: [PATCH 4/5] [ticket/10741] Fix for browser-specific resizing of textarea Disable browser-specific resizing only after textarea has been resized Enable browser-specific resizing after script resizing has been reset PHPBB3-10741 --- phpBB/assets/javascript/core.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/phpBB/assets/javascript/core.js b/phpBB/assets/javascript/core.js index 6fe71d141a..827ed2e34a 100644 --- a/phpBB/assets/javascript/core.js +++ b/phpBB/assets/javascript/core.js @@ -600,7 +600,7 @@ phpbb.resizeTextArea = function(items) { var $item = $(item); if ($item.hasClass('auto-resized')) { - $(item).css('height', '').removeClass('auto-resized'); + $(item).css({height: '', resize: ''}).removeClass('auto-resized'); configuration.resetCallback.call(item, $item); } }; @@ -609,7 +609,7 @@ phpbb.resizeTextArea = function(items) { { function setHeight(height) { - $item.css('height', height + 'px').addClass('auto-resized'); + $item.css({height: height + 'px', resize: 'none'}).addClass('auto-resized'); configuration.resizeCallback.call(item, $item); } @@ -640,7 +640,7 @@ phpbb.resizeTextArea = function(items) { $(this).each(function() { autoResize(this); }); - }).css('resize', 'none').change(); + }).change(); $(window).resize(function() { items.each(function() { From 947550df8f5e2ba624adc26ddd22c7fe74e4f602 Mon Sep 17 00:00:00 2001 From: Vjacheslav Trushkin Date: Tue, 30 Apr 2013 11:27:43 +0300 Subject: [PATCH 5/5] [ticket/10741] Docblock for phpbb.resizeTextArea Better description of phpBB.resizeTextArea with detailed explanation of all optional parameters. Removed unnecessary semicolons PHPBB3-10741 --- phpBB/assets/javascript/core.js | 41 +++++++++++++++++++++------------ 1 file changed, 26 insertions(+), 15 deletions(-) diff --git a/phpBB/assets/javascript/core.js b/phpBB/assets/javascript/core.js index 827ed2e34a..bb1fef253e 100644 --- a/phpBB/assets/javascript/core.js +++ b/phpBB/assets/javascript/core.js @@ -571,28 +571,39 @@ phpbb.addAjaxCallback('toggle_link', function() { /** * Automatically resize textarea * -* This function automatically resizes textarea elements when user +* This function automatically resizes textarea elements when user * types text. * -* @param jQuery item jQuery object to resize -* @param object options Optional parameter that adjusts default +* @param {jQuery} items jQuery object(s) to resize +* @param {object} options Optional parameter that adjusts default * configuration. See configuration variable +* +* Optional parameters: +* minWindowHeight {number} Minimum browser window height when textareas are resized. Default = 500 +* minHeight {number} Minimum height of textarea. Default = 200 +* maxHeight {number} Maximum height of textarea. Default = 500 +* heightDiff {number} Minimum difference between window and textarea height. Default = 200 +* resizeCallback {function} Function to call after resizing textarea +* resetCallback {function} Function to call when resize has been canceled + +* Callback function format: function(item) {} +* this points to DOM object +* item is a jQuery object, same as this */ -phpbb.resizeTextArea = function(items) { +phpbb.resizeTextArea = function(items, options) { // Configuration var configuration = { - minWindowHeight: 500, // Minimum browser window height when textareas are resized - minHeight: 200, // Minimum height of textarea - maxHeight: 500, // Maximum height of textarea - heightDiff: 200, // Minimum difference between window and textarea height - // In following callbacks parameter "item" is jQuery object. "this" points to DOM object - resizeCallback: function(item) { }, // Function to call after resizing textarea. - resetCallback: function(item) { } // Function to call when resize has been canceled - } + minWindowHeight: 500, + minHeight: 200, + maxHeight: 500, + heightDiff: 200, + resizeCallback: function(item) { }, + resetCallback: function(item) { } + }; if (arguments.length > 1) { - configuration = $.extend(configuration, arguments[1]); + configuration = $.extend(configuration, options); } function resetAutoResize(item) @@ -603,7 +614,7 @@ phpbb.resizeTextArea = function(items) { $(item).css({height: '', resize: ''}).removeClass('auto-resized'); configuration.resetCallback.call(item, $item); } - }; + } function autoResize(item) { @@ -634,7 +645,7 @@ phpbb.resizeTextArea = function(items) { { setHeight(Math.min(maxHeight, scrollHeight)); } - }; + } items.bind('focus change keyup', function() { $(this).each(function() {