From 90157e6d5126879486439cf7675cc0519e3b41db Mon Sep 17 00:00:00 2001 From: Christian Stuff Date: Wed, 20 Jun 2018 09:00:09 +0200 Subject: [PATCH 1/2] Fixes #2506 - Extract autogrow feature from bugform and apply to comment --- grunt-tasks/concat.js | 2 + webcompat/static/css/src/issue.css | 5 +- webcompat/static/js/lib/autogrow-textfield.js | 57 +++++++++++++++++++ webcompat/static/js/lib/bugform.js | 45 --------------- .../templates/issue/issue-comment-submit.html | 3 +- webcompat/templates/layout.html | 1 + 6 files changed, 64 insertions(+), 49 deletions(-) create mode 100644 webcompat/static/js/lib/autogrow-textfield.js diff --git a/grunt-tasks/concat.js b/grunt-tasks/concat.js index c32b4581c..ad1defca8 100644 --- a/grunt-tasks/concat.js +++ b/grunt-tasks/concat.js @@ -22,6 +22,7 @@ module.exports = function(grunt) { "<%= jsPath %>/vendor/backbone.mousetrap.js", "<%= jsPath %>/lib/flash-message.js", "<%= jsPath %>/lib/homepage.js", + "<%= jsPath %>/lib/autogrow-textfield.js", "<%= jsPath %>/lib/bugform.js", "<%= jsDistPath %>/templates.js" ], @@ -46,6 +47,7 @@ module.exports = function(grunt) { "<%= jsPath %>/lib/models/issue.js", "<%= jsPath %>/lib/models/comment.js", "<%= jsPath %>/lib/comments.js", + "<%= jsPath %>/lib/autogrow-textfield.js", "<%= jsPath %>/lib/issues.js" ], dest: "<%= jsDistPath %>/issues.js" diff --git a/webcompat/static/css/src/issue.css b/webcompat/static/css/src/issue.css index e02e42fd2..70f21e4fe 100644 --- a/webcompat/static/css/src/issue.css +++ b/webcompat/static/css/src/issue.css @@ -72,7 +72,6 @@ .issue-new-comment .text-field { box-sizing: border-box; margin-bottom: calc(var(--unit-space) * 2); - min-height: 120px; padding: calc(var(--unit-space) * 2); } @@ -101,23 +100,23 @@ } /* As we can not add a class to the img in the comment right now (markup parsers are complicated), we need to use the img element */ + .comment-body img, .js-Issue-markdown img { max-width: 100%; } /* var(--page-size-m) = 665px - vars not usable in queries */ + @media (min-width: 665px) { #issue.grid-row { flex-wrap: nowrap; } - #issue > .x2 { flex-basis: 66.66666%; max-width: 66.66666%; min-width: 0; } - #issue > .x1 { flex-basis: 33.33333%; max-width: 33.33333%; diff --git a/webcompat/static/js/lib/autogrow-textfield.js b/webcompat/static/js/lib/autogrow-textfield.js new file mode 100644 index 000000000..8fc8ae28b --- /dev/null +++ b/webcompat/static/js/lib/autogrow-textfield.js @@ -0,0 +1,57 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/*eslint new-cap: ["error", { "capIsNewExceptions": ["Deferred"] }]*/ + +function Autogrow() { + this.autogrowField = $(".js-autogrow-field"); + + this.init = function() { + this.handleAutogrowField = this.handleAutogrowField.bind(this); + + this.autogrowField.each(function(index, el) { + var minRows = parseInt(el.getAttribute("rows"), 10); + el.dataset.minRows = minRows; + }); + this.autogrowField.on("focus keyup input", this.handleAutogrowField); + }; + + this.handleAutogrowField = function(event) { + var target = event.target; + var $target = $(target); + var MIN_ROWS = target.dataset.minRows; + var contentHeight = + target.scrollHeight - + parseInt($target.css("padding-top"), 10) - + parseInt($target.css("padding-bottom"), 10); + + // store initially calculated row height if not already present + if (event.type === "focus" && !target.dataset.rowHeight) { + target.dataset.rowHeight = contentHeight / MIN_ROWS; + } + + var rowHeight = target.dataset.rowHeight; + // don't let textarea grow more than half the screen size + var MAX_HEIGHT = window.innerHeight / 2; + var MAX_ROWS = Math.floor(MAX_HEIGHT / rowHeight); + // determine amount of used rows to shrink back if necessary + var usedRows = target.value.split("\n").length; + var rows = Math.max(Math.ceil(contentHeight / rowHeight), usedRows); + var newRowsValue = + rows < MIN_ROWS ? MIN_ROWS : rows > MAX_ROWS ? MAX_ROWS : rows; + + // update rows attribute and respect minimum and maximum values + target.setAttribute("rows", newRowsValue); + if (newRowsValue * rowHeight > parseInt(target.style.height, 10)) { + // reset element style height + target.style.height = ""; + } + }; + + return this.init(); +} + +$(function() { + new Autogrow(); +}); diff --git a/webcompat/static/js/lib/bugform.js b/webcompat/static/js/lib/bugform.js index 1d2883d44..ae3d864de 100644 --- a/webcompat/static/js/lib/bugform.js +++ b/webcompat/static/js/lib/bugform.js @@ -5,7 +5,6 @@ /*eslint new-cap: ["error", { "capIsNewExceptions": ["Deferred"] }]*/ function BugForm() { - this.autogrowField = $(".js-autogrow-field"); this.clickedButton = null; this.detailsInput = $("#details:hidden"); this.errorLabel = $(".js-error-upload"); @@ -83,7 +82,6 @@ function BugForm() { this.checkProblemTypeValidity = this.checkProblemTypeValidity.bind(this); this.checkImageTypeValidity = this.checkImageTypeValidity.bind(this); this.checkOptionalNonEmpty = this.checkOptionalNonEmpty.bind(this); - this.handleAutogrowField = this.handleAutogrowField.bind(this); this.storeClickedButton = this.storeClickedButton.bind(this); this.onFormSubmit = this.onFormSubmit.bind(this); this.onReceiveMessage = this.onReceiveMessage.bind(this); @@ -96,7 +94,6 @@ function BugForm() { } this.disableSubmits(); - this.initAutogrowFields(); this.urlField.on("blur input", this.checkURLValidity); this.descField.on("blur input", this.checkDescriptionValidity); this.problemType.on("change", this.checkProblemTypeValidity); @@ -123,48 +120,6 @@ function BugForm() { window.addEventListener("message", this.onReceiveMessage, false); }; - this.initAutogrowFields = function() { - // store initial rows attribute value in dataset of each element - // because rows attribute will be overwritten later when autogrowing - this.autogrowField.each(function(index, el) { - var minRows = parseInt(el.getAttribute("rows"), 10); - el.dataset.minRows = minRows; - }); - this.autogrowField.on("focus keyup input", this.handleAutogrowField); - }; - - this.handleAutogrowField = function(event) { - var target = event.target; - var $target = $(target); - var MIN_ROWS = target.dataset.minRows; - var contentHeight = - target.scrollHeight - - parseInt($target.css("padding-top"), 10) - - parseInt($target.css("padding-bottom"), 10); - - // store initially calculated row height if not already present - if (event.type === "focus" && !target.dataset.rowHeight) { - target.dataset.rowHeight = contentHeight / MIN_ROWS; - } - - var rowHeight = target.dataset.rowHeight; - // don't let textarea grow more than half the screen size - var MAX_HEIGHT = window.innerHeight / 2; - var MAX_ROWS = Math.floor(MAX_HEIGHT / rowHeight); - // determine amount of used rows to shrink back if necessary - var usedRows = target.value.split("\n").length; - var rows = Math.max(Math.ceil(contentHeight / rowHeight), usedRows); - var newRowsValue = - rows < MIN_ROWS ? MIN_ROWS : rows > MAX_ROWS ? MAX_ROWS : rows; - - // update rows attribute and respect minimum and maximum values - target.setAttribute("rows", newRowsValue); - if (newRowsValue * rowHeight > parseInt(target.style.height, 10)) { - // reset element style height - target.style.height = ""; - } - }; - this.onReceiveMessage = function(event) { // We're getting a report about our own site, so let's bail. if (this.isSelfReport()) { diff --git a/webcompat/templates/issue/issue-comment-submit.html b/webcompat/templates/issue/issue-comment-submit.html index 180125233..deb75e5a8 100644 --- a/webcompat/templates/issue/issue-comment-submit.html +++ b/webcompat/templates/issue/issue-comment-submit.html @@ -10,7 +10,8 @@
- +
{% include "issue/upload-image.jst" %} diff --git a/webcompat/templates/layout.html b/webcompat/templates/layout.html index 7d3c01cc5..77aeb8c40 100644 --- a/webcompat/templates/layout.html +++ b/webcompat/templates/layout.html @@ -56,6 +56,7 @@ + {%- if config['LOCALHOST'] -%} From fc98bebd86d4db7dbc8e3f58e9aaf91d38ed07f1 Mon Sep 17 00:00:00 2001 From: Christian Stuff Date: Thu, 21 Jun 2018 19:48:17 +0200 Subject: [PATCH 2/2] Issue #2506 - Removed unnecessary eslint-disable comment --- webcompat/static/js/lib/autogrow-textfield.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/webcompat/static/js/lib/autogrow-textfield.js b/webcompat/static/js/lib/autogrow-textfield.js index 8fc8ae28b..06bb0feaf 100644 --- a/webcompat/static/js/lib/autogrow-textfield.js +++ b/webcompat/static/js/lib/autogrow-textfield.js @@ -2,8 +2,6 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -/*eslint new-cap: ["error", { "capIsNewExceptions": ["Deferred"] }]*/ - function Autogrow() { this.autogrowField = $(".js-autogrow-field");