mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-31 03:39:19 -04:00
Merge pull request #3149 from alphagov/resize-all-textbox-dem
Let textareas resize automatically without having to highlight placeholders
This commit is contained in:
Chris Hill-Scott
85
app/assets/javascripts/enhancedTextbox.js
Normal file
85
app/assets/javascripts/enhancedTextbox.js
Normal file
@@ -0,0 +1,85 @@
|
||||
(function(Modules) {
|
||||
"use strict";
|
||||
|
||||
if (
|
||||
!('oninput' in document.createElement('input'))
|
||||
) return;
|
||||
|
||||
const tagPattern = /\(\(([^\)\((\?)]+)(\?\?)?([^\)\(]*)\)\)/g;
|
||||
|
||||
Modules.EnhancedTextbox = function() {
|
||||
|
||||
this.start = function(textarea) {
|
||||
|
||||
let visibleTextbox;
|
||||
|
||||
this.highlightPlaceholders = (
|
||||
typeof textarea.data('highlightPlaceholders') === 'undefined' ||
|
||||
!!textarea.data('highlightPlaceholders')
|
||||
);
|
||||
|
||||
this.$textbox = $(textarea)
|
||||
.wrap(`
|
||||
<div class='textbox-highlight-wrapper' />
|
||||
`)
|
||||
.after(this.$background = $(`
|
||||
<div class="textbox-highlight-background" aria-hidden="true" />
|
||||
`))
|
||||
.on("input", this.update);
|
||||
|
||||
visibleTextbox = this.$textbox.clone().appendTo("body").css({
|
||||
position: 'absolute',
|
||||
visibility: 'hidden',
|
||||
display: 'block'
|
||||
});
|
||||
this.initialHeight = visibleTextbox.height();
|
||||
|
||||
this.$background.css({
|
||||
'border-width': this.$textbox.css('border-width')
|
||||
});
|
||||
|
||||
visibleTextbox.remove();
|
||||
|
||||
this.$textbox
|
||||
.trigger("input");
|
||||
|
||||
};
|
||||
|
||||
this.resize = () => {
|
||||
|
||||
this.$background.width(this.$textbox.outerWidth());
|
||||
|
||||
this.$textbox.height(
|
||||
Math.max(
|
||||
this.initialHeight,
|
||||
this.$background.outerHeight()
|
||||
)
|
||||
);
|
||||
|
||||
if ('stickAtBottomWhenScrolling' in GOVUK) {
|
||||
GOVUK.stickAtBottomWhenScrolling.recalculate();
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
this.contentEscaped = () => $('<div/>').text(this.$textbox.val()).html();
|
||||
|
||||
this.contentReplaced = () => this.contentEscaped().replace(
|
||||
tagPattern, (match, name, separator, value) => value && separator ?
|
||||
`<span class='placeholder-conditional'>((${name}??</span>${value}))` :
|
||||
`<span class='placeholder'>((${name}${value}))</span>`
|
||||
);
|
||||
|
||||
this.update = () => {
|
||||
|
||||
this.$background.html(
|
||||
this.highlightPlaceholders ? this.contentReplaced() : this.contentEscaped()
|
||||
);
|
||||
|
||||
this.resize();
|
||||
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
})(window.GOVUK.Modules);
|
||||
@@ -1,64 +0,0 @@
|
||||
(function(Modules) {
|
||||
"use strict";
|
||||
|
||||
if (
|
||||
!('oninput' in document.createElement('input'))
|
||||
) return;
|
||||
|
||||
const tagPattern = /\(\(([^\)\((\?)]+)(\?\?)?([^\)\(]*)\)\)/g;
|
||||
|
||||
Modules.HighlightTags = function() {
|
||||
|
||||
this.start = function(textarea) {
|
||||
|
||||
this.$textbox = $(textarea)
|
||||
.wrap(`
|
||||
<div class='textbox-highlight-wrapper' />
|
||||
`)
|
||||
.after(this.$background = $(`
|
||||
<div class="textbox-highlight-background" aria-hidden="true" />
|
||||
`))
|
||||
.on("input", this.update);
|
||||
|
||||
this.initialHeight = this.$textbox.height();
|
||||
|
||||
this.$background.css({
|
||||
'width': this.$textbox.outerWidth(),
|
||||
'border-width': this.$textbox.css('border-width')
|
||||
});
|
||||
|
||||
this.$textbox
|
||||
.trigger("input");
|
||||
|
||||
};
|
||||
|
||||
this.resize = () => {
|
||||
|
||||
this.$textbox.height(
|
||||
Math.max(
|
||||
this.initialHeight,
|
||||
this.$background.outerHeight()
|
||||
)
|
||||
);
|
||||
|
||||
if ('stickAtBottomWhenScrolling' in GOVUK) {
|
||||
GOVUK.stickAtBottomWhenScrolling.recalculate();
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
this.escapedMessage = () => $('<div/>').text(this.$textbox.val()).html();
|
||||
|
||||
this.replacePlaceholders = () => this.$background.html(
|
||||
this.escapedMessage().replace(
|
||||
tagPattern, (match, name, separator, value) => value && separator ?
|
||||
`<span class='placeholder-conditional'>((${name}??</span>${value}))` :
|
||||
`<span class='placeholder'>((${name}${value}))</span>`
|
||||
)
|
||||
);
|
||||
|
||||
this.update = () => this.replacePlaceholders() && this.resize();
|
||||
|
||||
};
|
||||
|
||||
})(window.GOVUK.Modules);
|
||||
@@ -2,8 +2,9 @@
|
||||
field,
|
||||
label=None,
|
||||
hint=False,
|
||||
highlight_tags=False,
|
||||
highlight_placeholders=False,
|
||||
autofocus=False,
|
||||
autosize=False,
|
||||
colour_preview=False,
|
||||
help_link=None,
|
||||
help_link_text=None,
|
||||
@@ -34,7 +35,7 @@
|
||||
{% endif %}
|
||||
</label>
|
||||
{%
|
||||
if highlight_tags
|
||||
if highlight_placeholders or autosize
|
||||
%}
|
||||
{% set field_class = 'form-control-{} textbox-highlight-textbox'.format(width) %}
|
||||
{% else %}
|
||||
@@ -47,7 +48,8 @@
|
||||
%}
|
||||
{{ field(
|
||||
class=field_class,
|
||||
data_module='highlight-tags' if highlight_tags else '',
|
||||
data_module='enhanced-textbox' if highlight_placeholders or autosize else '',
|
||||
data_highlight_placeholders='true' if highlight_placeholders else 'false',
|
||||
rows=rows|string,
|
||||
**kwargs
|
||||
) }}
|
||||
|
||||
@@ -20,8 +20,8 @@
|
||||
<div class="grid-row">
|
||||
<div class="column-five-sixths">
|
||||
{{ textbox(form.name, width='1-1', hint='Your recipients will not see this', rows=10) }}
|
||||
{{ textbox(form.subject, width='1-1', highlight_tags=True, rows=2) }}
|
||||
{{ textbox(form.template_content, highlight_tags=True, width='1-1', rows=8) }}
|
||||
{{ textbox(form.subject, width='1-1', highlight_placeholders=True, rows=2) }}
|
||||
{{ textbox(form.template_content, highlight_placeholders=True, width='1-1', rows=8) }}
|
||||
{% if current_user.platform_admin %}
|
||||
{{ radios(form.process_type) }}
|
||||
{% endif %}
|
||||
|
||||
@@ -20,8 +20,8 @@
|
||||
<div class="grid-row">
|
||||
<div class="column-five-sixths">
|
||||
{{ textbox(form.name, width='1-1', hint='Your recipients will not see this', rows=10) }}
|
||||
{{ textbox(form.subject, width='1-1', highlight_tags=True, rows=2) }}
|
||||
{{ textbox(form.template_content, highlight_tags=True, width='1-1', rows=8) }}
|
||||
{{ textbox(form.subject, width='1-1', highlight_placeholders=True, rows=2) }}
|
||||
{{ textbox(form.template_content, highlight_placeholders=True, width='1-1', rows=8) }}
|
||||
{{ sticky_page_footer(
|
||||
'Save'
|
||||
) }}
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
{{ textbox(form.name, width='1-1', hint='Your recipients will not see this') }}
|
||||
</div>
|
||||
<div class="column-two-thirds">
|
||||
{{ textbox(form.template_content, highlight_tags=True, width='1-1', rows=5) }}
|
||||
{{ textbox(form.template_content, highlight_placeholders=True, width='1-1', rows=5) }}
|
||||
{% if current_user.platform_admin %}
|
||||
{{ radios(form.process_type) }}
|
||||
{% endif %}
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
belonging to this organisation requests to go live.
|
||||
</p>
|
||||
{% call form_wrapper() %}
|
||||
{{ textbox(form.request_to_go_live_notes, width='1-1', rows=3) }}
|
||||
{{ textbox(form.request_to_go_live_notes, width='1-1', rows=3, autosize=True) }}
|
||||
{{ page_footer('Save') }}
|
||||
{% endcall %}
|
||||
</div>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
<div class="column-two-thirds">
|
||||
<h1 class="heading-large">Submit returned letters</h1>
|
||||
{% call form_wrapper() %}
|
||||
{{ textbox(form.references, width='1-1', rows=8) }}
|
||||
{{ textbox(form.references, width='1-1', rows=8, autosize=True) }}
|
||||
{{ page_footer("Submit") }}
|
||||
{% endcall %}
|
||||
</div>
|
||||
|
||||
@@ -45,6 +45,7 @@
|
||||
form.something_else,
|
||||
hint='Include links to your brand guidelines or examples of how to use your branding',
|
||||
width='1-1',
|
||||
autosize=True,
|
||||
) }}
|
||||
{% endcall %}
|
||||
{% endif %}
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
hint='10 lines maximum',
|
||||
width='1-2',
|
||||
rows=10,
|
||||
highlight_tags=True
|
||||
highlight_placeholders=True
|
||||
) }}
|
||||
{% if not first_contact_block %}
|
||||
<div class="form-group">
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
hint='10 lines maximum',
|
||||
width='1-2',
|
||||
rows=10,
|
||||
highlight_tags=True
|
||||
highlight_placeholders=True
|
||||
) }}
|
||||
|
||||
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
hint='10 lines maximum',
|
||||
width='1-1',
|
||||
rows=10,
|
||||
highlight_tags=True
|
||||
highlight_placeholders=True
|
||||
) }}
|
||||
{{ page_footer('Save') }}
|
||||
{% endcall %}
|
||||
|
||||
@@ -181,7 +181,7 @@
|
||||
<h2 class="heading-large">Textbox</h2>
|
||||
{{ textbox(form.username) }}
|
||||
{{ textbox(form.password) }}
|
||||
{{ textbox(form.message, highlight_tags=True) }}
|
||||
{{ textbox(form.message, highlight_placeholders=True) }}
|
||||
{{ textbox(form.code, width='1-8') }}
|
||||
|
||||
<h2 class="heading-large">File upload</h2>
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<div class="grid-row">
|
||||
<div class="column-two-thirds">
|
||||
{% call form_wrapper() %}
|
||||
{{ textbox(form.feedback, width='1-1', hint='', rows=10) }}
|
||||
{{ textbox(form.feedback, width='1-1', hint='', rows=10, autosize=True) }}
|
||||
{% if not current_user.is_authenticated %}
|
||||
<h3 class="heading-medium">Do you want a reply?</h3>
|
||||
<p>Leave your details below if you’d like a response.</p>
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
</p>
|
||||
</div>
|
||||
{% call form_wrapper() %}
|
||||
{{ textbox(form.feedback, width='1-1', hint='', rows=10) }}
|
||||
{{ textbox(form.feedback, width='1-1', hint='', rows=10, autosize=True) }}
|
||||
{% if not current_user.is_authenticated %}
|
||||
{{ textbox(form.name, width='1-1') }}
|
||||
{{ textbox(form.email_address, width='1-1') }}
|
||||
|
||||
Reference in New Issue
Block a user