darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2025-12-09 06:33:52 -05:00
Code Issues Packages Projects Releases Wiki Activity
Files
c7f3b688cd633bbfec2849791d2dedbd1416c678
notifications-admin/gulpfile.babel.js

183 lines
5.3 KiB
JavaScript
Raw Normal View History

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
// GULPFILE
// - - - - - - - - - - - - - - -
// This file processes all of the assets in the "src" folder
// and outputs the finished files in the "dist" folder.
// 1. LIBRARIES
// - - - - - - - - - - - - - - -
replace require with es6 import statment
2016-07-19 15:13:23 +01:00
import gulp from 'gulp';
import loadPlugins from 'gulp-load-plugins';
import stylish from 'jshint-stylish';
Ensure Gulp tasks run sequentially So that images are always copied into place before trying to build the SASS.
2019-02-06 16:09:39 +00:00
import runSequence from 'run-sequence';
replace require with es6 import statment
2016-07-19 15:13:23 +01:00
const plugins = loadPlugins(),
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
// 2. CONFIGURATION
// - - - - - - - - - - - - - - -
paths = {
src: 'app/assets/',
dist: 'app/static/',
Install GOV.UK Elements + Frontend Toolkit w/ NPM Because: - GOV.UK elements is now published with a package.json that only install the SASS files (https://github.com/alphagov/govuk_elements/pull/156) - We can drop Git submodules, so one less dependency management tool This commit also changes the `gulpfile.js` and `main.scss` files to use the assets from `node_modules` rather than the Git submodules.
2016-01-14 15:53:19 +00:00
templates: 'app/templates/',
Compress GOV.UK Template assets While looking at front end performance I noticed that the GOV.UK Template CSS and Javascript files weren’t being minified, so were being served with (for example) lots of comments still in the code. This changes the Gulp task from simply copying the files to also minfiying them, where appropriate.
2016-02-20 14:48:23 +00:00
npm: 'node_modules/',
template: 'node_modules/govuk_template_jinja/',
toolkit: 'node_modules/govuk_frontend_toolkit/'
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
};
// 3. TASKS
// - - - - - - - - - - - - - - -
// Move GOV.UK template resources
Compress GOV.UK Template assets While looking at front end performance I noticed that the GOV.UK Template CSS and Javascript files weren’t being minified, so were being served with (for example) lots of comments still in the code. This changes the Gulp task from simply copying the files to also minfiying them, where appropriate.
2016-02-20 14:48:23 +00:00
gulp.task('copy:govuk_template:template', () => gulp.src(paths.template + 'views/layouts/govuk_template.html')
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
.pipe(gulp.dest(paths.templates))
);
Compress GOV.UK Template assets While looking at front end performance I noticed that the GOV.UK Template CSS and Javascript files weren’t being minified, so were being served with (for example) lots of comments still in the code. This changes the Gulp task from simply copying the files to also minfiying them, where appropriate.
2016-02-20 14:48:23 +00:00
gulp.task('copy:govuk_template:css', () => gulp.src(paths.template + 'assets/stylesheets/**/*.css')
Make external link icons appear
2016-03-23 10:41:37 +00:00
.pipe(plugins.sass({
outputStyle: 'compressed'
}))
.on('error', plugins.sass.logError)
Fix GOV.UK template images
2016-02-23 10:56:48 +00:00
.pipe(plugins.cssUrlAdjuster({
Use NOTIFY_ENVIRONMENT to test if running locally This matches what we tell people, in the README, to put in their local environment.sh It doesn’t matter what Jenkins sets this to, as long as it’s not `'development'`. We think Jenkins isn’t setting it at all (in which case the value will be `undefined`)
2018-11-29 12:18:00 +00:00
prependRelative: process.env.NOTIFY_ENVIRONMENT == 'development' ? '/static/' : '/',
Fix GOV.UK template images
2016-02-23 10:56:48 +00:00
}))
Compress GOV.UK Template assets While looking at front end performance I noticed that the GOV.UK Template CSS and Javascript files weren’t being minified, so were being served with (for example) lots of comments still in the code. This changes the Gulp task from simply copying the files to also minfiying them, where appropriate.
2016-02-20 14:48:23 +00:00
.pipe(gulp.dest(paths.dist + 'stylesheets/'))
);
gulp.task('copy:govuk_template:js', () => gulp.src(paths.template + 'assets/javascripts/**/*.js')
.pipe(plugins.uglify())
.pipe(gulp.dest(paths.dist + 'javascripts/'))
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
);
Fix GOV.UK template images
2016-02-23 10:56:48 +00:00
gulp.task('copy:govuk_template:images', () => gulp.src(paths.template + 'assets/stylesheets/images/**/*')
.pipe(gulp.dest(paths.dist + 'images/'))
);
Upgrade GOV.UK template to newest version Changes: https://github.com/alphagov/govuk_template/compare/v0.23.0...v0.24.0 Includes a new way of serving the font files which will: - save us ~300kb on non-cachd requests - speed up the parsing of the CSS file
2018-04-27 14:12:02 +01:00
gulp.task('copy:govuk_template:fonts', () => gulp.src(paths.template + 'assets/stylesheets/fonts/**/*')
.pipe(gulp.dest(paths.dist + 'fonts/'))
);
Fix flakiness with Gulp + Travis Gulp was failing silently on Travis. I tracked this down to the task that builds a custom, slimmed-down version of jQuery from source. To fix this I’ve removed the task and replaced it with just `src`ing the minified version of jQuery from `node_modules`. Cons: - A few more kb of JS Pros: - Less random, afternoon-chewing complexity
2016-01-12 13:37:50 +00:00
gulp.task('javascripts', () => gulp
.src([
Compress GOV.UK Template assets While looking at front end performance I noticed that the GOV.UK Template CSS and Javascript files weren’t being minified, so were being served with (for example) lots of comments still in the code. This changes the Gulp task from simply copying the files to also minfiying them, where appropriate.
2016-02-20 14:48:23 +00:00
paths.toolkit + 'javascripts/govuk/modules.js',
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
paths.toolkit + 'javascripts/govuk/show-hide-content.js',
Rename script to reflect what it now does
2018-11-08 12:20:57 +00:00
paths.src + 'javascripts/stick-to-window-when-scrolling.js',
Add polyfill for HTML5 `<details>` element The details element is fairly new. It doesn’t work in all browsers, and isn’t keyboard/screenreader accessible even in some new browsers. This commit adds the Polyfill script from GOV.UK elements[1] which polyfills these features for browsers that don’t support them. 1. http://govuk-elements.herokuapp.com/typography/#typography-hidden-text
2016-05-17 14:46:34 +01:00
paths.src + 'javascripts/detailsPolyfill.js',
Add API key component This commit adds a component for showing an API key. Usage: ```jinja {{ from 'components/api-key.html' import api_key }} {{ api_key('e1b0751388f3cd0fc9982c701acdb3c2') }} ``` Depending on the user’s browser, it works in three different ways. No Javascript --- The API key is shown on the page. Older browsers with Javascript --- The API key is hidden, and users can click a button to reveal it. Newer browsers that support copying to clipboard without Flash --- As above, but when the key is shown there is a button which copies it to the clipboard. This is acheived by using [this polyfill](https://www.npmjs.com/package/query-command-supported) to reliably detect browser support for the ‘copy’ command. The styling of the component is a bit different to the initial sketch. I think a grey button works better than green. Green feels like it’s going to take you somewhere else.
2016-01-15 10:50:10 +00:00
paths.src + 'javascripts/apiKey.js',
Make autofocus textbox module This commit adds a very small Javascript module to autofocus a textbox on page load. It should only be used once per page. It also adds a parameter to the textbox macro which adds the attribute to trigger autofocus.
2016-02-02 16:16:29 +00:00
paths.src + 'javascripts/autofocus.js',
Add API key component This commit adds a component for showing an API key. Usage: ```jinja {{ from 'components/api-key.html' import api_key }} {{ api_key('e1b0751388f3cd0fc9982c701acdb3c2') }} ``` Depending on the user’s browser, it works in three different ways. No Javascript --- The API key is shown on the page. Older browsers with Javascript --- The API key is hidden, and users can click a button to reveal it. Newer browsers that support copying to clipboard without Flash --- As above, but when the key is shown there is a button which copies it to the clipboard. This is acheived by using [this polyfill](https://www.npmjs.com/package/query-command-supported) to reliably detect browser support for the ‘copy’ command. The styling of the component is a bit different to the initial sketch. I think a grey button works better than green. Green feels like it’s going to take you somewhere else.
2016-01-15 10:50:10 +00:00
paths.src + 'javascripts/highlightTags.js',
Add custom file upload component The default browser file upload control is difficult to style, but looks totally out of place. This commit replaces it with one that has a GOV.UK style button, as a first step. Based heavily on this example: http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/
2016-02-02 17:28:30 +00:00
paths.src + 'javascripts/fileUpload.js',
Truncate previews of email messages to ~3 lines Emails can get very long. When you’re trying to do other things on the page this results in a lot of scrolling. This commit truncates email messages to about 3 lines, and adds a JS toggle which reveal the full contents of the email.
2016-04-11 15:16:41 +01:00
paths.src + 'javascripts/expandCollapse.js',
Add a component for picking the time to send a job Users need to pick a time in the next 24hrs, or send a file immediately. Rationale for this is a bit lost in time-before-holiday, but generally: ‘Now’ and ‘later’ as the inital choices makes it really clear what this feature is about conceptually. The choice of times is absolute, eg ‘1pm’ not ‘in 3 hours’
2016-08-07 09:17:49 +01:00
paths.src + 'javascripts/radioSelect.js',
paths.src + 'javascripts/updateContent.js',
Add a page to manage a service’s whitelist Services who are in alpha or building prototypes need a way of sending to any email address or phone number without having to sign the MOU. This commit adds a page where they can whitelist up to 5 email addresses and 5 phone numbers. It uses the ‘list entry’ UI pattern from the Digital Marketplace frontend toolkit [1] [2] [3]. I had to do some modification: - of the Javascript, to make it work with the GOV.UK Module pattern - of the template to make it work with WTForms - of the content security policy, because the list entry pattern uses Hogan[1], which needs to use `eval()` (this should be fine if we’re only allowing it for scripts that we serve) - of our SASS lint config, to allow browser-targeting mixins to come after normal rules (so that they can override them) This commit also adds a new form class to validate and populate the two whitelists. The validation is fairly rudimentary at the moment, and doesn’t highlight which item in the list has the error, but it’s probably good enough. The list can only be updated all-at-once, this is how it’s possible to remove items from the list without having to make multiple `POST` requests. 1. https://github.com/alphagov/digitalmarketplace-frontend-toolkit/blob/434ad307913651ecb041ab94bdee748ebe066d1a/toolkit/templates/forms/list-entry.html 2. https://github.com/alphagov/digitalmarketplace-frontend-toolkit/blob/434ad307913651ecb041ab94bdee748ebe066d1a/toolkit/scss/forms/_list-entry.scss 3. https://github.com/alphagov/digitalmarketplace-frontend-toolkit/blob/434ad307913651ecb041ab94bdee748ebe066d1a/toolkit/javascripts/list-entry.js 4. http://twitter.github.io/hogan.js/
2016-09-20 12:30:00 +01:00
paths.src + 'javascripts/listEntry.js',
Add find-as-you-type on the choose template page Not everyone knows how to use `ctrl` + `f`, and it’s not scoped to just the list of templates. The template you want to work with is often not the first one in the list, but ordering by created at is useful for other reasons (mainly around first time use). This commit adds a find as you type control which aims to give users a quick way of getting to the template they want to work with.
2017-03-14 10:46:38 +00:00
paths.src + 'javascripts/liveSearch.js',
Revert "Track event when someone previews basic view" This reverts commit 77d96032bf66ecd26f2af3f797874b0efd588688.
2018-08-08 08:49:16 +01:00
paths.src + 'javascripts/errorTracking.js',
Prevent doubling clicking form submissions Have seen users complaining that they got an invitation email twice. This is probably because they clicked the button twice even though they think they only clicked it once. Double form submission is a common issue on web pages, and there are a number of different ways to prevent it. I’ve chosen to do it this way because: - temporarily, not permanently disabling the button means that this addresses the double clicking issue without breaking things if the user did, really want to click the button again deliberately (for whatever reason) - doing it with a `data` attribute, rather than the `disabled` attribute means that the interaction behaviour of the button doesn’t change ( `disabled` buttons can’t be focused, for example)
2017-09-15 14:10:21 +01:00
paths.src + 'javascripts/preventDuplicateFormSubmissions.js',
Go fullscreen for row-level errors in spreadsheets Two bits of context: 1. As we start dealing with letters, which have more columns, it’s more likely that people’s spreadsheets won’t fit in our current layout. 2. We already removed the view of the template from the page that shows row-level errors (eg bad phone number or missing personalisation) in spreadsheets because you don’t need to know about the content of the message in order to fix the errors. This commit goes further by removing anything that isn’t to do with the errors, including the normal GOV.UK header and the service’s navigation. This means the content can go the width of the page, which means it can be allowed to scroll horizontally without being a usability car crash. Which means that the layout doesn’t break with a spreadsheet that has lots of columns.
2017-10-29 22:18:46 +00:00
paths.src + 'javascripts/fullscreenTable.js',
Change preview pane JS to preview letters as well as emails
2019-02-14 14:06:31 +00:00
paths.src + 'javascripts/previewPane.js',
Refactor hex colour preview Javascript This commit improves the code that previews a hex colour when setting up or changing an email branding. Specifically it: - refactors the Javascript to conform to our patterns (module pattern, preprocessed with Gulp) - makes the code work when there are multiple colour previews on one page It also does some visual prettifying, because I couldn’t help myself…
2018-08-20 13:27:50 +01:00
paths.src + 'javascripts/colourPreview.js',
start js for template folder form have a bunch of separate elements within the sticky_template_forms div that we hide or show based on button presses and such. This commit just sets up the class - it doesn't actually deal with button presses or checkboxes etc yet.
2018-11-28 17:40:54 +00:00
paths.src + 'javascripts/templateFolderForm.js',
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
paths.src + 'javascripts/main.js'
])
Don’t halt Gulp watch on JS/SASS errors Problem --- You make a minor typo, save the file and your Gulp process dies without you realising. You then spend 5 minutes trying to work out why your changes aren’t appearing, no matter what edits you make. Solution --- Catch errors raised in processing the JS/SASS files and log them, without killing the process. How --- Use a handy plugin called [Gulp PrettyError](https://www.npmjs.com/package/gulp-prettyerror).
2017-03-13 13:17:20 +00:00
.pipe(plugins.prettyerror())
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
.pipe(plugins.babel({
presets: ['es2015']
}))
Add API key component This commit adds a component for showing an API key. Usage: ```jinja {{ from 'components/api-key.html' import api_key }} {{ api_key('e1b0751388f3cd0fc9982c701acdb3c2') }} ``` Depending on the user’s browser, it works in three different ways. No Javascript --- The API key is shown on the page. Older browsers with Javascript --- The API key is hidden, and users can click a button to reveal it. Newer browsers that support copying to clipboard without Flash --- As above, but when the key is shown there is a button which copies it to the clipboard. This is acheived by using [this polyfill](https://www.npmjs.com/package/query-command-supported) to reliably detect browser support for the ‘copy’ command. The styling of the component is a bit different to the initial sketch. I think a grey button works better than green. Green feels like it’s going to take you somewhere else.
2016-01-15 10:50:10 +00:00
.pipe(plugins.addSrc.prepend([
Add a page to manage a service’s whitelist Services who are in alpha or building prototypes need a way of sending to any email address or phone number without having to sign the MOU. This commit adds a page where they can whitelist up to 5 email addresses and 5 phone numbers. It uses the ‘list entry’ UI pattern from the Digital Marketplace frontend toolkit [1] [2] [3]. I had to do some modification: - of the Javascript, to make it work with the GOV.UK Module pattern - of the template to make it work with WTForms - of the content security policy, because the list entry pattern uses Hogan[1], which needs to use `eval()` (this should be fine if we’re only allowing it for scripts that we serve) - of our SASS lint config, to allow browser-targeting mixins to come after normal rules (so that they can override them) This commit also adds a new form class to validate and populate the two whitelists. The validation is fairly rudimentary at the moment, and doesn’t highlight which item in the list has the error, but it’s probably good enough. The list can only be updated all-at-once, this is how it’s possible to remove items from the list without having to make multiple `POST` requests. 1. https://github.com/alphagov/digitalmarketplace-frontend-toolkit/blob/434ad307913651ecb041ab94bdee748ebe066d1a/toolkit/templates/forms/list-entry.html 2. https://github.com/alphagov/digitalmarketplace-frontend-toolkit/blob/434ad307913651ecb041ab94bdee748ebe066d1a/toolkit/scss/forms/_list-entry.scss 3. https://github.com/alphagov/digitalmarketplace-frontend-toolkit/blob/434ad307913651ecb041ab94bdee748ebe066d1a/toolkit/javascripts/list-entry.js 4. http://twitter.github.io/hogan.js/
2016-09-20 12:30:00 +01:00
paths.npm + 'hogan.js/dist/hogan-3.0.2.js',
Add API key component This commit adds a component for showing an API key. Usage: ```jinja {{ from 'components/api-key.html' import api_key }} {{ api_key('e1b0751388f3cd0fc9982c701acdb3c2') }} ``` Depending on the user’s browser, it works in three different ways. No Javascript --- The API key is shown on the page. Older browsers with Javascript --- The API key is hidden, and users can click a button to reveal it. Newer browsers that support copying to clipboard without Flash --- As above, but when the key is shown there is a button which copies it to the clipboard. This is acheived by using [this polyfill](https://www.npmjs.com/package/query-command-supported) to reliably detect browser support for the ‘copy’ command. The styling of the component is a bit different to the initial sketch. I think a grey button works better than green. Green feels like it’s going to take you somewhere else.
2016-01-15 10:50:10 +00:00
paths.npm + 'jquery/dist/jquery.min.js',
Patch update sections of the page on AJAX Currently, when we update a section of the page with AJAX we replace the entire HTML of the section with the new HTML. This causes problems: - if you’re trying to interact with that section of the page, eg by inpecting it, clicking or hovering an element - (probably) for screenreaders trying to navigate a page which is changing more than is necessary This commit replaces the call to `.html()` with a pretty clever library called diffDOM[1]. DiffDOM works by taking a diff of the old element and the new element, then doing a patch update, ie only modifying the parts that have changed. This is similar in concept to React’s virtual DOM, while still allowing us to render all markup from one set of templates on the server-side. 1. https://github.com/fiduswriter/diffDOM
2016-04-27 09:28:42 +01:00
paths.npm + 'query-command-supported/dist/queryCommandSupported.min.js',
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
paths.npm + 'diff-dom/diffDOM.js',
Add library for tracking carets in textareas
2019-03-21 16:51:27 +00:00
paths.npm + 'timeago/jquery.timeago.js',
paths.npm + 'textarea-caret/index.js'
Add API key component This commit adds a component for showing an API key. Usage: ```jinja {{ from 'components/api-key.html' import api_key }} {{ api_key('e1b0751388f3cd0fc9982c701acdb3c2') }} ``` Depending on the user’s browser, it works in three different ways. No Javascript --- The API key is shown on the page. Older browsers with Javascript --- The API key is hidden, and users can click a button to reveal it. Newer browsers that support copying to clipboard without Flash --- As above, but when the key is shown there is a button which copies it to the clipboard. This is acheived by using [this polyfill](https://www.npmjs.com/package/query-command-supported) to reliably detect browser support for the ‘copy’ command. The styling of the component is a bit different to the initial sketch. I think a grey button works better than green. Green feels like it’s going to take you somewhere else.
2016-01-15 10:50:10 +00:00
]))
Ensure all Javascript is served compressed Previously we were running the minification before adding dependencies. This meant that dependencies that don’t come with a minified version were being served in full. Running Uglify over everything _after_ including the dependencies reduces the weight of the downloaded Javascript by about 50kb.
2016-10-08 13:31:19 +01:00
.pipe(plugins.uglify())
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
.pipe(plugins.concat('all.js'))
.pipe(gulp.dest(paths.dist + 'javascripts/'))
);
Fix flakiness with Gulp + Travis Gulp was failing silently on Travis. I tracked this down to the task that builds a custom, slimmed-down version of jQuery from source. To fix this I’ve removed the task and replaced it with just `src`ing the minified version of jQuery from `node_modules`. Cons: - A few more kb of JS Pros: - Less random, afternoon-chewing complexity
2016-01-12 13:37:50 +00:00
gulp.task('sass', () => gulp
.src(paths.src + '/stylesheets/main*.scss')
Don’t halt Gulp watch on JS/SASS errors Problem --- You make a minor typo, save the file and your Gulp process dies without you realising. You then spend 5 minutes trying to work out why your changes aren’t appearing, no matter what edits you make. Solution --- Catch errors raised in processing the JS/SASS files and log them, without killing the process. How --- Use a handy plugin called [Gulp PrettyError](https://www.npmjs.com/package/gulp-prettyerror).
2017-03-13 13:17:20 +00:00
.pipe(plugins.prettyerror())
Install GOV.UK Elements + Frontend Toolkit w/ NPM Because: - GOV.UK elements is now published with a package.json that only install the SASS files (https://github.com/alphagov/govuk_elements/pull/156) - We can drop Git submodules, so one less dependency management tool This commit also changes the `gulpfile.js` and `main.scss` files to use the assets from `node_modules` rather than the Git submodules.
2016-01-14 15:53:19 +00:00
.pipe(plugins.sass({
outputStyle: 'compressed',
includePaths: [
paths.npm + 'govuk-elements-sass/public/sass/',
Compress GOV.UK Template assets While looking at front end performance I noticed that the GOV.UK Template CSS and Javascript files weren’t being minified, so were being served with (for example) lots of comments still in the code. This changes the Gulp task from simply copying the files to also minfiying them, where appropriate.
2016-02-20 14:48:23 +00:00
paths.toolkit + 'stylesheets/'
Install GOV.UK Elements + Frontend Toolkit w/ NPM Because: - GOV.UK elements is now published with a package.json that only install the SASS files (https://github.com/alphagov/govuk_elements/pull/156) - We can drop Git submodules, so one less dependency management tool This commit also changes the `gulpfile.js` and `main.scss` files to use the assets from `node_modules` rather than the Git submodules.
2016-01-14 15:53:19 +00:00
]
}))
Compress GOV.UK Template assets While looking at front end performance I noticed that the GOV.UK Template CSS and Javascript files weren’t being minified, so were being served with (for example) lots of comments still in the code. This changes the Gulp task from simply copying the files to also minfiying them, where appropriate.
2016-02-20 14:48:23 +00:00
.pipe(plugins.base64({baseDir: 'app'}))
.pipe(gulp.dest(paths.dist + 'stylesheets/'))
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
);
// Copy images
Fix flakiness with Gulp + Travis Gulp was failing silently on Travis. I tracked this down to the task that builds a custom, slimmed-down version of jQuery from source. To fix this I’ve removed the task and replaced it with just `src`ing the minified version of jQuery from `node_modules`. Cons: - A few more kb of JS Pros: - Less random, afternoon-chewing complexity
2016-01-12 13:37:50 +00:00
gulp.task('images', () => gulp
Install GOV.UK Elements + Frontend Toolkit w/ NPM Because: - GOV.UK elements is now published with a package.json that only install the SASS files (https://github.com/alphagov/govuk_elements/pull/156) - We can drop Git submodules, so one less dependency management tool This commit also changes the `gulpfile.js` and `main.scss` files to use the assets from `node_modules` rather than the Git submodules.
2016-01-14 15:53:19 +00:00
.src([
paths.src + 'images/**/*',
Compress GOV.UK Template assets While looking at front end performance I noticed that the GOV.UK Template CSS and Javascript files weren’t being minified, so were being served with (for example) lots of comments still in the code. This changes the Gulp task from simply copying the files to also minfiying them, where appropriate.
2016-02-20 14:48:23 +00:00
paths.toolkit + 'images/**/*',
paths.template + 'assets/images/**/*'
Install GOV.UK Elements + Frontend Toolkit w/ NPM Because: - GOV.UK elements is now published with a package.json that only install the SASS files (https://github.com/alphagov/govuk_elements/pull/156) - We can drop Git submodules, so one less dependency management tool This commit also changes the `gulpfile.js` and `main.scss` files to use the assets from `node_modules` rather than the Git submodules.
2016-01-14 15:53:19 +00:00
])
Compress GOV.UK Template assets While looking at front end performance I noticed that the GOV.UK Template CSS and Javascript files weren’t being minified, so were being served with (for example) lots of comments still in the code. This changes the Gulp task from simply copying the files to also minfiying them, where appropriate.
2016-02-20 14:48:23 +00:00
.pipe(gulp.dest(paths.dist + 'images/'))
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
);
Add custom static error pages for 413 and some 5xx errors
2016-09-12 16:11:34 +01:00
gulp.task('copy:govuk_template:error_page', () => gulp.src(paths.src + 'error_pages/**/*')
.pipe(gulp.dest(paths.dist + 'error_pages/'))
);
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
// Watch for changes and re-run tasks
gulp.task('watchForChanges', function() {
gulp.watch(paths.src + 'javascripts/**/*', ['javascripts']);
gulp.watch(paths.src + 'stylesheets/**/*', ['sass']);
gulp.watch(paths.src + 'images/**/*', ['images']);
Add pages to invite, edit, and delete users This takes the original prototype version of this page, and, using the same fake data (ie nothing is wired up): - adds an invite users page - adds an edit (and delete) user page Both these pages allow the user to set another user’s permissions. This commit adds images for the ticks and crosses, so we have control over their appearance.
2016-02-19 15:02:13 +00:00
gulp.watch('gulpfile.babel.js', ['default']);
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
});
Add linting for SASS and Javascript Similar to how PEP8 enforces Python style, there are tools for front end code: - jshint[1] for Javascript - sass-lint[2] for SASS This commit adds the Gulp plugins for both, and sets up some sensible rules (which can be iterated on). It also adds a command to `./scripts/run_tests.sh`, so that any errors in the front end code will fail the build before it has a chance to be deployed. 1. http://jshint.com/ 2. https://www.npmjs.com/package/sass-lint
2016-02-08 11:05:07 +00:00
gulp.task('lint:sass', () => gulp
Don’t lint SCSS files that have come from outside We should (and do) keep exact copies of SCSS files that have come from elsewhere so that we can easily upgrade them. But sometimes they don’t always pass our linting rules, or throw a lot of warnings, which is noisy. This commit: - moves such files into their own subdirectory - tells SCSS Lint to ignore files in this directory
2016-04-13 12:50:13 +01:00
.src([
paths.src + 'stylesheets/*.scss',
paths.src + 'stylesheets/components/*.scss',
paths.src + 'stylesheets/views/*.scss',
])
Bring back SASS lint The problem with SASS lint that we found in https://github.com/alphagov/notifications-admin/pull/202 has been fixed (see https://github.com/sasstools/sass-lint/pull/550). This commit reverts #202, re-enabling linting of SASS files.
2016-02-26 13:19:46 +00:00
.pipe(plugins.sassLint())
.pipe(plugins.sassLint.format(stylish))
.pipe(plugins.sassLint.failOnError())
Add linting for SASS and Javascript Similar to how PEP8 enforces Python style, there are tools for front end code: - jshint[1] for Javascript - sass-lint[2] for SASS This commit adds the Gulp plugins for both, and sets up some sensible rules (which can be iterated on). It also adds a command to `./scripts/run_tests.sh`, so that any errors in the front end code will fail the build before it has a chance to be deployed. 1. http://jshint.com/ 2. https://www.npmjs.com/package/sass-lint
2016-02-08 11:05:07 +00:00
);
gulp.task('lint:js', () => gulp
.src(paths.src + 'javascripts/**/*.js')
Move jshint configuration to .jshintrc When provided with inline configuration in a gulp task jshint will still try to load a configuration file from the current directory or the user's home directory. If user has a global .jshintrc file that sets different linting options this could lead to `npm test` output being different from the CI one. jshint only uses the first file it finds, and .jshintrc in current directory or any parent of the current directory takes precedence over the user one, so moving jshint configuration from gulpfile to .jshintrc should make `npm test` produce the same outcome regardless of the user config.
2017-11-06 17:37:15 +00:00
.pipe(plugins.jshint())
Add linting for SASS and Javascript Similar to how PEP8 enforces Python style, there are tools for front end code: - jshint[1] for Javascript - sass-lint[2] for SASS This commit adds the Gulp plugins for both, and sets up some sensible rules (which can be iterated on). It also adds a command to `./scripts/run_tests.sh`, so that any errors in the front end code will fail the build before it has a chance to be deployed. 1. http://jshint.com/ 2. https://www.npmjs.com/package/sass-lint
2016-02-08 11:05:07 +00:00
.pipe(plugins.jshint.reporter(stylish))
.pipe(plugins.jshint.reporter('fail'))
);
gulp.task('lint',
['lint:sass', 'lint:js']
);
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
// Default: compile everything
Ensure Gulp tasks run sequentially So that images are always copied into place before trying to build the SASS.
2019-02-06 16:09:39 +00:00
gulp.task('default', function() {
runSequence(
[
'copy:govuk_template:template',
'copy:govuk_template:images',
'copy:govuk_template:fonts',
'copy:govuk_template:css',
'copy:govuk_template:js',
'images',
],
[
'copy:govuk_template:error_page',
'javascripts',
'sass'
]
);
});
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
// Optional: recompile on changes
gulp.task('watch',
['default', 'watchForChanges']
);
Reference in New Issue Copy Permalink