darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-02-21 10:54:49 -05:00
Code Issues Packages Projects Releases Wiki Activity
Files
3bc2fffbb2fa46daed8faeedef7bede3ad41388d
notifications-admin/app/assets/javascripts/main.js

27 lines
742 B
JavaScript
Raw Normal View History

Make use of JS Modules less confusing It's not obvious how the code that includes JS Modules in the frontend build works. This adds lots of comments to explain the various bits and flattens `modules/all.mjs` to just be a single function that starts off the window.GOVUK namespace. Also removes `module/all.js` from the repo'. It's an artefact used by the frontend build so shouldn't be included as source code.
2019-11-19 14:57:49 +00:00
window.GOVUK.Frontend.initAll();
Add GOV.UK Frontend JS This includes the JS for all GOV.UK Frontend code. If our frontend build includes a module bundler in future, we should only include the JS for the components we use, as with our Sass.
2019-10-10 16:16:51 +01:00
Clear old cookies to be based on consent We have been clearing all the Google Analytics cookies on each page request. It is now possible for a user to consent to having Google Analytics cookies so this should have been checking for that before deleting them. This makes that change, with tests for those scenarios.
2020-01-21 09:37:38 +00:00
var consentData = window.GOVUK.getConsentCookie();
window.GOVUK.Modules.CookieBanner.clearOldCookies(consentData);
Wrap analytics code in GOVUK interface Wraps our analytics code in a stripped down version of GOVUK.Analytics to allow us to plug in the GOVUK code for consent.
2019-12-13 22:07:43 +00:00
Clear old cookies to be based on consent We have been clearing all the Google Analytics cookies on each page request. It is now possible for a user to consent to having Google Analytics cookies so this should have been checking for that before deleting them. This makes that change, with tests for those scenarios.
2020-01-21 09:37:38 +00:00
if (window.GOVUK.hasConsentFor('analytics', consentData)) {
On page load, call analytics based on consent
2020-01-02 14:26:57 +00:00
window.GOVUK.initAnalytics();
}
Wrap analytics code in GOVUK interface Wraps our analytics code in a stripped down version of GOVUK.Analytics to allow us to plug in the GOVUK code for consent.
2019-12-13 22:07:43 +00:00
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'));
Don’t use $yellow to indicate local environment It clashes with the new `$govuk-focus-colour` now. This commit changes it to half way between `govuk-colour("dark-grey")` (`#505a5f`) and `govuk-colour("mid-grey")` (`#b1b4b6`) from the Design System. Dark was too dark and mid was too light. It also adds a line of JS to let us easily switch the header to blue by clicking on it, which is useful for taking screenshots etc.
2020-09-23 10:16:38 +01:00
$(() => $('.govuk-header__container').on('click', function() {
$(this).css('border-color', '#005ea5');
}));
Reference in New Issue Copy Permalink