app/assets/javascripts/main.js

$(() => $("time.timeago").timeago());

$(() => GOVUK.stickAtTopWhenScrolling.init());
$(() => GOVUK.stickAtBottomWhenScrolling.init());

var showHideContent = new GOVUK.ShowHideContent();
showHideContent.init();

$(() => GOVUK.modules.start());

$(() => $('.error-message').eq(0).parent('label').next('input').trigger('focus'));

$(() => $('.banner-dangerous').eq(0).trigger('focus'));
Make relative timestamps update automatically It’s weird to be on a page that says ‘2 seconds ago’ and stays stuck there. We don’t want to AJAX the whole page because it would get in the way of interacting with the list of notifications. This commit adds the venerable jQuery Timeago[1] plugin to keep the relative times accurate and fresh. 1. http://timeago.yarp.com/ 2016-09-28 17:47:40 +01:00			`$(() => $("time.timeago").timeago());`

Make send yourself a test form stay at top of page You might need to scroll this page quite a lot to see where a placeholder appears in your template – especially if you have a long email or letter. One of the things I’m trying to stop happening so much is a lot of scrolling back and forth. This would happen if you were scrolling down to see the placeholder, then back up to fill in its value. So this commit makes the textbox ‘sticky’, ie it always stays at the top of the viewport, even when you scroll down. This lets you see the placeholder and the textbox side by side, no matter how long the template is. The code to do this mostly comes from the GOV.UK Frontend Toolkit (documented here: https://github.com/alphagov/govuk_frontend_toolkit/blob/d9489a987086471fe30b4b925a81c12cd198c91d/docs/javascript.md#stick-at-top-when-scrolling). I had to add some extra CSS to make it look good when it overlaps the content of the page, which the GOV.UK Frontend Toolkit implementation doesn’t really anticipate. 2017-05-16 16:56:40 +01:00			`$(() => GOVUK.stickAtTopWhenScrolling.init());`
Add stop-at-bottom functionality Detach all methods from sticky reference so they can be attached to different objects. Split sticky into stickAtTop and stickAtBottom and make new versions of all methods and properties specific to stickAtBottom. Add CSS for stickAtBottom and call on load 2018-11-05 17:47:25 +00:00			`$(() => GOVUK.stickAtBottomWhenScrolling.init());`
Make send yourself a test form stay at top of page You might need to scroll this page quite a lot to see where a placeholder appears in your template – especially if you have a long email or letter. One of the things I’m trying to stop happening so much is a lot of scrolling back and forth. This would happen if you were scrolling down to see the placeholder, then back up to fill in its value. So this commit makes the textbox ‘sticky’, ie it always stays at the top of the viewport, even when you scroll down. This lets you see the placeholder and the textbox side by side, no matter how long the template is. The code to do this mostly comes from the GOV.UK Frontend Toolkit (documented here: https://github.com/alphagov/govuk_frontend_toolkit/blob/d9489a987086471fe30b4b925a81c12cd198c91d/docs/javascript.md#stick-at-top-when-scrolling). I had to add some extra CSS to make it look good when it overlaps the content of the page, which the GOV.UK Frontend Toolkit implementation doesn’t really anticipate. 2017-05-16 16:56:40 +01:00
Allow service contact details to be phone number, email or url Service contact details are needed if the upload document permission is enabled - this used to be a link but services can now choose to use a link, email address or phone number. The form to add or change service contact details now gives these options and validates the data according to the type of contact details provided. When validating phone numbers we can't use the existing validation because we want to allow landlines too, so there is a basic check that the phone number is the right length and doesn't include certain characters. 2018-08-09 11:59:05 +01:00			`var showHideContent = new GOVUK.ShowHideContent();`
			`showHideContent.init();`

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			`$(() => GOVUK.modules.start());`
Simplify template picker to be just radio buttons Includes making the selection buttons work properly 2016-01-13 17:42:01 +00:00
Automatically focus the first form field error Because we’re not showing a summary of error messages screen reader users might take a while to discover that there’s an error on the page. Since the only real action on a page with errors is to correct them this commit adds some Javascript to send focus straight to the first error message on a page. 2016-02-23 06:47:39 +00:00			`$(() => $('.error-message').eq(0).parent('label').next('input').trigger('focus'));`
Send focus to error summary before single error > If both sections of the page have errors and the page is submitted, > focus moves to the mobile numbers section so screen reader users may > not be aware of preceding errors - focus should move to a dedicated > error summary at the top of the page. Right now we use Javascript to focus the first error on a page (if any errors are found). This commit adds more JS to then focus the error summary, if there is one on the page. So this is where the focus will rest. It also makes some modifications to the ‘dangerous’ banner to make it focusable, and to visually indicate that it is focused. 2017-02-13 12:11:32 +00:00
			`$(() => $('.banner-dangerous').eq(0).trigger('focus'));`