From 150aef28689062b0e938fd231dac166e5766fb5e Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Thu, 14 Apr 2016 14:00:49 +0100 Subject: [PATCH 1/8] Allow rows to be passed to textbox HTML textboxes have a rows attribute, which controls their height, unless their height is overridden by CSS. --- app/templates/components/textbox.html | 8 ++++---- app/templates/views/edit-email-template.html | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/app/templates/components/textbox.html b/app/templates/components/textbox.html index f4c0f368f..480d773ea 100644 --- a/app/templates/components/textbox.html +++ b/app/templates/components/textbox.html @@ -8,7 +8,8 @@ width='2-3', suffix=None, disabled=False, - safe_error_message=False + safe_error_message=False, + rows=8 ) %}
- {{ textbox(form.template_content, highlight_tags=True, width='1-1') }} + {{ textbox(form.template_content, highlight_tags=True, width='1-1', rows=8) }} {{ page_footer( 'Save', delete_link=url_for('.delete_service_template', service_id=current_service.id, template_id=template_id) if template_id or None, From 39a6fd115af64c8bac0eb1a38e649a7064641f51 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Thu, 14 Apr 2016 14:01:16 +0100 Subject: [PATCH 2/8] =?UTF-8?q?Remove=20option=20for=20=E2=80=98disabled?= =?UTF-8?q?=E2=80=99=20textbox?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit I think this was used for the invite page at one point, but isn’t now. Generally at GDS we don’t do disabled form controls, they don’t tell you _why_ they’re disabled. --- app/templates/components/textbox.html | 20 +++++--------------- 1 file changed, 5 insertions(+), 15 deletions(-) diff --git a/app/templates/components/textbox.html b/app/templates/components/textbox.html index 480d773ea..e849a6bce 100644 --- a/app/templates/components/textbox.html +++ b/app/templates/components/textbox.html @@ -7,7 +7,6 @@ help_link_text=None, width='2-3', suffix=None, - disabled=False, safe_error_message=False, rows=8 ) %} @@ -25,20 +24,11 @@ {% endif %} - {% if disabled %} -

{{ field(**{ - 'class': 'form-control form-control-{} textbox-highlight-textbox'.format(width) if highlight_tags else 'form-control form-control-{} {}'.format(width, 'textbox-right-aligned' if suffix else ''), - 'data-module': 'highlight-tags' if highlight_tags else '', - 'disabled': 'disabled' - }) }} -

- {% else %} - {{ field(**{ - 'class': 'form-control form-control-{} textbox-highlight-textbox'.format(width) if highlight_tags else 'form-control form-control-{} {}'.format(width, 'textbox-right-aligned' if suffix else ''), - 'data-module': 'highlight-tags' if highlight_tags else '', - 'rows': rows|string - }) }} - {% endif %} + {{ field(**{ + 'class': 'form-control form-control-{} textbox-highlight-textbox'.format(width) if highlight_tags else 'form-control form-control-{} {}'.format(width, 'textbox-right-aligned' if suffix else ''), + 'data-module': 'highlight-tags' if highlight_tags else '', + 'rows': rows|string + }) }} {% if suffix %} {{ suffix }} {% endif %} From 83c6baf9773a86aaacf861fda0e3d12a3fb04756 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Thu, 14 Apr 2016 14:02:45 +0100 Subject: [PATCH 3/8] =?UTF-8?q?Don=E2=80=99t=20override=20textbox=20height?= =?UTF-8?q?s=20with=20CSS?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We should let textboxes set their own height using the rows attribute. --- app/assets/stylesheets/components/textbox.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/app/assets/stylesheets/components/textbox.scss b/app/assets/stylesheets/components/textbox.scss index e6e9e6021..2df25be3c 100644 --- a/app/assets/stylesheets/components/textbox.scss +++ b/app/assets/stylesheets/components/textbox.scss @@ -10,7 +10,6 @@ resize: none; z-index: 20; background: none; - height: 200px; } &-textbox, From 1bf4d00e197b065c253c87d9c3fcc463ab2057a0 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Thu, 14 Apr 2016 14:04:41 +0100 Subject: [PATCH 4/8] Make subject a textarea MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit In order for subject lines to have their fields highlighted they have to be textboxes. This is because the highlighting script only works with textboxes that don’t scroll, either horizontally, vertically, or be keying through them. --- app/main/forms.py | 2 +- app/templates/views/edit-email-template.html | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/main/forms.py b/app/main/forms.py index 83efd2c9f..04d9e4cc7 100644 --- a/app/main/forms.py +++ b/app/main/forms.py @@ -212,7 +212,7 @@ class SMSTemplateForm(Form): class EmailTemplateForm(SMSTemplateForm): - subject = StringField( + subject = TextAreaField( u'Subject', validators=[DataRequired(message="Can’t be empty")]) diff --git a/app/templates/views/edit-email-template.html b/app/templates/views/edit-email-template.html index a27fc5994..b0dcfc11b 100644 --- a/app/templates/views/edit-email-template.html +++ b/app/templates/views/edit-email-template.html @@ -15,8 +15,8 @@
- {{ textbox(form.name, width='1-1', hint='Your recipients won’t see this') }} - {{ textbox(form.subject, width='1-1') }} + {{ textbox(form.name, width='1-1', hint='Your recipients won’t see this', rows=10) }} + {{ textbox(form.subject, width='1-1', rows=2) }}
{{ textbox(form.template_content, highlight_tags=True, width='1-1', rows=8) }} From 9cba3ea70f26c755a796042290f814f83aca349e Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Thu, 14 Apr 2016 14:05:37 +0100 Subject: [PATCH 5/8] Add placeholder highlighting to subject Email subjects can now have placeholders in, we should visually indicate this in the same way as we do for the email body. --- app/templates/views/edit-email-template.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/templates/views/edit-email-template.html b/app/templates/views/edit-email-template.html index b0dcfc11b..bca5d1ab1 100644 --- a/app/templates/views/edit-email-template.html +++ b/app/templates/views/edit-email-template.html @@ -16,7 +16,7 @@
{{ textbox(form.name, width='1-1', hint='Your recipients won’t see this', rows=10) }} - {{ textbox(form.subject, width='1-1', rows=2) }} + {{ textbox(form.subject, width='1-1', highlight_tags=True, rows=2) }}
{{ textbox(form.template_content, highlight_tags=True, width='1-1', rows=8) }} From 435537aac83264d0012d50587de8fc158aa39b0f Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Thu, 14 Apr 2016 14:08:08 +0100 Subject: [PATCH 6/8] Make textboxes auto expand later At two lines the subject textbox was expanding even when it was empty. This commit makes the distance at which textboxes start expanding less sensitive. --- app/assets/stylesheets/components/textbox.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/stylesheets/components/textbox.scss b/app/assets/stylesheets/components/textbox.scss index 2df25be3c..1e5c769b1 100644 --- a/app/assets/stylesheets/components/textbox.scss +++ b/app/assets/stylesheets/components/textbox.scss @@ -35,7 +35,7 @@ color: transparent; white-space: pre-wrap; border: 2px solid transparent; - padding-bottom: $gutter; + padding-bottom: $gutter-half; } &-background { From 54e42a2021e26785f892a10dcdb0accca4185c4f Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Thu, 14 Apr 2016 14:38:36 +0100 Subject: [PATCH 7/8] Make the hint work for both subject and body MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This commit makes the placeholder hint not be dependent on their only being one textbox with placeholders on a page. To do this it needs to be its own module, because the two textboxes are each self-contained instances of the same module. The way I’ve gone about this is to make the placeholder hint accept a list of textboxes it should look in when deciding what message to display to the user. Most of the code is extracted from the existing placeholder highlighting module. --- app/assets/javascripts/highlightTags.js | 40 +---------- app/assets/javascripts/placeholderHint.js | 75 ++++++++++++++++++++ app/templates/views/edit-email-template.html | 4 +- gulpfile.babel.js | 1 + 4 files changed, 79 insertions(+), 41 deletions(-) create mode 100644 app/assets/javascripts/placeholderHint.js diff --git a/app/assets/javascripts/highlightTags.js b/app/assets/javascripts/highlightTags.js index 8cbd18bfe..1e2dae456 100644 --- a/app/assets/javascripts/highlightTags.js +++ b/app/assets/javascripts/highlightTags.js @@ -7,25 +7,6 @@ const tagPattern = /\(\([^\)\(]+\)\)/g; - const getPlaceholderHint = function(placeholders) { - if (0 === placeholders.length) { - return ` -

Add fields using ((double brackets))

- Show me how - `; - } - if (1 === placeholders.length) { - return ` -

Add fields using ((double brackets))

-

You’ll populate the ‘${placeholders[0]}’ field when you send messages using this template

- `; - } - return ` -

Add fields using ((double brackets))

-

You’ll populate your fields when you send some messages

- `; - }; - Modules.HighlightTags = function() { this.start = function(textarea) { @@ -41,9 +22,6 @@ `)) .on("input", this.update); - this.$placeHolderHint = $('#placeholder-hint') - .on("click", ".placeholder-hint-action", this.demo); - this.initialHeight = this.$textbox.height(); this.$backgroundMaskForeground.css({ @@ -65,29 +43,13 @@ this.escapedMessage = () => $('
').text(this.$textbox.val()).html(); - this.listPlaceholders = () => this.escapedMessage().match(tagPattern) || []; - - this.listPlaceholdersWithoutBrackets = () => this.listPlaceholders().map( - placeholder => placeholder.substring(2, placeholder.length - 2) - ); - this.replacePlaceholders = () => this.$backgroundMaskForeground.html( this.escapedMessage().replace( tagPattern, match => `${match}` ) ); - this.hint = () => this.$placeHolderHint.html( - getPlaceholderHint(this.listPlaceholdersWithoutBrackets()) - ); - - this.update = () => ( - this.replacePlaceholders() && this.resize() && this.hint() - ); - - this.demo = () => ( - this.$textbox.val((i, current) => `Dear ((name)), ${current}`) && this.update() - ); + this.update = () => this.replacePlaceholders() && this.resize(); }; diff --git a/app/assets/javascripts/placeholderHint.js b/app/assets/javascripts/placeholderHint.js new file mode 100644 index 000000000..bf73cd805 --- /dev/null +++ b/app/assets/javascripts/placeholderHint.js @@ -0,0 +1,75 @@ +(function(Modules) { + "use strict"; + + if ( + !('oninput' in document.createElement('input')) + ) return; + + const tagPattern = /\(\([^\)\(]+\)\)/g; + + Modules.PlaceholderHint = function() { + + this.start = function(component) { + + this.$component = $(component); + this.originalHTML = this.$component.html(); + this.$allTextboxes = $(this.$component.data('textboxes-selector')); + this.$targetTextbox = $(this.$component.data('target-textbox-selector')); + + this.$component + .on('click', '.placeholder-hint-action', this.demo); + + this.$allTextboxes + .on('input', this.hint) + .trigger('input'); + + }; + + this.getPlaceholderHint = function() { + + let placeholders = this.listPlaceholdersWithoutBrackets(); + + if (0 === placeholders.length) { + return ` + ${this.originalHTML} + Show me how + `; + } + if (1 === placeholders.length) { + return ` + ${this.originalHTML} +

You’ll populate the ‘${placeholders[0]}’ field when you send messages using this template

+ `; + } + return ` + ${this.originalHTML} +

You’ll populate your fields when you send some messages

+ `; + + }; + + this.escapedMessages = () => $('
').text( + this.$allTextboxes.map(function() { + return $(this).val(); + }).get() + ).html(); + + this.listPlaceholders = () => this.escapedMessages().match(tagPattern) || []; + + this.listPlaceholdersWithoutBrackets = () => this.listPlaceholders().map( + placeholder => placeholder.substring(2, placeholder.length - 2) + ); + + this.renderDemo = () => this.$targetTextbox.val((i, current) => `Dear ((name)), ${current}`); + + this.hint = () => this.$component.html( + this.getPlaceholderHint() + ); + + this.demo = () => ( + this.renderDemo() && this.$targetTextbox.trigger('input') && this.hint() + ); + + }; + +})(window.GOVUK.Modules); diff --git a/app/templates/views/edit-email-template.html b/app/templates/views/edit-email-template.html index bca5d1ab1..87d5f5d78 100644 --- a/app/templates/views/edit-email-template.html +++ b/app/templates/views/edit-email-template.html @@ -27,8 +27,8 @@ ) }}
-