From 096e19e6c6ed1b79059f098e1f7436404a97e6f9 Mon Sep 17 00:00:00 2001 From: William Lachance Date: Tue, 11 Jul 2017 16:27:35 -0400 Subject: Bug 1331305 - Auto-resize comment boxes Inspired by earlier work by @KuoE0 in https://github.com/mozilla-bteam/bmo/pull/40 * address review comments * Auto-resize comment when replying --- .../BugModal/template/en/default/bug_modal/header.html.tmpl | 1 + extensions/BugModal/web/autosize.min.js | 6 ++++++ extensions/BugModal/web/bug_modal.css | 1 + extensions/BugModal/web/bug_modal.js | 10 +++------- extensions/BugModal/web/common_bug_modal.js | 9 ++------- 5 files changed, 13 insertions(+), 14 deletions(-) create mode 100755 extensions/BugModal/web/autosize.min.js diff --git a/extensions/BugModal/template/en/default/bug_modal/header.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/header.html.tmpl index 20f1aebb0..db9bbeb7a 100644 --- a/extensions/BugModal/template/en/default/bug_modal/header.html.tmpl +++ b/extensions/BugModal/template/en/default/bug_modal/header.html.tmpl @@ -49,6 +49,7 @@ # assets javascript_urls.push( + "extensions/BugModal/web/autosize.min.js", "extensions/ProdCompSearch/web/js/prod_comp_search.js", "extensions/BugModal/web/bug_modal.js", "extensions/BugModal/web/comments.js", diff --git a/extensions/BugModal/web/autosize.min.js b/extensions/BugModal/web/autosize.min.js new file mode 100755 index 000000000..3d8366b57 --- /dev/null +++ b/extensions/BugModal/web/autosize.min.js @@ -0,0 +1,6 @@ +/*! + Autosize 3.0.20 + license: MIT + http://www.jacklmoore.com/autosize +*/ +!function(e,t){if("function"==typeof define&&define.amd)define(["exports","module"],t);else if("undefined"!=typeof exports&&"undefined"!=typeof module)t(exports,module);else{var n={exports:{}};t(n.exports,n),e.autosize=n.exports}}(this,function(e,t){"use strict";function n(e){function t(){var t=window.getComputedStyle(e,null);"vertical"===t.resize?e.style.resize="none":"both"===t.resize&&(e.style.resize="horizontal"),s="content-box"===t.boxSizing?-(parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)):parseFloat(t.borderTopWidth)+parseFloat(t.borderBottomWidth),isNaN(s)&&(s=0),l()}function n(t){var n=e.style.width;e.style.width="0px",e.offsetWidth,e.style.width=n,e.style.overflowY=t}function o(e){for(var t=[];e&&e.parentNode&&e.parentNode instanceof Element;)e.parentNode.scrollTop&&t.push({node:e.parentNode,scrollTop:e.parentNode.scrollTop}),e=e.parentNode;return t}function r(){var t=e.style.height,n=o(e),r=document.documentElement&&document.documentElement.scrollTop;e.style.height="auto";var i=e.scrollHeight+s;return 0===e.scrollHeight?void(e.style.height=t):(e.style.height=i+"px",u=e.clientWidth,n.forEach(function(e){e.node.scrollTop=e.scrollTop}),void(r&&(document.documentElement.scrollTop=r)))}function l(){r();var t=Math.round(parseFloat(e.style.height)),o=window.getComputedStyle(e,null),i=Math.round(parseFloat(o.height));if(i!==t?"visible"!==o.overflowY&&(n("visible"),r(),i=Math.round(parseFloat(window.getComputedStyle(e,null).height))):"hidden"!==o.overflowY&&(n("hidden"),r(),i=Math.round(parseFloat(window.getComputedStyle(e,null).height))),a!==i){a=i;var l=d("autosize:resized");try{e.dispatchEvent(l)}catch(e){}}}if(e&&e.nodeName&&"TEXTAREA"===e.nodeName&&!i.has(e)){var s=null,u=e.clientWidth,a=null,p=function(){e.clientWidth!==u&&l()},c=function(t){window.removeEventListener("resize",p,!1),e.removeEventListener("input",l,!1),e.removeEventListener("keyup",l,!1),e.removeEventListener("autosize:destroy",c,!1),e.removeEventListener("autosize:update",l,!1),Object.keys(t).forEach(function(n){e.style[n]=t[n]}),i.delete(e)}.bind(e,{height:e.style.height,resize:e.style.resize,overflowY:e.style.overflowY,overflowX:e.style.overflowX,wordWrap:e.style.wordWrap});e.addEventListener("autosize:destroy",c,!1),"onpropertychange"in e&&"oninput"in e&&e.addEventListener("keyup",l,!1),window.addEventListener("resize",p,!1),e.addEventListener("input",l,!1),e.addEventListener("autosize:update",l,!1),e.style.overflowX="hidden",e.style.wordWrap="break-word",i.set(e,{destroy:c,update:l}),t()}}function o(e){var t=i.get(e);t&&t.destroy()}function r(e){var t=i.get(e);t&&t.update()}var i="function"==typeof Map?new Map:function(){var e=[],t=[];return{has:function(t){return e.indexOf(t)>-1},get:function(n){return t[e.indexOf(n)]},set:function(n,o){e.indexOf(n)===-1&&(e.push(n),t.push(o))},delete:function(n){var o=e.indexOf(n);o>-1&&(e.splice(o,1),t.splice(o,1))}}}(),d=function(e){return new Event(e,{bubbles:!0})};try{new Event("test")}catch(e){d=function(e){var t=document.createEvent("Event");return t.initEvent(e,!0,!1),t}}var l=null;"undefined"==typeof window||"function"!=typeof window.getComputedStyle?(l=function(e){return e},l.destroy=function(e){return e},l.update=function(e){return e}):(l=function(e,t){return e&&Array.prototype.forEach.call(e.length?e:[e],function(e){return n(e,t)}),e},l.destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],o),e},l.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],r),e}),t.exports=l}); \ No newline at end of file diff --git a/extensions/BugModal/web/bug_modal.css b/extensions/BugModal/web/bug_modal.css index 4af850b99..666ee3f0d 100644 --- a/extensions/BugModal/web/bug_modal.css +++ b/extensions/BugModal/web/bug_modal.css @@ -710,6 +710,7 @@ body.platform-Win32 .comment-text, body.platform-Win64 .comment-text { box-sizing: border-box !important; margin: 0 0 1em; max-width: 1024px; + max-height: 280px; } #comment-preview { diff --git a/extensions/BugModal/web/bug_modal.js b/extensions/BugModal/web/bug_modal.js index 5a04709ec..6004c255b 100644 --- a/extensions/BugModal/web/bug_modal.js +++ b/extensions/BugModal/web/bug_modal.js @@ -868,16 +868,12 @@ $(function() { if ($('#comment').val() != reply_text) { $('#comment').val($('#comment').val() + reply_text); } + autosize.update($('#comment')); $.scrollTo($('#comment'), function() { $('#comment').focus(); }); }); - // add comment --> enlarge on focus - if (BUGZILLA.user.settings.zoom_textareas) { - $('#comment') - .focus(function(event) { - $(event.target).attr('rows', 25); - }); - } + // auto-enlarge comment area (up to its max-height) + autosize($('#comment')); // add comment --> private $('#add-comment-private-cb') diff --git a/extensions/BugModal/web/common_bug_modal.js b/extensions/BugModal/web/common_bug_modal.js index 1a2d309bb..b275c3a29 100644 --- a/extensions/BugModal/web/common_bug_modal.js +++ b/extensions/BugModal/web/common_bug_modal.js @@ -871,13 +871,8 @@ $(function() { $.scrollTo($('#comment'), function() { $('#comment').focus(); }); }); - // add comment --> enlarge on focus - if (BUGZILLA.user.settings.zoom_textareas) { - $('#comment') - .focus(function(event) { - $(event.target).attr('rows', 25); - }); - } + // auto-enlarge comment area (up to its max-height) + autosize($('#comment')); // add comment --> private $('#add-comment-private-cb') -- cgit v1.2.3-24-g4f1b