darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-02-06 03:13:42 -05:00
Code Issues Packages Projects Releases Wiki Activity
Files
32b4e6918f54d7971392e2b35af89ffc8baafdf5
notifications-admin/app/assets/javascripts/enhancedTextbox.js

88 lines
2.0 KiB
JavaScript
Raw Normal View History

Enhance message textbox by styling placeholders Users can add placeholders to their messages, eg > …your vehicle ((registration number)) when the message is sent, this gets replaced with the data the user uploads, eg > …your vehicle LC12 BFL We reckon that it will be useful to see that the placeholder has been recognised, ie that its syntax is correct, before uploading any data. We reckon that the best way to do this is by styling it differently to the rest of the text that the user types. This is not a trivial problem. There are two possible ways to do it: 1 Write a Google Docs-style text rendering engine, which completely replaces the native HTML `<textarea>` with a custom control, and programme what should happen when the user types something that looks like a placeholder, or presses an arrow key, or makes a selection, or… 2 Leave the `<textarea>` in place, unmodified, and duplicate layers in front of/behind it to visually replace a placeholder with the blue lozenge Unsurprisingly, this commit implements 2. There are four layers. Each layer contains live-updated copy of the text in the textbox, and each is styled differently: - one layer behind the textbox to make the blue background - the textbox itself - a layer with the white text, which overlays the black text of the textbox - a layer with an inner shadow to knock back the brackets This is because of some interesting limitations: - The text in the foreground and background must occupy the same physical space, so no deleting characters from the duplicated layers - Words can’t be split up into multiple elements, eg `<span>((</span>regist…`:—this results in slightly different kerning to `((regis…`, which messes up the alignment of the layers - The textbox can’t be completely overlapped with a block of colour, because the cursor disappears behind it. Trying to edit text when you can’t see the cursor is hard. Implementation Technically this makes use of Paul Hayes work on Javascript modules in the GOV.UK frontend toolkit[1]. It also makes use of the `oninput` event to detect changes to the textbox’s contents. This is much more performant than `onkeydown`, `onpaste`, etc. Without it the delay between user input and the layers all updating is too slow and you see misalignment of the layers. 1. https://github.com/alphagov/govuk_frontend_toolkit/pull/227
2015-12-20 00:00:01 +00:00
(function(Modules) {
"use strict";
Add Javascript feature detection for `oninput` This commit adds a feature detection for the `oninput` event, which isn’t supported in older browsers[1]. This means that the code that highlights placeholders will only be run in browsers that support the `oninput` event. 1. http://caniuse.com/#feat=input-event
2015-12-20 00:00:01 +00:00
if (
!('oninput' in document.createElement('input'))
) return;
Add conditional placeholder detection Implements: https://github.com/alphagov/notifications-utils/pull/51 Copies the same regex. Adds some CSS to display conditional placeholders differently to normal placeholders (vertical rather that curved right-hand edge).
2016-07-12 12:48:09 +01:00
const tagPattern = /\(\(([^\)\((\?)]+)(\?\?)?([^\)\(]*)\)\)/g;
Use EcmaScript 6, w/ transpiling for compatibility ES6 has some nice new features. Specifically relevant to this piece of work are: Arrow functions[1], whose `this` context is bound the value of `this` in the current scope and can’t be overidden. The code is cleaner as a result, and doesn’t need the addition of a bind polyfill for older browsers. Template strings[2], which are similar to triple-quoted multi line strings in Python. This means less fiddly and error-prone string concatenation. This commit adds Babel[3] to the Gulp pipeline. This transpiles Javascript written to the ES6 specification into code which is compatible with older browsers that don’t understand ES6 syntax. It also rewrites the gulpfile itself using some ES6 syntax, for the same reasons. 1. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions 2. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/template_strings 3. https://babeljs.io
2015-12-20 00:00:01 +00:00
Rename module HighlightTags was bad because: - we haven’t called placeholders ‘tags’ for a long time - it also does resizing of the `<textarea>`, not just highlighting the placeholders
2019-10-16 15:20:05 +01:00
Modules.EnhancedTextbox = function() {
Enhance message textbox by styling placeholders Users can add placeholders to their messages, eg > …your vehicle ((registration number)) when the message is sent, this gets replaced with the data the user uploads, eg > …your vehicle LC12 BFL We reckon that it will be useful to see that the placeholder has been recognised, ie that its syntax is correct, before uploading any data. We reckon that the best way to do this is by styling it differently to the rest of the text that the user types. This is not a trivial problem. There are two possible ways to do it: 1 Write a Google Docs-style text rendering engine, which completely replaces the native HTML `<textarea>` with a custom control, and programme what should happen when the user types something that looks like a placeholder, or presses an arrow key, or makes a selection, or… 2 Leave the `<textarea>` in place, unmodified, and duplicate layers in front of/behind it to visually replace a placeholder with the blue lozenge Unsurprisingly, this commit implements 2. There are four layers. Each layer contains live-updated copy of the text in the textbox, and each is styled differently: - one layer behind the textbox to make the blue background - the textbox itself - a layer with the white text, which overlays the black text of the textbox - a layer with an inner shadow to knock back the brackets This is because of some interesting limitations: - The text in the foreground and background must occupy the same physical space, so no deleting characters from the duplicated layers - Words can’t be split up into multiple elements, eg `<span>((</span>regist…`:—this results in slightly different kerning to `((regis…`, which messes up the alignment of the layers - The textbox can’t be completely overlapped with a block of colour, because the cursor disappears behind it. Trying to edit text when you can’t see the cursor is hard. Implementation Technically this makes use of Paul Hayes work on Javascript modules in the GOV.UK frontend toolkit[1]. It also makes use of the `oninput` event to detect changes to the textbox’s contents. This is much more performant than `onkeydown`, `onpaste`, etc. Without it the delay between user input and the layers all updating is too slow and you see misalignment of the layers. 1. https://github.com/alphagov/govuk_frontend_toolkit/pull/227
2015-12-20 00:00:01 +00:00
this.start = function(textarea) {
Autosize textboxes w/out highlighting placeholders Scrolling within textareas on the page is a bit grim. Which is why we don’t do it for the textboxes that people use to edit templates. This commit will allow us to extend the auto-resizing of `<textarea>`s to those which don’t need the highlighting of placeholders. The code is still quite coupled to the placeholder highlighting code, because both work by copying the content of the `<textarea>` into a `<div>` that underlaps the textbox. This `<div>` is used for both rendering the placeholder highlights, and calculating the natural height of the content. So it would be hard/confusing to split the two bits of code into separate modules.
2019-10-16 14:35:18 +01:00
let visibleTextbox;
this.highlightPlaceholders = (
typeof textarea.data('highlightPlaceholders') === 'undefined' ||
!!textarea.data('highlightPlaceholders')
);
Enhance message textbox by styling placeholders Users can add placeholders to their messages, eg > …your vehicle ((registration number)) when the message is sent, this gets replaced with the data the user uploads, eg > …your vehicle LC12 BFL We reckon that it will be useful to see that the placeholder has been recognised, ie that its syntax is correct, before uploading any data. We reckon that the best way to do this is by styling it differently to the rest of the text that the user types. This is not a trivial problem. There are two possible ways to do it: 1 Write a Google Docs-style text rendering engine, which completely replaces the native HTML `<textarea>` with a custom control, and programme what should happen when the user types something that looks like a placeholder, or presses an arrow key, or makes a selection, or… 2 Leave the `<textarea>` in place, unmodified, and duplicate layers in front of/behind it to visually replace a placeholder with the blue lozenge Unsurprisingly, this commit implements 2. There are four layers. Each layer contains live-updated copy of the text in the textbox, and each is styled differently: - one layer behind the textbox to make the blue background - the textbox itself - a layer with the white text, which overlays the black text of the textbox - a layer with an inner shadow to knock back the brackets This is because of some interesting limitations: - The text in the foreground and background must occupy the same physical space, so no deleting characters from the duplicated layers - Words can’t be split up into multiple elements, eg `<span>((</span>regist…`:—this results in slightly different kerning to `((regis…`, which messes up the alignment of the layers - The textbox can’t be completely overlapped with a block of colour, because the cursor disappears behind it. Trying to edit text when you can’t see the cursor is hard. Implementation Technically this makes use of Paul Hayes work on Javascript modules in the GOV.UK frontend toolkit[1]. It also makes use of the `oninput` event to detect changes to the textbox’s contents. This is much more performant than `onkeydown`, `onpaste`, etc. Without it the delay between user input and the layers all updating is too slow and you see misalignment of the layers. 1. https://github.com/alphagov/govuk_frontend_toolkit/pull/227
2015-12-20 00:00:01 +00:00
this.$textbox = $(textarea)
Use EcmaScript 6, w/ transpiling for compatibility ES6 has some nice new features. Specifically relevant to this piece of work are: Arrow functions[1], whose `this` context is bound the value of `this` in the current scope and can’t be overidden. The code is cleaner as a result, and doesn’t need the addition of a bind polyfill for older browsers. Template strings[2], which are similar to triple-quoted multi line strings in Python. This means less fiddly and error-prone string concatenation. This commit adds Babel[3] to the Gulp pipeline. This transpiles Javascript written to the ES6 specification into code which is compatible with older browsers that don’t understand ES6 syntax. It also rewrites the gulpfile itself using some ES6 syntax, for the same reasons. 1. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions 2. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/template_strings 3. https://babeljs.io
2015-12-20 00:00:01 +00:00
.wrap(`
<div class='textbox-highlight-wrapper' />
`)
Make placeholder look more editable Depends on: - [ ] https://github.com/alphagov/notifications-utils/pull/40 In research we’ve noticed two problems with the appearance of placeholders: 1. We are inconsistent about when we display the ((double brackets)). Sometimes we show them, sometimes we don’t. This doesn’t help user’s understanding about where the column names in their CSV file come from, or how they can edit the template to fix any errors. 2. Because they look so different from normal `<textarea>` text, it’s not immediately obvious that they can be edited just like normal text. They look more like something that can be dragged/inserted. So this commit: 1. Makes the brackets always-visible. 2. Makes the text colour of the placeholder `$text-colour`, and only highlights the name of the ‘variable’, not the brackets themselves.
2016-06-02 10:40:17 +01:00
.after(this.$background = $(`
Use EcmaScript 6, w/ transpiling for compatibility ES6 has some nice new features. Specifically relevant to this piece of work are: Arrow functions[1], whose `this` context is bound the value of `this` in the current scope and can’t be overidden. The code is cleaner as a result, and doesn’t need the addition of a bind polyfill for older browsers. Template strings[2], which are similar to triple-quoted multi line strings in Python. This means less fiddly and error-prone string concatenation. This commit adds Babel[3] to the Gulp pipeline. This transpiles Javascript written to the ES6 specification into code which is compatible with older browsers that don’t understand ES6 syntax. It also rewrites the gulpfile itself using some ES6 syntax, for the same reasons. 1. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions 2. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/template_strings 3. https://babeljs.io
2015-12-20 00:00:01 +00:00
<div class="textbox-highlight-background" aria-hidden="true" />
`))
Remove method that maintain’s scroll parity Since we don’t anticipate placeholder textboxes ever scrolling in the future, this can be removed.
2016-03-18 09:16:59 +00:00
.on("input", this.update);
Enhance message textbox by styling placeholders Users can add placeholders to their messages, eg > …your vehicle ((registration number)) when the message is sent, this gets replaced with the data the user uploads, eg > …your vehicle LC12 BFL We reckon that it will be useful to see that the placeholder has been recognised, ie that its syntax is correct, before uploading any data. We reckon that the best way to do this is by styling it differently to the rest of the text that the user types. This is not a trivial problem. There are two possible ways to do it: 1 Write a Google Docs-style text rendering engine, which completely replaces the native HTML `<textarea>` with a custom control, and programme what should happen when the user types something that looks like a placeholder, or presses an arrow key, or makes a selection, or… 2 Leave the `<textarea>` in place, unmodified, and duplicate layers in front of/behind it to visually replace a placeholder with the blue lozenge Unsurprisingly, this commit implements 2. There are four layers. Each layer contains live-updated copy of the text in the textbox, and each is styled differently: - one layer behind the textbox to make the blue background - the textbox itself - a layer with the white text, which overlays the black text of the textbox - a layer with an inner shadow to knock back the brackets This is because of some interesting limitations: - The text in the foreground and background must occupy the same physical space, so no deleting characters from the duplicated layers - Words can’t be split up into multiple elements, eg `<span>((</span>regist…`:—this results in slightly different kerning to `((regis…`, which messes up the alignment of the layers - The textbox can’t be completely overlapped with a block of colour, because the cursor disappears behind it. Trying to edit text when you can’t see the cursor is hard. Implementation Technically this makes use of Paul Hayes work on Javascript modules in the GOV.UK frontend toolkit[1]. It also makes use of the `oninput` event to detect changes to the textbox’s contents. This is much more performant than `onkeydown`, `onpaste`, etc. Without it the delay between user input and the layers all updating is too slow and you see misalignment of the layers. 1. https://github.com/alphagov/govuk_frontend_toolkit/pull/227
2015-12-20 00:00:01 +00:00
ensure highlighting div size always matches the relevant textarea
2020-03-05 15:44:31 +00:00
$(window).on("resize", this.resize);
Autosize textboxes w/out highlighting placeholders Scrolling within textareas on the page is a bit grim. Which is why we don’t do it for the textboxes that people use to edit templates. This commit will allow us to extend the auto-resizing of `<textarea>`s to those which don’t need the highlighting of placeholders. The code is still quite coupled to the placeholder highlighting code, because both work by copying the content of the `<textarea>` into a `<div>` that underlaps the textbox. This `<div>` is used for both rendering the placeholder highlights, and calculating the natural height of the content. So it would be hard/confusing to split the two bits of code into separate modules.
2019-10-16 14:35:18 +01:00
visibleTextbox = this.$textbox.clone().appendTo("body").css({
position: 'absolute',
visibility: 'hidden',
display: 'block'
});
this.initialHeight = visibleTextbox.height();
Make textboxes expand to fit contents This applies to any textbox which has placeholders. There are two reasons to do this: 1. Scrolling in textboxes is fiddly, especially on touch devices 2. Keeping the placeholders aligned with the textbox is fiddly too These can both be avoided by always having the textbox be larger than its contents so it never needs to scroll. By default—and unlike other block-level elements—textboxes dont expand to fit their contents. The layer with the placeholders in _does_ however, because it’s a normal block-level element. Since the layer with the placeholders always has an exact copy of what in the textbox, we can set the textbox’s height to match the height of the layer with the placeholders, and do this every time the content changes.
2016-03-18 08:52:29 +00:00
Make placeholder look more editable Depends on: - [ ] https://github.com/alphagov/notifications-utils/pull/40 In research we’ve noticed two problems with the appearance of placeholders: 1. We are inconsistent about when we display the ((double brackets)). Sometimes we show them, sometimes we don’t. This doesn’t help user’s understanding about where the column names in their CSV file come from, or how they can edit the template to fix any errors. 2. Because they look so different from normal `<textarea>` text, it’s not immediately obvious that they can be edited just like normal text. They look more like something that can be dragged/inserted. So this commit: 1. Makes the brackets always-visible. 2. Makes the text colour of the placeholder `$text-colour`, and only highlights the name of the ‘variable’, not the brackets themselves.
2016-06-02 10:40:17 +01:00
this.$background.css({
Make border width of field layers match textbox We put a border on text boxes that have errors. This means that they take up more space than the layers above them which don’t have borders. This makes the layers that highlight the fields in a template misalign. This commit adds a line to make the borders match, which fixes this.
2016-04-07 16:08:40 +01:00
'border-width': this.$textbox.css('border-width')
});
Make ‘edit template’ textboxes the same width This involves: - removing the hard coded width on any textbox that does placeholder highlighting - adding JS to make sure that the extra layers on top of the textbox inherit the width of the textbox that the user types in (so the layers don’t get misaligned) Keeping the textboxes at 2/3 width for consistency with how wide the messages are on the ‘manage templates’ page.
2016-02-08 09:59:04 +00:00
Autosize textboxes w/out highlighting placeholders Scrolling within textareas on the page is a bit grim. Which is why we don’t do it for the textboxes that people use to edit templates. This commit will allow us to extend the auto-resizing of `<textarea>`s to those which don’t need the highlighting of placeholders. The code is still quite coupled to the placeholder highlighting code, because both work by copying the content of the `<textarea>` into a `<div>` that underlaps the textbox. This `<div>` is used for both rendering the placeholder highlights, and calculating the natural height of the content. So it would be hard/confusing to split the two bits of code into separate modules.
2019-10-16 14:35:18 +01:00
visibleTextbox.remove();
Enhance message textbox by styling placeholders Users can add placeholders to their messages, eg > …your vehicle ((registration number)) when the message is sent, this gets replaced with the data the user uploads, eg > …your vehicle LC12 BFL We reckon that it will be useful to see that the placeholder has been recognised, ie that its syntax is correct, before uploading any data. We reckon that the best way to do this is by styling it differently to the rest of the text that the user types. This is not a trivial problem. There are two possible ways to do it: 1 Write a Google Docs-style text rendering engine, which completely replaces the native HTML `<textarea>` with a custom control, and programme what should happen when the user types something that looks like a placeholder, or presses an arrow key, or makes a selection, or… 2 Leave the `<textarea>` in place, unmodified, and duplicate layers in front of/behind it to visually replace a placeholder with the blue lozenge Unsurprisingly, this commit implements 2. There are four layers. Each layer contains live-updated copy of the text in the textbox, and each is styled differently: - one layer behind the textbox to make the blue background - the textbox itself - a layer with the white text, which overlays the black text of the textbox - a layer with an inner shadow to knock back the brackets This is because of some interesting limitations: - The text in the foreground and background must occupy the same physical space, so no deleting characters from the duplicated layers - Words can’t be split up into multiple elements, eg `<span>((</span>regist…`:—this results in slightly different kerning to `((regis…`, which messes up the alignment of the layers - The textbox can’t be completely overlapped with a block of colour, because the cursor disappears behind it. Trying to edit text when you can’t see the cursor is hard. Implementation Technically this makes use of Paul Hayes work on Javascript modules in the GOV.UK frontend toolkit[1]. It also makes use of the `oninput` event to detect changes to the textbox’s contents. This is much more performant than `onkeydown`, `onpaste`, etc. Without it the delay between user input and the layers all updating is too slow and you see misalignment of the layers. 1. https://github.com/alphagov/govuk_frontend_toolkit/pull/227
2015-12-20 00:00:01 +00:00
this.$textbox
.trigger("input");
};
Use sticky footer on edit template page If you have a long template it’s annoying to have to scroll all the way to the bottom to click save, when you’ve only changed a small thing near the staert of the content.
2019-01-14 13:30:12 +00:00
this.resize = () => {
ensure highlighting div size always matches the relevant textarea
2020-03-05 15:44:31 +00:00
this.$background.width(this.$textbox.width());
Autosize textboxes w/out highlighting placeholders Scrolling within textareas on the page is a bit grim. Which is why we don’t do it for the textboxes that people use to edit templates. This commit will allow us to extend the auto-resizing of `<textarea>`s to those which don’t need the highlighting of placeholders. The code is still quite coupled to the placeholder highlighting code, because both work by copying the content of the `<textarea>` into a `<div>` that underlaps the textbox. This `<div>` is used for both rendering the placeholder highlights, and calculating the natural height of the content. So it would be hard/confusing to split the two bits of code into separate modules.
2019-10-16 14:35:18 +01:00
Use sticky footer on edit template page If you have a long template it’s annoying to have to scroll all the way to the bottom to click save, when you’ve only changed a small thing near the staert of the content.
2019-01-14 13:30:12 +00:00
this.$textbox.height(
Math.max(
this.initialHeight,
this.$background.outerHeight()
)
);
if ('stickAtBottomWhenScrolling' in GOVUK) {
GOVUK.stickAtBottomWhenScrolling.recalculate();
}
};
Make textboxes expand to fit contents This applies to any textbox which has placeholders. There are two reasons to do this: 1. Scrolling in textboxes is fiddly, especially on touch devices 2. Keeping the placeholders aligned with the textbox is fiddly too These can both be avoided by always having the textbox be larger than its contents so it never needs to scroll. By default—and unlike other block-level elements—textboxes dont expand to fit their contents. The layer with the placeholders in _does_ however, because it’s a normal block-level element. Since the layer with the placeholders always has an exact copy of what in the textbox, we can set the textbox’s height to match the height of the layer with the placeholders, and do this every time the content changes.
2016-03-18 08:52:29 +00:00
Autosize textboxes w/out highlighting placeholders Scrolling within textareas on the page is a bit grim. Which is why we don’t do it for the textboxes that people use to edit templates. This commit will allow us to extend the auto-resizing of `<textarea>`s to those which don’t need the highlighting of placeholders. The code is still quite coupled to the placeholder highlighting code, because both work by copying the content of the `<textarea>` into a `<div>` that underlaps the textbox. This `<div>` is used for both rendering the placeholder highlights, and calculating the natural height of the content. So it would be hard/confusing to split the two bits of code into separate modules.
2019-10-16 14:35:18 +01:00
this.contentEscaped = () => $('<div/>').text(this.$textbox.val()).html();
Enhance the ‘how to do placeholders’ hint This commit makes the ‘how to do placeholders’ box part of the tour, with the same blue background. It also adds some Javascript enhancement so that: - it responds to the contents of the message template - has a ‘show me’ link which inserts ‘Dear ((name))’ into the template contents textbox We’ve found that this has helped people understnad what placeholders are, and how to do them.
2016-03-30 11:39:16 +01:00
Autosize textboxes w/out highlighting placeholders Scrolling within textareas on the page is a bit grim. Which is why we don’t do it for the textboxes that people use to edit templates. This commit will allow us to extend the auto-resizing of `<textarea>`s to those which don’t need the highlighting of placeholders. The code is still quite coupled to the placeholder highlighting code, because both work by copying the content of the `<textarea>` into a `<div>` that underlaps the textbox. This `<div>` is used for both rendering the placeholder highlights, and calculating the natural height of the content. So it would be hard/confusing to split the two bits of code into separate modules.
2019-10-16 14:35:18 +01:00
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>`
Remove method that maintain’s scroll parity Since we don’t anticipate placeholder textboxes ever scrolling in the future, this can be removed.
2016-03-18 09:16:59 +00:00
);
Make textboxes expand to fit contents This applies to any textbox which has placeholders. There are two reasons to do this: 1. Scrolling in textboxes is fiddly, especially on touch devices 2. Keeping the placeholders aligned with the textbox is fiddly too These can both be avoided by always having the textbox be larger than its contents so it never needs to scroll. By default—and unlike other block-level elements—textboxes dont expand to fit their contents. The layer with the placeholders in _does_ however, because it’s a normal block-level element. Since the layer with the placeholders always has an exact copy of what in the textbox, we can set the textbox’s height to match the height of the layer with the placeholders, and do this every time the content changes.
2016-03-18 08:52:29 +00:00
Autosize textboxes w/out highlighting placeholders Scrolling within textareas on the page is a bit grim. Which is why we don’t do it for the textboxes that people use to edit templates. This commit will allow us to extend the auto-resizing of `<textarea>`s to those which don’t need the highlighting of placeholders. The code is still quite coupled to the placeholder highlighting code, because both work by copying the content of the `<textarea>` into a `<div>` that underlaps the textbox. This `<div>` is used for both rendering the placeholder highlights, and calculating the natural height of the content. So it would be hard/confusing to split the two bits of code into separate modules.
2019-10-16 14:35:18 +01:00
this.update = () => {
this.$background.html(
this.highlightPlaceholders ? this.contentReplaced() : this.contentEscaped()
);
this.resize();
};
Enhance message textbox by styling placeholders Users can add placeholders to their messages, eg > …your vehicle ((registration number)) when the message is sent, this gets replaced with the data the user uploads, eg > …your vehicle LC12 BFL We reckon that it will be useful to see that the placeholder has been recognised, ie that its syntax is correct, before uploading any data. We reckon that the best way to do this is by styling it differently to the rest of the text that the user types. This is not a trivial problem. There are two possible ways to do it: 1 Write a Google Docs-style text rendering engine, which completely replaces the native HTML `<textarea>` with a custom control, and programme what should happen when the user types something that looks like a placeholder, or presses an arrow key, or makes a selection, or… 2 Leave the `<textarea>` in place, unmodified, and duplicate layers in front of/behind it to visually replace a placeholder with the blue lozenge Unsurprisingly, this commit implements 2. There are four layers. Each layer contains live-updated copy of the text in the textbox, and each is styled differently: - one layer behind the textbox to make the blue background - the textbox itself - a layer with the white text, which overlays the black text of the textbox - a layer with an inner shadow to knock back the brackets This is because of some interesting limitations: - The text in the foreground and background must occupy the same physical space, so no deleting characters from the duplicated layers - Words can’t be split up into multiple elements, eg `<span>((</span>regist…`:—this results in slightly different kerning to `((regis…`, which messes up the alignment of the layers - The textbox can’t be completely overlapped with a block of colour, because the cursor disappears behind it. Trying to edit text when you can’t see the cursor is hard. Implementation Technically this makes use of Paul Hayes work on Javascript modules in the GOV.UK frontend toolkit[1]. It also makes use of the `oninput` event to detect changes to the textbox’s contents. This is much more performant than `onkeydown`, `onpaste`, etc. Without it the delay between user input and the layers all updating is too slow and you see misalignment of the layers. 1. https://github.com/alphagov/govuk_frontend_toolkit/pull/227
2015-12-20 00:00:01 +00:00
};
})(window.GOVUK.Modules);
Reference in New Issue Copy Permalink