app/assets/javascripts/main.js

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

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

$(() => new GOVUK.SelectionButtons('.block-label input, .sms-message-option input'));

$(() => $('.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());`

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
Put message previews on ‘Send SMS’ page A previous commit removed these to differentiate between this page and the manage templates page. It turns out that we do want previews on this page because: - the users for the two pages might be different—they might only be allowed to do one or the other depending what permissions they have - it’s useful to see what the placeholders in the message are before uploading a CSV, to make sure the CSV has the correct column headings This commit re-adds the message preview with a simpler UI. Discussed with @antimega and we both agreed that the speech bubble tails on the messages should go. 2016-01-20 10:36:41 +00:00			`$(() => new GOVUK.SelectionButtons('.block-label input, .sms-message-option input'));`
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'));`